Categories
Programming

JavaScript Frameworks in a Nutshell

It can feel like each day a new JavaScript framework is introduced, and the fast-paced development becomes difficult to keep up with. I came across a comment on Hacker News that explains the reasoning, the why of a particular framework. I reproduced the comment below and added some links to help make research easier:

While it might look like the frontend is going around in circles, there are major & minor differences between the technologies, and they have each introduced novel (to JS at least) things… Off the top of my head (this timeline might not be right but it’s how I went through it at least):

Backbone got you away from jquery spaghetti, helped you actually manage your data & models. Often paired with Marionette to handle views (if you squint this is the precursor to components) and bring some order in that part of the app.

Angular bundles backbone’s data handling (services), Marionette’s orderly view separation (views, directives), but they made a fatal mistake in the apply/digest cycle and maybe encouraging a bit too much complexity. Angular is everything bundled together, with consistent usage/documentation/semantics, a familiar programming pattern (MVC), and a large corporate sponsor in Google it caught on like wildfire.

Knockout sees Angular’s MVC, laments it’s complexity and focuses on MVVM — simple binding of a model and a relatively simple reactive-where-necessary controller

React comes along and suggests an even simpler world where the only first class citizen is components and everything else comes separate (this isn’t necessarily new, there is an article out there comparing it to COM subsystems for windows). React is almost always used with react-router and some flux-pattern supporting data management lib — these are also departures from how angular, backbone and knockout structured in-application communication (backbone was pure event bus, angular had the usual MVC methods, knockout was just callbacks — if you have a handle to an observable when you change it things reload).

Vue sees the complexity that React grew to (case in point: shouldComponentUpdate) and devises a much simpler subset along with a new way to handle reactivity — using the `data` method of a Vue component. Vue made a lot of decisions that helped it stay simple and small yet very productive and this is in large part thanks to React existing before hand.

Svelte comes on the scene and realizes that truly optimal rendering could be achieved by just compiling away the excess and eschewing the virtual DOM all together in most cases. No need to track all the structure if you compile the code with the updates necessary. Don’t quote me on this but I think a whole host of things influenced this project — smarter compilers, better type systems, the ideas around zero cost abstractions & doing more work at build time.

Ember (formerly SproutCore) is actually an anomaly because it tries it’s best to be both angular like (so large, and usable by large teams) and keeping up with the tech as it evolves (see: Glimmer, Octane). Ember also has some innovations, like Glimmer’s VM-based approach — turns out you can just ship binary data representing how to draw your components to the browser and skip a bunch of JS parsing, if you bring your own virtual machine that is optimized to draw the components.

hardwaresofton on Hacker News