New Feature Friday: Updated UI Framework

updated-UI-header

Every day, marketers log in to the Kahuna web app to craft personalized messaging that drives excitement, engagement, and advocacy. We’re always looking for ways to increase our speed of innovation and support our customers’ needs.

We wanted to share a recent step we took on this front. The Kahuna app was originally built using backbone.js, which is a JavaScript framework based on model-view-presenter (MVP) application design.

Over a year ago, we put our plans into motion to move from Backbone to React. There were many reasons to move to a new, modern UI framework. Most importantly, it enables us to structure our app as independent, composable, and testable components. As a result, the team builds UI faster and with more confidence. It also helps us recruit new developers who expect to use the most current tools.

We decided to share a bit about the technology underlying the latest build of the Kahuna app because we’re excited about the possibilities it brings with it. We want to push web technology forward while providing the tools to empower the modern marketer to be more strategic.

The transition to React gives us  the opportunity to develop more advanced features with stable integration and system-wide consistency. As a marketer using the platform after today, you’ll experience a snappier UI that will make the campaign creation process even faster.

We started from the bottom…

Making the decision to switch to React was not something we considered lightly, and it has required a significant amount of development work to keep everything in sync as features were developed and merged into the old Backbone.js-based app. Our strategy was twofold for making the change responsibly:

  1. Build new features in React, CoffeeScript, and SASS
  2. Re-implement existing features in React piece by piece

We managed this transition by building a wrapper that embeds our new React components into our existing app. This allowed us to immediately and progressively write and ship new React components.

…and now we’re here.

One year later, we have implemented almost 100 new components that are sitting inside this container. Today is the day that we invert the containers. With this change, our app is now implemented in React from top to bottom. We now use React Router, a complete routing solution completely written in React. This means that a) all our React components are now first-class components in the app, and b) our legacy Backbone components are now embedded inside a wrapper. This is a major milestone in our journey to Reactify our app.

A note about icons

We also took this opportunity to create a new way to organize our icons. We decided to move away from icon fonts and toward scalable vector graphics (SVGs). We used Fontastic to roll our SVGs into an icon font and we have generally been very happy, but there are some issues with treating icons as letters in a font (nothing personal, Fontastic!). These problems mean that:

  1. Vertical alignment across browsers is not reliable
  2. Using multiple fill and/or stroke values is not possible

These issues do not apply when using pure SVGs. As part of the philosophical transition to a fully React app, we now store SVGs as JSX in a single React component, which can be accessed by other React components. Organizing SVGs in React is natural:

React.createClass
       render: ->
 switch @props.name
 when 'loeo'
 <svg ... ></svg>
 when 'soccer-ball'
 <svg ... ></svg>
 when 'home'
 <svg ... ></svg>

Having this index of SVGs as JSX gives us the greatest flexibility to manipulate them within the app. For example, we might decide to dynamically draw an icon (for example, a loading indicator) using the stroke-length manipulation technique showcased to great effect on the Polygon PS4 review. Without direct access to the SVG content, such techniques would not be possible.

Our architecture just leveled up. Cheers to the best Kahuna ever!