Search icon
Subscription
0
Cart icon
Close icon
You have no products in your basket yet
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
Angular Design Patterns and Best Practices

You're reading from  Angular Design Patterns and Best Practices

Product type Book
Published in Feb 2024
Publisher Packt
ISBN-13 9781837631971
Pages 270 pages
Edition 1st Edition
Languages
Author (1):
Alvaro Camillo Neto Alvaro Camillo Neto
Profile icon Alvaro Camillo Neto

Table of Contents (19) Chapters

Preface 1. Part 1: Reinforcing the Foundations
2. Chapter 1: Starting Projects the Right Way 3. Chapter 2: Organizing Your Application 4. Chapter 3: TypeScript Patterns for Angular 5. Chapter 4: Components and Pages 6. Chapter 5: Angular Services and the Singleton Pattern 7. Part 2: Leveraging Angular’s Capabilities
8. Chapter 6: Handling User Inputs: Forms 9. Chapter 7: Routes and Routers 10. Chapter 8: Improving Backend Integrations: the Interceptor Pattern 11. Chapter 9: Exploring Reactivity with RxJS 12. Part 3: Architecture and Deployment
13. Chapter 10: Design for Tests: Best Practices 14. Chapter 11: Micro Frontend with Angular Elements 15. Chapter 12: Packaging Everything – Best Practices for Deployment 16. Chapter 13: The Angular Renaissance 17. Index 18. Other Books You May Enjoy

What technologies are present in the ecosystem?

The Angular team, when creating the solution for the growing complexity of web application development, decided to unite the best tools and libraries in an opinionated package with the maximum number of configurations made by default.

We then have the following libraries that make up the core of Angular.

TypeScript

TypeScript is a superset of the JavaScript language that adds type checking and other features to the language, ensuring a better developer experience and security for web development.

It has been present in Angular since its first version and is the cornerstone of the framework that enables several features such as dependency injection, typed forms and Angular’s tooling.

TypeScript is currently the preferred tool for backend development in Node.js and is encouraged by communities of other frameworks such as React and Vue.js.

RXJS

RXJS is a library that implements the reactive paradigm (https://www.reactivemanifesto.org/) in the JavaScript language.

Since the first version of Angular, reactivity was a core theme that the framework wanted to achieve and so it uses the RXJS library to help with it.

HTTP requests, routes, forms, and other Angular elements use the concepts of observables and their operators to provide Angular developers with the tools to create more fluid and dynamic applications with less boilerplate code.

RXJS also provides mechanisms for state management in a frontend application without the need to use more complex patterns such as Redux.

Karma and Jasmine

Quality should be the top priority in any application and this is especially important in frontend applications as for the user, it is the application.

One of the ways to attest to quality is through testing, and with that in mind, Angular already comes by default with the tool duo of Jasmine and Karma.

Jasmine is a framework for unit-testing JavaScript and TypeScript applications with several functions for assertion and test assembly.

Karma is the test runner, that is, the environment where the unit test setup is executed with the help of Jasmine. This environment, configured in its configuration file, runs in browsers, making the test more realistic in comparison to customers’ daily lives.

Many people in the community switch these tools for the Jest framework due to performance in the execution of the tests, which is totally fine and even facilitated by the Angular CLI; however, it should be noted that this tool does not run in a browser, which really improves the performance of the test execution but may hide some particularity that only testing in a browser would provide.

Webpack

After the development of an application, it is necessary to create the bundle to send it to production, and Webpack is the tool that the Angular team chose for this task.

Webpack is a very powerful and versatile bundler, and it is thanks to it that the framework manages to make some interesting optimizations such as tree shaking and lazy loading of bundles.

However, Webpack is complex in its configuration, and with that in mind, the Angular team has already set up and created some abstractions for fine-tuning the tool, such as the angular.json file.

We understand what pieces make up the framework and how they relate to delivering rich and fluid interfaces. We will now set up our development environment.

You have been reading a chapter from
Angular Design Patterns and Best Practices
Published in: Feb 2024 Publisher: Packt ISBN-13: 9781837631971
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at AU $19.99/month. Cancel anytime}