As a back-end programmer, having to code a front-end was very scary to me.
I knew nothing about JavaScript, and I had to start a project involving this language, so I did an audit of JavaScript technologies.
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 🙂
1995: Creation of Javascript
Javascript was created in 1995. It was designed by Brendan Eich, an engineer at Netscape back then, in ten days.
It was supposed to be called Mocha, and then LiveScript, but Netscape’s technical management made the political decision to take advantage of the popularity of Java, which was developed by their partner Sun Microsystems at that time, by calling their product Javascript.
Indeed, it has natively nothing to do with Java, but the syntax of Javascript is still very similar to that of Java and C.
Since then, Javascript has evolved in many libraries and frameworks designed for web applications.
The purpose of this article is to provide a historical and technical overview of their functionalities and alternative uses over time.
But what is Javascript?
tAlongside HTML and CSS, JavaScript is one of the core technologies of the web. A webpage written purely in HTML and CSS will be static, all the interactivity with the user coming from Javascript (except some basic CSS animations like mouse hovering).
The environment in which the Javascript code is running, most often in the client-side of a web browser, has to interpret the code and render the functionalities. This action is resolved by a Javascript engine.
Other systems can also benefit from providing and/or using a Javascript engine:
- 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.
1996: SpiderMonkey
SpiderMonkey is the code name for the first JavaScript engine, written by Brendan Eich (yes, hin again) at Netscape Communications, first released in 1996 for the Netscape Navigator 2.0.
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.
2006: jQuery
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).
In JavaScript, the Module pattern is used to further emulate the concept of classes to include both public/private methods and variables inside a single object, thus shielding particular parts from the global scope and avoiding name conflicts.
2008: V8
The first modern Javascript engine was V8, created by Lars Bak in 2008 for the Chromium and Google Chrome browsers (which first version was released at the same time).
The key innovation they had was the just-in-time (JIT) compilation. It means compiling Javascript to machine code (on x86, ARM or MIPS instruction set architecture) before executing it, instead of interpreting bytecode or just execute the whole program after it has been translated into machine code.
It is said that the performance war of JavaScript started in 2008, especially since the JIT has led to significant performance improvements. ⚔
Brendan Eich (who wrote Javascript and SpiderMonkey engine) heard about the V8 project in
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.
Nowadays, V8 is still largely used as the default Javascript engine. Although it was updated:
- 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.
2009: Node.js
Node.js is a cross-platform JS run-time environment first written by Ryan Dahl in 2009.
It uses the V8 virtual machine to executes JavaScript code outside of a browser.
While JavaScript was primarily used for client-side scripting, Node.js lets developers use it to write command line tools or server-side scripting (doing tasks on the server before the page is sent to the user’s web browser).
Consequently, Node.js is said to represent a “JavaScript everywhere” paradigm, unifying web application development around a single programming language for both front and back.
2009: AngularJS
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.
Highlights:
- Easy to learn if you know about HTML5 & Javascript
- Have data-binding: it is the automatic synchronization of data between model and view components.
2010: Backbone.js
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.
Highlights:
- 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.
Downsides:
- 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.
2010: Express.js
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, …
2011: D3.js
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.
2011: MeteorJS
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.
Updates:
- 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.
EmberJS
Ember is a framework for web applications produced by Yehuda Katz during December 2011 and initially called “SproutCore MVC framework”.
2012: TypeScript
TypeScript is a superset of Javascript developed by Microsoft in 2012.
TypeScript adds optional static typing to the language and can be transcompiled into JavaScript (using TypeScript Checker or Babel). Their file extension is a bit different: .ts or .tsx but a javascript program is a valid TypeScript program (as TypeScrit is a subset of Javascript)
Some features Typescript brought to JavaScript:
- 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.
Annotations can be declared for an existing JavaScript library, as has been done for Node.js and jQuery.
TypeScript can be used on top of others framework.
See the list of sample projects on their official website.
2013: Electron
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, …
2013: ReactJS
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.
Highlights:
- 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
Downsides:
- 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.
2014: Vue.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.
Highlights:
- Transitions: Vue allows application of transition effects when items are inserted, removed or updated from the DOM.
- Reactivity: Vue uses transparent dependency tracking observation along with async queueing. Unlike Ember, when models (which are JavaScript objects) are modified Vue automatically batches the updates.
- Easy to understand and develop
2015: Redux
JS library for managing application state, created by Dan Abramov and Andrew Clark, and first released in 2015.
Redux is inspired by Flux – an architecture for creating data layers in JavaScript applications, designed by Facebook (like React). The goal of Flux is to create explicit and understandable update paths for the data.
Redux is often used with React.js library.
2015: React-Native
First released in March 2015
Contrary to ReactJS, React-Native renders components using native iOS or Android UI components.
A div component in HTML become a View in mobile, a p become a Text, etc.
But instead of manipulating the DOM in a Virtual DOM, React-Native runs in a background process on the end-device interpreting the JavaScript code, while communicating in real time with the platform, using an asynchronous, serial and batched bridge to render.
Because of this, React-Native is incompatible with the use of HTML-rendered code as in ReactJS library.
2015: Polymer.js
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.
Highlights:
- 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).
2016: Angular
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)
The purpose of Wasm is to enable the JavaScript engine of a web browser to execute page scripts nearly as fast as native machine code.
WebAssembly is said to be faster than JavaScript, but the goal is not to replace it. They said, “In fact, we expect developers to use WebAssembly and JavaScript in the same application”.
They also suggested that Facebook’s React.js team could convert their JavaScript virtual DOM code to
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
2018: Deno
Ryan Dahl, the designer of Node.js, announced the first prototype of Deno during the JSConf EU in June 2018.
Deno is a secure JavaScript/TypeScript runtime built with V8, Rust, and Tokio.
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:
- Simplicity,
- Compatibility,
- 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.
Facts
In the 2019 StackOverflow Developer Survey, all developers were asked about the technologies they work with.
About programming language:
- 67.8% use JavaScript
- 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
Conclusions
- 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! 😉
Web Terminology
Vanilla JavaScript refer to JavaScript not extended by any frameworks or additional libraries. Scripts written in Vanilla JS are plain JavaScript code.
A MEAN stack is a free and open-source JavaScript software stack composed
- MongoDB, a NoSQL database,
- Express.js, a web app to run on top of server-side Node.js,
- Angular(JS),
a MVC framework 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