It's 2020 going on 2015, React, Vue and Angular are not things and the stacks we know so well, they don't exist, a fork in the road appears, what if Angular 1 failed to popularize the genre, what would that be like? Well buckle up boys and girls, that's exactly what we are going to find out as we shape the future of the past, today.
* End of exciting into music.
Let's get our criteria straight, We should build a cart system, this should give us a good all around experience of developing lots of different things, we want a way to make components, routing and handle some kind of store, we want to use technologies as if bundles where unheard of, aka 2015 but bring that toolchainless, bundlerless mindset bang up to date. What I am essentially exploring is, what if Angular 2, React and Vue didn't exist, I will be borrowing ideas from ideas from each, I have worked in all 3 professionally and enjoyed parts from all 3, I strongly believe we are soon to see the resurgence of this sort of stack and I think that's owing to technologies catching up with what the developer wants.
Let's add a few more rules to the challenge,
- we can use npm / yarn for running a dev server and a couple of raw shell scripts, or even just shell script,
- we cannot use npm to bring prod dependencies in.
- we can only use es2015 modules via cdn, dynamic imports are the only allowed import, why? Because that's sort of how we did things back then.
- we can use Babel or Typescript but only directly through cli means or jerry rigged to npm scripts.
I'm going to rate my experience now so that hopefully you can find a reason to carry on reading this insanity.
Setting up speed
Jerry rigging npm script
Why do we even use task runners honestly, package.json variables and your set.
It's so lean, there is nothing there, components load what they need, when they need it.
Speed or apearence of speed
We will get to that next time, I don't know yet.
Can it do what my React can do?
I am going to over engineer the shit out of this.
Did I have fun?
It's not over yet, this is a 2 part series, I have not wanted to eat a frisbee just yet.
BrowserSync will serve our Frankenstack, it's a bit umm... Shakey but il look into using that python based server thing that comes with every Mac or Linux box, (I confess this is an excersize in stuff you don't need as well)
Fancy names for ... A function, so with that in mind.
Behold the beautiful lit-html it's a piece of the polymer project that you can use as standalone, the basic idea is this, use template literals to render a template, the template runs through a tagged html function and fast stuff happens, I highly recommend you look into this wonderful project and it's sister lit-element which I also could have used if I wanted OOP and web components.
I can do you one better, XState plays incredibly well with our Frankenstack, you can even go as far as to ivert the status quo and make it the center of your universe instead of components triggering state changes to do routing, you can encapsulate your entire UI in state machines, this is quite different to the current web development model we know. I won't be doing this today ☹️ too crazy. I will be using XState as my global state and local state per components, each component... That needs it, will have a state machine.
So have I got your attention, shall I continue with a full tutorial and code analysis? Smash that heart, or il do it anyway.