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.
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.
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)…
The key feature of React is it’s component-based structure, more on that to follow.
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.
There are lots of variants on the theme of Hybrid app development. This is a good resource for an overview of options
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…
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.
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.
Pre-bundled components and themes that can be easily customised. Potentially delivered via a Mac Menu Bar app, with some swishy drag-drop action…
This is where the magic happens, turning the exported Sketch->React config and building the application code. This will likel
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…