In this final post of the series, we shall cover some of the popular developments in web since 2017 to today. Whether it's Web Assembly, PWA, SSR or the JAM Stack let's take a look at web dev today and possibly, the future.
Integrations
Web services, 3rd Party APIs and Software Development Kits are resources that let you integrate 3rd party solutions and services into your product. APIs allow you build on top of existing products like PayPal, Google Services, Facebook etc instead of building everything from scratch.
The Single Page App
The rise of AJAX gave birth to a new kind web application architecture. The single page application is a web app that rewrites the content of the page instead of redirecting an entirely new one.
The core mechanic that allows this is routing, whereby JavaScript code is used to alter the URL and change the view to simulate navigating to another page. The following article gives a nice overview on this.
Many of the popular web frameworks provide some means to perform routing.
Server Side Rendering
However, in the craze of SPAs, many apps became too JavaScript heavy which resulted in long load times on lower-end devices and slower networks. Hence, many teams returned to the server side to once again take on view logic.
Server Side Rendering allowed you to use the JavaScript Frameworks you love but on the server side. Projects like Next JS render the first page of your react app on the server resulting lower load times.
After the first page load, JavaScript code would then be ready to handle subsequent routes. This handover is often called hydration. I go into more details about SSR in the following post.
Understanding Rendering in Web Apps: SSR
Nicholas Mendez ・ Jan 14 '21
JAM Stack
As 3rd Party APIs and web services evolved, it suddenly became evident that 'static sites' can provide full app experiences which we thought were only possible with a full stack approach.
Today, you don't need to manage your own database or write any backend code! Instead you can integrate with an API or a backend as a service (BaaS) like firebase, appwrite or hasura.
You can build a static site as a SPA using something like React or using a Static Site Generator like Eleventy that will generate your website from markdown files. Projects like Gatsby and NextJS lets you statically generate your site and still use react.
Headless Content Management Systems like Strapi and Netlify CMS let you manage content for your applications and make them accessible to your static sites via an API. The following talk gives a really good idea of how the JAM stack providing a new way to address old challenges.
Progressive Web Apps
In 2015, the term Progressive Web Applications (PWAs) was coined to describe next generation web applications that use cutting edge browser API's like the Service Worker to provide native like app experiences.
In 2019, widespread adoption of the service worker was achieved and since then the capabilities of web applications now seem limitless. Now web apps can offer native like feature such as:
- Offline Mode
- Push Notifications
- Background Synchronization
- OS Hemiscreen Integration
- File System Access
- Web Sharing
And much more. PWAs bring the capabilities of mobile to the reach of the web and its adoption and growth does not seem to be slowing down anytime soon. You can check out the PWA Summit 2021 to get an idea of some of the recent developments of PWAs.
Web Assembly
Web Assembly is an open standard for a portable low-level code for executable programmes in the browser. It can also be compiled from other languages such as C/C++, C# and Rust. This made porting all kinds of applications to the web possible at near native speed. You can also use web assembly modules in JavaScript!
One game changing application of web assembly is Stackblitz's web containers.
The StackBlitz IDE now loads an entire node.js environment right into your web browser so you can execute server side code.. in the browser!? This innovation allows you to run and debug node.js servers right in the browser going full circle with JavaScript.
Web 3
Web 3 is a proposed next evolution of the internet. It proposes moving to AI driven services, decentralized data via the blockchain and edge computing infrastructure. It will facilitate decentralized applications that may offer more privacy than current platforms ran by large corporations.
While there is good reason for scepticism, there is a lot of buzz going around web 3 as many believe that it might be the next big thing. web3.js is a JavaScript library that allows you to build apps on top of the Ethereum blockchain.
You can learn more about Web 3 below.
Conclusion
Writing this proved to be considerably more challenging than I thought. Even in this 4 part series I've left out so many other important developments like REST, SOAP, languages like ruby & pearl etc. Nevertheless, I hope you enjoyed this trip through memory lane and maybe you got a peek on what's to come.
Top comments (3)
Great articles, Thank you so much
Thank you for sharing this, Nicholas!
Informative and cleanly-formatted!
I wasn't aware of what happened the past few years when it comes to web trends and history because of college stuff, but I feel like I at least learned more now.
Really great article! Thanks!