At last! The holy grail. Or a close approximation.
A while ago I did an assessment of Dev environments in the cloud
Now I’ve settled on one.
My goal was a genuinely frictionless programming environment. One where everything I do happens instantly—or at least quickly.
I want to make a change and see a result.
Just like that.
I also want a sensible methodology for programming. One that organizes code so that I can create it rapidly, maintain it easily, modify it efficiently, test it thoroughly, and deploy it effortlessly.
I’ve got something that’s a candidate.
My programming environment
I’m using:
- CodeSandbox: Online Code Editor Tailored for Web Application Development
- React – A JavaScript library for building user interfaces
- Overmind - Frictionless state management
- GitHub: git based repositories and more
- Netlify: All-in-one platform for automating modern web projects.
- Firebase real-time database, authentication and more
CodeSandbox
Codesandbox is my development environment. It lets me check stuff out of Github with a Chrome Extension that makes creating a new SandBox a one-click operation.
Once I’ve made my changes, I can commit back to the repository—if it’s mine—or create a new one from the IDE.
CodeSandbox plays nicely with React, Overmind, and Firebase. And with Node Package Manager (NPM), I can grab any library I want with a few keystrokes.
Equally important: if I want to understand how a library works, I can create a SandBox that contains one of the library’s examples. Then I can play with the example it until I’m sure it will do what I want.
When I make a change, CodeSandbox uses Hot Module Reloading (HMR) to only reload what needs to be reloaded. The result is that any change in my code appears in my app more-or-less instantly.
Whatever I commit to Github gets deployed automatically by Netlify.
So my workflow looks like this: checkout, modify, modify, modify, modify, commit, then automatic deploy.
If I want to save an intermediate state, I can fork my SandBox, and if I’m headed in the wrong direction, I can go back to an earlier version.
I can organize SandBoxes in directories, and if I have one that I like, I can turn it into a template.
And CodeSandbox lets me work on the entire app or just one module. Which is kind of awesome.
Building with Overmind
I build an application by creating a data model using Overmind in a SandBox, testing it, then connecting the model to a user interface built with React.
Overmind is my data modeling and state-management tool.
I define a JSON object that represents my application’s state, a set of actions for modifying the state, and a set of effects that interact with the outside world.
Overmind delivers state, actions, and effects anyplace I need it,
I can write scripts invoking actions and effects and verify that the scripted code transforms the state the way I want. I can confirm that by observation (Overmind has a development tool that displays state and a record of actions) or by writing tests that verify.
State contains explicit values and values derived from other parts of the state. Overmind magically updates the derived values when the values on which they depend are updated. Just like a spreadsheet.
Later, when I hook Overmind to React, Overmind will magically tell React to rerender any part of the UI when the state on which the UI depends changes.
UI components
Once the state works the way I want it to, I use a CodeSandbox feature that lets me work on one UI module at a time.
I write a UI module and tell it which state variables to render, and Overmind and React re-render components when values change.
As I’m writing my code and change the code for UI component, it gets rerendered in well under a second.
Then I hook user interactions in the UI to the actions and effects I created. User does something, action or effect fires, the state gets updated, UI gets rerendered, just like that.
As I finish my lower-order components, I combine them into larger components. As far as CodeSandbox is concerned, a component is a component is a component. So as I tweak a higher-level component, everything within it that needs rerendering just does.
If I discover a problem in action, I can change the action and try it again.
Since the state is just a plain old Javascript object, I can save it and restore it any time I want.
When I’m done, I commit, and deploy happens automatically as I go on.
What’s next?
Next, I’m going to make a series of videos to show all this stuff
