New post - 'An intro to agile for new devs'

The core of my skillset is front end, including expertise in React, page load performance, accessibility and authoring UI component libraries. I also have 8 years’ solid experience of Node.js.

I understand every angle of a successful agile team including user-centred research and design, continuous delivery, TDD, test automation & strategy, pairing and shared ownership of quality and dev-ops.

I have skills in:

React

scalable CSS including CSS-in-JS

Node.js

Javascript

Typescript

page performance

accessibility

micro-services

micro-frontends

progressive enhancement

TDD & unit tests

BDD & end-to-end tests

responsive / mobile web

CI / CD

agile

rapid prototyping

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.

jonnywyatt2 - [@] - gmail.com