Training »

Angular for Architects

Broad issues, Nx details

Class length: 3 - 4 days (customizable)

Decisions, Patterns, Costs, and Constraints

Angular for Architects focuses on the big issues that face complex Angular systems:

  • Cost, schedule, and risk tradeoffs
  • System architecture
  • Maintainable code with team turnover
  • Build-versus-buy decisions
  • Dependency management
  • Agile decision-making, and what to decide up front
  • Pragmatic re-factoring
  • State management
  • Monorepo (Nx, etc.) vs multi-repo for a large code base
  • API design for optimal backend interaction
  • Adopt or create a design system
  • Achieve optimal performance---and where it matters

Reap the benefits of our many years of experience with Angular systems. You'll study example applications in-depth and have extensive conversations with our experts about architecture.

We cover Nx in depth, and use it in our examples.

This event is highly interactive whether you attend online or in-person.

Not using Nx?

Nearly every topic in Angular for Architects is about the broader architectural context, relevant regardless of specific tool choices. In private group classes, we adjust the topics for your needs.

Who Should Attend?

  • Decision makers responsible for complex projects
  • Tech leads and project managers
  • Experienced application and system architects
  • Teams looking for a shared understanding of architecture and practices
  • Developers interested in becoming architects

You must be familiar with:

  • Angular APIs and tools
  • CI/CD and application deployment

Proven results

We've trained thousands of developers at companies like yours

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 (Nx)
      • File structure and naming conventions of the Angular CLI and Nx
      • 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
      • Relationship rules based on library type (Nx)
    • 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

Meet your instructors

Your instructors will depend on your custom requests, availability, 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's conducted by our expert instructors in real time. The instructors answer questions, assist students, etc. We strive to offer as much of the in-person experience as possible, online.
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.