How Serverless and ReactJS are Changing the Rules of Web Development

Thomas Witt
by Thomas Witt 16 Jan, 2023

By Thomas Witt, Scrivito

We all know the adage "Fast, Good, Cheap - you can only pick two." Develop something quickly with high quality, but it will be costly. Develop it fast and on a budget, but you'll lose quality. Develop with quality and and low cost, but it will take a long time.

 

The same goes for the three rules of modern web development: speed, security and interactivity. With legacy, server-based CMS like Wordpress et al, developers and content owners have become accustomed to picking just two. However, we're at the dawn of a web development revolution that's making it possible to have all three. No more sacrifices. No more servers.

 

Yes, that's right: it's time to leave the server-based world behind.

 

Serverless is here

Putting talented developer resources towards lengthy server maintenance work or even daily, security patching has become a necessity that people have somehow accepted to live with. However, with ever mounting time-to-market pressures and budgets under scrutiny, that's a 'luxury' you can no longer afford.

 

Considered the next generation of cloud computing, serverless computing - and more specifically, serverless CMS technology - makes it possible to build powerful apps and websites without the need for a server and the maintenance efforts that come with it. Plus, by removing the server, you also remove the attack vector: no more patching because the code runs in the browser and not on your machines.

 

When you combine serverless with ReactJS, the innovative JavaScript library that's now compatible for use by the masses and backed by Facebook, things start to get even more interesting, opening up the possibility to quickly develop and render rich, interactive websites and apps client-side. Often referred to as just React, ReactJS compartmentalizes each page element so when an edit is made, only that element is updated. Compared to legacy solutions that require re-rendering the whole page to see changes, any UI changes (big or small) with React are loaded in real time. Because React allows the web developer to think in independent components from which the page is composed - e.g. sign-up widget, headlines, images, Google maps, tables, interactive calculators - there's more freedom to quickly create new pages. This shrinks development, maintenance and content lifecycles, while still ensuring great performance.

 

The dream team of React and serverless also makes it easier than ever to optimize the user experience. This becomes especially important as web pages become more app-like, because less data has to be transferred and all rendering takes place on the client. Performance metrics shift from volume of interactions to user experience: now, speed and performance across a growing number of devices is what counts, and the success of websites and apps hinges on dynamic front-ends, highly interactive content and sleek UIs.

 

Catalyzed by the momentum of serverless computing and React, the web development revolution is all about doing more with less: speeding up development, ensuring maximum security and delivering a better experience for both users and developers.

 

Five Point Serverless Action Plan

Here's what you need to know to get on board with the serverless web development revolution.

 

1-Evaluate your web development tools against JAMstack requirements and go serverless. Put aside how you used to define "the stack" - and the operating systems, specific web servers, backend programming languages and databases that went with it. JAMstack suggests a new approach in line with serverless computing: a modern web development architecture based on client-side JavaScript, reusable APIs (custom built or third party) and prebuilt Markup (static code that is evaluated in the browser at runtime.) By evaluating your tools against JAMstack guidelines, you'll be better prepared to create seamless, interconnected, secure experiences cost effectively and at scale. Stop running servers and databases and connect directly to your serverless APIs from JavaScript/ReactJS.

 

2-Know when to use React. Are you re-launching a site? Needing to create an ecommerce site with interesting SEO content? Quickly fire up a microsite or event site that demands a rich experience, but only lives so long? React is a great choice in these scenarios. In fact, in some cases, building a site with React is a better choice than building an app; you can maximize resources, cut costs and slash deployment cycles.

 

3-Take advantage of a component-based approach to go at your own pace. By breaking down the functionality of a site into components - independent, encapsulated and reusable pieces - React makes it possible to leverage a degree of prefabrication to integrate into your site in small steps and lower cost and effort. You're no longer limited to a templated approach of legacy CMS; once you implement an element from the library of components (e.g. CRM integration), you can easily reuse it across projects - a big win for a digital agency managing multiple client sites, or an organization with sites for different countries and products.  

 

4-Make load speed a priority. Whether your motivation is consumer experience, or the fact that Google is now ranking load speed on both desktop and mobile, you need to establish the fastest desktop and mobile experience possible, turning it in a more native app-like experience. And this applies not just for the initial page, but also for every subsequent page, as well as for assets like images and videos which should reside on a global CDN by default.

 

5-End the constant friction between app development and web development teams. As the lines between websites and apps continue to blur, connecting web and app development can speed up development and save you money. With the mobile framework React Native, you can create cross-platform native apps by recycling code - write code once and repurpose it for mobile rather than creating two completely separate instances.

 

The web development revolution is all about speed, security and interactivity. And those ready to update their approach will be rewarded with removing huge obstacles in the development cycle and competitive advantage that can't be matched with legacy systems.

 

About the Author: Thomas Witt is a founding partner and head of product development of Scrivito, the world's first serverless SaaS Content Management Service/System. Backed by the Berlin-based software company Infopark AG, Scrivito is revolutionizing the way websites are built and managed.  Working with Internet technologies since 1990, Thomas is an experienced engineer and a proven expert in Web and cloud computing technologies. Since 1997, he has been responsible for managing Infopark's products and its strategic technical decisions. Thomas is regularly invited to speak at international conferences about the latest trends in web development technology.