Questions

Answer the following questions as best as you can to ensure that you've understood the key concepts from this chapter without Googling. Do you need help answering the questions? See Appendix D, Self-Assessment Answers online at https://static.packt-cdn.com/downloads/9781838648800_Appendix_D_Self-Assessment_Answers.pdf or visit https://expertlysimple.io/angular-self-assessment.

1. What is the async pipe?
2. Explain how reactive and imperative programming is different and which technique we should prefer?
3. What is the benefit of a BehaviorSubject, and what is it used for?
4. What are memory leaks and why should they be avoided?
5. What is the best method for managing subscriptions?
6. How are Angular Signals different than RxJS streams?
7. What are ways you can use Angular Signals to simplify your application?

Succeeding as a technical lead or architect

I will be using the terms technical lead and architect interchangeably. Depending on the size of your organization, this may be two separate roles or one. But no matter which specific role you fulfill, in these roles, it is up to you to ensure the success of your project and, most importantly, the well-being of your team members.

Understand the business impact

Your first task should be to understand the business impact of your project. Some questions to ask are:

• How critical is the success of this project to the business?
• What are the consequences of failure?
• What does it mean to fail?
• Which features will deliver the most value?
• What are the parameters you must operate under?
• What’s negotiable and what’s not?

The answers you get to these questions will vary how your project should operate significantly. If the survival or reputation of the business is at stake, you...

Ingredients of a successful project

You understand the business impact of your project and you have a team eager to start; now what? You must have a plan, of course. As the German field marshal Moltke the Elder put it (or at least the modern paraphrase of it), “No plan survives first contact with the enemy.”

Half a century later, Winston Churchill and Dwight D. Eisenhower added, “Plans are of little importance [or are worthless], but planning is essential [or indispensable].”

Agile software development

Over the past decade, Agile software management has taken over the world, replacing waterfall project execution with Scrum and Gantt charts with Kanban boards and iterative and incremental delivery every two weeks instead of multi-year development cycles with long lead times and expensive Quality Assurance (QA) and support cycles. Statistics show that Agile projects have a higher success rate than waterfall projects. This intuitively makes sense...

Angular in an enterprise

Angular is not appropriate for use on every project. However, Angular is preferred in an enterprise because of the advanced concepts supported by the framework, such as Dependency Injection (DI), native TypeScript support, a modular architecture, robust packaging, testing, accessibility tools, and a commitment to release new versions regularly. The amalgamation of these tools helps applications scale beyond small apps to truly large-scale applications with 1,000+ views.

For Content Management System (CMS) style use cases and simple applications, you should consider using Analog. Analog is a meta-framework for building apps and websites with Angular: https://analogjs.org. Analog comes pre-configured with Server-Side Rendering (SSR), Static Site Generation (SSG), Vite (https://vitejs.dev) tooling, and convention-based routing and API routes for a no-frills, all-excitement development experience.

In fact, https://AngularForEnterprise.com was...

Tools and techniques for high-performance apps

In this section, we will cover topics related to building high-performance apps. While some of these tools are specific to Angular, the general sentiment and advice apply to all web applications. This means that a complicated and large application should still be able to:

• Hit a smooth 60 FPS rendering target
• Respond to user clicks within 340 ms
• Provide fast feedback loops to developers
• Run builds and automated tests as quickly as possible

Let’s first talk about runtime performance.

Runtime performance

Bad performance has real consequences for a business. In 2008, it was reported that a latency increase of 100 ms reduced Amazon’s sales by 1%. In 2006, Google observed that an additional 0.5 seconds in generating a search page led to a 20% decrease in traffic. These are astounding numbers at Amazon and Google’s scales, where milliseconds translate to millions of dollars...

Planning using Kanban and GitHub projects

Having a roadmap before getting on the road is critical in reaching your destination. Similarly, building a rough plan of action before you start coding is crucial in ensuring project success. Building a plan early on enables your colleagues or clients to be aware of what you’re planning to accomplish. However, any initial plan is guaranteed to change over time.

Agile software development aims to account for changing priorities and features over time. Kanban and Scrum are the two most popular methodologies that you can use to manage your project. Each methodology has a concept of a backlog and lists that capture planned, in progress, and completed work. A backlog, which contains a prioritized list of tasks, establishes a shared understanding of what needs to be worked on next. Lists that capture the status of each task act as information radiators, where stakeholders can get updates without interrupting your workflow. Whether you...

The 80-20 solution

Whether we develop apps at home, for passion projects, or at the office, for work, we must remain mindful of our purpose: to deliver value. If we don’t deliver value with our passion projects, we won’t feel fulfilled or happy. If we fail to deliver value at work, we may not get paid.

Delivering a modern web application is difficult. There are numerous challenges that we need to overcome to be successful:

• Deliver iteratively and incrementally
• Be scalable
• Serve dozens of screens and input types
• Be usable
• Be accessible
• Manage a team
• Groom a prioritized backlog
• Ensure acceptance criteria are clear, concise, and concrete

If you’ve ever led a project or tried to implement and deliver a project on your own, you’ll have realized that there’s never enough time and resources to cover the wide variety of stakeholder, team, and technical needs on any given project. Remember...

Router-first architecture

Router-first architecture is a way to:

• Enforce high-level thinking
• Ensure consensus on features before you start coding
• Plan for your codebase/team to grow
• Introduce little engineering overhead

There are seven steps to implementing the router-first architecture:

1. Develop a roadmap and scope (Chapter 4).
2. Design with lazy loading in mind (Chapter 4).
3. Implement a walking-skeleton navigation experience (Chapter 4).
4. Achieve a stateless, data-driven design (Chapters 4-5).
5. Enforce a decoupled component architecture (Chapters 6-9).
6. Differentiate between user controls and components (Chapter 8).
7. Maximize code reuse with TypeScript and ES features (Chapters 5-9).

As noted previously, each step will be covered in more detail in this and coming chapters. Before we go over these steps at a high level, let’s first cover feature modules in Angular, which are important fundamental...

Summary

This chapter taught you what it takes to succeed as a technical lead or an architect. You learned about the ingredients of running a successful project. We went over why Angular is a great fit for an enterprise. Then we dove into various tools and features to consider for building a high-performance solution. You learned how to create a Kanban board and became familiar with the 80-20 rule and the router-first architecture method to tackle complicated projects.

In the next chapter, you will be creating a far more complicated LOB application, using a router-first approach to designing and architecting scalable Angular applications with first-class authentication and authorization, user experience, and numerous recipes that cover a vast majority of requirements that you may find in LOB applications.

Further reading

• Analog, the full-stack Angular meta-framework: https://analogjs.org/
• Manifesto for Agile Software Development: https://agilemanifesto.org
• DevOps Research and Assessment (DORA) research program: https://dora.dev/
• DORA capability catalog: https://dora.dev/devops-capabilities
• What is Scrum and how to get started, Atlassian, 2023: https://www.atlassian.com/agile/scrum
• How to Have a Successful Agile Project with Transient Teams, Nicole Spence-Goon, December 14, 2021: https://www.excella.com/insights/successful-agile-project-with-transient-teams
• Ha, Not Ready to Ri: The Shu Ha Ri Approach to Agile Development, Brian Sjoberg and Ken Furlong, July 29, 2015: https://www.excella.com/insights/ha-not-ready-to-ri-the-shu-ha-ri-approach-to-agile-development
• Nx: Smart, Fast Extensible Build System: https://nx.dev
• RxAngular: Performance & DX: https://www.rx-angular.io
• Webpack module bundler: https://webpack.js.org/
...

Questions

Answer the following questions as best as possible to ensure you’ve understood the key concepts from this chapter without googling anything. Do you know if you got all the answers right? Visit https://angularforenterprise.com/self-assessment for more:

1. What three things should you do to succeed as a technical lead or architect?
2. What are the ingredients of a successful project?
3. Why should you use Angular in your enterprise?
4. What are the most important considerations for building Angular apps for your enterprise?
5. What causes performance issues in web applications?
6. How can we solve performance issues in large web applications?
7. What is an LOB app?
8. What is the Pareto principle?
9. What are the main goals of the router-first architecture?

Join our community on Discord

Join our community’s Discord space for discussions with the authors and other readers:

https://packt.link/AngularEnterpise3e

...