If it walks like a duck and talks like a duck it must be a duck.
Recently I started a project with Pure “Vanilla” Javascript, and it was quick going. With the React as the starter pack, I had a basic prototype with proof of concept multi-user editing: https://twitter.com/robmurrer/status/1169118440122015744
That was a month ago and I ported it to Typescript which is a superset of Javascript (JS) that “compiles” to JS. It plays well with React’s JSX becoming TSX. Tip to cast in Typescript:
blockchain = await this.state.store.getItem(id) as BlockProps;
To me, having to do the work of a compiler, is maddening and that is why I actually really love Typescript (TS). Coming from any traditional language it is a nice safety cushion under you.
TS has excellent tooling to enable confident refactors, which is the number one issue with my JS codebase. Refactoring “blind” in pure JS is nightmare. Refactoring is by far the most important task, so I’ve gone full TS. But I can see if you are just learning JS you should absolutely not start with TS.
Start pure Vanilla JS and build something. Then when you get stuck trying to refactor. Revert and start fresh with TS. I like the quick rewrite and throwaway approach for rapid prototyping. JS is the best rapid prototyping environment I’ve ever seen.
Ok on to code… The most important part of an editor is the data the user enters. You cannot lose it. We are using the Local Forage package from the folks at Mozilla for the data storage layer. Under the hood it will use IndexedDB on modern browsers.
Ok so what are we looking at here? The genesis for the post. What the heck is Hydrate and Dehydrate? It’s just the cool term for serialize and deserialize. I like it. The whole point of these names is to communicate what it is they do.
Update: Um it writes the data in a format it can send over wire or store in database.
But there is something about naming it what it has been called in the past. Hence this post.
The tour de force of programming design patterns:
- Finite State Machine (FSM)
- React’s fundamental concept
- Start here!
- Command Pattern
- Ahem…
- Classes
- Only to hold state!!!
- Of course React uses inheritance 😀
- Composite
- Just a tree, or
- Now with more Blockchain
I’ll write/link up some more about the above at some point.
Until next time, Happy Coding!
CommandPattern.org 