Web development is continuously evolving and while back-end development has enjoyed a wealth of libraries and frameworks in multiple languages for a long time, front-end development is finally starting to catch up.
JavaScript has traditionally been used as a quick (and dirty) way to fix and change front-end animations and behaviours. Libraries such as JQuery ruled the roost for a long time, and while powerful, offered no structure and web projects often turned into spaghetti code.
But in the last couple of years there has been a massive explosion of JavaScript frameworks, which have not only pushed front-end development forward on an exponential scale but show potential to take over both front- and back-end development using frameworks such as Node JS.
These frameworks such as React, Angular and Vue offer up all of the advantages of the more traditional JQuery but also provide added structure and more importantly better user experiences, speed and the ability to make code more modular. They are also backed by major technology players (React = Facebook and Angular = Google).
Using Stack Overflow Trends you can see how quickly the new Javascript frameworks are catching up to Jquery in popularity, and will most likely overtake it.
Now I can already hear the comments around React and Vue being libraries and not frameworks. Too bad – for the purposes of this post we will group them as frameworks (there is plenty of discussion elsewhere if you really want to go there).
Web applications and sites are no longer just consumed on standard desktop computers; they need to perform at a high standard across a range of platforms such as mobile, which means working with patchy internet connections. For companies such as Twitter, Airbnb and Uber this is a basic necessity to ensure users can continue to use their services.
These frameworks create web applications called single page applications (SPAs) which download required information from a server such as styling, scripts and data when initiated (and sometimes already have a cached copy reducing the required load). They then construct complex user interfaces and only need to refer to the server to get required data, which can happen in the background. This contrasts with the more common multi-page application (MPA) which refers to the server for every page transition adding unneeded overhead and, more importantly, taking longer to load. SPA code can also be reused to create native mobile applications, if your users prefer to download an app rather than use a mobile website.
But as with everything there are also disadvantages. SPAs are not as easy to optimise for search engines. They also require JavaScript to be present and enabled, which some firewalls and organisations will be blocking. SPAs also require browsers to be at the cutting edge. Browsers are starting to catch up and incorporate the underlying technologies including Service Workers and Web Components, with Chrome leading the way, but not all browsers are ideal for SPAs just yet.
So while SPAs look like the future of the Internet (including native apps) they are still very much in development and require a lot of thought before using in a project. Some projects simply cannot fit into an SPA model; in that case, the MPA model is still relevant. Before building a web application, the goal needs to be considered. If the project requires multiple categories (such as an online shop or a blog) – use a multi-page site. For information-driven web applications (such as portals or apps) – use a single page site.
If you really want to take advantage of these new technologies but still requires an MPA model there is a “hybrid application”. Another major advantage of the new frameworks like React and Vue is that they can be used, similar to JQuery, as a library in an MPA, providing all the benefits and minimising the disadvantages.
Even big MPA software projects like WordPress are starting to embrace these new front-end technologies. WordPress are currently working on a major overhaul of their dashboard interface and React is underpinning the whole project.
JavaScript has evolved beyond its loose scripting roots, and modern JavaScript frameworks exemplify the rapid progress of the internet and the depth of the current Javascript ecosystem. They should definitely be considered in any future project.
