Preface

Welcome to the first Framework Field Guide book titled "Fundamentals." This book is the culmination of a nearly 10-year-long professional software development career. It's also been over two years of writing, editing, and polishing, and is the first of what will be a trilogy of books teaching frontend web development.

This series will teach you how to build applications, the concepts under the hood of modern web frameworks, and the advanced coding patterns to help you level up your engineering.

While other resources can help you learn these concepts for one framework at a time, this series will help you learn three different frameworks at once: React, Angular, and Vue.

Namely, we'll be looking at the most modern iterations of these frameworks: React 18, Angular 17, and Vue 3.

It's worth mentioning that React and Angular iterate their major versions much more frequently than Vue. So if you're reading this in the future and see "Angular 24" or "React 22," it's likely that it's using similar concepts under the hood.

We can do this because, despite being different in many ways, these frameworks share the same foundational ideas that run the show in any modern application. That's not to say they are the same, however, and because of this, I will take the time to take asides for each framework to explain where they differ and how they work under the hood individually.

By the end of this series, you should be able to confidently navigate any codebase using these frameworks.

But I'm getting ahead of myself; first, let's answer some fundamental questions.

Why Should I Learn Web Development Today?

Learning web development is a vital skill in software engineering. Even if you don't end up working on web tech yourself, the likelihood of a project eventually using web tech is exceptionally high. Knowing and understanding the limitations of a web's frontend can:

• Make Communicating with those teams simpler.
• Make structuring effective backend APIs easier.
• Allow you to transfer that knowledge to other UI development.

What's more, there's an absolutely gargantuan job market. To quote the U.S. Bureau of Labor Statistics:

Employment in computer and information technology occupations is projected to grow 13 percent from 2020 to 2030, faster than the average for all occupations. These occupations are projected to add about 667,600 new jobs.

[...]

The median annual wage for computer and information technology occupations was $91,250 in May 2020.

While this number may be specific to the U.S., and other countries and markets may have different rates, programming tends to be a good bet for a sustainable long-term career.

Why Should I Learn These Tools?

While web development is broadly helpful to learn as a skill for work in engineering, these frameworks, in particular, are a considerable boon to learn.

Ecosystem Size

For starters, these tools are massively adopted. React, Angular, and Vue account for 9% of the web in 2021 and are consistently growing. While that might not sound like much, remember that there are over 1.9 billion websites as of 2022; Even 1% accounts for nearly 10 million sites.

For example, React accounts for 17 million weekly downloads from NPM alone and powers Meta's products (including Facebook, Instagram, and Messenger). In addition, React is used by a vast quantity of companies; everyone from Fortune 500s to hot startups is using React in some capacity.

Likewise, while smaller, Angular is alive and well today (unlike its eerily similarly named yet distinct predecessor, "AngularJS"). Angular gains over two million downloads a week from NPM and powers sites such as Microsoft's Xbox website, Office Web Home site, Google's Voice website, Messages site, Firebase's dashboard, and many, many, many more.

Finally, Vue has gained rapid growth in the last few years. From gaining 50 million downloads in 2019 to over 125 million in 2022 on NPM, it's seen staggering success in the ecosystem. What's more, Vue sees uniquely high levels of adoption in China. Among the adopters of Vue in China are Alibaba, a major shopping site, and Bilibili, a video-sharing platform.

Ecosystem Tools

While ecosystem size is great and all, it's nothing without a swath of tools at your disposal to enhance the developer experience and capabilities of said frameworks.

Luckily, for all three frameworks alike, myriads of tools build upon their foundation.

For example, do you want to add Static Site Generation or Server Side Rendering to your projects to enhance SEO? No problem: React has Next.js and Gatsby, Angular has Angular Universal and Analog, and Vue has NuxtJS and VuePress.

Want to add a router to add multiple pages to your apps? React has the "React Router", Angular has its built-in router, and Vue has the "Vue Router".

Do you want to add global state management, making sharing data across an entire app easier? React has Redux, Angular has NgRx, and Vue has Vuex.

The list of lists goes on and on. What's better is that the list I gave for each is non-comprehensive!

In fact, while these frameworks are traditionally associated with the web with the browser, there are even ecosystem tools that allow you to embed Angular, React, or Vue into mobile and native applications.

These tools include ElectronJS and Tauri for desktop applications, alongside React Native and NativeScript for mobile. While React Native only supports React, the other options I mentioned support the three frameworks we'll touch on.

While this book, in particular, will not touch on most of the ecosystem, the second book in our trilogy will be titled "Ecosystem." "Ecosystem" will teach you how to integrate the foundation of knowledge this book introduces to build out more complex applications with these community tools.

Who's Building What?

This isn't to say that the only reason these tools will stick around is because they're popular; each of these frameworks has at least one prominent backer behind them.

React is built by Meta and powers all of its major applications. Moreover, the core team has started to accept external contributions through feedback on the framework's development via "working groups" consisting of subject-matter experts. In recent years, even groups like Vercel have hired React core members to work on the project from outside of Meta.

However, when most mention "React," they tend to talk about the React ecosystem at large. See, the core maintainers of React itself tend to remain focused on a small subsection of tooling. Instead, they rely on external groups, like Remix and Vercel, to provide libraries that are often integral to application development.

On the other hand, Angular is fully funded and supported by Google. They build a substantial portion of their major websites on top of the framework and, as a result, have a vested interest in continuing and up-keeping development. Continuing the differences from React, the Angular core team maintains a slew of helper libraries that provide everything from an HTTP call layer to form validation.

Vue is often seen as the odd one out when talking about funding. Vue's development is driven by an independent team crowd-funded by a diverse pool of groups and individuals. However, while it's unclear how much money they bring in, it is clear that there are significant-sized financial contributors involved, such as Alibaba, Baidu, Xiaomi, and more.

Like Angular, the Vue core team consists of groups working on a broad tooling set. Everything from the official routing library to its two different global store libraries (Vuex and Pinia) and beyond are considered part of Vue's core.

Why Learn All Three Frameworks?

While the obvious answer is "it broadens the types of work you're able to do," there are many reasons to learn more than one framework at a time.

In particular, each framework has its own restrictions, rules, and best practices. These rules and restrictions can help you understand a different way of coding that often transfers to other frameworks.

For example, Angular focuses on object-oriented programming, while the React ecosystem favors functional programming. While what each of these means is not immediately important, they allow you to do many of the same things in different ways and have other pros and cons.

Because of this, once you have mastered each, you can choose which programming methodology you want to apply within parts of your applications.

Beyond this, it's important to remember that these three frameworks are not the only choices on the table in web development. Svelte is an alternative that's been gaining tremendous traction, for example. While it differs even more from the three options we're learning, Svelte still shares many of the foundations of React, Angular, and Vue.

This knowledge transfer doesn't stop at JavaScript or web development, either. The more you learn about any aspect of programming, the more it can be used in other languages or types of programming. Many of the APIs I've used in web development were also valuable when doing engineering work with native languages.

Will These Tools Stick around?

Honestly? Who's to say. The ecosystem has its fluctuations; many developers definitely seem to feel some level of burnout from, say, the React ecosystem after so long within it.

But here's the thing: these tools are widely backed and used by some of the biggest companies.

These types of tools don't disappear overnight, nor do the jobs associated with these tools.

Take ColdFusion, for example. If you ask most frontend developers, they will likely either not know of ColdFusion or assume it is dead. After all, ColdFusion goes back to 1995 and remains a proprietary paid programming language — yes, those exist — to this day.

But ColdFusion isn't dead! (I can hear my friend Mark holler with excitement and agreement from miles away.) It's still used by as many websites as Angular is in 2024 and maintains an ecosystem of a respectable size that's big enough to allow Adobe to sustain the development of the language 27 years later.

Additionally, from a cultural standpoint, many developers are also tired of switching back and forth between new frameworks at seemingly breakneck speeds. Many companies may choose to stay with these tools for longer than anticipated simply because they've grown in expertise with these tools.

Just because a tool is new doesn't mean that it's inherently better; even better-perceived tools may not be selected for various reasons.

What Are The Prerequisites?

We will be learning React, Angular, and Vue from the basics all the way to understanding the inner workings of these frameworks.

You do not need any prerequisite knowledge of these frameworks and very little pre-requisite knowledge of JavaScript, HTML, or CSS.

In fact, I will do my best to link out to anything that's expected to be known or valuable in continuing the learning process. That said, if you're new to these topics, some suggested pre-reading might include:

• "How Computers Speak" — An introduction to how your computer takes "source code" and converts it to machine code.
• "Introduction to HTML, CSS, and JavaScript" — An explanation of the three fundamentals of web development and how they're utilized to build websites.
• "CSS Fundamentals" — An introduction to how CSS works and common rules you should know.
• "WebDev 101: How to use NPM and Yarn" — An explanation of what "Node" is, what "NPM" is, and how to use them.
• "Understanding The DOM: How Browsers Show Content On-Screen" — An explanation of the "DOM" and how it pertains to HTML.

What Aren't We Learning?

Before taking a look at some specifics of what we'll be learning, let's talk about what we won't be spending dedicated time learning in this series:

• Standalone JavaScript APIs
• CSS
• Linting tooling, such as ESLint or Prettier.
• IDE functionality, such as VSCode, WebStorm, or Sublime Text.
• TypeScript — while Angular code samples will include a bit of it, we won't be diving into the specifics.

All of these are broad topics in their own right and have a plethora of content capable of hosting their own books. After all, resources without a properly defined scope run into challenges of surface-level explanations, jarring transitions, and even delayed publications.

Remember, knowledge is like a web — these topics intersect in messy and complex ways! It's okay to take your time to learn these or even limit your learning scope to remain focused on a specific subset of knowledge. Nobody knows each and all of these perfectly, and that's okay!

Once again, however, if any of these topics become relevant in the book, we'll link out to resources that will help you explore more and broaden your knowledge base.

Content Outline

With the understanding of what we won't be looking at out of the way, let's talk about what we will be learning about:

• What "components" are
  • Break your app up into more modular pieces
  • The relationship between components and elements and other components and elements
  • Add programmatic logic inside your components
  • What "reactivity" is and how React, Angular, and Vue make it easier to show updated values
  • Binding reactive attributes to your elements
  • Passing values into your components
  • Binding user events to developer-defined behavior
  • Pass values from child components back to their parents
• Change your UI using dynamic HTML
  • Conditionally render parts of your app
  • Rendering lists and loops
  • Nuances in "reconciliation" for frameworks like React and Vue
• Handle user input and output through side effects
  • Explaining what a "Side effect" is outside the context of a UI framework
  • Reintroducing the concept in the scope of a framework
  • Trigger side effects during a component render
  • Cleaning up side effects
  • Why we need to clean up side effects (including real-world examples)
  • How do we verify we cleaned up our side effects
  • Handling re-renders
  • Tracking in-component state updates to trigger side effects
  • A framework's lifecycle, including rendering, committing, and painting
  • Changing data without re-rendering
• Base the state off of another value using derived values
  • A naive implementation using prop listening
  • A more thought-through implementation using framework primitives
• Solve markup problems using transparent elements
• Pass children into a component
  • Passing one child
  • Passing multiple children
• Keep a reference to an HTML element in your code
  • Track multiple elements at once
  • Real-world usage
• Reference a component's internals from a parent
  • Real-world usage
• Track errors that occur in your application
  • Log errors
  • Ignore errors to allow your user to keep using the app
  • Displaying a fallback when your app is unable to recover from an error
• Pass complex data throughout your app using dependency injection
  • Change values after injection
  • Opting out of providing optional values
  • Passing data throughout your entire application
  • Overwriting specific data based on how close you are to the data source
  • Finding the right data to fit your components' needs
  • Learning the importance of consistent data types
• How to avoid headaches with CSS' z-index using portals
  • Understanding why z-index has problems in the first place
  • Explaining what a portal is
  • Using component-specific portals
  • Using app-wide portals
  • Using HTML-wide portals
• Creating composable utilities through shared component logic
  • Sharing methods of creating data
  • Sharing side effect handlers
  • Composing custom logic
• Adding behavior to HTML elements easily using directives
  • Explaining what a directive is
  • Showcasing basic directives
  • How to add side effects to directives
  • Passing data to directives
• Modifying and accessing a component's children
  • Counting a component's children
  • Modifying each child in a loop
  • Passing values to projected children

This can seem overwhelming but remember that this book is meant to be a "newcomer" to "expert" resource. You absolutely do not need to tackle this all at once. You can stop at any point, go elsewhere, and come back at your leisure. This book isn't going anywhere and will be free online forever; it is open-source to ensure this is the case.

But wait, there's more! While this is the outline for the first book in the series, there will be two more books teaching React, Angular, and Vue. The second book will focus on the ecosystem around these tools, and the third will focus specifically on internals and advanced usage.

Throughout this, we will attempt to build a single application as outlined in the "Introduction to Components" chapter. By the end of this book, you will have a fully functional user interface that you have built yourself through code samples and challenges displayed throughout.

We will also have easy-to-reference resources in case you're already a pro with a specific framework and are looking to quickly learn:

• A glossary of various terms relevant to these frameworks
• A lookup table with equivalent APIs between these frameworks

A Note on Framework Specifics

As a final note, before I send you into the rest of the book, I want to touch on a few points about these frameworks:

<input />

<component /><!-- vs. <component></component> -->

Without further ado, let's get started.