Using Sketch as React Config Generator

jamstack

#1

This is an exciting topic as it brings together a number of interesting technologies which we’ve been experimenting with over the past months. I’d like to start this conversation in order to open up to the community about a concept we’ve been evaluating and prototyping. We think it’s super fun, challenging and ultimately, who knows - could be revolutionary.

It started when Sergio and I were discussing the “App Builder” platforms you see popping up all over the place, predominantly for Enterprise applications, whereby business people can create custom business apps using pre-built components, normally with some cloud service and web UI.

We generally agree that we like the idea - providing tools to people to reduce the barriers to creating new, personalised applications that work for individual needs of people and businesses.

But, we couldn’t help but feel that the web UI based builder was far too constrained and gave very limited ability to customise the essence of the application - the experience. Beyond a few global colour pallet changes and uploading a logo, the components were generally otherwise pretty much vanilla flavoured.

We wondered together, that if this part of the process was delegated to the tools in an existing UI / UX designer workflow, could we achieve a richer environment in which people with a lower technical skillset, but ultimately higher focus on the business objectives and experience / service design, could be enabled to create rich personalised applications.

Sergio challenged me to give it some consideration, and not one to back off from a challenge, I did just that.

Core Technologies

For me, a few technologies felt like the right place to start and I’ll briefly introduce them now so you know what I’m on about.

1. Sketch

Sketch, by Bohemian Coding, is a hugely popular design tool for the Mac platform, focussed specifically for UI / UX design. It has been rapidly replacing Photoshop as the goto application for designing web and mobile interfaces. We use Sketch daily at Nuwe.

The good thing here is that Sketch also has an accessible API for creating plugins. We’ll look to leverage that to add the functionality we need (or at least, I think we’ll need)…

Potential Alternatives:

Adobe XD

2. React

React.js is a javascript framework for creating user interfaces. An open source project by Facebook, React itself has become incredibly popular and, not to be mistaken for a complete JS MVC, has spawned numerous other new technologies for the creation of React-based apps.

The key feature of React is it’s component-based structure, more on that to follow.

Potential Alternatives:

Angular.js
Backbone.js
Ember.js

3. React-Native

One of the technologies that has emerged out of core React, is React-Native. React-Native gives us a cross platform library for creating Native mobile applications by writing javascript (well, in reality, with quite a bit of native platform coding still required).

It does allow you to reuse core business logic across platforms, in much the same way as the hybrid HTML5 libraries like Ionic allow, but, compiles out to fully native code rather than a glorified use of webviews.

I’m particularly bullish on the concept of React-Native.

Potential Alternatives:

Cordova

There are lots of variants on the theme of Hybrid app development. This is a good resource for an overview of options

4. Webpack

In the front-end development world, there’s a lot of new technology - every day seems like there’s a new build tool, a new dependency manager, a new js framework, a new design pattern… it’s truly mind boggling. This post is not about those, though we will encounter and make decisions about those as we go…

That was a good way for me to avoid having to explain too much about Webpack. Frankly it’s still a bit baffling to me, but essentially, is a javascript library for “bundling” all of our project modules - basically, javascript files - for rendering on the browser. It can do so much more, but this is the essence.

Potential Alternatives:

Hammer Compiler
Brunch
Gulp

Architecture

As this diagram indicates, my initial thinking was to figure out some basis with which to extract meaningful information from Sketch, in order to compile and deploy a webpage in a seamless and automated fashion, using stuff we already have to hand if possible.

  1. Sketch Plugin
    We’d need to come up with a novel way of using Sketch’s features (firstly, before deciding if we need to extend stuff with plugins), to extract enough information with which to generate React components.

  2. Sketch Templates
    Pre-bundled components and themes that can be easily customised. Potentially delivered via a Mac Menu Bar app, with some swishy drag-drop action…

  3. Build Engine
    This is where the magic happens, turning the exported Sketch->React config and building the application code. This will likel

  4. Deployment and Hosting
    Since our app will be built and compiled to static assets, it makes our own Forge platform ideal for serving our app (CDN’d, optimized etc.). Using the Forge REST API, we can handle the deployment behind the scenes in fully automated fashion.

From here, we’ll dive into the Sketch API, Sketch Plugin, Sketch Templates and figuring out how to structure our Sketch document, groups and layers to use as our config creation syntax…


#2

A Syntax for Sketch Layers

One of the things we needed to tackle was a way to use the existing Sketch features to create and configure our designs, in such a way that we could easily parse them for information and provide that information into our react config.

The first stab at this was basically like running head first into a lamp post. Just make it loud and obvious. That meant caps lock and primitive structure.

V1

Our first use case idea was to do a couple of Authentication views, something we build time and again in our mobile apps.

I had a Login View and a Register View.

Let’s focus on one of these for now, since it doesn’t really matter which, I’ll start with the top, Registration.

Here’s my Group and Layer structure.

IT’S A COMPLETE MESS.

But inadvertently, I’d just intuitively started naming my components like this

NAME_CLASS

I’d started nesting them as I imagined a component would be nested in the React component, though without really thinking deeply about it.

V2

By the second iteration (well, that’s simplifying, there was a lot of buggering around in between), I’d a) changed the use case to a static landing page design, for now at least, leaving more complex back-end services to later.

Now things were starting to get a little interesting.

Firstly, we’d stopped shouting through the caps-locked group naming.

The 2 artboards were both referencing the same design, one was the working document, the other, an early form of documentation which highlighted the various components in the page.

We now had much better definition of our Components, Classes and configurable options per component.

Let’s take the Jumbotron for example

Our group structure looks like this:

JumbotronComponent_MAINJUMBO
    JumbotronItem_1
    JumbotronItem_2
    Background

If you expand the JumbotronItem component, you will find

Text_title
    Welcome to our site
Text_subtitle
    Building functional static sites with sketch

You can see now the consistent use of the format

Class_instance

Our JumbotronComponent accepts any number of child groups of type JumbotronItem. Each JumbotronItem accepts some further basic Text objects, where we define the title and subtitle respectively.

There is also a global Background item in the root of the JumbotronComponent where we can control the background image, colour or gradient.

This is basically the principal of the Sketch syntax so far.

It might help to take another example.

You can see the repeated use of the MyCustom5050Component. This is a simple component wrapper that sets a 100% width container and accepts two child components, each of which will be set to 50% width of the container.

We’ve selected the more complex variant on our design, the child components could be simple text or images, but that’s not much fun.

Instead we have on one side a Contact Form and the other, an embedded Google Map.

The Contact Form is actually a simple instance of a CentredContentComponent. It could contain anything, infact and all it cares about is that the content is aligned in a certain way.

This component has within it

Text_title
TextField_name
TextField_email
TextArea
Button_submit
bg

We now meet some new basic classes of components, TextField, TextArea and Button

Our TextField can contain a couple of further options

LABEL
    name
TEXTFIELD
   shape

Whilst the Label is pretty self explanatory, by passing the TEXTFIELD a rectangle shape, you can define the style of your form fields!

The same applies to the TextArea.

A Button will accept two child text layers and a shape layer as background.

Text_text
    Contact Us
Text_url
  http://mysite.com/submit
shapeLayer

You can see that we can define the border radius of the button, the colour and gradient using just the sketch tools.

The Map Component is quite a custom beast.

MapComponent
    MapMarker
        COORDINATES (hidden)
            52.12345, 39.12345
        LABEL
            My address, some road, some postcode
        SHAPE
           shape1
           shape2
        -mapLayer

How awesome is this!!!

We can set the co-ordinates for our location, defining where the pin will be placed and map focussed.

We can set the address for the description in the map pin popover.

We can even define the shape of the popover!


Still a long way to go, but I think there’s something workable in here… I’d love to hear what you think.


#3

MacOS Menu Bar App Prototype

I was thinking about how you could package up the Sketch themes and more importantly, components that could unpack into a Sketch folder / layer group that represents a perfectly formed App Builder compatible component.

I went straight into hacking up a quick Mac menu bar app.

You would just simply scroll through the components or search until we outgrow this simple interface (maybe need a grid or something). The important interaction, which you can kind of see from the screenshot, is the drag and drop of an asset into Sketch and have Sketch handle the unpacking.

Currently it just works with an image, next will be to play with Sketch project files to see what I can do with that…

:arrow_down: Download the Mac App Demo
:tools: Demo App Project


#4

Give it a try. This demo should hopefully work…

:sparkles: Sketch Plugin Download

:arrow_down: Download the Sketch Landing Page Template

1. Install The Plugin

It should then be visible from the Plugins menu option.

2. Open the Sketch Landing Page Template

3. Edit the Content in the Landing Page artboard

4. Things You Can Edit

  • All text/copy content
  • Background images or can be replaced by colours or gradients
  • Fills & Strokes
  • Shadows
  • Font Styles - size, family, weight etc.
  • Border radius

Specific components have specific editable characteristics, review the sketch layers for the components to work this out.

5. Publish to Forge

At this point I should now be writing how you simply select Shift + Ctrl + 5 or Plugins > Get React Config > Create Config and Send

But on doing so, I’ve found a change in the API has rendered this demo useless

28/07/2016 00:05:01.139 Create config and send (Sketch Plugin)[16348]: Plugin version 0.3.25
28/07/2016 00:05:01.150 Sketch[16348]: Exception: TypeError: layer.style().fills().array is not a function. (In 'layer.style().fills().array()', 'layer.style().fills().array' is undefined)

This Sketch API often has breaking changes like this… grrr. I’ll post an update when it’s fixed and steps 1-4 should remain unchanged (except with updated download sources)


Core - evolution of our infrastructure