JavaScript has come a long way in the last 20 years. When I started working on the web in 1997, most websites were static. When I clicked on a button or link, the web page was refreshed.
A thread on how I saw JavaScript evolving ๐งต ๐
#jeetkagyan #javascript
A thread on how I saw JavaScript evolving ๐งต ๐
#jeetkagyan #javascript
๐ด The early days
Things changed quickly, and we started to recognize the power of JavaScript. Making pages interactive became fashionable, and HTML was briefly renamed to DHTML (Dynamic HTML) by part of the industry.
Things changed quickly, and we started to recognize the power of JavaScript. Making pages interactive became fashionable, and HTML was briefly renamed to DHTML (Dynamic HTML) by part of the industry.
๐ด The early days At this point, we used JavaScript primarily for simple interactions, and many developers used Flash for websites that genuinely wanted to be interactive. Flash at that time was better than the Java Applets we were developing a year ago. 
๐ด The early days
Flash could stream videos, started quickly, and mostly came pre-installed while Java was still not as popular and many browsers didn't support it by default.
Flash could stream videos, started quickly, and mostly came pre-installed while Java was still not as popular and many browsers didn't support it by default.
๐ด The early days
We had a version of applications like email, chat, news, search, etc., that worked around the limitations of JavaScript and the web in general.
We had a version of applications like email, chat, news, search, etc., that worked around the limitations of JavaScript and the web in general.
๐ด The early days
In 2001 or 2002, I saw an email autocomplete feature my team had developed ( I had no role to play ) and was mesmerized by the possibilities. However, I went off to the world of bits and bytes in the telecom industry for some years.
In 2001 or 2002, I saw an email autocomplete feature my team had developed ( I had no role to play ) and was mesmerized by the possibilities. However, I went off to the world of bits and bytes in the telecom industry for some years.
๐ The era of AJAX, jQuery & browser wars
By the time I came back to the web industry, Web 2.0 was the buzzword. During this discussion, I met a friend who told me about XMLHTTPRequest, and I learned the term AJAX.
By the time I came back to the web industry, Web 2.0 was the buzzword. During this discussion, I met a friend who told me about XMLHTTPRequest, and I learned the term AJAX.
๐ The era of AJAX
The initial Web 2.0 wave was a lot about JavaScript-powered websites. For me, AJAX stood out, and I always associate web 2.0 with the term.
The initial Web 2.0 wave was a lot about JavaScript-powered websites. For me, AJAX stood out, and I always associate web 2.0 with the term.
๐ The era of AJAX
I also discovered and started using the awesome Firebug. This beautiful plugin inspires many browser tools on modern browsers.
Everything, including email, chat, search, and social networking websites, now used autocomplete features and felt more responsive.
I also discovered and started using the awesome Firebug. This beautiful plugin inspires many browser tools on modern browsers.
Everything, including email, chat, search, and social networking websites, now used autocomplete features and felt more responsive.
๐ The era of jQuery
The web and Javascript world had progressed significantly at this time. I quickly learned how to use jQuery, Prototype, and Scriptaculous libraries (among others).
The web and Javascript world had progressed significantly at this time. I quickly learned how to use jQuery, Prototype, and Scriptaculous libraries (among others).
๐ The era of jQuery
jQuery was immensely popular because it simplified cross-browser development and specified a way to address DOM elements using CSS selectors.
jQuery was beautiful and ugly at the same time. It worked hard to support Internet Explorer.
jQuery was immensely popular because it simplified cross-browser development and specified a way to address DOM elements using CSS selectors.
jQuery was beautiful and ugly at the same time. It worked hard to support Internet Explorer.
๐ The era of browser wars
While developers struggled to support Mozilla Firefox and Internet Explorer, Google Chrome made browser wars even more enjoyable. Lack of standardization between browsers made jQuery immensely popular.
While developers struggled to support Mozilla Firefox and Internet Explorer, Google Chrome made browser wars even more enjoyable. Lack of standardization between browsers made jQuery immensely popular.
๐ The era of jQuery
Good programmers looked at code written with jQuery and said we could do better; it was customary to see 4-5000 lines long JavaScript files. Locating all the listeners for a particular id or class of elements in the file wasn't trivial and felt clunky.
Good programmers looked at code written with jQuery and said we could do better; it was customary to see 4-5000 lines long JavaScript files. Locating all the listeners for a particular id or class of elements in the file wasn't trivial and felt clunky.
1๏ธโฃ SPAs are here
At this point, Gmail had already established SPAs (Single page applications) as the most incredible way to build functional web applications and dashboards.
At this point, Gmail had already established SPAs (Single page applications) as the most incredible way to build functional web applications and dashboards.
1๏ธโฃ SPAs are here
Frames were dead, and people were more worried about AJAX crawling and the potential loss of page view metrics because the pages didn't change when customers interacted with SPAs.
Frames were dead, and people were more worried about AJAX crawling and the potential loss of page view metrics because the pages didn't change when customers interacted with SPAs.
1๏ธโฃ SPAs are here
I am inclined to think SPAs heavily influenced client-side analytics (anyone remembers Google buying Urchin for analytics?).
I am inclined to think SPAs heavily influenced client-side analytics (anyone remembers Google buying Urchin for analytics?).
1๏ธโฃ SPAs are here
SPAs were so influential that most small businesses moved to a single-page website with a parallax scroll. SPAs were suitable for customers but very difficult to manage for developers. Thankfully a whole new set of tools were on their way.
SPAs were so influential that most small businesses moved to a single-page website with a parallax scroll. SPAs were suitable for customers but very difficult to manage for developers. Thankfully a whole new set of tools were on their way.
1๏ธโฃ SPAs are here
Now, all our applications only loaded data upon interacting with them instead of refreshing the whole HTML page again. The applications were still the same- email, search, etc., they were competing with desktop applications now.
Now, all our applications only loaded data upon interacting with them instead of refreshing the whole HTML page again. The applications were still the same- email, search, etc., they were competing with desktop applications now.
๐ฉโ๐ฉโ๐งโ๐ฆ Long files to many files
People found ways to write code in multiple files and used RequireJS or SystemJS to stitch them together. I am inclined to think the Node.js ecosystem inspired these.
I got introduced to Grunt and later Gulp at this point, and things were looking good
People found ways to write code in multiple files and used RequireJS or SystemJS to stitch them together. I am inclined to think the Node.js ecosystem inspired these.
I got introduced to Grunt and later Gulp at this point, and things were looking good
๐ฉโ๐ฉโ๐งโ๐ฆ Long files to many files
We could write code in multiple files; our bundlers could combine, minify and version the files. I remember linking angular.js because it introduced some structure to our web code.
We could write code in multiple files; our bundlers could combine, minify and version the files. I remember linking angular.js because it introduced some structure to our web code.
๐ฉโ๐ฉโ๐งโ๐ฆ Long files to many files
It became easier to share code between different pages, and we started to write larger applications without being afraid of unmaintainable code.
It became easier to share code between different pages, and we started to write larger applications without being afraid of unmaintainable code.
โ๏ธ Age of the frameworks
The need to write large, complex applications was high, giving rise to many frameworks. Backbone (2010) and Knockout (2010) were the first frameworks that I built sample applications with (though never used in production).
The need to write large, complex applications was high, giving rise to many frameworks. Backbone (2010) and Knockout (2010) were the first frameworks that I built sample applications with (though never used in production).
โ๏ธ Age of the frameworks
AngularJS (2010) was the go-to solution for me for some time. I liked Ember (2011) but couldn't move my teams to this super-opinionated framework.
AngularJS (2010) was the go-to solution for me for some time. I liked Ember (2011) but couldn't move my teams to this super-opinionated framework.
โ๏ธ Age of the frameworks
For me, Angular 2 (2016) and React (2013) were often the leading competitors, and I only used Vue (2014) in small internal applications. For a long time, I preferred Angular 2 (with its observables and reactive programming).
For me, Angular 2 (2016) and React (2013) were often the leading competitors, and I only used Vue (2014) in small internal applications. For a long time, I preferred Angular 2 (with its observables and reactive programming).
โ๏ธ Age of the frameworks
React + Redux changed how I think about DOM and state, and this combination is essentially my default framework today.
React + Redux changed how I think about DOM and state, and this combination is essentially my default framework today.
๐ JavaScript comes back
And then, JavaScript evolved from Pichu to Pikachu, the most popular and beloved Pokemon. In 2015, Ecma International, a nonprofit standards organization, published a new version of JavaScript- ECMAScript 6 (ES6).
And then, JavaScript evolved from Pichu to Pikachu, the most popular and beloved Pokemon. In 2015, Ecma International, a nonprofit standards organization, published a new version of JavaScript- ECMAScript 6 (ES6).
๐ JavaScript comes back
I think ES5 was also a significant change (given that the version before that came out in 1999). Thanks to Node.js and ES6, the JavaScript community now has an all-pervasive language used on servers and web and mobile clients.
I think ES5 was also a significant change (given that the version before that came out in 1999). Thanks to Node.js and ES6, the JavaScript community now has an all-pervasive language used on servers and web and mobile clients.
๐ JavaScript comes back
Between 1997 to 2009, there were four versions of the language, but between 2015 and 2021, we have seen seven versions and the JavaScript language continues to become excellent.
Between 1997 to 2009, there were four versions of the language, but between 2015 and 2021, we have seen seven versions and the JavaScript language continues to become excellent.
๐ JavaScript comes back
The toolkit for a web developer looks slightly different now. Webpack has become the most popular bundler, babel is used in almost all projects using the latest syntax (or TypeScript), and we have multiple frameworks like Angular, React, Vue, etc.
The toolkit for a web developer looks slightly different now. Webpack has become the most popular bundler, babel is used in almost all projects using the latest syntax (or TypeScript), and we have multiple frameworks like Angular, React, Vue, etc.
โญ Full circle
It's also interesting to see how we rendered fully rendered pages from the backend during the early days, moved to client-side rendered pages with AJAX, and now went back to server-side rendered pages.
It's also interesting to see how we rendered fully rendered pages from the backend during the early days, moved to client-side rendered pages with AJAX, and now went back to server-side rendered pages.
โญ Full circle
PhantomJS had become famous for AJAX crawling on the server-side rendering, but today's web developer uses Next.js, Svelte, or other server-side rendering frameworks to develop isomorphic applications.
PhantomJS had become famous for AJAX crawling on the server-side rendering, but today's web developer uses Next.js, Svelte, or other server-side rendering frameworks to develop isomorphic applications.
โญ Full circle
On the browser side, we have gone from 2 dominant browsers (Netscape Navigator and Internet Explorer) to multiple browsers (Firefox, Chrome, IE, Safari) to two dominant browsers (Chrome, Safari).
On the browser side, we have gone from 2 dominant browsers (Netscape Navigator and Internet Explorer) to multiple browsers (Firefox, Chrome, IE, Safari) to two dominant browsers (Chrome, Safari).
โญ Full circle
I am excited about edge-first technologies like Remix. On the rendering side, we have gone from SSI (server-side includes) and JSP (Java Servlet Pages) to ESI (edge side includes) to AJAX to SSR (server-side rendering) to ESR (edge side rendering).
I am excited about edge-first technologies like Remix. On the rendering side, we have gone from SSI (server-side includes) and JSP (Java Servlet Pages) to ESI (edge side includes) to AJAX to SSR (server-side rendering) to ESR (edge side rendering).
โญ Full circle
Today, JavaScript has come a long way and is often the first choice for web, server programming, machine learning, crypto, and mobile development.
Today, JavaScript has come a long way and is often the first choice for web, server programming, machine learning, crypto, and mobile development.
โญ๏ธ What's next
JavaScript continues to evolve. It's looking more and more like TypeScript. We still need to decide if it's better to allow browsers to load multiple small files or continue creating bundles. HTTP2 likes multiple small files over one big file.
JavaScript continues to evolve. It's looking more and more like TypeScript. We still need to decide if it's better to allow browsers to load multiple small files or continue creating bundles. HTTP2 likes multiple small files over one big file.
โญ๏ธ What's next
With WebAssembly, for the first time, JavaScript is not the only language for writing web applications, I expect this to gain momentum, but I don't think it will throw JavaScript from its throne.
With WebAssembly, for the first time, JavaScript is not the only language for writing web applications, I expect this to gain momentum, but I don't think it will throw JavaScript from its throne.
โญ๏ธ What's next
React and other frameworks taught us to think about components, and I have all the signs that tell me the next 2-to 3 years will be all about micro-frontends.
React and other frameworks taught us to think about components, and I have all the signs that tell me the next 2-to 3 years will be all about micro-frontends.
โญ๏ธ What's next
For now, React has left its worthy competitors, Angular, Vue, and Ember, behind. Still, it's only a matter of time before a new framework emerges that takes the best of these frameworks and handles their shortcomings.
For now, React has left its worthy competitors, Angular, Vue, and Ember, behind. Still, it's only a matter of time before a new framework emerges that takes the best of these frameworks and handles their shortcomings.
I have written more about this on my blog - jeet.world/how-i-have-seeโฆ
โข โข โข
Missing some Tweet in this thread? You can try to
force a refresh
ใ
