Building Your Own JavaScript Framework E-Book

Vlad Filippov

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 388

Veröffentlichungsjahr: 2023

Beschreibung

JavaScript frameworks play an essential role in web application development; however, no single framework works perfectly for all projects. This book will help you understand existing projects, design new software architecture, and maintain projects as they grow. You’ll go through software architecture principles with JavaScript, along with a guided example of structuring your project and maintenance guidance.
This book covers framework planning aspects, enabling you to identify key stakeholders, understand JavaScript API design, and leverage complex abstraction. The second part of the book takes a practical programming approach to building your own framework by showing you how to structure modules and interfaces. As you advance, you’ll discover how to develop data-binding components, work with JavaScript APIs, and much more. While writing a framework is half the job, continuing to develop it requires effort from everyone involved. The concluding chapters help to achieve this by teaching you the crucial aspects of software maintenance and highlighting the constants of framework development.
By the end of this book, you’ll have gained a clear understanding of the JavaScript framework landscape, along with the ability to build frameworks for your use cases.

Leseprobe

Building Your Own JavaScript Framework

Architect extensible and reusable framework systems

Vlad Filippov

BIRMINGHAM—MUMBAI

Building Your Own JavaScript Framework

Copyright © 2023 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Rohit Rajkumar

Publishing Product Manager: Himani Dewan

Book Project Manager: Aishwarya Mohan

Senior Editor: Rashi Dubey

Technical Editor: Simran Udasi

Copy Editor: Safis Editing

Proofreader: Safis Editing

Indexer: Manju Arasan

Production Designer: Alishon Mendonca

DevRel Marketing Coordinators: Nivedita Pandey and Namita Velgekar

First published: November 2023

Production reference: 1051023

Published by Packt Publishing Ltd.

Grosvenor House

11 St Paul’s Square

Birmingham

B3 1RB, UK.

ISBN 978-1-80461-740-3

www.packtpub.com

To Erica, my guiding light, your inspiration propels me to embrace the unknown and expand my horizons. To Marina and Roman, for the belief and solid foundation of technological passions. And to all my dear friends, whose support over the years has been an anchor to my journey.

– Vlad Filippov

Foreword

It’s hard to overstate JavaScript’s impact on the world. What was once seen as a toy scripting language, designed in just 10 days, today enjoys the position as the most popular programming language on GitHub and has evolved into a modern, mature language. The abundance of JS frameworks that have emerged in recent years is a testament to the language’s versatility and longevity. From Angular to React, Vue.js to Svelte, these frameworks have revolutionized the way we approach frontend web development. Beyond the frontend, JavaScript powers some of the most popular native desktop and mobile apps enabled by projects such as Electron and React Native and is even being used to power the SpaceX Dragon 2 console in space. Complementing software design advances, there are dozens of JavaScript testing frameworks and developer productivity solutions, each with its own advantages that scale from a simple command-line interface to large-scale enterprise offerings. The varied JavaScript frameworks have enabled millions of developers to be efficient and effective in their work.

I met Vlad in person for the first time at a jQuery conference in Cambridge, Massachusetts, more than 14 years ago. Even before that, Vlad and I first collaborated on providing support to the jQuery frontend library. What began for me as a way to learn more about jQuery and JavaScript turned into a substantial collaboration with Vlad working on the Firefox web browser, being part of the web standards and JavaScript community, speaking at conferences across the world, and hacking on open source projects. Over the years, I’ve remained impressed at Vlad’s energy, creativity, knowledge, and passion for open source as he developed multiple internal frameworks at Mozilla, maintained the Grunt.js task runner, and contributed to many, many projects related to JavaScript infrastructure and developer productivity. This book is a testament to Vlad’s expertise in open source JavaScript development and abilities to teach complex topics. You will find a blend of JavaScript framework development knowledge in this book, covering a wide range of topics, from the basics of how a framework is beneficial and how to build one to advanced concepts such as extensible components and framework architecture.

Whether you are a curious newcomer to the world of web development or a seasoned professional seeking to expand your horizons, you will find relevant knowledge in this book. As you follow along building your own framework and applying the lessons in your daily life, you’ll gain the skills needed to meet your own varied goals, whether they be joining an open source framework community, learning to become a more well-rounded engineer, or refactoring an internal legacy application using the patterns found in this book, or just building something for fun late at night.

Mike Taylor (@miketaylr)

Engineering manager, Privacy Sandbox Team at Google

Contributors

About the author

Vlad Filippov is an experienced full stack developer who has been deeply immersed in software for more than a decade. His work spans a wide range of domains, from API and web development to mobile applications and 3D visualizations. Vlad is currently working at Stripe, creating financial infrastructure for the internet. Previously, Vlad spent over six years working on the Firefox web browsers and cloud services at Mozilla.

Vlad holds a computer science specialist degree from the University of Toronto and has presented at over a dozen conferences around the world. His passion lies in web applications and open source projects, primarily focusing on JavaScript apps and development tooling. In the brief moments he is not coding, Vlad enjoys playing tennis and running.

About the reviewer

Deepak Vohra is the technical reviewer of numerous (25+) books for various publishers including APress Media, Manning Publications, and Packt Publishing. Deepak is the author of 20+ books on various topics including Java, Docker, Kubernetes, and Apache Hadoop.

Table of Contents

Preface

Part 1: The Landscape of JavaScript Frameworks

1

The Benefits of Different JavaScript Frameworks

Technical requirements

The emergence of JavaScript frameworks

Frameworks outside the web browser

The evolution of code bases

Types of JavaScript frameworks and their benefits

Frontend frameworks

Backend frameworks

Native frameworks

Testing frameworks

Framework showcase

My experiences with frameworks

Contributing to new projects

Summary

2

Framework Organization

Technical requirements

Learning about abstractions

Downsides of abstractions

Building blocks of abstractions in JavaScript

Frontend framework abstractions

Backend runtime abstractions

About debugging

Framework building blocks

Events

Components

Lifecycle methods

Router

Template engine

Networking

Differentiating modules, libraries, and frameworks

Modules

Libraries

Frameworks

Summary

3

Internal Framework Architecture

Technical requirements

Exploring the core architecture

Patterns

Architectural patterns

Design patterns

The technical architecture

Packages

Scripts

Compilers

Summary

4

Ensuring Framework Usability and Quality

Technical requirements

Development support

Documentation

Framework testing

Development tooling

Learnings from other architectures

Summary

Part 2: Framework Development

5

Framework Considerations

Technical requirements

Determining project goals

Context

Stakeholders

Other considerations

Identifying framework problem spaces

Popular problem spaces

Other framework pathways

Technical architecture

Abstraction levels and flexibility

Environment compatibility

Utilizing libraries

Compiler tooling

Summary

6

Building a Framework by Example

Technical requirements

Determining goals and stakeholders and framework branding

Goals

Stakeholders

Framework branding

Architecting the new framework

Selecting features

Identifying out-of-scope features

Designing the outline

Designing the interfaces and API

Implementing the new frameworks

Testing functionality

Creating a command-line tool

Browser testing workflow

Testing the framework

Framework packages

Summary

7

Creating a Full Stack Framework

Technical requirements

Full stack framework goals

Frontend functionality

Backend functionality

Architecture

Entry point

Router

Configuration

Sensible defaults

Database

GraphQL support

Observability

Developer experience

Bootstrapping a new application

Scaffolding

File watching

Developer workflow

Framework distribution

New project requirements

Starting a project

Using the framework

Creating an API and a model

Expanding the API

Adding tests

Configuring environments

Deploying the application

Dependencies

Summary

8

Architecting Frontend Frameworks

Technical requirements

Defining the frontend framework

Goals

Features

Architecture

Entry points

Reactivity

Improving components

SSR

Client router

Optimizations

Developer experience

Dependencies

Using the framework

Summary

Part 3: Maintaining Your Project

9

Framework Maintenance

Technical requirements

The development cycle

Seeking user feedback

Formal feature definition

Release process

Change logs

Versioning

Simplifying releases

Continuous delivery

Licensing

Long-term maintenance

Security

Dependencies

Feature coverage and deprecation

Summary

10

Best Practices

Technical requirements

Common themes

Modularity

Evolving design

Minimalistic approach

Build tooling

Performance improvements

Future of frameworks

Developer experience

Embracing new technologies

The use of large language models

Additional considerations

Time investment

User support

Financial backing

Summary

Index

Other Books You May Enjoy

Preface

This book is about crafting, understanding, and maintaining JavaScript frameworks – the critical building blocks of many modern web applications. The ecosystem of software frameworks, particularly JavaScript ones, has been highly interesting for many developers in the past 10-plus years. In addition, JavaScript has been arguably the most influential and ubiquitous programming language, enabling millions of critical web applications and services. Powered by the vibrant community of developers and innovative companies, the development of JavaScript frameworks has since emerged as a dynamic and exciting space, with opportunities for innovation and exploration. Each new framework brings its own philosophy and approach, representing a unique set of solutions to common web application and web services challenges.

It is important to note that this book is not solely for those planning to develop their JavaScript frameworks from scratch. While it provides valuable wisdom in creating a well-maintained system, its primary goal extends beyond that. It is also designed to refine your understanding of frameworks operating under the hood, refining your JavaScript or software developer skills. It encourages you to think from a framework’s perspective, thus fostering a more profound comprehension of reusable software architectures. Whether you’re an experienced developer looking to delve deeper into your toolkit or a newcomer seeking to understand the framework landscape, this book will be advantageous to your career.

Who this book is for

If you are a JavaScript novice or an expert who wants to dive deep into the world of JavaScript frameworks, we’ve got you covered. This book introduces you to the history of frontend frameworks and guides you through the creation of your own framework. To learn from this book, you should have a good understanding of the JavaScript programming language and some experience with existing software frameworks.

What this book covers

Chapter 1, The Benefits of Different JavaScript Frameworks, provides a detailed introduction to the world of JavaScript frameworks and their growth over the last decade.

Chapter 2, Framework Organization, provides insights into how frameworks are structured and their organizational patterns.

Chapter 3, Internal Framework Architecture, examines the core technical architectural patterns of various existing frameworks.

Chapter 4, Ensuring Framework Usability and Quality, explains a series of techniques and tools that enable developers to build quality frameworks focused on usability and ease of use.

Chapter 5, Framework Considerations, explores considerations that revolve around project goals, the technical problem space, and architectural design decisions.

Chapter 6, Building a Framework by Example, explains how to develop a simple JavaScript testing framework based on the patterns and best techniques.

Chapter 7, Creating a Full Stack Framework, offers practice in developing a new application framework that will enable developers to build large and small web applications.

Chapter 8, Architecting Frontend Frameworks, specifically focuses on the frontend components of a full stack framework.

Chapter 9, Framework Maintenance, discusses topics relating to the framework release process, the continuous development cycles, and the long-term maintenance of large framework projects.

Chapter 10, Best Practices, explains several vital topics around general JavaScript framework development and takes a glimpse into the future of frameworks in this ecosystem.

To get the most out of this book

You will need to have a good understanding of the JavaScript programming language and have some experience with existing software systems such as React.

Software/hardware covered in the book

Operating system requirements

ECMAScript 2023

Windows, macOS, or Linux

TypeScript

Node.js 20

Follow the guidelines to install Node.js version 20+ on your machine to be able to interact with the code files. The installers for the Node.js runtime can be found athttps://nodejs.org/en/download.

If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book’s GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Building-Your-Own-JavaScript-Framework. If there’s an update to the code, it will be updated in the GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: “For example, if you are planning to add API routes to build an API in the Next.js project, they must be mapped to an /api/ endpoint.”

A block of code is set as follows:

pages/index.vue <template>   <NuxtLink to="/">Index page</NuxtLink>   <NuxtLink href="https://www.packtpub.com/" target="_blank">Packt</NuxtLink> </template>

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<root framework directory>   | <main framework packages>     + <core framework interfaces...>     + <compiler / bundler>   | <tests>     + <unit tests>     + <integration and end-to-end tests>     + <benchmarks>   | <static / dynamic typings>   | <documentation>   | <examples / samples>   | <framework scripts>   | LICENSE   | README documentation   | package.json (package configuration)   | <.continuous integration>   | <.source control add-ons>   | <.editor and formatting configurations>

Bold: Indicates a new term, an important word, or words that you see on screen. For instance, words in menus or dialog boxes appear in bold. Here is an example: "After pressing the Debug button, you will be presented with a context menu of all the available scripts in the project."

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, email us at [email protected] and mention the book title in the subject of your message.

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.

Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Share Your Thoughts

Once you’ve read Build your Own JavaScript Framework, we’d love to hear your thoughts! Please https://packt.link/r/1804617407 for this book and share your feedback.

Your review is important to us and the tech community and will help us make sure we’re delivering excellent quality content..

Download a free PDF copy of this book

Thanks for purchasing this book!

Do you like to read on the go but are unable to carry your print books everywhere?

Is your eBook purchase not compatible with the device of your choice?

Don’t worry, now with every Packt book you get a DRM-free PDF version of that book at no cost.

Read anywhere, any place, on any device. Search, copy, and paste code from your favorite technical books directly into your application.

The perks don’t stop there, you can get exclusive access to discounts, newsletters, and great free content in your inbox daily

Follow these simple steps to get the benefits:

Scan the QR code or visit the link below

https://packt.link/free-ebook/9781804617403

Submit your proof of purchaseThat’s it! We’ll send your free PDF and other benefits to your email directly

Part 1: The Landscape of JavaScript Frameworks

The first four chapters delve into the ecosystem of existing frameworks. This approach gives a unique and diverse perspective into the current technological landscape of JavaScript frameworks. These chapters emphasize the facets of structure, design, and methodologies for guaranteeing excellence and developer-friendliness in such projects. The knowledge accumulated here empowers developers to understand the broader context and underlying principles of framework development, with the goal of creating a solid foundation.

In this part, we cover the following chapters:

Chapter 1, The Benefits of Different JavaScript FrameworksChapter 2, Framework OrganizationChapter 3, Internal Framework ArchitectureChapter 4, Ensuring Framework Usability and Quality

1

The Benefits of Different JavaScript Frameworks

It has been over 25 years since JavaScript was first introduced into our web browsers. Since then, this technology has vastly changed how we interact with websites and applications, how we build APIs for backend systems, and even how we communicate with hardware platforms. JavaScript has become one of the most popular programming languages on the planet. To this day, JavaScript’s pace of evolution and rapid change is a popular topic of conversation among developers – it is a source of excitement and innovation. As a programming language, JavaScript has been ranked as the most popular among developers in the last 10 consecutive years and has been the key to client-side scripting for 98% of all websites. We cannot underestimate how much JavaScript and its closely related ECMAScript standardization have enabled the web to become the platform to host the next generation of software that can be accessed by billions of people. With these technologies, millions of businesses and individuals can easily build great applications, creative experiences, and complex software solutions. In many ways, the web platform has the potential to be the most vibrant and friendly developer ecosystem in the whole world.

JavaScript frameworks are the straightforward way millions of web developers build projects today. Due to their popularity and ease of use, frameworks allow developers to quickly make product ideas come to life without unnecessary overheads. Without the framework systems that we have at our disposal today, the web would not have been able to compete with other development platforms.

In this book, we will study the vast ecosystem and expand our knowledge to become confident in creating and maintaining our own self-developed frameworks. Developing the skill to build a framework or extend existing ones comes with the benefit of becoming an impactful domain expert in frontend and backend projects.

As part of becoming experts in JavaScript frameworks, we need to get a sense of the core components and tools of the web development workflow. In this first chapter of the book, we will take a look at how web development evolved, how frameworks changed the landscape of working with JavaScript, and what the ecosystem currently has to offer.

We will cover the following topics:

The emergence of JavaScript frameworksThe evolution of code basesTypes of frameworks in JavaScript and their benefitsMy experiences with frameworks

Technical requirements

This book has an accompanying GitHub repository at https://github.com/PacktPublishing/Building-Your-Own-JavaScript-Framework. In each chapter, we will point to the relevant directories in this repository. Feel free to clone or download the repository as a ZIP file.

You need a desktop or a laptop computer with internet access and a terminal application to install and run the code from this repository. We shall also be utilizing Node.js to run some of the parts of the repository. Node.js is an open source, cross-platform, backend JavaScript runtime environment that runs JavaScript code outside a web browser. The installation for Node.js can be found at nodejs.org. For the code from the repository, you can use any environment that supports a terminal and runs Node.js, such as Windows, macOS, and most varieties of Linux.

The emergence of JavaScript frameworks

As JavaScript progressed and evolved, the innovators who were heavily involved in the language, both companies and individuals, started writing software libraries to help solve the everyday burdens of web application architectures. The initial focus of the most basic JavaScript libraries was to provide singular features, interactivity, and add-ons, which progressively enhanced the web page. At that time, JavaScript gave life to a static page with its interactive components – simple examples that always come to mind are tiny scripts, which enabled creative button effects and mouse cursor effects. In many cases, these scripts were separate from the site’s core functionality and were not essential to allow users to interact with the content. Since the inception of small libraries, these have paved the way for the complex framework systems that we have today. The frontend technology quickly evolved, and now, developers are much more accustomed to megabytes of scripts powering the frontend code.

JavaScript libraries were the next step in the web development evolution, assisting with cross-browser quirks, complex visual effects, network requests, and web page layout. With the use of these libraries, developers were able to have the cross-browser development challenges under control. CSS started to catch up with its focus on layout features and cross-browser standards, improving the web’s styling features. Developers finally began introducing structure and well-crafted systems into web development.

The time has come to finally focus on building scalable and opinionated software on the web, and this is where we began to see glimpses of complex software paradigms introduced into large websites and web applications. Companies and larger enterprises started treating the web as a serious application platform, which led to a few prominent projects written in JavaScript and compiled to JavaScript from languages such as Java. Tracing back to late 2009, we see the first iterations of Model-View-Controller (MVC) frameworks built entirely with HTML, CSS, and JavaScript. This MVC model allows more extensive projects to stay organized, enriches the development workflow, and opens up the world of frontend development to developers who expect a much more structured approach when writing software. The MVC model fit web applications well enough to spawn a renaissance in framework development.

Many development hours were invested into connecting the mechanisms between the JavaScript engines and the browser web APIs. In Figure 1.1, we see a simplified view of how this interaction happens:

Figure 1.1: Interaction between the JavaScript engine and web APIs

The framework code and its internal technologies, such as the virtual DOM, use the DOM and its components to make the web application experience possible. The web has its own approach to the MVC architecture, with DOM and web API events interacting with Controllers defined in JavaScript. The Controllers interface with Views written in HTML or templated HTML. Furthermore, in this paradigm, the components of the applications utilize a Model to model the data within them. Using this approach, we can later communicate with backend services to retrieve the data in a particular manner.

Each new JavaScript MVC framework tried to perfect its implementation or approach in various ways. About five years after the first MVC frameworks appeared and gained popularity, several new paradigms that focused on the observer software design pattern started gaining traction in the JavaScript community. This observer approach is a software design pattern in which an object maintains a list of its dependants, called observers. The object notifies the observers automatically of the state changes within it. At that time, Flux came about, which is an application architecture that concentrates on simplifying the hurdles faced within MVC. The burdens included dealing with views constantly needing to interact with the models, hard-to-debug, deeply nested logic, and the need for adequate testing solutions of complex applications.

In the observer pattern, we define subjects that include a collection of observers informing about state changes. The Flux architecture expanded this existing pattern to fit better with applications built on the web. In the case of the Flux pattern, it consists of stores interacting with the state of a component. These stores get notified by a dispatcher based on data coming from actions that a user in the view took. Many JavaScript frameworks started adapting this pattern, ultimately simplifying how engineers structured their applications while still enforcing a set of applicable rules to keep the separation of concerns intact. The software patterns in all of these frameworks provide a clear separation of concerns between the interface, data model, and the application logic that integrates them. The Flux-based JavaScript frameworks introduced new concepts that emerged from the known MVC patterns. Still, both the MVC and Flux approaches focused on the principle of the separation of concerns in application development.

Furthermore, while simplifying ideas brought to light by Flux, a library called Redux inspired the next generation of frameworks to switch their approach to application state management. Instead of the Flux dispatchers, Redux frameworks rely on a single store with pure reducer functions, taking the current state and returning an updated state. Even today, frontend patterns are still maturing, and building for the web platform is becoming increasingly easier.

While there’s a lot to mention with regard to frontend technologies, JavaScript has also made a great impact in places outside of web browsers. We cover those areas in the next section.

Frameworks outside the web browser

Another monumental event during the appearance of the first frontend frameworks was the emergence of a new open source runtime called Node.js. Node.js allowed developers to use JavaScript to produce server-side scripts, deploy backend systems, build developer tools, and, more importantly, write frameworks using the same language as the one from the web browser. The unique combination of having JavaScript on both sides of the software stack created immense possibilities for software developers. This runtime has since spread into many directions beyond software applications, with frameworks for desktop application development, hardware I/O solutions, and much more.

JavaScript-built frameworks enabled the web platform to become one of the most important technologies within reach of billions of people. It’s almost impossible to imagine starting a new project without relying on the consistency and amiability of using a framework, and even the smallest tasks benefit significantly from using a cohesive and opinionated structure. However, even with the fast-paced evolution of the language and how we build web projects, it took quite a bit of time for JavaScript frameworks to emerge as fully encapsulated platforms that can aid developers in producing efficient applications.

JavaScript prevailed through the rise of mobile platforms, with multiple frameworks being created for mobile and existing systems integrating mobile benchmarks into their release process. The optimizations got to the hardware level, having the ARM (arm.com) processor architecture introduce optimizations to improve JavaScript performance in data type conversion, resulting in performance boosts for many JavaScript applications. That is quite a journey for a scripting language that started with small scripts on plain web pages.

Today, we can create fully fledged applications and services using the web platform by combining the power of web APIs, the JavaScript language, and technologies such as progressive web apps, using the frameworks that bring it all together. It is a fantastic time to start traversing the world of these JavaScript systems and using them to our advantage.

Now that we have an overview of how web development evolved, let’s take a look at how the code bases have changed over time.

The evolution of code bases

While learning about frameworks, it is fascinating to reflect on how building for the web has changed over time. This exploration helps us understand why we build web applications the way we do today and helps us learn from historical shifts. It also allows us to be more mindful concerning framework usability and development decisions when we take on large projects. As technology pushes forward, the requirements and expectations around how websites and web applications are built drastically change. Depending on how long someone has been involved in web development, they either experienced many rapidly evolving shifts to how the code bases are structured or were lucky enough to avoid the times when the tooling and the process were highly tedious.

Initially, the code bases comprised isolated frontend components stitched together, consisting of code repetition and mixes of coding patterns. Code organization, usage of software development patterns, and performance optimizations were not a primary focus for developers. The web application deployment process used to be rudimentary as well. In many cases, the websites were manually updated and did not use source control or version tracking. Testing was also highly manual and would only exist in a few projects that were large enough to enable it. This was before deployment pipelines with continuous integration, deployment automation, and advanced testing infrastructure, rigorously verified every change. There used to be a time when developers had to optimize their CSS selectors for performance reasons.

Luckily, productivity and workflows rapidly started to improve once the industry started focusing more on building complex applications. Today we have source control, we have a myriad of testing and deployment tools to choose from, and we have established software paradigms that considerably improve our lives as developers and vastly improve the quality of the projects we build. Improvements to JavaScript engines unlocked new pathways for frameworks, and enhancements to web browsers fixed slow DOM interactivity with techniques such as the virtual DOM, Shadow DOM, and Web Components. These days, frontend frameworks have a better client platform to target as well, and the more established and improved web standards make it possible to perform much more complex operations. For example, with the help of WebAssembly (webassembly.org) standards, we can now run low-level code with improved performance, all within the browser.

As part of all these developments and growth in popularity, the web application development workflow got a lot more complex in many ways. Almost at every point of interaction with a web application project, there is a tooling set designed to improve our workflow. Some examples of this would be Git source control, various pre- and post-processors of our files, code editors with plugins, browser extensions, and many more. Here we have an example that illustrates the key components of a modern web application code base structure, in this case, generated by SvelteKit:

Figure 1.2: SvelteKit code base structure

We will go over SvelteKit later in the Frameworks that use React section of this chapter, and even if you have never used Svelte, this project file tree will look very familiar if you work with other frameworks. This dynamic structure of tools enables flexibility when it comes to switching out certain functionality. For example, Prettier can be substituted for another code formatting tool if need be, while the rest of the project structure remains the same and functions as it was.

With the establishment of the first frameworks in JavaScript, we experienced the introduction of a build step into our projects, which meant that either external or bundled tooling would help run or build the application. Today, this build step, popularized by Webpack or esbuild, is almost impossible to avoid. As part of this build step, we fetch application dependencies using package managers, process CSS, create code bundles, and run various optimization steps to make our app run fast and consume the least bandwidth. The ecosystem also introduced JavaScript transpilers, which are a type of source-to-source code compiler. They are used to take one particular syntax, which could consist of more modern features or include additional features, and convert them to be compatible with broadly accepted JavaScript syntax. Transpilers, such as Babel, began to see everyday use, integrated with the build step in many projects; this pattern generally motivated the use of the latest language features while also supporting old browser engines. These days, transpilation and build steps apply to files beyond JavaScript, as well as files such as CSS and specific templating formats.

Integrating with the build step are the package managers, such as npm or yarn, which play an essential role in resolving project dependencies. If you want to bootstrap a workflow with a framework, you will likely rely on the package manager to initialize the framework structure and its dependencies. For new projects, it is almost impossible to have a sensible framework workflow without using a package manager or some form of dependency resolution. As the project grows, the package manager facilitates the organization of newer dependencies while keeping track of updates to modules that are already in use. These days text editors, such as Visual Studio Code and IntelliJ WebStorm, adapt to our code bases and provide excellent tooling to enable source control of our code. The editors rely on built-in features and external plugins that encourage better formatting, easier debugging, and framework-specific improvements.

The code bases will keep changing as technology develops further, and the tools will keep improving to enable us to develop applications more quickly. Regarding the framework organization, we can expect higher levels of abstractions that simplify the way we do web development. Many programming languages, such as Java and Swift, have pre-defined development workflows encapsulating all aspects of development. JavaScript code bases so far have been an exception to these rules and allowed for high levels of flexibility. This trend is going to continue for many more years as the rapid pace of tooling and innovation in web development is not slowing down at all.

Now that we understand how the JavaScript ecosystem has evolved and how codebases have changed over time, let us explore what JavaScript frameworks offer in terms of frontend, backend, testing, and beyond.

Types of JavaScript frameworks and their benefits

Though it is challenging to compare all the subtle differences of every framework out there in the ecosystem, we can cover several frameworks that significantly impact the developer community or offer a unique approach to solving a particular problem. The expanded knowledge of the tools helps us notice specific patterns in these frameworks regarding the different strategies for developer experience and feature sets.

There are still ways to build apps and websites without frameworks, but many developers prefer to use established and opinionated frameworks even with the given overhead and learning curves. If you follow the JavaScript community, you will find that it is always passionately abuzz with discussions around frameworks, so let us dive deeper into the needs and benefits of framework use.

The frameworks provide good levels of abstraction to write high-level code without rewriting low-level functionality. Developers can be much more involved in business and product logic and iterate faster on new features. To give an example, up until recently, writing the code to make an asynchronous web request with proper error handling was a very time-consuming task without the aid of a good abstraction. Now that we have the Fetch API (fetch.spec.whatwg.org), this is a much easier endeavor, but Fetch is only part of the story, so the rest of the web APIs, especially the ones from earlier times, still benefit from good abstractions. In cases where we choose to write low-level code, it is a much better approach to find ways to write that code within the framework boundaries. This way it is tested and maintained within the primitives of the framework. This yields the benefits of avoiding extra maintenance and ensuring all the usages of that code are still behind sensible abstractions. Some backend frameworks approach this by providing extensible interfaces to hook into framework internals through plugins or extending the default behavior.

Developing software with groups of people is a challenging endeavor, so small and large teams can benefit from integrating a framework into the engineering workflow. The provided structure of abstractions generally results in much more well-architected systems, given the limits of how developers can write high-level components. The key benefit is enabling everyone involved in the task to understand the code base better and conveniently spend less time deliberating refactors and adding new code.

Now that we have our abstracted high-level code, we can cherish another benefit of frameworks – the performance optimizations they enable. Writing performant code that works in all provided use cases takes skill and takes away significant time from the project at hand. Even the most knowledgeable developers would only be able to come up with good enough solutions in a short amount of time. With frameworks, especially open source ones, you benefit from many minds put together to solve performance bottlenecks, overcome typical encumbrances, and continue to benefit from improvements as the framework develops. The performance benefits come from optimized low-level and well-structured high-level components; notably, some frameworks will guard against code that will slow down the application.

Frameworks make integrating with external systems, such as databases, external APIs, or specific components, easier. For instance, some web frameworks can integrate directly with the GraphQL data query language, simplifying backend systems’ interaction. It’s not just the ease of use, but also these integrations enable safe interaction with components such as databases, which helps avoid problematic queries that can be slow or harmful to execute. For frontend projects, it is important to always keep up with the latest web standards, and this is where frameworks provide another integration benefit.

Finally, as with all software, support plays an important role. Another reason a project may use an established framework is the available support channels through paid, volunteer, and open source help. The shared knowledge of these systems enables developers to help each other build systems and makes it easier to hire new developers who are familiar with these existing systems.

As we see, frameworks benefit us in countless ways – let us recap with these exact reasons. Here’s what frameworks allow us to do:

Focus on business logic and writing high-level codeWrite less code and follow code conventions defined by the frameworkBenefit from performance gains and rely on future optimizationsDevelop the project with good architecture, abstractions, and organizationEasily integrate with external systems such as databases and external APIsAbility to rely on security fixes, audits, and patchesImprove developer workflow using framework-specific toolings, such as text-editor integrations and command-line utilitiesAbility to debug issues easily by relying on detailed error messages and consistent loggingRely on external support from framework authors and the communityHire more developers who are already accustomed to working with the framework of our choice or with similar experienceDevelop better user experiences by leveraging the framework feature set

While a lot of JavaScript frameworks focus on the developer experience, the user experience can sometimes suffer from the overhead of these systems. This is usually relevant in frontend projects – an example of this would be loading a complex web application on budget mobile devices. In backend systems, this can be seen when the APIs are not able to keep up with request load and reliably scale with traffic spikes.

Even if the systems are skillfully built in both of these cases, the framework of choice might not be optimized to cover all use cases. I believe the next iteration of the framework ecosystem will largely focus on the user experience aspects, which means making load times faster, shipping less JavaScript over the network, and ensuring the web applications we create work seamlessly on all platforms. In the following sections, we will examine some of the most popular frameworks that enable these benefits for web application developers.

Frontend frameworks

Since JavaScript frameworks originated in the browser, let us look at modern frontend frameworks as our first exploration.

Ember.js

Suppose we trace the roots of the first JavaScript frameworks through the origins of libraries such as Prototype.js, jQuery, and script.aculo.us. In that case, we will eventually arrive at SproutCore, a framework used by Apple and a handful of other companies to build some of the most complex web experiences many years ago.

Today this early SproutCore project has influenced the Ember.js framework. Ember continues to be a highly opinionated piece of software that allows us to build applications with defined components, services, models, and a powerful router. Like many frameworks we will discuss in this chapter, Ember comes with its own command-line tooling, which helps developers quickly get started on the basics of the application and later generate more code quickly as the project scope grows. The usefulness of the provided framework tooling is immense. The CLI encapsulates the code generation steps and enables a way to run common framework commands, such as running tests or serving application files. With Ember, developers get a complete set of tools such as auto-reload, browser developer tooling, and a package called Ember Data, which helps manage the API-to-model relationship through adapters and serializers. Ultimately, Ember has a steeper learning curve than other frameworks, but its highly opinionated concepts guide developers toward highly functional web applications.

Angular

Angular is another framework with a large following. With TypeScript at its core, it is often used as a subset system for other full stack web frameworks. Angular provides its opinionated approach to component-based architecture. Angular has a complex history of rewrites but is now a more streamlined project with a stable feature set. Angular’s template syntax extends HTML by adding expressions and new attributes. At its core, it uses the pattern of dependency injection. The latest versions of this framework offer a variety of binding techniques, including event, property, and two-way binding.

Vue.js

Vue.js, also written in TypeScript, was created by borrowing the good elements of Angular. Developers love Vue’s simplicity within its component system, syntax, and general ease of use. It utilizes the Model–View–Viewmodel (MVVM) pattern, where a View communicates with a ViewModel using some data binding technique. In the case of Vue.js, for its data, it uses different techniques through HTML classes, HTML elements, and custom binding element attributes to achieve this. The purpose of the given ViewModel is to handle as much of the View’s interaction logic and be the middle structure between the presentation logic and the application’s business logic. Besides using HTML authoring, Vue has the Single-File Component (SFC) format (vuejs.org/api/sfc-spec.html) to encapsulate all aspects of the components – scripts, styling, and templating into one file. The SFC happens as part of the build step and helps the components avoid runtime compilation, scopes the CSS styles to the component, enables Hot Module Replacement, and much more.

About TypeScript

TypeScript is a superset of JavaScript, enabling features such as static typing and language extensions in many JavaScript environments. In recent years, TypeScript has become popular among framework authors and developers. It is also widely supported by many code editors and IDEs. Initially released in 2012 and inspired by ActionScript and Java, TypeScript is a superset of JavaScript, enabling features such as static typing and language extensions in many JavaScript environments. It helps catch errors at compile time instead of runtime error handling. Files with the file extensions .ts and .tsx are TypeScript files that must be compiled to JavaScript to be used in most environments.

Frameworks that use React

These days, we hear about React a lot; even though it is a user interface component library by itself, it has become the cornerstone for many frontend frameworks, such as Gatsby, Remix, Next.js, and others. As part of its introduction, React also debuted JSX, its own set of extensions to JavaScript, making it possible to define the components in a similar-looking syntax to HTML. For instance, the static site framework Gatsby relies on React’s state management and the nested component architecture to compose its web pages. With Gatsby, developers can multiplex data, utilizing GraphQL, from content management systems, e-commerce sources, and other places.

Following along our React route, we get to Remix, which bundles a full stack solution with features for both the server and the client, plus a compiler and a request handler. Remix provides solutions for the View and Controller aspects of the application and relies on the Node.js module ecosystem for the rest, giving flexibility to the developers who need custom solutions from project to project. Based on the experience of creating and maintaining the react-router project for many years, the creators of Remix were able to come up with powerful abstractions while taking advantage of the browser’s web APIs instead of investing in new concepts. To give an example, if you choose Remix for your project, you will find yourself using web standard APIs more than some of the other frameworks.

Next.js is our next React-based framework, which extends the use of the React component architecture as well by bringing it to the server with its built-in server rendering. The server-rendered components allow for a pre-rendered page to be sent to the client, resulting in the client only spending resources on initializing the interactive components. The framework provides the concept of pages, which allows for simpler routing implementations with lazy loading and enables automatic code-splitting. Combining all these features results in a fantastic user experience with fast loading times. In addition, the deployed applications rank highly when indexed by search engines, a feature that makes this framework stand out.

While talking about React frameworks, it is worth mentioning Solid.js. It’s a newer library that creates frontend interfaces. Solid’s benchmarks outperform React and others. It uses features such as JSX, but with a few key differences. With Solid, there is no virtual DOM and no concept of hooks. Instead, it relies on the pattern of signals to update the real DOM nodes, while utilizing reactive primitives. As part of Solid’s approach, it offers the SolidStart app framework, which is very comparable to Next.js. It consists of core support components – router, session, document, actions, data, entrypoints, and server – these are integrated together as part of SolidStart.

SvelteKit

Like SolidStart, there is also SvelteKit, a new framework powered by the Svelte user interface library. SvelteKit framework generator script assembles a project skeleton, which helps you quickly get started and gives you full flexibility over the configuration of the compiler and the TypeScript settings. When setting up SvelteKit, we can use JavaScript with JSDoc formatting or TypeScript directly to write frontend applications. As part of the Svelte integration, it equips developers with a compiler that pre-builds the app before the client processes it. Like Vue’s SFC format, Svelte uses .svelte files, which encapsulate the components with the <script>, <style>, and HTML tags that are coded together. These are compiled into JavaScript output generated by the compiler.

About Vite

Vite (vitejs.dev) is framework-agnostic tooling, meaning it can be used in conjunction with different frameworks. It uses a vite.config.js configuration file. Mainly, it is used as a build tool for frontend projects. It is optimized for speed and it achieves that speed by providing a development server with Hot Module Replacement and a bundler that optimizes JavaScript output using esbuild (esbuild.github.io).

Framework features and patterns

To understand what most modern frameworks enable, we need to understand the following acronymsand features:

Single-Page Application (SPA): An early term that describes an application that purely uses JavaScript and other frontend frameworks for all interactions with reduced browser routing.Server-Side Rendering (SSR): Pre-rendered components on the server side, which are transferred for JavaScript hydration on the client side.Client-Side Rendering (CSR): Rendering of components using JavaScript, purely on the browser’s side.Static Site Generator (SSG): The concept of pre-generating all pages from source for faster rendering and better search engine optimization.Deferred Static Generator (DSG): Renders content on the server