What tech stack should I use for my SPA?

I have a friend who has been a .NET desktop application developer for the past few years. He got curious about all the rage in the JS community and wanted to build a SPA. He reached out to me for advice but after sending the reply to his email I thought I’ll publish it as a blog post in case others have the same question.

Hej Alex, I’m looking for the tech stack for a new project. Since you’re the best front end dev I know, I reached out for advice. Do you know REACT/Redux? What do you think about that? Seems popular. I’m pretty damn eager to bet on Elm. The question is whether it is ripe enough. Have you checked it? What do you think about it in that case?

So I can only talk about the stuff I have personally been working with. I don’t have any hard opinions about one perfect tool as you see in the end. Give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime. The idea is to give you the viewpoint to pick your own stack.


Elm

First about Elm: it’s great. It’s rad and it’s easier than learning React, Redux, React-Router, Webpack and scaffolding your own project. You can try it online and there’s even an online editor for that. If you’re a FP addict, make sure to read this. Don’t mind the bad language, but the juice of it is that Elm is still not very mature and the majority of businesses don’t use it in production now. Elm is an easier and cleaner language if you haven’t been brainwashed with OOP. But if you come from non functional programming languages it takes a bit of a learning curve and unlearning to be productive.

Javascript is C

Javascript on the other hand is the new C. It is the lingua franca of the web. It is easy to learn 80% of it but becomming fluent in Javascript is extremely hard given its language design issues, browser compatibility quirks and an ongoing language additions. JS didn’t get enough love for decades and now it’s hastily trying to catch up with other languages. There’s literally a new version every year but most changes happened in what’s called EcmaScript 2015 also known as ES6.

There is an assembly too

We also have an equivalent to assembly that is being developed by Microsoft, Apple, Google and Mozilla. You may have heard of CoffeeScript, a language that compiled to JS. This single-handedly started a whole new trend of languages that compiled to JS but when you look at the big picture, it doesn’t make much sense to compile other languages to an interpreted language! (the right word is actually transpile). So web assembly is what IL is to .NET ecosystem. When this technology is mainstream, you can pick any stack or language of your choice without having to worry about the generated JS code (it supports LLVM). Here’s a FAQ if you’re interested.

This is different from asm.js which was still Javascript (just a high performance subset of it marked with “use asm” directive). Here is what the creator of JS has to say about both.

Functional Programming for UI

IMHO functional programming is the best way to build complex UIs be it React or Elm or whatever. I personally use Mithril which is a very minimal library. It works for small to mid-range projects like this clock (fun fact: that clock is a PWA which installs like a app if you see it on Android). For security and curiosity reasons I like a library that I can read its code and understand it over a couple of hours.

Angular

Stay clear from Angular 1 for any new project. Angular 2 is good if you like TypeScript. TypeScript brings some nice ideas from C# (designed by the same guy) to JS and is great for bigger apps where you have a team and at least 2000 lines of code. Free Code Camp has a nice article about this (written by yours truly). Angular 2 can be used without Typescript but that’s not a very popular workflow and kinda kills its best selling point: ease of use for former C# XAML devs.

React

React abstracts away a lot of browser complexities and gives you a very good performance. A lot of hype is around React (for pioneering the idea of virtual DOM) and these days many good companies use React in their modern products. At my company it’s our weapon of choice. Like Sindre Sorhus I don’t like Frameworks. React is not a framework. It’s just a UI library. But then you might bring in Redux and React Router into your code. You’ll most probably use JSX which brings Babel and Webpack into your code (not a hard requirement but the most popular toolset I’ve seen). This boilerplate is so common Facebook hired the creator of Redux to make CRA which smooths the learning curve but takes away many of the choices you would be making otherwise.

The React (and friends) ecosystem eventually makes you write your code around certain concepts and best practices which is not that different from using a Framework off the bat. The difference is that you build your own framework (which most probably is similar to the majority of the others anyway).

If you like smaller libraries, Inferno and Preact both worth looking into. Although both of them try to stay close to React to make transferring an existing code as easy as possible.

Mithril

One reason I like Mithril is that by default it promotes using hyperscript which is plain Javascript so you don’t need a sophisticated build system. If you go with React I recommend looking into React boilerplate. If you go with the most popular choice, you’ll be able to get much better tooling and help from the community.

I wish Mithril existed before React because it cleared a lot of questions in my mind about virtual DOM and functional programming for UIs. Nevertheless, after working with Mithril I feel more effective as a React developer.

Web Components

Web Components is a promising technology that allows anyone to create custom HTML tags that behave like native DOM tags. It would be great if they had no dependency but 90+% of web components today are built on top of Polymer. Besides, the components usually maintain their own state which is a bit tricky when you’re doing functional programming for the UI. I personally haven’t come across many use cases where web components would make the best option but I’m sure there are many opportunities like making a better video player that could benefit from this technology. I used pure web components (with a polyfill) using Knockout.js and WebGL. It was a cool project before some guy ported it to Angular 1.

Vue

Vue also worth looking to. It’s the best of Angular 1 and React together. Our Mexican branch has done a great job with Vue. Their code is not public but when I browsed it, I saw 7 developers contributing at a constant pace which tells me that they have good abstractions and a productive process.

It also supports SSR which you may or may not need. I personally haven’t worked on any project that really needed SSR.

General advice for choosing a tool

1. Beware of Hype Driven Development.

2. Pick the smallest toolset that does the job and bring new thins to the project only when needed.

3. The first prototype is probably gonna be rewritten twice before you make any money out of the project so be OK with shitty code.

4. Decide which type of programmer you are and find a framework that matches your needs. For example I find Riot.js a very nice library and did my employment test with it.

5. JS community is very diverse. JS is one of the most popular languages at the moment and many people with different backgrounds come to the JS ecosystem every single day. There are lots of opinions, lots of bias, lots of choices to make. This all might be very overwhelming if you come from a more controlled ecosystem like Microsoft or .NET so embrace the community and enjoy it! :) Read echojs (the hacker news for js devs) and listen to JSJ (the most popular JS podcast. They even have an old episode on SPAs).

Your answer is two questions

So if you ask me about the stack, I ask two questions in return:

  1. What do you want to do? What kind of problems you’re trying to solve? Hammer principle.
  2. Who are you? What is your background? What is your taste? Do you work with a team? What’s the consensus there?

There is no one true stack like in the Microsoft world. There are choices, choices and choices about making those choices. :D

These two questions decide your stack.


We’re gonna have a lunch together when we try to answer those two questions. Obviously the answer is totally useless for this blog post.

If you ❤ what you read, please share it and follow me to stay up to date with the latest essays like programming is the best job ever.