As a back-end programmer, having to code a front-end was very scary to me.
What really happened is I started to dig in the past and learn the evolution of the web, since its beginning.
If you’re also curious about the Web History, let’s go 🙂
The purpose of this article is to provide a historical and technical overview of their functionalities and alternative uses over time.
- Software (like Adobe Flash and Photoshop, to create interactive animations on images)
- SVG documents, to manipulate the vector representation of the image interactively
- NoSQL Databases (Apache CouchDB)
- Server-side runtime environment (Node.js, Deno)
- Embedded hardware (Espruino, Tessel)
- Software framework (Electron (embedding Node.js and Chromium))
Before we continue, make sure you know the difference between a library and a framework.
A library is designed for a specific task. For example, React.js was created to build user interfaces and Plotly.js to render data visualizations.
Unlike a framework, a library does not include the tools we might consider necessary to build an application. To achieve this, the developer can choose solutions for missing tasks in other libraries: data storage, network access, routing, … and create his own framework this way.
In the story, Brendan Eich stayed home for two weeks to rewrite Mocha as the codebase that became known as SpiderMonkey.
It was later released as open-source and currently maintained by the Mozilla Foundation.
jQuery is a JS library first released in 2006 to simplify the DOM traversal and manipulation, event handling, CSS animation and Ajax.
jQuery follows the Module design pattern (originally developed in 2003).
But they didn’t.
He said in 2011: “Keeping V8 closed-source for over two years hurt JS in this sense: it meant Apple and Mozilla had to climb the JIT learning curves on their own”.
He regretted they had missed the opportunity to create a common engine codebase.
- In 2013, the TurboFan project from Google started to improve the weakness of Crankshaft.
- In May 2017, V8 shipped a brand-new compiler pipeline, consisting of Ignition (the interpreter) and TurboFan (the optimizing compiler) for JIT and no longer Crankshaft.
Node.js is a cross-platform JS run-time environment first written by Ryan Dahl in 2009.
Angular.js is a web framework released in 2009 and maintained by Google, to address challenges encountered in single-page applications (SPA).
It uses the model-view-controller (MVC) software architectural pattern.
AngularJS transfers all the contents from the server to the browser along with loading all the web pages simultaneously. Once the contents are loaded, clicking on any link on the page does not reload the entire page content; instead, it simply updates the sections within the page.
- Have data-binding: it is the automatic synchronization of data between model and view components.
Lightweight JS library for developing single-page applications, first released in October 2010.
It uses the MVP (Model-View-Presenter) model.
Unlike other frameworks, Backbone puts the developer in charge of choosing the right tool that works best for a given project. A templating engine of its own does not exist in Backbone.
- RESTful JSON interface: allows mapping of models to RESTful API endpoints, and data serialization. Excellent to sync with the back-end.
- Data-binding: The two-way is avoided in Backbone since it is not very useful for real-world apps. Both Backbone and Angular are good at handling smaller pages, but as the page grows, the two-way data binding feature in AngularJS starts showing a decreased performance.
- React-friendly: Backbone is considered to be the best “Model” and “Controller” for ReactJS to complete the MVC pattern. While Angular offers templating through dynamic HTML attributes added to documents, Backbone builds off Underscore templates which give it a format similar to Ember.
- Data-binding: Developers have to write the binding on their own. This might increase the amount of code but provides the benefit of focusing on improving performance without having to take care of the underlying framework and hence proves to be better than Angular in such a scenario.
Express.js is a framework to build Node.js web application first released in November 2010 by TJ Holowaychuck.
It gives multiple features to run Node.js applications: consistent routing, static file serving, caching, middleware interface to plug NPM modules, …
D3.js is a JS library first released in February 2011 to produce dynamic and interactive data visualization in web browsers.
D3 stands for “Data Driven Documents“.
It is not a web framework as itself, but it is relevant to talk about it here since it was the first library for data visualization in web pages.
I won’t talk about the ones that came later in this article, though.
Meteor is a full-stack framework using Node.js and initially released in December 2011 under the name Skybreak.
MeteorJS use a publish-subscribe pattern to automatically propagate data changes to clients in real-time without requiring the developer to write any synchronization code.
Full stack reactivity ensures that all layers, from the database to the templates, update themselves automatically when necessary.
- From 2016, the open source organisation powering Meteor started working on a new backend layer based on GraphQL to gradually replace their publish-subscribe system: the Apollo framework.
Ember is a framework for web applications produced by Yehuda Katz during December 2011 and initially called “SproutCore MVC framework”.
- A type system: Type annotations, inference and compile-time checking
- Object-programming tools: interfaces, enums, classes, generics
- Scopes: namespaces, modules
- ES6 principles: anonymous (lambdas) functions, iterators, for-of loops, generators (Python style), and reflection.
TypeScript can be used on top of others framework.
See the list of sample projects on their official website.
The Electron framework, first released in 2013 by GitHub, uses Node.js for the backend and Chromium for the frontend.
Electron powers a lot of well-known software: the GitHub Desktop application, Atom, Discord, Signal, Skype, Slack, WhatsApp, …
Also not a framework, but a library for building user interfaces. It was created by Jordan Walke, first released in May 2013 and is maintained by Facebook.
ReactJS base it is rendering on the DOM system.
ReactJS use virtual DOM to render the app: a cache is created to compute the differences between the last rendering, and updates only what has changed.
That is used alongside hooks inside the lifecycle of Components:
render: the only function required in any component, called every time the component’s state is updated.
shouldComponentUpdate: to make it return false when the update is not required, hence preventing unnecessary re-rendering. [FOOTNOTE? ]
componentDidMount: to specify more actions after the content has been mounted (created in the UI and often associated with a DOM node)
componentWillUnmount: to specify more action before unmounting the component, like clearing resources and closing streams.
- One-way data binding along with an application infrastructure called Flux controls: the pattern keeps data unidirectional
- Can be used on the server-side as well as on client-side thus making it possible to distribute the rendering load from server to client if needed.
- Most preferred when a high performing enterprise application needs to be delivered to its users. It is powered by user interfaces like that of Instagram and Facebook.
- Ideal when working with View components
- It has high RAM requirements, due to the virtual DOM concept. The representation of the UI is kept in the memory and synced with the “real” DOM.
- It requires a deep understanding of the way states are updated – and most tutorials/lessons do not fully explain the mechanics behind. It can particularly be a problem when communicating with third-party APIs.
To build an application based on React.js, most solutions use Flux (an architecture for creating data layers), Redux or Next.js.
JS Library first released in 2014
The most significant advantage of choosing Vue over React is that in Vue, the component’s dependencies are tracked automatically during its rendering. Thus, the system knows which component needs to be re-rendered when a state changes.
- Transitions: Vue allows application of transition effects when items are inserted, removed or updated from the DOM.
- Easy to understand and develop
JS library for managing application state, created by Dan Abramov and Andrew Clark, and first released in 2015.
Redux is often used with React.js library.
First released in March 2015
Contrary to ReactJS, React-Native renders components using native iOS or Android UI components.
div component in HTML become a
View in mobile, a
p become a
Because of this, React-Native is incompatible with the use of HTML-rendered code as in ReactJS library.
Polymer.js is a JS library for building web applications using Web Components, first released in May 2015 by Google and contributors on GitHub.
The development began on Nov 14, 2013.
- Both One-way and Two-way data binding
- PWA Starter Kit template: Get up and running with zero-config development advanced features like offline support, lazy loading and installability work out-of-the-box
- Follows the Web Components standards: a suite of different technologies allowing you to create reusable custom elements
On 2 May 2018, the Polymer team announced that any future development in Polymer will shift away from its two-way binding and its template system.
It will focus on LitElement, an ultra-light, custom element base class having an expressive and straightforward API.
With the Chrome team having Polymer’s back, we can expect Web Components to be the future of building Progressive Web Apps (PWA).
Angular is a TypeScript-based web application framework, initially released in September 2016 and maintained by Google.
It’s a ground-up rewrite of AngularJS designed for overall performance, as AngularJS was originally developed for designers and not developers.
I didn’t dig into the differences between Angular and Angular.js but they definitely are different products for different usages.
Both, equally, enjoy great support from Google engineers and the Angular community.
2017: WebAssembly (wasm)
We hope that, as WebAssembly continues to evolve, you will also be able to use it with programming languages often used for mobile applications, such as Java, Swift and C#.Mozilla
Ryan Dahl, the designer of Node.js, announced the first prototype of Deno during the JSConf EU in June 2018.
His goal is to re-design Node.js without its first design flaws. The main concern is security:
- Contrary to what Node.js does, the script should run without any network or file system write access by default
- Access should be explicitly granted (like with flags –allow-net and –allow-write)
- Systems calls should be done by message passing (like ProtoBuf)
Other goals are:
- TypeScript usage,
- Take advantage of 2018 technologies: compile Node modules with Parcel into a bundle.
You can follow Deno’s progress on their GitHub repository.
2018: Dojo 2.0
Dojo 2.0 is a framework for Progressive Web Apps released in May 2018 by the Dojo Foundation (a non-profit organization to help open-source projects).
Dojo 2.0 is a switch from Dojo Toolkit (first released in 2005) which was a JS library for websites. It this new version, Dojo use TypeScript and is said to be simpler and faster to learn.
For simplicity, we will refer to Dojo 2.0 as Dojo from now on.
In the 2019 StackOverflow Developer Survey, all developers were asked about the technologies they work with.
About programming language:
- 21.2% use TypeScript
- 1.2% use WebAssembly (so low!)
About web frameworks:
- 48.7% use jQuery
- 31.3% use React.js
- 30.7% use Angular or Angular.js
- 19.7% use Express
- 15.2% use Vue.js
- The use of TypeScript is recommended by the majority of framework authors such as Node.js, Angular, React, …
“I love TypeScript. It is the best thing. Pragmatic, well done, approaching. Start typing in normal TS and have a large and well-structured machinery”Ryan Dahl, when speaking at the JSConf EU in Germany, June 2018
- WebAssembly seems great for a lot of reasons but could be overkill for simple web sites. Maybe it will be the future of virtual reality instead?
- There is no “go-to” JS framework or library for every usage. It principally has to do with the developer’s knowledge, tastes and needs for their project.
If you are looking for a JS technology for a project, I highly recommend this Ultimate Guide from JSReport.io.
For my project;
- As this is the first version and it’s an MVP (Minimal Viable Project): It is not necessary to use huge frameworks like Angular or React.
- I would have loved to use Deno which was very attractive, but I fear that the technology is not yet stable enough (1.5k commits at the time of writing, instead of 3k for Vue.js, 4k for Dojo and 6k for Polymer.js).
- Contrary to other frameworks using Web Components, Dojo focus on being flexible and production-ready. It also leverages TypeScript to provide strong end developer ergonomics.
Therefore I choose to try Dojo.
All that reading for that, yes. I hope it has taught you some things.
Now I’m back on the road with Dojo beneath my arm.
I will share the rest of my adventures with you in the next episode! 😉
- MongoDB, a NoSQL database,
- Express.js, a web app to run on top of server-side Node.js,
a MVCframework to run in browser JS engines,
- Node.js, a server-side environment
A number of variations on the traditional MEAN stack are available by replacing one or more of the components with similar frameworks. For example: In a MEEN stack, Ember.js is used instead of Angular, and likewise for the MERN stack, where React.js is used as a substitute.
Some acronyms and their meaning in alphabetical order:
- DOM: Document Object Model
- MVC: Model-View-Controller
- MVP: Model-View-Presenter
- NPM: Node Package Manager
- NVM: Node Version Manager
- PWA: Progressive Web Apps
- SPA: Single Page Application