Some notes on catching up with front-end development in 2019

Over the last four years I've found myself almost entirely focused on the back-end, infrastructure, and team operations. While in that time I was fortunate enough to see a few React applications into production, I feel like I've turned a bit of a blind eye toward the cool stuff that's coming out.

The tooling and thought leadership in front-end / JS-based communities out there are incredibly rich and deep. Some topics that I've been really interested in lately are:

  • Design systems
  • React frameworks and paradigms
  • Headless API and CMS tooling

Let's take a quick look at each.

Design Systems

In the past I would think in terms of UI toolkits, component frameworks, and templates. At the surface, these are all valid examples of design systems. The recent pack of incredibly collaborative tooling like Figma, Invision, Avocode, etc has put a lot more power in the hands of designers and developers alike. Through this, the level of sophistication around how we speak and approach design has skyrocketed.

A modern design system is feasible at any scale, from start-ups to enterprise. Design debt is a relatively new phrase but it makes so much sense as we have all seen silo'd teams carve out their own vision of what different slices of a digital product looks like.

Bridging the gap between design and development.

There's a lot going on in this particular interaction between teams. One tool that I've found recently is Storybook. It's a game changer for me in understanding how to decompose UI components into a format that can be translated completely across design and development. Coupled with the re-usability of component-based frameworks like React/Vue, having a living story board that produces live code is a game changer.

Mock ups and workflows

After installing and trying out Figma recently I'm totally bought into its ease of use and workflow. It takes the best of both worlds when it comes to the type of storyboarding you might be comfortable with in Sketch and the code output you find in something like Avocode.

Additionally, there's a cool tool called Pagedraw which lets you translate your design elements directly to React components. This is still new to me, so I don't have any comments yet on the feasibility, but imagining a world where a workflow might exist like:

  • Figma is used to build a design system and page mockups.
  • Pagedraw will convert Figma boards to React components.
  • Developers can write Storybook stories for said components and their variations.

Useful links:

React frameworks and paradigms

Up until a year ago my experience with React was pretty low key. I had written a few components, wired up some state management with Redux, and understood everything at a high-level. What I hadn't done is get into the details of what it means to build dumb components and use stateful containers.

What it probably took me too long to realize is that the power of these view components isn't just the speed at which you can build but the portability you obtain when applying the right paradigms.

State management

Redux is still pretty popular but to me still feels like overkill for some projects. The upcoming context and hooks changes are interesting at a glance, but I'm definitely a fan of leaning on managing state elsewhere (e.g web services).

One of the great aspects of React and other view components is that state management is front and center. Just the simple act of keeping it top of mind will help us all build better applications that are a joy to work with.

Frameworks

tldr; GatsbyJS and NextJS are really cool.

Before recently I hadn't really dived into what they can do until recently but they solves a huge problem that we face when building anything consumer facing. Rendering out an application on a server has always been the best approach toward a well performing site, hence the popularity of Ruby and PHP frameworks in the 2000's and early 2010's. Leveraging NodeJS and using SSR (server sided rendering) has been around but hasn't been incredibly appealing to me until trying it out through these frameworks.

I think the way Gatsby approaches rendering by pulling data at build-time is an incredibly simple but powerful solution for small to medium sized content sites that don't change a lot.

NextJS seems to be a lot more flexible for apps with more complicated state as you have access to real-time SSR.

I plan on using both on a few projects in the future to build a better profile on their pros and cons.

e-commerce

Side note, here is an interesting way to approach e-commerce:

https://www.gatsbyjs.org/packages/gatsby-source-shopify/

  • Static generated site for your storefront as Gatsby pulls products from Shopify.
  • Rich content through Gatsby; you could hook it up with Contentful.
  • Different application for your user pages (order history, checkout, etc).

One caveat here is that you need to rebuild and deploy your entire application whenever a product changes. Great for small product offerings but might be a hassle for large ones.

Headless API's and CMS's

These are two things I wish I knew about two years ago:

  • Contentful
  • Strapi

Contentful

Contentful is something I came across recently at a job but didn't truly click until I found it in conjunction with GatsbyJS. This is a really cool way to approach building a content driven website:

https://www.contentful.com/r/knowledgebase/gatsbyjs-and-contentful-in-five-minutes/.

With only a little bit of coding, you have an incredibly powerful system with a fully featured CMS behind it.

Strapi

While at the surface its just another tool to quickly provide a CRUD interface to a database, underneath it has a very opinionated way to rapidly build API's and have them interface with other systems.

I'm building a pet project with Strapi right now and my approach is:

  • Build out the main content models using the GUI.
  • Keep business logic out of the Strapi application.
  • Emit events to a pub/sub message bus to extend past CRUD.

Closing Thoughts

I'm impressed at how far we're taking things in 2019. Building rich applications is becoming more and more enjoyable as we mature our language, tooling, and systems.

Take all of this with a grain of salt. There's a tool and framework for everything and while its great to keep up with the latest, remember that most applications are still built with tried and true methods.