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.

This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

A common misconception about innovation is that it is driven by a single eureka moment or a lone genius. In reality, innovation is a cumulative process involving many interconnected steps and contributions from various people over time.

The ENIAC is widely regarded as the first electronic, general-purpose digital computer because it combined multiple features in one package, although it was not the only computer with those features.

Ada Lovelace invented the concepts of modern computers, including software and subroutines. She published the first computer program and theorized that computers could handle subjects beyond mere numbers, representing data in digital form.

Jack Kilby and Robert Noyce unveiled the integrated circuit, known as the first computer chip, which was crucial in the development of modern computers.

AngularJS influenced modern JavaScript frameworks by introducing single-page application (SPA) capabilities and drawing inspiration from its predecessors like Rails and jQuery. It also inspired frameworks like Ember, Backbone, and React.

Angular's Ivy renderer, a ground-up rewrite of Angular's renderer, brought improved codebase organization, better integration with IDEs, significant speed improvements, bundle optimizations, and stricter checks and improved compilation errors.

Strictly typed forms in Angular leverage TypeScript for strong typing and validation, making debugging and development more powerful without needing external libraries. This was Angular's most requested feature and was introduced in version 14.

Resource inlining in Angular allows for critical fonts and styles to be inlined in a style tag, which improves performance by preventing render-blocking and making resources load asynchronously.

Upcoming features in Angular to improve developer experience include standalone components, simplified API inspired by Vue and Svelte, revamped reactivity system, better performance and SSR, improved stack traces, better accessibility, and enhanced documentation.

Innovation, in the context of the light bulb, is described as a slow, cumulative, and inevitable process rather than a single eureka moment. The light bulb was invented simultaneously by 21 different people around the world, with Edison ultimately securing the final patent.

Sarah Drasner
Sarah Drasner
19 min
20 Jun, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
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.

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

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Don't Solve Problems, Eliminate Them
React Advanced 2021React Advanced 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced 2023React Advanced 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
Watch video: React Compiler - Understanding Idiomatic React (React Forget)
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.

Workshops on related topic

React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced 2021React Advanced 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Build with SvelteKit and GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetsov
Mikhail Kuznetsov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.