Fundamentals Then Frameworks

Why should we have to keep relearning everything once a new framework or library goes mainstream?

This is not specifically a JavaScript phenomenon, only that JavaScript appears to be the language where things are moving in light speed. At least it is perceived as that.

There is a strong focus on tools and frameworks, less on the underlying fundamentals. Take a look at any JavaScript related question on stackoverflow, I bet there is at least one answer that includes jQuery and most probably that’s the highest voted or accepted one too. It seems that jQuery is interchangeable with JavaScript.

Now remember that we surpassed the jQuery/Mootools/Whatever library era and have transitioned into the MV* framework era in the last couple of years. It’s all about choosing a framework now — studying the API then letting the framework do the magic.

Just imagine how powerful that hello world example in AngularJS is. You type in some text into an input element and this automagically updates the text somewhere else in the dom.

Typical AngularJS HTML markup…

<div id=”app” ng-app=”app”>
<input name=”input” ng-model=”input” id=”input” />
<div id=”output”>hello {{ input }}</div>
</div>

…JavaScript code is only this…

angular.module(‘app’, []);

So suddenly the code shrunk into a simple definition that consists of a lone module definition. The complexity has been abstracted away. Angular’s two-way binding came to play here. Take a look at the HTML code. ng-model=”input” creates two way binding, meaning that changes from and to the input happen automagically, no need to add listeners.

The underlying code is easy to grasp. You get quick results. How powerful is that? Within a couple of weeks anybody could build an app, functioning mind you, with a decent interface.

Only, what then? So we have learned how framework X works and then suddenly framework X is surpassed by framework Y, or even better X2 is not compatible with X1, meaning that we have to relearn the API all over again.

This is even hard to grasp for seasoned developers, who should have an understanding of what framework X does and what problems it solves plus an understanding of the underlying fundamentals.

So we are actually learning framework specific APIs not the underlying concepts. We’re learning DSL’s, things like framework specific if-conditions and for-loops. A number of frameworks seem to reimplement these things, while they exist in native JavaScript anyway. Concepts are harder to grasp but take as a longer way down the road. React has been promoting concepts from the start. Just think state handling, components or uni-directional data flow.

React has also been the source of frustration lately. Not React per se, but the tools and ecosystem. ES6, Webpack, hot reloading, CSS modules, the virtual DOM or JSX. Everything you might need to get of the ground.

Getting started — but then nothing happens…

Slow down. No need to get up and running with React and Redux and CSS modules and so on and so forth. Why not start with taking small steps?

In reality you don’t need anything to get started, except for React itself.

Rewind. Taking small steps.

You don’t even need React to get started. There are a couple of great examples online, read this for example. The example implements a lightweight React and explains fundamental concepts along the way.

Now imagine somebody jumping into JavaScript full time and starting with Angular or React. Implementing the hello world examples, then jumping into building a do todo-app followed by creating a real world application. Add Webpack, Immutable, Redux, ES6 etc. Less is more here. These are a lot of ideas, tools and concepts to learn here. Focus on the underlying concepts first.

In regards to React for example, Dan Abramov has already clarified things in his “You’re Missing the Point of React” article.

“…we can focus on examining React’s true strengths: composition, unidirectional data flow, freedom from DSLs, explicit mutation and static mental model”

Dan Abramov — “You’re Missing the Point of React”


We don’t need another “400 reasons why you should use framework X” or “Why I hat framework z and you should too” post.

Focus on learning the concepts.

I have published a two part series, where I try to explain the underlying React concepts via refactoring a simple jQuery todo list example.

Learning React Without Using React Part 1

Learning React Without Using React Part 2