The Next Wave of Web Frameworks is BYOJS

Rate this content
Bookmark

Web application development has had many shifts over the lifetime of the web. From server-side applications with a sprinkle of JavaScript to Single Page Applications built entirely with JavaScript. Now we’re heading back to where many new web frameworks build for static first, with JavaScript added as needed. This talk covers building web applications with JavaScript through the lens of Astro, a static site generator where the choice of JavaScript framework is uniquely yours.

23 min
20 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The next wave of web frameworks is BYOJS, covering the history and evolution of building web applications. The evolution of web frameworks and build systems includes popular choices like React, Angular, and Vue, as well as advanced build systems like Webpack and Rollup. The rise of performance measurement tools and the adoption of the Jamstack have led to improved web performance. The Jamstack architecture focuses on pre-rendering pages, decoupling APIs and services, and enhancing pages with JavaScript. Astro, a static site generator with SSR support, promotes the islands architecture and partial hydration.

Available in Español

1. Introduction to Web Frameworks

Short description:

The next wave of web frameworks is BYOJS. I'll cover the history and evolution of building web applications and the different stacks used. Then I'll talk about traditional server-side applications like PHP, classic ASP, .NET MVC, and Express. After that, I'll discuss client-side applications and the introduction of bundlers like Gulp, Browserify, and Require.js.

The next wave of web frameworks is BYOJS. Hi, my name is Brandon Roberts. You can follow me on Twitter at Brandon T Roberts, where I tweet out gifs, I talk about sports and I block people sometimes, so you can follow me there. I am a maintainer on the ngRx project which is a set of reactive libraries for Angular applications. I'm also a GDE, which just means I've been around the Angular community for a while and been able to contribute some cool things there. I'm also a developer experience engineer at App-Rite.

So for the agenda for this talk, I want to cover the history and evolution of building web applications and the different stacks that I've used over the years. I'll talk about the next wave of web frameworks and the sort of the meaning of BYOJS. And I'll talk about what that means through the lens of the Astro project.

So first I'll talk about the history and evolution of building web applications. As I mentioned before, this is from my point of view, which has been a number of years. Your mileage may vary here. So let's just get that out the way up front. But I think we'll have some similarities along the way. So let's get into some history for building web applications. We have traditional server-side applications, which we'll talk about, client-side applications, and more modern server-side applications before we get into the next wave.

So for traditional server-side applications, let's talk about some of those. There's PHP, which is still a favorite amongst developers. There's also another old-school pick is classic ASP, which is similar to PHP, but using more of a .NET-like syntax. There's also .NET MVC, which is another framework from Microsoft used to build web applications with a more clearly defined separation between model, view, and controller. Express also came along as a way to serve an HTML application using various templating languages. Of course, there are many others that came along the way. These server-side frameworks did all the processing on the server and just returned the HTML. If there was any JavaScript functionality on the pages that we were building, it was more or less sprinkled in as inline scripts or lightly bundled JavaScript files concatenated together. This was usually done using the well-known jQuery library back in the day.

Now we get into client-side applications. When more JavaScript was being introduced into these applications, we started seeing more bundlers get involved in the process to optimize the process of shipping JavaScript to the users. Open source tools such as Gulp, which is a toolkit that uses a streaming build system. There's also Browserify, which is one of the early tools that allowed developers to use Node.js style modules and compile and use them in the browser. Require.js, which is a module and file loader system that also uses Node.js style imports.

2. Evolution of Web Frameworks and Build Systems

Short description:

And system.js, backbone, Ember, AngularJS, Angular, React, and Vue are some of the web frameworks that have emerged. In the React space, Next.js and Remix are popular choices. Angular Universal and Nuxt are used for server-side rendering in the Angular and Vue spaces. Webpack and Rollup are advanced build systems, while Lerna and NX are tools for monorepo development. The shift towards shipping JavaScript applications has led to the rise of performance measurement tools and the adoption of the jam stack. Tools like web.dev provide metrics for measuring page load speed.

And system.js, where it used standard ES modules that could be loaded in the browser. And with the evolution of web applications being built for clientside applications, more web frameworks came along the way. backbone, which was an early MVC framework for building client side applications. There's Ember, which heavily leans on conventions and integrations for building web apps. There was AngularJS that integrated in with existing HTML with things such as directives. Angular, its successor, which targeted more general applications. React, introduced in 2013, which really changed the way we thought about building UIs in JavaScript. And there's Vue that has come along and paved its own way as a tool to build web applications. And of course there are many other web frameworks that have come along in this space.

So for modern server side applications that were built in JavaScript, in the React space we have ones like Next.js, which is the largest React framework to date for building applications. And newcomers to this space such as Remix, which kind of combines some of the things from client and server together in a more cohesive way. In the Angular space we have things such as Universal. Angular Universal to render client side apps on the server. And for Vue we have tools like Nuxt and there are other ones in this space also.

Modern JavaScript applications also brought the need for more advanced build systems. And so some of these systems just made it easier to bundle JavaScript to ship to the client. And this also made shipping clients full client side applications a lot easier. Webpack probably being the most notable to date, which is with its rich set of plugins and customizability as roll up, which is a module bundle for JavaScript that compiles small pieces of code into something into more larger bundles such as a library or an application. Is also V that has come and taken the web landscape a storm with its speed and extensibility through plugins, and it also builds on top of roll up and is built in a different language, but it's used for building JavaScript applications. If you're in the monorepo space, there's tools like Lerna, which kind of orchestrates build tools, and it's been around for a number of years and tools like in X that have modernized open source monorepo development. And there are others in this space also that have come along as build system or tools to help developers ship web applications. Because at the end of the day, we just want to get back to shipping code and shipping applications to users and providing good user experiences. So next up, I'll talk about the next wave of web frameworks and ways to ship JavaScript, ship applications with JavaScript that have come along. So we can start with the why we have the shift in traditional server side applications to shipping only or the majority of applications using JavaScript and getting some of the new tools that are out there. One thing that really came along was the idea of our tools that let you measure performance for web applications and give you more insight into that process. There's also the rise of the jam stack, which is looking into what the definition of that is and how the different tools in that space. In what we call, what I'm calling at least for this talk, the static first or HTML first web. We have tools that measure how quickly and how long it takes for a page to load. There are also lots of well known tools out there. I'm using web.dev as a reference for the metrics that we use to measure this.

3. Web Performance and Next Wave of JavaScript Tools

Short description:

Whitehouse is a tool for measuring web performance. Metrics like time to first byte, first contentful paint, largest contentful paint, and time to interactive provide insights on JavaScript usage. HTML is the fastest way to deliver content. The next wave of JavaScript tools includes the Jamstack, SSG, server-side rendering, and HTML-first frameworks.

Whitehouse is a tool that you can use also to measure web performance for an application. And I'm just listing some of the metrics you can use to do that. There's time to first byte and time to first byte is a metric that measures the time between the request for a resource and when the first byte of the response begins to arrive. There is first contentful paint, which is measures the time from when the page starts loading to when any part of the page content is rendered on the screen. There's also largest contentful paint, which is a pretty important user-centric metric for measuring perceived load speed because it marks the point at which the page loads, page load timeline when the page's main content has likely been loaded. There's also the time to interactive metric that measures when the page starts loading, when its main sub resources have loaded, and the user is capable of responding to user input. So using these tools and metrics have allowed us to gain better insights on how we are using or overusing JavaScript in the applications. Larger bundles means more JavaScript to process and HTML has always been the fastest way to get content to users. So we wanted to look for a better mix there. So what are some of the next tools in the next wave of building applications with JavaScript? We have the Jamstack and I'll talk about kind of what the Jamstack is and how it provides some tools for building web applications with JavaScript. I'll talk about SSG or static site generators. Talk about server side rendering. And then we'll talk about the static or HTML first Web applications that are cropping up or frameworks that are cropping up now to help us ship code.

4. The Jamstack and the Static-First HTML-First Web

Short description:

The Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It focuses on pre-rendering pages, decoupling APIs and services, and enhancing pages with JavaScript. Tools like QUIC, Spellkit, Eleventy, Eels, and Astro are examples of the new wave of tools that prioritize rendering HTML first and adding JavaScript selectively. Astro, a static site generator with SSR support, promotes the islands architecture and partial hydration. It provides a balance between delivering content quickly and offering a rich user experience.

So there's the Jamstack, and the definition of the Jamstack has evolved over the years. It started out looking like something more like this, where the the Jam and Jamstack was, you know, capitalized and it meant represented that talked about using JavaScript to enhance pages, APIs, to most commonly user, things like serverless functions for offloading data, fetching from the client or integrating more code into the client there and markup, of course, HTML for rendering content on a page.

These days, Jamstack is more now defined as an architecture that's designed just to make the web faster, more secure, easier to scale. And it builds on many of the tools and workflows that developers use to help them be more productive. And that's just coming from the jamstack.org page there for the definition.

So static site generators are focused on pre rendering where the pages are rendered at build time and served on the client without any HTML included there. And the jamstack, they're also focused on decoupling APIs and services from the client side applications and enhancing these pages with JavaScript because HTML is already rendered instead of using the JavaScript to render the render the page in its entirety. There's also server side rendered applications which fall in this space where the pre rendering is done on the server and then sent to the client. And after the page is rendered, the client side JavaScript is loaded and rehydrated the page to make it more interactive. And this is also where we are still shipping a single or maybe a few bundles to the client to handle this on the in the client side application. And as I mentioned before, this provides faster time. Interactive metric if we're measuring the performance of the page itself. So each one of these tools have kind of moved, moved in that direction of trying to, of course, trying to get the content and data as quickly to the client as possible. I should also mention that HTML has always been the quickest way to get there. So these new wave of tools are moving to what is called a static first web, or HTML first web, where the primary way is rendering HTML and then adding some JavaScript in some unique ways there, or not even adding JavaScript at all, for the different types of websites they're going to build.

Some of these tools include QUIC, which is a relatively new HTML first framework that renders all the HTML using SSR and only, at a very granular level, only generates the JavaScript that you need. There's also Spellkit that uses server-side rendering with progressive enhancement to enhance the page where you still get the benefits of HTML first and with the additional functionality there. There's also Eleventy, which was created as a JavaScript alternative to Jekyll. This also ships zero-client-side JavaScript up front. Another tool that I recently found out about is called Eels that's new in this space and then there's Astro, which I'll talk about further. That is a static site generation tool that has additional integrations. As I mentioned before, Eels is relatively new and was kind of inspired by Astro. But the biggest thing we want here is balance where we still get content to the users as quickly as possible while providing a rich user experience for web applications.

So next up, I want to talk about this new Static-First HTML-first web through the lens of the Astro project. Now, Astro is a static site generator that also has recently added support for SSR server-side rendering. Ships zero JavaScript out of the box when it's rendering the app pages in your website. It promotes things such as the islands architecture and uses partial hydration, which I'll get into further and has integrations. And then we talk about what that means in the world of BYOJS as I call it. So the static site generator, you're dealing mostly with Web sites here, so you are building things like landing pages, marketing sites. There's also blogs, things that don't require a lot of user interactivity or maybe just a little bit of user activity, interactivity and just general making a just general differentiation between Web sites and Web applications.

5. Astra and the Islands Architecture

Short description:

Astra uses server-side rendering to strip away JavaScript and ship only the markup. It supports partial hydration for interactive components. The islands architecture loads components independently. Directives control component loading based on visibility and user activity. Astro integrates with popular frameworks, allowing static rendering and later interactivity. Learn more at astro.build.

As I mentioned before, Astra ships zero JavaScript by default. So it uses server side rendering or user service rendering to render these components on the page. And it does that by stripping the all the Javas using the rendering the page on the on the at build time and stripping all the JavaScript away from the page and only shipping you back the markup so that you can, you know, use that with your styles to present that data to the user.

And there are areas where you as I mentioned before, it supports partial hydration. So there are areas where you will need some interactivity. And it uses that by only providing or only loading what's needed for the client at that particular time. So each specific component has a maybe has a certain set of JavaScript functionality. And these include examples like an image carousel or an auto complete search bar or even a mobile sidebar. These are things that were rendered on the client. You still want to have some JavaScript there to, like I said, kind of enhance that experience.

And as I mentioned before, the islands architecture is the idea of using partial hydration to build entire websites. And this is an alternative to the common process of building a website, like a plea in JavaScript and shipping that entire bundle to the user, whether this be a single bundle or maybe a few lazy loaded bundles. But we still get those components loaded individually for the website or maybe a small web application itself. And all these things are loaded in isolation, in other words that they aren't connected to each other in any way so they don't have any dependencies on what's needed to be loaded for those.

So looking at an example page, we have some distinct areas here. We could have a header page where the header is loaded independently on its own island. A navigation bar on the side that may have its own subcomponents there in the main area to display content for the page. And as I mentioned before, all these things are considered islands and isolated and loaded independently from each other.

So this islands architecture or the components in the islands architecture also make use of these different directives. And these are directives that when loaded used on the components, they can tell you when the component is low or when the page is loaded to load the component. When the component is actually visible on the page to not load the Javascript until that component is there. Or if the user is browsing the page and they are idle, then to load those components. So definitely making use of deferring that as far as possible for showing that to the or loading that JavaScript for the user.

So what does this mean in terms of the BYO JS that I've been talking about mentioning during this talk? So BYO JS is bring your own JavaScript framework, included there. And Astro does this through integrations. So Astro is different that you can bring your existing knowledge of your framework of choice and Astro knows how to. Integrate with those web frameworks and render those components on the page statically. And add interactivity to those components later when you need on the client, so you get a little bit of the best of both worlds.

Astro supports just about all the commonly used frameworks that support components out there, such as React, Vue, Svelte, Solid, and more. There are more that I just listed here. They also have APIs that would allow you to potentially integrate any JavaScript framework into an Astro application. You can learn more about the Astro project at astro.build. You can read more through the docs, learn more about the integrations and see how it can help you build websites faster there. So definitely check that out.

So to recap, I talked about the history and evolution of building web applications, using service or traditional service side, client side, and applications and frameworks. Talk about the next wave of web frameworks, some of that are out there today, such as using the Jamstack and other tools in that space. And talked about the Astro project.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Tired of rebuilding your React-based web framework from scratch for every new project? You're in luck! RedwoodJS is a full-stack web application framework (think Rails but for JS/TS devs) based on React, Apollo GraphQL, and Prisma 2. We do the heavy integration work so you don't have to. We also beautifully integrate Jest and Storybook, and offer built-in solutions for declarative data fetching, authentication, pre-rendering, logging, a11y, and tons more. Deploy to Netlify, Vercel, or go oldschool on AWS or bare metal. In this talk you'll learn about the RedwoodJS architecture, see core features in action, and walk away with a sense of wonder and awe in your heart.

Workshops on related topic

JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
React Day Berlin 2023React Day Berlin 2023
119 min
Crash course into Astro and Storyblok
WorkshopFree
Headless architecture has gained immense popularity in recent years for its ability to decouple the frontend and backend, empowering developers to create engaging, interactive, and scalable web applications. 
In this workshop, we will quickly take a dive into the Headless World and Architecture. 
Additionally, we will build a blog website super quickly using Storyblok, a headless CMS that offers a real-time preview feature with nestable component approach, and Astro (3.0) which is already creating a buzz with the new app directory. 
- Master headless CMS fundamentals- Master an Astro & headless CMS approach- Use Atomic design in your Astro & Storyblok application- Creating pages, adding content and understanding how the dynamic routing works with headless
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

https://github.com/nearform/the-fastify-workshop