Agenda
History of Javascript
Javascript Engine
ECMA
Node.js
Frameworks
Transpilers
Conclusion
History Of Javascript
In this blog we will see how Javascript has been evolved in the passed three decades, lets see the history of Javascript. But before we get into history of Javascript, let's talk about Web Browser.
What is Web Browser
It is a software that is used to access internet. The information is transferred using Hypertext Transfer Protocol (HTTP), which defines how text, images and video are transmitted on the web. As a client/server model, the browser is the client run on a computer that contacts the web server and request information.
WorldWideWeb
The first web browser, called WorldWideWeb, was created in 1990 by Sir Tim Berners-Lee. But only worked on the proprietary software of NeXT computers, which were in limited use. This is how the first web browser looks:
Fig1: WorldWideWeb, 1994. Credits: https://en.wikipedia.org/wiki/WorldWideWeb
Line Mode Browser
The Line Mode Browser is the second web browser ever created. The browser was the first demonstrated to be portable to several different operating systems. Operated from a simple command-line interface, it could be widely used on many computers and computer terminals throughout the Internet.
Fig2: Line Mode Browser. Credits: https://en.wikipedia.org/wiki/Line_Mode_Browser
Mosaic web browser
The Mosaic web browser was released in 1993. As the first browser with a graphical user interface accessible to non-technical people, it played a prominent role in the rapid growth of the nascent (nascent – just coming into existence and beginning to display signs of future potential) World Wide Web.
Fig3: Mosaic Web Browser. Credits: http://memex.cc/Web_browser
Creation of Javascript
Initial years of web, web pages were static. There was desire of dynamic behaviour after the page was loaded in the browser. 1995, Netscape decided to add a scripting language to Navigator. They pursued two routes to achieve this: collaborating with Sun Microsystems to embed the Java Programming Language, while also hiring Brendan Eich to embed Schema language.
In September 1995 “Brendan Eic” created the first version of Javascript (officially called LiveScript). It was developed in 10days.
The name was changed from LiveScript to Javascript in three months, well it was due to marketing reasons, as Java was hot new programming language at that time. (well based on the content I read)
Javascript Engine
The Javascript Engine resides in the web browser, we may need to know at high level how web browser works.
How Web Browser Works?
As said Web Browser is client program, it is what allows Web clients and Web servers to communicate with each other. The Web Browser act as a Web client here.
When you enter a Web address (URL) in your browser, this actually sends an HTTP command to the Web server directing it to fetch and transmit the requested Web page and display the information in your browser.
To display the web page on the screen of the browser, a group of structured codes which together performs a series of tasks.
Fig4: Browser broad level Architecture. Credits: https://medium.com/web-god-mode/how-web-browsers-work-behind-the-scene-architecture-technologies-and-internal-working-fec601488bfa
We will touch upon these at high level:
User Interface: Input given to the Browser such as URL, Next, Back, etc.
Browser Engine: Based on input from User interface queries and manipulates Rendering Engine.
Rendering Engine: Interprets the HTML, XML documents and images that are formatted using CSS and generates the layout that is displayed in the User Interface.
Networking: Retrieves the URLs using the common internet protocols of HTTP or FTP.
Javascript Interpreter: It is the component of the browser which interprets and executes the Javascript code embedded in a website. The interpreted results are sent to the rendering engine for display. If the script is external then, first the resource is fetched from the network. Parser keeps on holds until the script is executed.
UI Backend: UI backend is used for drawing basic widgets like combo boxes and windows. This backend exposes a generic interface that is not platform specific. It underneath uses operating system user interface methods.
Data Persistence/Storage: This is a persistence layer. Browsers support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem. It is a small database created on the local drive of the computer where the browser is installed. It manages user data such as cache, cookies, bookmarks and preferences.
Note: All Web browser are not all created equal, and Web pages also will not be displayed the same in different browsers. To understand in detail about architecture of how web browsers works internally, it would require a separate blog to be written.
Javascript Engine
Javascript is client side language, also can be said as web browser language. HTML and CSS displays the content in the web page, and Javascript is used for interaction.
As you know computers understand only binary, so how the Javascript be understood. Well to resolve this we have Javascript engine.
Each browser has their own engine.
First Javascript engine was created by Brenden Eich in 1995 for the Netscape Navigator web browser. Now evolved and its still being user in Firefox called SpiderMonkey engine.
First modern Javascript engine was V8, created by Google for its Chrome browser in 2008, having great performance in converting into machine code.
Chakra is the Javascript engine of the Internet Explorer browser. It was also forked by Microsoft for original Edge browser, but Edge was later rebuilt as Chromium-based browser and thus now uses V8.
ECMA
What is ECMA?
By 1959 the growing use of computers, built by several different manufacturers, showed the necessity for standardisation in operation techniques, such as programming, and also input and output codes.
Such standards would make it possible to use data prepared for, or even by, a computer made by on manufacturer to be on computer made by another with a minimum of alteration. Also it would avoid duplication of work in the preparation of, for example. Programming languages by several manufacturers.
The first meeting was held on April 27, 1960, in Brussels; it was decided that an association of manufacturer should be formed which would be called European Computer Manufacturer Association or for short ECMA, and a Committee was nominated to prepare the formation of the Association and to draw up By-laws and Rules.
ECMA Role in Javascript
In November 1996, Netscape submitted Javascript to ECMA International, as the starting point for a standard specification that all browser vendors could conform to. This led to the official release of the first ECMAScript language specification in June 1997, a general purpose, cross-platform programming language.
The standards process continued for a few years, with the release of ECMAScript 2 in June 1998 and ECMAScript 3 in December 1999. ECMAScript 4 began in 2000.
From 2016 to 2019, a new version of the ECMAScript standard was published each year, but the scope of changes was much smaller than the 5th or 6th editions. Thus Javascript can now be considered a mature language that has largely settled down.
By having standards in place, will help single Javascript to be executed similar way in all the browsers.
Node.js
What is Web Server?
From internet we get so many information, we perform several actions. But who provides us this and how? Well all these work is done by Web Server.
Web servers are basically simple computer programs, which handles the request sent by different client.
The server will respond to each client either by fetching details from:
Another server
Database
Fileserver
Performing computation in the webserver – could be CPU intensive job
Let's take an example; we have server which will show the current state of users affected by Covid19 in each country:
We will have several users ( clients ) requesting for the info at same time.
Let's say if we handle requests serially, the users would have to wait for a very long, then the portal will be not be of any use.
In traditional web servers like Apache, Tomcat we have mechanisms to handle this, it would either fork/thread. So it can seamlessly handle many requests at same time. Around 200+ requests can be handled in parallel from the single web server. The requests can scale up or down based on the server configuration.
Threads: In a layman term, imagine this as we watching movie, eating, talking and checking phone all at same time.
What is Node.js?
In 2009 Node.js was born, which made use of Javascript engines not limited to browsers, but introduces a lot of innovative thinking and approaches for Javascript server-side development. Chrome V8 engine is a core component of the popular Node.js runtine system.
What?? But you said Javascript is only for browsers? Yes before Node.js we would need a web server and a server side programming to perform actions on the web server such as open file, interact with database. To do that we use at least one these PHP, ASP, Java, Python, etc. server programming language.
But now we can have our HTTP/web server written in Javascript itself. Saviour!! Just know Javascript and you become full stack developer!!
How Node.js Work?
Let's continue our example when we have Node.js web server running, we also got to accept multiple clients right.
But in Javascript we don't have threads, as Node.js is single threaded.
It means only one request handled at a time, then how do we handle multiple requests?
To handle multiple requests in Node.js, it uses two concepts:
Asynchronous
Non-Blocking IO
Non-Blocking IO – From client the request hits the web server – then the web server reaches to database to fetch results it will take X amount of time. Rather waiting ideally, web servers goes and accepts another client who has sent request.
Asynchronous – Once client 1 completes reading from database it makes callback to server saying its ready, please send his output to the client 1.
Lets see how this is represented in a diagram:
Fig5: Node.js Architecture. Credits: https://www.simform.com/wp-content/uploads/2020/04/node.js-architecture.png
Now lets see from the below diagram how Node.js is connected to Javascript and its open source project V8 and libuv.
Fig6: Node.js connected to Javascript and V8 and libuv Architecture. Credits: https://easyontheweb.com/Node.js-v8-and-libuv-under-the-hood-for-beginners/
Javascript the code which we write
Node.js world: is the middleman, executes the JS code that we've written with the help of C++ and gives us access to the APIs that are written in libuv and v8 libraries
V8: It is an open-source project created by Google. The main purpose of this open-source project is to execute Javascript code outside the browser. It basically compiles Javascript Code directly to native C++ code before executing it.
libuv: is a multi-platform C++ library that provides support for asynchronous I/O based operations such as file systems, networking and concurrency.
Node.js can be used for IO intensive workload, if we have single job doing much CPU – CPU intensive workload it is not good choice to have this.
Javascript Frameworks
What is Framework?
A Javascript framework is an application framework written in Javascript for building user interface.
Framework differ from a Javascript library:
A library offers function to be called by its parent code
Whereas a framework defines the entire application design
A developer does not call a framework; instead, the framework calls and uses the code in some particular way.
Common Frameworks
Examples frameworks are AngularJS, Ember.js, Metero.js and Vue.js, etc.
The below two frameworks are backed by giant names.
Technology | AngularJS | ReactJS |
Developer | ||
Technology type | Full-fledged MVC framework written in Javascript | Javascript library (View in MVC; requires Flux to implement architecture) |
Concept | Brings Javascript into HTML Works with the real DOM client-side rendering | Brings HTML into Javascript Works the virtual DOM server-side rendering |
Data binding | Two-way data binding | One-way data binding |
Dependencies | Manages dependencies automatically | Requires additional tools to manage dependencies |
Language | Javascript + HTML | Javascript + JSX |
Suites best | Best for SPAs that update single view at a time | Best for SPAs that update many view at a time |
Transpilers
We will end this blog by adding last few lines. We all would have heard compilers, which will compile code into machine code. But Transpilers are little different.
What is Transpilers?
Transpilers; or source-to-source compilers, are tools that read source code written in one programming language, and produce the equivalent code in another language.
Why Transpilers?
Anyone who's had to deal with browser compatibility issues before knows it's not as simple as writing Javascript that runs everywhere. That's because every browser uses a different Javascript engin: Chrome runs V8, Firefox runs SpiderMonkey, and Internet Explorer runs Chakra.
Each has different performance characteristics, each implements a different subset of latest ECMA standards features, and each is approaching full compliance with the spec at different rates. So its not quite time to write into latest format directly.
No we can still we write our source in the latest ECMA standards, and let a transpiler translate it to older version such as vanilla ES5 that works in every browser. If you need to support browser from the last millennium, you can even compile down to ES3.
Ideally you would be writing Tomorrow's Javascript, Today!!
Conclusion
Javascript can run on website to build dynamic pages, mobile app, desktop app and also now as backend server.
Seeing the Javascript evolution from the past 3 decades, it still has a real future. And now the popular industry like AIML also has modules built in Javascript such as Tensorflow.js!
Each JS framework has its own pros and cons, we need to analyze which will suit us. At times vanilla Javascript works amazing.
In this evolution of Javascript, there are many other tools and process adopted, but I have only included few and also content holds references from many sites.
Reference
Wikipedia, Medium.com, Other references.
https://www.psypost.org/wp-content/uploads/2022/04/evolution-1024x512.jpg [credits for the front page image]
Original Blog Posted in OSFY
https://www.opensourceforu.com/2021/12/the-evolution-of-javascript/
For further research and updates maintaining the blog here.
No comments:
Post a Comment