ES6 + react + flow: achievement unlocked

This weekend I refactored a couple pieces of my react web app.  I kept whacking at the code until the flow type checker stopped erroring.  And after that, … my app still worked!  Achievement unlocked.  This is a major improvement over the dark-ages web-app workflow that went something like, edit; refresh; see what broke; repeat.  (Of course, not to poke the embers of that religious war, but fanciers of statically-typed languages, like myself, will be saying “well, finally”.)

In the react + flow development workflow though, type errors don’t block the app from updating on changes.  So I can quickly hack up something half-broken to try out an idea, and then if it works go back and fix up the code to be less broken.  (Gradual/optional typing enthusiasts won’t be surprised at this either.)  But of course, type errors do block deployment in my setup.

And I’ve been finding ES6 to be a pretty nice language to work with; a big advance over vanilla JavaScript / ES5, which is not my cup of tea.  Lots has been written on this topic, and I won’t go down that rabbit hole here.

Then finally, enabling all these goodies nowadays is as simple as

npm install -g create-react-app
create-react-app foo

Previously, you had to be something of a node.js pseudo-build-system ninja to set up this kind of environment, although it was possible.

In all probability, this environment won’t graduate beyond the prototype I’m hacking up right now (more on this later), but current mood:

giphy

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s