JavaScript frameworks have come a long way and any new developer is not only faced with learning a language but choosing with framework to learn first.
The choice available today is a result of some incredible innovation in a relatively short space of time. As recently as 2004, Google released Gmail which is regarded as the first everything-in-the-browser product we know today as Single Page Applications.
If you're just starting to learn JavaScript, you arrive at a good time, but there wasn't always so much choice and flexibility if you wanted to do anything interesting in the browser.
Dynamic HTML
In the early 2000’s, JavaScript was largely in its infancy, and was mostly used to perform basic changes to a page. The highlights included mouse-overs, dropdown menus and scrolling text - things developers take for granted today with the power of CSS.
Back then, Internet Explorer dominated the web browser landscape (I know, weird right?) and since 1999, included a wrapper around a library Microsoft had developed for their own e-mail product, Outlook. The lovely but dauntingly named XMLHttpRequest object eventually became standardized across browsers and was the gateway to how we experience much of the Web today.
Crucially, this XMLHttpRequest allowed requests to be sent to a server, and a response processed, without having to refresh the browser or perform a full round trip. Until then, things like clicking a tab or posting a form meant the server processed that request and decided how to render the response, and the browser would spin away and eventually show the result.
Developers jumped on the functionality and saw the potential to create real desktop-replacement applications on the web. Asynchronous Javascript and XML, shortened to AJAX, was the phrased coined to describe this newfound ability.
jQuery
jQuery wasn’t technically the first JavaScript framework, but its popularity exploded after it was released in 2006. jQuery aimed to solve many of the issues developers faced with subtle differences in web browser implementations, and it abstracted much of the functionality developers wanted into a clean and easy to learn framework.
With the potential to build applications that harnessed the convenience of the web, developers built larger and larger solutions that tested jQuery’s maintainability. Products like Gmail had demonstrated what could be achieved but it became clear more enterprise friendly tooling might be needed.
Backbone & AngularJS
In 2010, Jeremy Ashkenas released Backbone, the first framework aimed at creating single page applications. Jeremy had seen how messy a huge jQuery application could become and wanted a cleaner approach to remedy the thousands of selectors and interwoven event handlers. Interestingly, Backbone didn’t require jQuery, it was an independent framework but certain functionality could be enabled if jQuery was present.
Around the same time, Adam Abrons and Misko Hevery created AngularJS, which soon after fell under Google’s care when Hevery took a job at the company. Angular was the first framework that provided a complete architecture for front-end application development.
One of AngularJS’s main features was bi-directional data binding and provided a way to bind a model’s data to HTML markup and have changes update in real-time. Developers called this ‘automagic’. Angular also supported dependency injection and the ability to create reusable components.
Knockout, Meteor, React
Knockout is another framework that provided a solution to bi-directional data binding, although it provides only a fraction of the functionality of AngularJS. Meteor too, had a significant following but in 2013, Facebook released its React framework and has since enjoyed huge popularity.
Many new developers first hear about React and make it their framework of choice. Despite this, React does has a relatively steep learning curve, but it also benefits from excellent documentation and an enormous community.
For a developer it’s very interesting to see the way frameworks have tried to solve the problems of their predecessors. I think Angular (certainly the most recent versions) share a lot with React and in turn they both share common goals with Vue, the new kid on the block.
Another consideration that has become increasingly important is how easily these frameworks can support mobile targets. Ionic and React Native have proven to be considerable players as teams attempt to standardize on JavaScript as a language for all means: server side with NodeJS, desktop and mobile browser, and targeting native devices with the help of additional frameworks.
In summary, JavaScript is a great language to learn and with these frameworks, almost anything is possible on any device. With each new release of a framework there is much evidence of learning from previous incarnations so there's never a better time to dive in and start to build your first application.
Top comments (18)
Along with the MooTools, Prototype, and scriptaculous that are mentioned, there was the Dojo Toolkit. Plus many, many roll-your-own libraries. There was a tool that let you merge JS libraries into compressed files, but I don't remember the name now.
don't forget mootools!
Absolutely! I remember thinking it deserved a mention but I started to drift too far from the solace of Super-Brief...
and prototype, and scriptaculous
Nice article, although there's a pretty big gap between the introduction of XMLHttpRequest and jQuery. You're missing PrototypeJS/Scriptaculous and MooTools, both of which were extremely popular.
Thanks for good article but I have question you say "Google released Gmail which is regarded as the first everything-in-the-browser product we know today as Single Page Applications." but we know first XMLHttpRequest created by Microsoft's Outlook Web Access.
My first question where there are (Microsoft) use XMLHttpRequest if there are use XMLHttpRequest for get new emails thans this is mean first Single Page App created by Microsoft?
Somewhat interested!
A very nice overview. Thanks.
Thank you for your feedback, very much appreciated.
A small note on build tools would be nice, there's many to pick from: makefiles, shell scripts, batch scripts, grunt, gulp, cmake, webpack, parcel, bazel
And the big kahuna on the background: wasm
Indeed, undoubtedly worthy of a super-brief history of their own! Thanks Claudio.
the last time i worked with javascript, it was the time where you only add an easy tag in html and begin to code. Today the frameworks for me really hard to learn because of this lots of tools you need to run a easy code (npm, github,in React you need Babel or something, build Tools and so on. its like a IDE the framework itself. The hardness is not the language itself, but to understand these tools and what they do and how they work.</p> <p>My Question is:<br> When was this transformation from easy script tags to so complex structure ? Or at which date it began to be so complex? Has this Transformation a Name in JavaScript Community? Thank you :) </p>
Man, What about YUI and ExtJS some ancient frameworks, I feel a bit old now :'D nostalgic.
That bridge to the mobile platform is very powerful with these frameworks, I wanna mention Axway appcelerator titanium that is now leveraging angularjs, that is said to be production ready by the end of the year, so think of all the angularjs web developer that will be able to develop native crossplateform mobile apps, neat :)
Also related - medium.com/dailyjs/the-deepest-rea...
Where's Prototype? Prototype predates jQuery by a couple of years and it turned the JS scene upside down back in the day before being shunned for all the "don't extend the DOM" thing.
Huge knowldge. Thanks
Thank you, appreciate your feedback.