New article - 'Front end development at the FT'

The core of my skillset is front end and I’ve added over 3 years’ solid experience in Node.js and React. I have a good handle on the array of developments in the Javascript space, plus the experience to know which of them to benefit from. I’m passionate about web performance and know how to measure and achieve it.

I understand every angle of a successful agile team including cross-disciplinary collaboration, user-centred testing and design, lean UX, early & continuous delivery, TDD, test automation and how to funnel business requirements through user stories.

I have skills in:

React / Redux

scalable CSS

Node.js

page load performance

accessibility

Javascript

microservices

progressive enhancement

TDD & automated tests

responsive

CI / CD

agile

mobile

rapid prototyping

React Native

React + Node - the future arrived

I can’t recall getting quite so nerdily excited about a technology stack, as the one I recently picked up at TES.

I've always been for progressive enhancement - cut along the grain of the technology rather than across it - and felt derisive of attempts to do fat client in Javascript (yes you, Angular) as slow, fragile, over-engineered.

I wrestled with Backbone for a few months but it offered little help with the hardest problem - managing frequent, fine-grained UI updates without disrupting the app state more than necessary (although adding Marionette did help).

As I’d discounted client-side rendering I was left to pursue the magic combination of server-side rendering with ajax updates (without writing the same logic for both server and client).

Responding to ajax requests with blocks of markup never felt right, by ham-fistedly replacing a whole region of the page when maybe only a label had changed.

Turns out you *can* have it all...

Isomorphic apps with React and Node seem thus far to give the best of all worlds. A fast, rock-solid, server-rendered page load morphs seamlessly into an app-like interface when it hits the browser.

The biggest challenge was using async API calls to render on the server. A two-pass render using Alt and Alt resolver gave a workable solution - a promise is collected for each API call initiated from the first render, and the second render only begins when all the promises resolve.

An Alt add-on called Iso snapshots the app state into the page so it can be carried down to the browser.

Form submissions and link navigation are made super-responsive with pushstate and the whole headache of accurately syncing the model with the UI is handled for you with only the changed parts updated.

React just feels right. The productivity gains I’ve experienced have been ridiculous compared with previous technology choices.

It took around 12 days to come up with a slick and perfectly shippable faceted search interface from scratch; I know from experience it would have taken far longer to achieve a not-as-good result with my previous first-choice tech combinations such as Rails with a lightweight JS app.

I have very few gripes, although you do seem to be at the mercy of the React testing tools, as it’s the only way to do something as simple as firing a click event in your test.

The official steer is toward testing setups that don’t appeal too much - a framework called Jest that uses JSDom, or no DOM at all with 'shallow rendering'. I’d rather test against a fully rendered component in a real browser using Karma.

But overall I’m just happy and grateful to have come across what feels like a winning combination. Web development feels turbo-charged.

jonnywyatt (at) yahoo.co.uk