Angular Architect Accelerator

In this module, we are going to look at a full overview of the program and the core parts we focus on to get results. This video is extremely important to understand the road ahead.

Here’s what we cover:

• Our main purposes and objectives 
• The origin of this seminar
• General housekeeping
• Important things to remember going into this
• How to get the most out of the seminar – the success and the failure uniform
• How the seminar works

In this module, I’m going to show you the characteristics of highly efficient teams and how to set yourself up for success with the seminar by creating a winning culture.

Here’s what we cover:

• The three building blocks of highly efficient Angular teams
• The anatomy of a winning culture
• Getting the right culture in place

Action items:

• Complete the “Winning culture worksheet” and share it in the lesson’s Slack channel.

In this module, I will show you the best practices and fundamental principles of creating a clean and maintainable Angular architecture.

UPDATE: Variation for big teams

The architecture described in this lesson is great for a few developers (10 or less) working together with multiple apps. If you are having a huge team (typically more than 10) and are having a feature team for each feature module, I recommend going toward creating a feature lib for each feature instead of having this in the apps. This will create stronger isolation between the feature teams and provide faster “affected:xx commands” (eg. npm run affected:test and lint). This is also described in NRWL’s “Enterprise Angular Monorepo Patterns”.

Here’s what we are going to cover:

• What is architecture?
• Creating a good Angular architecture
• Choosing the right architecture for your setup
• Case study: Monorepo architecture
• Using Sandboxes/facades
• Organizing libs and conventions in a monorepo
• Enforcing module boundaries

Action items:

• Complete “Architecture improvement worksheet” —  Investigate the current top 5 architecture pain point and how they can be solved using the content from this module, share in the lesson’s Slack channel.
• Complete the “Draw you clean architecture worksheet” — Make a high-level drawing of your new architecture.

In this module, I will show you the best practices regarding writing clean apps.

Here’s what we are going to cover:

• Why is clean code important?
• Ensuring a clean architecture of Angular apps
• A process for ensuring clean architecture in Angular apps
• The 3-second rule
• Clean code best practices
• Using automation for linting and formatting

Action items:

• Complete the “Clean Angular apps worksheet” — Investigate and draft solutions using the content in this module. Remember to share the worksheet in the lesson’s Slack channel.

ABOUT THIS LESSON

 In this lesson, I will show you the process of developing Angular apps efficiently.
Here’s what we are going to cover:

• Refining and task breakdown processes
• The feature kickoff
• Starting with the big picture
• Splitting out the work

In this video, I will be walking through the week 1 content and show you how you can internalize it.

In this module, I will show you the processes framework for creating a highly efficient software development workflow.

Here’s what we are going to cover:

• Universal principles of efficient processes
• Continuous delivery workflow
• Efficient pull requests
• Continuous improvement – getting better every day
• What you get is what you give: sharing your knowledge

Action items:

• Complete the “Process improvement worksheet” —  Complete the process improvement worksheet and share it in the lesson’s Slack channel.
• Set up a decision log using  “Setup decision log cheatsheet” —  Set up the decision log so we can start to capture and schedule the improvement ideas we identify through the seminar.

In this module, I will show you how to use Git hooks with Angular for easier maintenance.

Here’s what we are going to cover:

• Running Git hooks vs. running on a DevOps pipeline
• How to run TSLint, StyleLint and Prettier on pre-commit using Husky and lint-staged
• How to lint commit messages

Action Items:

• Complete the “Setup Git hooks worksheet” — Complete the worksheet to setup Git hooks with formatting and linting.

In this module, we will be going through how to create a proven highly efficient continuous delivery pipeline for Angular apps.

Here’s what we are going to cover:

• Walkthrough of a proven highly efficient continuous delivery pipeline for Angular apps with/without monorepo architectures
• Tricks to tune the pipeline
  • Build once, deploy many
  • Dynamic configurations
  • Automatic master catch up on rebuild and master update
• Handling apps with different CI needs
• Best practices with monorepo DevOps pipelines

Action items:

• Complete “Improving the DevOps pipeline worksheet” — Improve your DevOps pipeline and apply the module content by completing the worksheet and share it in the lesson’s Slack channel. 

In this module, I will show you how to use feature toggling in Angular apps.

Here’s what we are going to cover:

• Why feature toggling?
• What to feature toggle?
• How and where to create the toggles?
• Different types of feature toggles
• How to clean up temp toggles
• Requirements of a good feature toggle system

Action items:

• Setting up feature toggling for your Angular apps — Setting up feature toggling using “Setting up feature toggling cheatsheet”

ABOUT THIS LESSON

In this lesson, I will show you how to scale the DevOps and processes to work for a 50+ person feature-per-feature-team setup.

• What are the challenges when projects scale up?
• Overview of how to handle DevOps and processes in a huge project
• Distributing the work of the DevOps pipeline
• Implementing a merge queue

ABOUT THIS LESSON

 In this lesson, I will show you when and how you should use Angular Schematics for your organization.

Here’s what we’re going to cover:

• What is Angular schematics?
• Common Angular schematics needs for organizations
• How to implement the common schematics

ABOUT THIS LESSON

In this lesson, I will show you how to create custom TSLint rules for your project.
Here’s what we’re going to cover:

• Why create custom TSLint rules?
• The easiest way to create TSLint rules
• Implementing some common useful TSLint rules
• Writing tests for TSLint rules

In this video, I will be walking through the week 2 content and show you how you can internalize it.

In this module, I will show you the best practices with Angular testing, including the different scopes and how to test the different types of classes, you will encounter when creating Angular apps. We will also touch upon the pragmatic approach to do tests in your daily work.

Here’s what we are going to cover:

• Why testing?
• What should be tested?
• What testing framework to use?
• Different types of tests in Angular apps
• Handling mocks/stubs easily?
• Faster unit tests
• How to ensure high test coverage
• TDD testing with Angular

Action items:

• Complete the “Improving testing worksheet”— Complete the worksheet to identify the current pain points regarding testing and apply the lesson content to fix it.

In this module, we will learn how to handle async tests in Angular apps.

Here’s what we’re going to cover:

• When is code running asynchronously in an Angular app?
• Why is it important to handle async tests?
• Done callback
• Async keyword in tests
• FakeAsync
• Marbles testing

In this module, I will show you how to do end-to-end testing with Cypress.

Here’s what we are going to cover:

• Why E2E tests?
• The common trap most go in
• The seven steps to e2e testing success
• Protractor vs. Cypress
• Getting started with Cypress testing
• Creating a Cypress smoke test
• Best practices and common pitfalls with Cypress

Action items:

• Complete the “Setting up end-to-end testing worksheet” — Seven steps to successfully getting started with end-to-end testing and share it in the lesson’s Slack channel.

In this video, I will be walking through the week 3 content and show you how you can internalize it.

ABOUT THIS LESSON

 In this lesson, I will go through the 11 RxJS operators you need to know. This will make sure that you are confident in using the right operator at the right time.

Here’s what we’re going to cover:

• RxJS brief overview
• The 11 operators you need to know
• The most common use cases of RxJS

ABOUT THIS LESSON

In this module, I will teach you the best practices with Redux/NgRx.

Here’s what we are going to cover:

• Some personal opinions and advice
• Imperative vs. reactive architectures
• NgRx vs. NgXS vs. Akita vs. RxJS
• How to fit NgRx into your architecture
• Best practices with NgRx

Action items:

1. Complete the “Improving state management worksheet” — Complete the worksheet to start internalizing the knowledge from the lesson and share in the lesson’s Slack channel.

In this lesson, we will be covering patterns to get the most out of NgRx.
Here’s what we are going to cover:

• Quick recap: Why NgRx?
  
• NgRx fundamentals
  
• Thinking reactively: Designing a reactive architecture
  
• When to use effects?
  
• How to create action, reducers, and effects with NgRx 8 factories
  
• Using NgRx entity
• Handle router state with NgRx router
• NgRx debugging
• Integrating NgRx8 with error handling
• Anonymizing and logging the store state

In this lesson, we will learn how to master forms and handle forms in the most effective way.
Here’s what we are going to cover:

• The importance of forms in Angular apps
• The different ways of handling forms in an Angular app
• When to use template-driven forms 
• When to use reactive forms 
• Creating a stepper wizard
• Implementing autosave
• Creating custom validators
• Validating input fields
• Formatting values in input fields
• Creating dynamic form generation

In this lesson, we will cover different patterns to make Angular development faster, easier and more maintainable.
Here’s what we’re going to cover:

• Creating reusable Angular components
• Common pitfalls with component design
• Designing a plugin architecture
• Dynamic UI rendering
• Adapter pattern for easier maintenance of UI components

ABOUT THIS LESSON

In this module, I will show you how to create a design system.

Here’s what we are going to cover:

• UI libraries and design systems
• When should you consider creating a design system?
• Why most companies fail with creating a design system
• Implementing the design system
• Maintaining the design system

Action items:

Complete the “Implementing the design system worksheet” — Follow the steps to start creating the design system to the levels that make sense for your specific situation.

ABOUT THIS LESSON

In this lesson, I will go through how to develop responsive Angular apps using the mobile-first philosophy.

Here’s what we’re going to cover:

• Why mobile-first and responsive?
• The essentials of responsive design
• The three-step processes to develop responsive Angular apps efficiently 

In this section, I will be walking through week 4 content and show you how you can internalize it.

In this module, I will give you an overview of the systematic processes for performance optimizing Angular apps.

This lesson is done live in front of an audience if you wondered why it is a little different from the others.

Here is what we’re going to cover:

• The systematic processes of optimizing Angular apps like a doc
• Overview of how to optimize for load-time
• Overview of how to optimize for better run-time
• The top 5 most common Angular performance problems

ABOUT THIS LESSON

In this module, we will be looking at how to optimize load time in Angular apps.

Here’s what we’re going to cover:

• The scientific workflow to optimize load-time performance

• The three things that matter when optimizing load time performance

• How the different bundles in an Angular CLI project work

• The low hanging fruits of load time optimization

• Load time performance tuning techniques

• Optimizing hosting for best load time performance

• Measuring load time performance

• The checklist for optimizing load time performance

Action items:

1. Complete the “Tuning load time performance worksheet” — Optimize your load time performance of your Angular app by completing the tuning load time performance worksheet and share it in the lesson’s Slack channel

ABOUT THIS LESSON

In this lesson, I will show you how to optimize run time performance in an Angular app.

Here’s what we’re going to cover:

• Architecture first
• How Angular change detection works
• OnPush change detection
• Doing a performance audit
• Caching
• Run outside the Angular zone
• Using web workers
• Detaching change detection
• markForCheck vs. detectChanges
• Angular without zone.js
• The run time performance checklist

Action items:

Complete the “Run time optimization checklist worksheet” — Complete the performance tuning checklist in regards to your current project and share it in the lesson’s Slack channel.

ABOUT THIS LESSON

This lesson will show you how to server-sider render Angular apps using Angular Universal. Here I will share with you the exact processes that I have used to implement server-side rendering for big webshops.

Here’s what we’re going to cover:

• Why server-side render Angular apps?
• Why server-side rendering is a two-edged sword,
• Best practices with server-side rendering Angular apps
• The step by step processes to set up server-side rendering.

ABOUT THIS LESSON

In this lesson, we are going to cover how to handle internationalization to ensure the dynamic and correct display of language, dates, numbers, and currencies.

Here’s what we are going to cover:

• Essentials when handling dynamic internalization in an Angular app
• The simple way of handling translations
• Handling different date formats
• Handling different currencies
• Handling different thousand and decimal separators
• Creating a management dashboard for translations

Action items:

1. Complete the “Setting up internalization cheatsheet” — The worksheet will help you determine your localization needs, how to localize the user and what kind of localization solution you want to implement.

ABOUT THIS LESSON

In this lesson, we will look at authentication with Angular and how to setup authentication using IdentityServer4, ASP.NET Core and Angular.

Here’s what we’re going to cover:

• Definitions first: OpenID Connect and OAuth 2
• Setting up OpenID Connect using IdentityServer4 and Angular
• Important security consideration in Angular authentication and authorization
• Using a SaaS for authentication and authorization

ABOUT THIS LESSON

In this lesson, we will be learning about logging in Angular apps. We will cover a 10 step process to logging success in Angular apps.

Here’s what we’re going to cover:

• Why is logging important?
• The 10 steps to successful logging
• Using alerts to get notified about problems

Action items:

• Complete the “Logging checklist” — Complete the logging checklist to make sure you are internalizing the content of the lesson to its fullest.

• Share your current logging and monitoring setup in the lesson’s Slack channel — Share your current logging and alerts setup in the lesson’s slack channel so you can get feedback and make it better.

ABOUT THIS LESSON

 In this lesson, I will show you the best practices for securing Angular apps.

Here’s what we’re going to cover:

• The importance of frontend security
• The most common security vulnerabilities for Angular apps
• How to mitigate the most common security vulnerabilities
• Handling secure logins
• Handling secure payments

ABOUT THIS LESSON

In this lesson, I will show you the processes of debugging Angular apps. The skill of debugging is about following a process that inevitably will fix the bug at hand in a reasonable time.

Here’s what we’re going to cover:

• How to minimize bugs/debugging in the first place
• The processes of efficient debugging
• Knowing when to stop and learn
• Catch and fix bugs like a machine

ABOUT THIS LESSON

In this lesson, I will show you how to use backends for frontends and GraphQL with your Angular apps.

Here’s what we’re going to cover:

• BFF vs. CRUD endpoints
• The limitations of REST
• Benefits of using GraphQL
• Using GraphQL in your Angular architecture

ABOUT THIS LESSON

In this lesson, we will learn how to create NPM packages for Angular apps with Nx.

 Here’s what we’re going to cover:

• When to create NPM packages?
• The steps to set up packaging
• Maintaining NPM packages

ABOUT THIS LESSON

In this lesson, we will be learning about micro frontends. This includes both looking at the different use cases as well as different tools for it such as single-spa and Angular elements.

Here’s what we’re going to cover:

• What is a micro frontend?
• What are the use cases for micro frontends?
• The different ways to implement micro frontends with Angular
• Managing a micro frontend architecture

About this lesson

In this module, we will be learning about Angular Elements: the use cases, the solutions, and best practices.

Here’s what we’re going to cover:

• Web Components
• An introduction to Angular Elements
• Understanding the magic behind Angular Elements
• Angular Elements use cases
• Angular Elements best practices
• Getting started with Angular Elements
• Angular Elements demo

ABOUT THIS LESSON

In this lesson, I will show you how to use Angular PWA to empower your Angular apps with native capabilities and improve performance.

Here’s what we’re going to cover:

• Definitions first: PWA and service workers
• Use cases for service workers
• Use service workers to improve performance
• Make your Angular App work offline
• Creating an installable Angular PWA

ABOUT THIS LESSON

In this lesson, I will show you how to create hybrid apps with Angular, Ionic, and Capacitor.
Here’s what we are going to cover:

• What is Capacitor?
• What is Ionic?
• Capacitor vs. NativeScript vs. PWA
• Creating a basic Capacitor app
• Going native with a Capacitor plugin
• Best practices with Ionic and Capacitor
• Architecture with Capacitor
• Releasing a Capacitor app

In this lesson, we will see how to craft our ten commandments of Angular development, to get everyone aligned on some highly efficient principles to write world-class Angular applications.

I even provided a live session of me teaching this to some of my clients.

In this lesson, I will share with you what to do to maximize the outcome of the seminar and the number one reason, if you haven’t been able to internalize the content until now.

Action items:

• Identify the top 5 things you want to realize/fix for your project and create decision log items for them
  • Share your top five desired improvements, you want to implement in the lesson’s Slack channel
• If you have problems with this, get help by sharing it in the lesson’s Slack channel

In this lesson, we will be creating our 12-month technology roadmap and make a commitment to implement our most important improvements.

Action items:

• Create your 12-month technology roadmap
  • Either using my Google Sheets warmap calendar
  • Draw.io
  • Confluence
  • Or other drawings program
• Share the roadmap with the team and make a commitment to follow the roadmap
• Create commitment by sharing it in the lesson’s Slack channel