Training »

Angular for Architects

Class length: 2 - 4 days (customizable)

Decisions, Patterns, Costs, and Constraints

Angular for Architects goes straight to the big issues, all with a focus on how they apply to larger Angular systems:

  • Cost, schedule, and risk tradeoffs
  • System architecture
  • Maintainable code with team turnover
  • Build-versus-buy decisions
  • Dependency management
  • What to decide up front, where to be agile
  • Pragmatic re-factoring toward an architectural goal
  • State management
  • Monorepo and other approaches for large code base
  • API design; how to interact with a backend
  • Adopting or creating a design system
  • Where performance matters and how to achieve it

Our experience in these topics spans our numerous customer engagements on Angular systems of all size since 2013. Reinforced by example applications, this class consists primarily of extensive conversation with our experts about these topics.

As of early 2021 our training events are almost entirely online; but whether in-person or online, this event is very interactive.

Special offer: "beta test" class

For this launch of a new class, we have special low "beta test" pricing. Check the schedule and sign up now!

Who Should Attend?

  • Decision makers responsible for large or complex Angular projects
  • Angular tech leads and project managers
  • Application and system architects
  • Teams looking for a shared understanding of Angular architecture and practices

Prerequisites / requirements

  • Experience as (or interest in becoming) an application or system architect
  • Familiarity with Angular APIs and tools
  • Familiarity with CI/CD and application deployment

Proven results

We have trained thousands of developers at hundreds of companies, including numerous global leaders.

Topic outline

  • Introduction and background
    • Oasis Digital introduction, attendee introduction
    • What does architecture mean?
    • Major themes
      • Cost and budgets
      • Risks
      • Developer effort and elapsed time
      • Build vs. buy/adopt decisions
      • Idealized vs. pragmatic code
      • "Best practices" vs. optimizing for the problem at hand
      • Reach into the right toolbox, only as deep as needed
      • Design up front vs. refactoring toward a goal
      • Impact of when decisions are made
      • Runtime speed, responsiveness, and bundle size
  • The big picture: architecture, projects, relationships, and dependencies
    • Growing a large feature set
      • Growth by adding more lines of concrete code
      • Growth by adding fewer lines of abstract code
    • Project architecture and tooling
      • File structure and naming conventions of the Angular CLI
      • Structure, maintainability, and ease of collaboration
      • Building applications as a set of libraries
      • Use cases and challenges of custom schematics
    • Organization and process architecture
    • Dependency management
      • Single version policy
      • Define relationship rules based on library type
    • Code sharing with a monorepo
      • Nx
      • Lerna
      • Bazel for a multi-language monorepo
      • Ad-hoc monorepo tooling
    • Code sharing across repositories
      • via an artifact registry
      • via ad hoc scripting
    • Micro-frontend architecture
      • Runtime code sharing
  • Managing data and state
    • State is data that changes over time
      • Transient UI state
      • Persistent data state
      • State versus configuration
    • Scope: component, feature, application
    • State management libraries
      • Evaluating the need for a state management library
      • RxJS observables as a data store
      • NgRx
      • NGXS
      • Akita
      • MobX
      • Immutability: when, where, and how?
    • Forms as state management
      • Angular Forms: a state abstraction for user interaction
      • Strategies for multi-page forms
      • Nested form groups, form arrays, and CVAs to fill in the gaps
    • Routing as state management
      • Query, route, and matrix parameters
      • Resolvers for simplified data loading
    • Controls that manage their own state
      • Composing disparate state management solutions
    • Strategies for decoupling data from UI/UX
      • Facade services
      • Code to an interface or a library
      • Smart/view component pairs
    • Interacting with a backend
      • Identifying what should be done in the browser versus on a server
      • Benefits of a “backend for frontend”
      • API consistency: keeping frontend and backend code in sync
      • Data consistency: keeping frontend and backend data in sync
    • API implementations and front-end impacts
      • REST
      • GraphQL
      • Firebase, Amplify, and similar API designs
      • Serverless
      • WebSocket or SSE for real-time push updates
  • UI layout and component composition
    • Architecture of a feature
      • Decomposing a feature into a hierarchy of components
      • Separation of responsibilities
    • Using a design system for visual consistency
      • Deciding to build a design system or adopt
      • Retrofitting a design system into your app
      • Switching design systems
    • Review popular design systems and implementations
      • Angular Material
      • VMWare Clarity
      • IBM Carbon
      • Fluent
    • Third party controls
      • Reasons for choosing an existing library
      • Tradeoffs to consider when comparing libraries
      • How to handle writing your own
      • Decoupling data presentation from business logic
    • Popular third party control libraries
      • Kendo UI
      • Wijmo
    • Data grid specifics - to be renamed
      • Choosing between tables and grids
      • Features and data shapes that suggest a grid is needed
    • Popular data grids for Angular
      • ag-Grid
      • Kendo UI grid
      • Angular Data Grid
      • Angular Material Table
      • ngx-datatable
    • Scalable, maintainable CSS
      • Choosing a styling language: CSS, Sass, LESS
      • Utility CSS with Tailwind
      • Avoiding overuse of component styles
      • Architecture of global styles
    • Designing and coding for responsiveness
    • Strategies for effective collaboration with designers
    • Forms
      • Reactive forms vs. template-driven forms
      • Reusable complex form controls using ControlValueAccessor
      • Creating config-driven dynamic forms
    • Translating screen flows into a routing architecture
  • Internal quality: Care and feeding of application code
    • When to consider for a third-party library
    • Evaluating third-party libraries
    • Maintaining code quality and consistency
      • Using a linter to enforce code quality standards
      • Using Prettier for consistent formatting
      • Stricter compiler options (Angular and TypeScript)
      • --strict flag when generating a new Angular application
      • Integrating code quality tools into an IDE for minimal friction
    • Continuous integration
      • Code quality and style checks: lint, prettier, etc.
      • Unit tests with headless browser
      • Builds - cached where possible
      • E2E tests
    • Speeding up your Angular CI build
      • `nx affected`
      • Nx cache
      • Nx Cloud
      • Distributed builds
    • Build once, deploy anywhere
      • Load runtime configuration using APP_INITIALIZER
      • Appropriate use of environment.ts for local vs deployed environments
    • Deployment
      • Angular build output (static files)
      • Deploying in a container
    • Balancing effort across types of testing
    • Unit tests
      • Identifying what to test
      • Angular testing infrastructure (TestBed, etc.)
      • Frameworks and tools: Karma and Jasmine, Jest
    • E2E testing
      • Benefits relative to other types of testing
      • Strategies for efficient and maintainable identification of elements
      • Coordinating testers and developers
      • Frameworks and tools: Cypress, Protractor
    • Living in the Angular ecosystem
      • Keeping up with the latest Angular version
      • Dealing with version skew
  • Angular application "ilities" and software quality
    • Internationalization and localization
      • Run time vs. build time
      • Choosing a i18n / l10n library and tool set
      • ngx-translate
      • Transloco
      • @angular/localize
      • Locl
      • Fitting it into your development process
    • Meeting accessibility requirements
      • Automated a11y browser testing
    • Creating an optimized mobile experience
    • Evaluating options for mobile apps
      • Ionic (hybrid HTML5/native)
      • NativeScript (native)
      • Progressive web app (HTML5)
  • Performance
    • Keep bundle sizes low to control initial page load times
      • Setting size budgets
      • Troubleshooting with source-map-explorer
    • Lazy loading
    • Choosing a preloading strategy
      • Builtin: NoPreloading, PreloadAllModules
      • When does a custom preloading strategy pay off?
      • Prefetch all visible links (ngx-quicklink)
    • Shorten perceived load time with server side rendering
    • Optimizing change detection
      • Pure pipes
      • Efficient use of functions in templates
      • Optimizing ngFor (use trackBy, avoid data transforms)
      • Using OnPush change detection
    • Avoiding race conditions and excessive backend calls with correct use of RxJS
    • Auditing RxJS operator usage for correctness and performance
  • Security
    • Defense in depth
    • User authentication and authorization
      • Integration with user authentication systems
      • Managing authentication headers with HttpInterceptor
      • Restricting access with CanLoad route guards
      • Strategies for fine-grained role-based access to features
    • DOM-based cross-site scripting (XSS) defenses
      • Automatic sanitization
      • Bypassing sanitization
      • Support for native Trusted Types
    • Cross-site request forgery (XSRF) protections


Oasis Digital instructors have extensive experience with both Angular and numerous surrounding technologies; here are some of them. The specific instructor(s) assigned to your class will depend on which class or class topics (we customize!) are put together, availability, additional consulting needs, etc.

Private group classes

For corporate groups and other organizations, we offer live in-person or online events. Our instructors listen to your needs in depth and adjust the agenda. We can include with consulting assistance, or combine topics into a longer workshop week.

Future dates

We don't have any open enrollment dates for this class right now, but fill in the form for class date announcements, or follow us on social media (bottom of the page).

Training Interest / Inquiry
... (select above to continue)

Training FAQs

Q: Is this taught "in person"?
A: We offer training both in-person and online via remote conferencing.
Q: How does the remote option work?
A: Much like an in-person class, it is conducted by our expert trainers, in real time. The trainers can answer questions, assist with trouble students are having, etc. We strive to offer as much of the in-person experience as possible, online.
Q: Are there open enrollment public classes?
A: We currently only offer an open-enrollment "public" class for our flagship Angular Boot Camp.
Q: Can the content be customized?
A: For private team classes, we *always* discuss your goals, the class contents, any specials areas for extra coverage, etc. in advance. We customize both the contents and length (number of days) to your needs.
Q: Can we schedule a private class any time?
A: Our classes are taught by developers who use the subject technologies in their daily work, so we don't assign "any" available developer/trainer to any particular class, but only to classes with a strong experience and knowledge match. Please contact us to arrange a date.