How it feels to learn JavaScript in 2018

This is to answer the story written by Jose Aguinaga back in 2016

Making a web application back in 2016 is like going into a forest with nothing but a compass. We know that we are heading in the right direction, it’s just that we do not know the terrain in front of us. The more often we pass through the forest, the better for us to find the best way to reach the destination.

There were tools and frameworks published every month to ease the web app development or maybe just to improve application performance. Its hard for new developer to choose the best one. For newcomers, they prefer on the save side by relying on big vendors framework because they have troops to make sure the framework they create is the best.

If you are seasoned web app developer, I would like to ask you this question : “Does infernojs better than facebook react, or vue better than google angular ?”. Save the answer for yourself but I am sure you understand what I mean.

But the wind of change toward improvement seems to have come now.

The javascript forest has changed, a browser called google chrome lead us to a new level where the forest now already has clear routes, easier terrain and directions to destinations.

What I mean is that we can now build single page application, or hybrid application without dependencies on large bloated frameworks. Soon, your single page app will be very light because most of the libraries you need are natively available. Let me prove it:

Here is an example of a rewritten infamous angular Hero Editor tutorial using ES6 module and ES6 String Template.

The result shows that we can create applications with same project structures such as angular, with just native ES6. It was a dream come true for web app developer. No babel, no transpiler, just your hand written ES6 straight into the browser stomach.

Hero Editor from Angular rewritten with vanilla ES6

ES6 provides features such as Module loader, Template Literal and if you need to go further you can create your own custom elements right in the browser without any dependencies.

However, there is still one missing piece.

We still need templating engine library.

We can use Template Literal as part of ES6 feature, but Template Literal is not a templating engine. Templating engine functions is to convert Template Literal to DOM node and append that node to dom container.

Take a look on following example :

render(html`<div>Hello World</div>`,document.body);

The text between backtick (` `) is called ES6 Template Literal however the render, and html are part of Templating Engine. Above pseudocode means we want to add element div with text content ‘Hello World’ into document body.

In our ES6 Hero Editor project, tags such as html and htmlCollection as well as render, are part of the Templating Engine.

Opensource Google lit-html

Recently Google just announce project lit-html to provide templating engine based on ES6 String literal.

lit-HTML from Google

From github readme we can see clear objective of lithmtl

lit-html lets you write HTML templates with JavaScript template literals, and efficiently render and re-render those templates to DOM.

The library is still under development and as of now it does not have a solid demo yet.

Opensource http://yallaJS.io

Other opensource communities has started the same initiative such as yallajs. From the github page the objective was short and concise

YallaJS makes it easy to create HtmlTemplate and render it to DOM efficiently.

Both framework are trying to tackle the same issue, Templating using ES6 Template literal. However the biggest difference between yalla and lithtml is the technology they used to develop and the target of the platform. lit-html is part of polymer-project (Polymer supports in IE 9 is not part of their priority) while yallajs tries to provide backward compatibility to IE9, and the best performance in its class.

Performance

Here is an overview of benchmark performance results from yallajs. Although performance is still the initial stage of yallajs priority, but we can see the results are quite promising.

In memory consumption side, yallajs shows promising result too.

Following the detail of performance breakdown:

You can see the source code yallajs use as benchmark here, and live application here.

Yallajs and lit-html are both in the early stages of development, but seeing from the potential of both libraries, I strongly believe that the year 2018 will be a fantastic year for web developer because we no longer need bloated framework to build a single page page or hybrid webapp.

Summary :

1. Right now we can create large javascript single page applications using ES6 features like module loader, and custom component without dependencies on large frameworks.
2. However, we still need Templating engine library as missing piece to make full-blown ES6 vanilla single page application
3. Yallajs is a templating engine for ES6 Template Literal, backward compatible to IE9 and its size is only 5kb
4. The performance and memory consumption benchmark reported by yallajs has shown a very promising result .

In short, the platform wins and developers are happy. This is a very good news for you Jose Aguina / web developers. :)

#usetheplatform