The Wind and the Waves: The formation of Framework Waves from the Epicenter

Rate this content
Bookmark

What do you do when you're a framework that's survived and innovated in two JavaScript Framework Waves, and see the new wave cresting in the distance? You innovate. In this talk, we explore the JavaScript Framework landscape, and some of the major competitive features we've seen. We'll explore what Angular is introducing today and where we're headed in the future.

20 min
20 Jun, 2022

Comments

Sign in or register to post your comment.

AI Generated Video Summary

Our understanding of innovation is wrong. Innovations are not introduced by a single point of light. The story of who invented the computer is not linear. Many steps forward led to the development of the computer. Angular has shaped and influenced multiple JavaScript waves, and Angular v14 simplifies development with standalone components.

1. The Complex History of Computer Innovation

Short description:

Our understanding of innovation is wrong. Innovations are not introduced by a single point of light. The story of who invented the computer is not linear. Many steps forward led to the development of the computer. Several inventions and individuals contributed to the modern computer, including ENIAC, Colossus, Aiken's Mark I, the Z3 and Z4, Turing's theory, Claude Shannon's information theory, Jacquard's Loom, Babbage's calculators, Edda Lovelace's concepts, the computer chip, the prototype of the modern computer, and Ethernet. Innovation is a system, interconnected and driven by various spectrums of innovation.

Our collective understanding of innovation is wrong. It may seem at first like problems are solved and innovations are introduced by a single point of light, a lone person having a eureka moment. However, we can see that for any major innovation, this is just not the case.

For instance, let's take the story of who invented the computer. It may at first seem linear, like a single event and a single implementation was the start. However, it was not one, but many steps forward. Maybe under certain definitions it was ENIAC, widely regarded as the first electronic, general purpose digital computer. There were other computers that had all these features, but the ENIAC had them all in one package. That said, it wasn't binary. Colossus was also regarded as the first programmable digital computer, although it was programmed by switches and plugs, not a stored program. Binary being pretty important, maybe you want to trace it back to Aiken's Mark I, which had binary principles, but wasn't electronic. Each storage location, set of switches, and registers were assigned a unique index number. These numbers were represented in binary on the control tape. However, the Z3 and Z4 were the first programmable computer. Atzinosoff and Berry designed the first digital electronic computer, the first time a computer was able to store information on its main memory, but none of those would have been possible without Turing's evolving theory, writing his uncomputable numbers, where he defines what we now know as a Turing machine. But also Claude Shannon laid the foundations of information theory. His theories laid the groundwork for all electronic communication networks, but also EDVAC, Manchester Baby, the Franzi Mark I, and IBM all brought new developments to bear, all of which influenced important pieces of what make up a computer.

But none of this would have been possible without Jacquard's Loom, which was a set of cards to produce a pattern in a weave in a cloth, way back. Or Babbage, who created two mechanical calculators, one was the Difference Engine, and the other was the Unfinished Analytical Machine. Or Edda Lovelace, who invented the concepts of modern computers, including software and subroutines. She thought about how computers could handle any subjects, not just numbers, and that data could be represented in digital form and published the first computer program. But then this really does depend on your definition of a computer, whether you mean modern computer or not, because what would computers be without the computer chip? Jack Kilby and Robert Noyce unveiled the integrated circuit known as the first computer chip. Or what about when the prototype of the modern computer was shown in a research center for augmented human intellect, including a mouse and a GUI? And really, what would modern computing be without the development of Ethernet, for connecting multiple computers and other hardware? As Matt Ridley says in How Innovation Works, the innovation of a computer can no longer be pinpointed into a single product than one can pinpoint the moment a child becomes an adult. For even one of these pieces, we can see that they're interconnected and not just on a linear time scale, but also connected by what spectrum of innovation it pushed forward the most. And thus, we see that innovation is a system, a series of interconnected frequencies. Innovation is connections. Innovation is a network.

2. The Formation of Framework Waves

Short description:

Innovation is not a singular eureka moment. Today, we're going to talk about the formation of framework waves from the epicenter. Angular has shaped and influenced multiple JavaScript waves. The first versions of Angular drew inspiration from Rails and JQuery, leading to the emergence of other frameworks like Ember, Handlebars, Backbone, and Knockout.

Yet many talk about innovation as a light bulb turning on, on an aha moment that strikes only the most brilliant of creators. But even the light bulb was invented simultaneously by 21 different people in different parts of the world. Edison might've gotten that final patent over the line, but the innovation of the light bulb was slow, cumulative, and inevitable. Innovation is not a singular eureka moment.

So what does it take to make an entirely new and useful thing out of things that already exist? How do we create a seismic shift out of things that were here before? We often talk about the waves of JavaScript frameworks, that single moment in time where a framework hits massive relevance. But we don't talk about what makes up a wave. Waves are not created on their own. They're created by a force of nature, the wind. And so today, as we talk about innovation in the industry, we're going to talk about the wind and the waves.

I'm Sarah Drasner, and today we're going to talk about the formation of framework waves from the epicenter. So who am I to talk about this stuff anyway? Back in the day I was a React developer. I keynoted React Rally in 2016 among some other conferences, and then eventually found Vue and became enamored with it, eventually becoming a Vue core team member. In September of last year, I took a director of engineering job at Google, including but not limited to the JavaScript and TypeScript languages, web testing, including Karma, and a few frameworks, one of which is Angular. I don't personally run the Angular team. You can think of me more like Angular's grandma. And although I'm going to focus a lot on Angular today, know that what I'm telling you, know that I can tell you the same story from the perspective of focus of a number frameworks, as the point is that we all do learn from one another. However, what I think is unique and intriguing about Angular is how well it survived. It's shaped and influenced multiple JavaScript waves in ways that I think few fully realize. And in turn, learns and grows and is continuing to grow from those around it. So basically, when I see other frameworks thriving, I feel very happy for them, too.

Which leads me to, how did we all get here? And how did Angular play a part? In order to see where it's going, it's helpful to learn from the past and where we came from. But I'll warn you, this is a contentious area, and people might not always agree on some of these points. Remember how I said that innovation was more like a network or a system than a single aha moment? And remember how I said that Angular and others have stood the test of time? Well, none of these frameworks were made from thin air. The first versions of Angular and AngularJS was one of the most modern JS frameworks, and it drew inspiration from its predecessors, Rails and JQuery. Neither of which I'd really categorize as a modern JS framework, as we know today. From there, we have Ember, also in this first wave, drawing inspiration from Rails as well. Handlebars, which Yehuda Katz worked on previously. And AngularJS spa capabilities. Then we have Backbone, learning also from Angular, but also MVP approaches. And Knockout, which learned from Handlebars in jQuery, introducing important concepts, such as in computed properties.

3. Formation of Framework Waves

Short description:

In the second wave, React drew from AngularJS, focusing on the view layer only. Redux drew inspiration from Elm. The second version of Angular learned from React. Vue took inspiration from AngularJS, React, Knockout, Elm, and Redux. Svelte simplified previous approaches with state stores. Next and Next.js are popular meta frameworks. Solid is doing industry-shifting things. Angular has lasted multiple waves.

In the second wave, we have React drawing from AngularJS, but dropping the M and the C from MVC and focusing on the view layer only. It was also inspired by Backbone. And Redux, heavily adopted at times for state management, drew inspiration from Elm.

The second version of Angular obviously drew inspiration from the first, but also learned from React. And Vue took inspiration from many sources, AngularJS for some template and authoring and binding, React for a Vue layer-only approach, Knockout for computed properties, and Elm and Redux for Vuex state management.

Svelte simplified a lot of what came before it, drawing from many modern framework concepts, but leaning more heavily into the compiler and simplifying some of the previous approaches mentioned with state stores. You'll notice that I haven't told you my bets for this third stage because I'm not a weatherman. I will note that meta frameworks such as Next and Next have become quite popular and note that Solid is doing some amazing and potentially industry shifting things. And lastly, I'll note again that it's impressive that Angular has lasted multiple waves.

4. Advancements and Improvements in Angular

Short description:

Angular has made significant advancements and improvements over the years. The team has been inspired by various frameworks and technologies, such as Svelte, Vue, Solid, React, and Aurora. The introduction of Ivy, a ground-up rewrite of Angular's renderer, has brought numerous improvements, including an improved codebase organization, better integration with IDEs, speed improvements, and stricter checks. Angular is now focusing on advanced features and simplifying development, with a specific focus on strictly type forms.

I mentioned that Angular influenced a lot and it might be hard to see as stands of time tend to wash these things away. Angular developed Spas, first class usage of TypeScript, test integration and harness, actually even today when you create a new component, you get all of this test infrastructure pre-built for you. Tree shaking, ahead of time compilation and first compile time built-in internationalization with zero runtime overhead and mature CLI driven updates. That last one is really impressive, especially as I run infrastructure team at scale, those updates being so seamless is really important.

That said, Angular does not sit or stay still or sit alone. One of those things that I've noticed in time is that I've spent with the Angular team is how humble and curious and eager to improve the team is. Angular is working on a ton of improvements right now and is currently inspired by Svelte's authoring simplicity, Vue's approach to SFCs, Svelte's stores and simplified state management, Solid's reactivity, React's unidirectional data flow, Vue's animations, and Aurora, as seen, you know, Aurora is in the Chrome team, they worked with Next.js on an image component. We are also subsequently working with them as well. So, you may have noticed that improvements to Angular's external feature set has halted over the last few years, calling into question by many, has Angular stalled? Well, the team has had to pause on some of those features due to Ivy. You may or may not have heard what Angular has been working on for many years, Ivy was a massive ground-up rewrite of Angular's renderer. Ivy was our exploration of how to build a framework that can evolve over time, shipped in the last year. You can liken this update to what many of you React OGs will recall, an update called React Fiber many years ago. The team worked on changes to the RIG reconciliation algorithm under the hood. And recently Vue did an upgrade of the internals as well called Vue 3, rewritten in TypeScript and a complete rewrite of the reactivity system. What do all these under-the-hood rewrites have in common? Well, they have massive gains but a slight trade-off that some other work on the framework can slow for a time. However, Ivy brought with it a bunch of great improvements. For instance, we've seen an improved codebase organization, since tech debt has decreased and the code base is more organized, which makes it much easier to do more improvements coming up. Angular language service has allowed for better integration with IDEs, like VS code, and improved syntax highlighting and more informative tool tips. We've seen significant speed improvements as well as bundle optimizations and stricter checks to test, as well as improved compilation errors. Here is an example of that last one. Let's say you add a component without fully registering it and there's now more CLI information about what is missing and where so that you can spend less time debugging and more time being productive. Now that these updates are done and Angular is evolving, that brings us to today. We're focusing on two major themes, advanced features and simplifying development.

So, and in that advanced feature set, today we're going to talk about strictly type forms, advanced styles, resource inlining, updates and error handling and streamlining page title accessibility. First, let's talk about strictly type forms. One of Angular's nice features is built in form validation. You can see here how easily I write and build in reactive form validation in only a few lines of code with no external library or setup. In previous versions of Angular, even as I wrote this validation, the type was cast to any. This is a shame given the strength of typescript to do this kind of evaluation. So in previous versions in Angular V13, you can see that that form state is any.

5. Angular's Form Validation with TypeScript

Short description:

Angular has added a highly requested feature in V14 - form validation with TypeScript. This feature allows for strong typing and provides great insights and type checking in forms, enhancing the debugging and developer experience without the need for external libraries or interrupting TypeScript.

You can see how many people have asked for this. We've got almost 1,000 thumbs up in this issue in the repo. Oh, no. But have no fear. We just added a feature that is both something that should be improved and something that's way ahead. Angular already has form validation baked in and now we leverage our usage of typescript for strongly typed forms and validations as well. It's Angular's most requested feature, now shipped in V14. To see it in use, we now get great insights and type checking in our forms, making the debugging and developer experience much more powerful, without having to add any external libraries or interrupt with typescript.

6. Advanced Features and Improvements in Angular

Short description:

Angular has introduced advanced features for styles and resources like components. You can now add inline Sass styles without a ton of config, and easily integrate Tailwind's libraries. Performance resource inlining has been improved, allowing critical fonts to be inlined and style sheets to load asynchronously. Angular's ng-update and ng-schematics provide detailed information and seamless codebase transformations. Enhanced template diagnostics, better error messages, and new runtime error codes have been added. Angular CLI now offers auto-complete functionality and streamlines page title accessibility.

Great. Let's talk about some of the advanced features that Angular has for styles and resources like components. So, one great new feature is that you can now add inline Sass styles without a ton of config. For instance, just dropping this into a component. It offers sophisticated effects like this with just a few lines of Sass mixins directly inline.

Or we now have built-in Tailwind config. You can add a Tailwind config file that will register in the application allowing for seamless integration with Tailwind's libraries. Which brings us to another feature that's great for performance resource inlining. Say we want to add a style sheet to our application. We can do so, but notice this is render blocking, causing users to wait for everything to load. Similarly for fonts, we're downloading the font family every time we serve this request. But with this simple addition to our AngularJSON, we can now see critical fonts inlined in a style tag and our style sheets have been updated to load asynchronously.

Awesome. I already mentioned that Angular has been ahead of its time in terms of updates and migration, but ng-update and ng-schematics have been worked on to provide even more detail and useful information. Some of this is due to the fact that Angular runs at scale, and for such projects such as Google Cloud, Angular has some of the most sophisticated upgrade functionality in the industry. Within Google, we do what we call LSCs, or large scale changes, and we use ng-update to transform the codebase seamlessly providing sophisticated logs and error reporting along the way. That means that Angular can continuously improve over time with smaller risk to its users. We learned about breakage the hard way. And codebases aren't littered with many different ways to do things and write components, which is often the case when upgrades happen in large code bases, where people don't have time to update every single component. And everything still is backwards compatible. ng-update plugs into the same AST that we use for TypeScript. And we've now added enhanced template diagnostics, which give great error detection, especially for common errors that could potentially be difficult to debug for people first working with the framework. Here we see a binding error that we affectionately call banana in a box. Because banana is delicious and arguably the funniest fruit. Other better error messages include nullish coalescing errors and tree shakable error messages. We now have new runtime error codes. These error codes make finding references on how to resolve the errors that you might encounter. This includes, this allows the build optimizer to also tree shake error messages from production bundles. Angular CLI now offers auto-complete functionality as well, which keeps developers in the flow of their tasks more readily. And another really important feature is streamlining page title accessibility.

7. Angular's Simplification and Future Advancements

Short description:

Angular v14 simplifies development with standalone components, eliminating the need for writing and updating NgModules. The future holds even more advancements, as Angular tackles larger developer experience gaps and continues to learn and be inspired by others in the industry. The core team has grown, allowing for the resolution of outstanding issues and technical debt. Exciting improvements are on the horizon, including an easier API, revamp of the reactivity system, improved performance, better hydration and SSR, enhanced accessibility, and a documentation revamp. Angular is committed to pushing the web framework ecosystem forward while learning from others.

This is important in SPA approaches because, without intention here, the title of each page would remain the same, which is the first thing a screen reader reads upon root change. So as of v13.2, Angular router now offers a streamlined new title property that helps people using assistive technology understand the content title and purpose of the page. You can also create a more complex logic for dynamic and conditional page titles as well by extending the title strategy.

Okay, we've just talked about a bunch of different improvements and advancement. This brings us to our next subject, simplification of development. Angular v14 is just the tip of the iceberg in what we're taking on to make the developer experience much more seamless. In it, we're offering standalone components where devs no longer have to worry about writing and update NgModules. For those of you unfamiliar with Angular, you may ask what does that mean? Here's an example of a lazy loading component. Previously, in NgModule, we'd have written our imports and then we get to writing our routes and our routing configuration. Today, we remove a ton of that configuration. We just focus on our routes alone, writing our lazy loading component like so. Today, we have a number of these types of improvements rolling out, streamlining the developer experience and removing a ton of overhead for code that people need to write, learn, and build.

So that brings us to the future. After the Ivy completion this year has been an avalanche of these smaller quality of life features. These improvements are just the beginning. Next year, Angular is tackling larger developer experience gaps. So what I presented today is really just the tip of the iceberg and what's under development now are some larger strides forward with this framework that I can't wait for. Next year and the years to come are gonna be really exciting. Aside from that, the core team has grown which enables us to hammer on some outstanding issues and pay down technical debt that this humble and hardworking team is really proud of. Coming up you'll see a lot of really great improvements many of which as I mentioned before are inspired by the great work of others in the industry. An easier and simplified API including state management inspired by Vue and Svelte. Revamp of the reactivity system inspired by Solid and Svelte. Improved performance image components, script loading working with the Aurora team in Chrome addressing core web vitals. Better hydration and SSR inspired by so many people in the industry. Better stack traces, better accessibility more reusable headless ARIA primitives and the documentation revamp with new interactive onboarding and examples. Angular both pushes the web framework ecosystem forward and also learns from and is inspired by those around it. And this is how we all evolve. It's never in isolation it's by learning from each other.

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
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
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
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
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)
JSNation 2022JSNation 2022
116 min
Get started with AG Grid Angular Data Grid
WorkshopFree
Get started with AG Grid Angular Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you’ll learn a powerful tool that you can immediately add to your projects. You’ll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created and customized an AG Grid Angular Data Grid.
Contents:- getting started and installing AG Grid- configuring sorting, filtering, pagination- loading data into the grid- the grid API- add your own components to the Grid for rendering and editing- capabilities of the free community edition of AG Grid
JSNation Live 2021JSNation Live 2021
113 min
Micro-Frontends with Module Federation and Angular
Workshop
Ever more companies are choosing Micro-Frontends. However, they are anything but easy to implement. Fortunately, Module Federation introduced with webpack 5 has initiated a crucial change of direction.
In this interactive workshop, you will learn from Manfred Steyer -- Angular GDE and Trusted Collaborator in the Angular team -- how to plan and implement Micro-Frontend architectures with Angular and the brand new webpack Module Federation. We talk about sharing libraries and advanced concepts like dealing with version mismatches, dynamic Module Federation, and integration into monorepos.
After the individual exercises, you will have a case study you can use as a template for your projects. This workshop helps you evaluate the individual options for your projects.
Prerequisites:You should have some experience with Angular.
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
JSNation 2023JSNation 2023
66 min
Build a Universal Reactive Data Library with Starbeam
WorkshopFree
This session will focus on Starbeam's universal building blocks. We'll use Starbeam to build a data library that works in multiple frameworks.We'll write a library that caches and updates data, and supports relationships, sorting and filtering.Rather than fetching data directly, it will work with asynchronously fetched data, including data fetched after initial render. Data fetched and updated through web sockets will also work well.All of these features will be reactive, of course.Imagine you filter your data by its title, and then you update the title of a record to match the filter: any output relying on the filtered data will update to reflect the updated filter.In 90 minutes, you'll build an awesome reactive data library and learn a powerful new tool for building reactive systems. The best part: the library works in any framework, even though you don't think about (or depend on) any framework when you built it.
Table of contents- Storing a Fetched Record in a Cell- Storing multiple records in a reactive Map- Reactive iteration is normal iteration- Reactive filtering is normal filtering- Fetching more records and updating the Map- Reactive sorting is normal sorting (is this getting a bit repetitive?)- Modelling cache invalidation as data- Bonus: reactive relationships