🌌 A modern FE stack in a parallel universe 🦓

#javascript #webdev #typescript #deargodno

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
because BrowserSync
⭐

Jerry rigging npm script
Why do we even use task runners honestly, package.json variables and your set.
⭐⭐⭐⭐

Code leanness
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?
If React is written in JavaScript then I should say so 😂, probably with a lot of refinement over several years, but I'm not making 2020 react here. Yes with very little code we can do what react does sort of.
⭐⭐⭐⭐⭐

Hipster
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.

Dev serve

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)

Components and Views

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.

Routing

In the spirit of functional programming (I don't care as much as some, JavaScript is by definition object functional). This week I'm leaning towards FP styles, so we are going to find a simple router, a fancy name for hit a URL without navigation and run a function. Page, I choose you! But why this library? Well first up, it's got esmodule powers and can be found on Pika (the very special future npm replacement, I bet you), it's also so simple I'm not kidding look at the docs if you don't believe me.

Stores and state

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.

CSS in JS

No, we will not be doing this, I could give a reason such as, it didn't exist at the time that we branched off into build tools, truth is it probably did, I know I have wrote this sort of thing a few times back in the day. What I don't like is clutter, I don't like having a hard time reasoning about what bit of code does what and so styles should live in a stylesheet and here is the big clincher for me, you can set and get CSS variables in JavaScript, There is no need for CSS in js to exist anymore. I am going to use the extensive ways to make CSS good through js, plain and simple. We won't be using and preprocessor, nope, .CSS files will once again be the norm here, but what if I miss nesting... Okay I didn't mention post CSS, it's not a preprocessor, it's simple to Jerry rig to our npm scripts, let's do it, we should only use proposals and future features so we can stay 'true' to CSS.

JS or src/JS

Okay I'm faced with a dilemma, I could really easily just use plain old JavaScript where src is ... What you serve, but the point of this post IS NOT to ignore good tooling. Babel and Typescript at two sides of a coin and I prefer my JavaScript with types that's why I'm using tsc directly, so to sum up I'm doing functional style typescript with no further processing.

🤷‍♂️

So have I got your attention, shall I continue with a full tutorial and code analysis? Smash that heart, or il do it anyway.

Top comments (9)

ItsThatHexagonGuy • May 11 '20

Love this article! Can't wait to see "frankenstack" in action, maybe build a todo application with it? Also, I vouch for lit-html, its truly awesome and I can see how it or the concept of it will become the modern hype.