Angular Boot Camp

Who benefits from Angular for Architects?

Decision Makers

Learn best practices for managing complex projects. Give your dev team a shared understanding of enterprise Angular architecture.

Experienced Developers

Interested in becoming an Angular architect? Gain the necessary skills to run an enterprise application.

System Architects

Deep dive into current architecture best practices for the newest version of Angular.

Angular for Architects Class Outline

Study the decisions, patterns, costs and constraints that face Angular architecture.

Together, we'll walk through the software development life cycle of an app with robust features that address enterprise challenges. Join the expert discussion on scaling your team and project.

Built on Nx

Leverage the features of Nx to build maintainable and reusable code bases.

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
  - 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

Conversations we'll have

Cost, schedule, and risk tradeoffs
System architecture
Library organization and layering techniques
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

Private Team Training

Upskill developer teams with instructor-led training online or at your location, U.S. or globally. Class content is customized to match your team's environment and needs.

Up to 30 developers can learn together, with multiple instructors for immersive workshop sessions. Accomodate larger teams with multiple classes.

What students are saying

With a second instructor helping the students, things moved along.... Mixing lab work with lectures. There's no substitute for hands-on work.

This class is very good. The content flowed as fast as we could consume it. I can't wait to use this knowledge in my next application!

This was an awesome class- I've been using Angular for almost a year but haven't gone through any training, and this helped fill a whole lot of knowledge gaps. I feel much more confident and am excited to put what I learned to use!

The class was very informative and engaging. The instructor was knowledgeable in answering questions as well as providing use cases and the best practices. The workshops provided an opportunity to learn hands-on while still receiving feedback. I truly enjoyed learning.

This class offered a space to interact and learn more in depth than you could from just reading documentation or watching videos. I liked being able to interact with instructors and ask specific questions. Really helped me understand way more than I have been able to learn on my own.

The instructor was probably the best I have ever experienced.Deeply knowledgeable about all of the subject matter, able to answer every question (including a handful that he was uncertain about). Very well spoken.

The Angular boot camp was extremely helpful. helped me get from no Angular knowledge to a point where I could dive in and begin to understand my organization's code.

Great overview, easy-to-understand examples, very knowledgeable instructor who was able to answer just about everything we asked him. Never felt at any point that it was going too fast or too slow. Learned a ton of useful information without feeling overwhelmed.

With a second instructor helping the students, things moved along.... Mixing lab work with lectures. There's no substitute for hands-on work.

This class is very good. The content flowed as fast as we could consume it. I can't wait to use this knowledge in my next application!

Meet your instructors

Every instructor is also a contributor to our curriculum and proven Angular expert.

Paul Spears

Paul leads our Angular training and curriculum team. His passion for effective class structure and pedagogy allows him to spread state-of-the-art Angular techniques as a speaker and panelist.

John Baur

John leads development projects, focusing on regular delivery and team orchestration. He specializes in sanding rough edges and reducing speed bumps that slow the learning progress.

Zachary Kipping

Zachary is a front-end heavy, full stack developer who loves learning about the shiniest new technologies.

Lance Finney

Lance has been an Angular developer since 2015, and a Java developer for over a decade. He specializes in powerful Angular add-ons including NgRx and ag-grid.

Joshua Demetri

Joshua is a software developer working with web applications in the Angular framework. He also has experience with large enterprise applications.

David Moore

David is a mobile and web developer. He's been programming computers since the 1990s, and enjoys working on puzzles in the front-end enterprise space. He's written for several technical publications.

FAQs

How closely do the classes follow the outlines?

We always cover many key topics. In private group classes we adjust the content to match your group's requests.

Are the online classes the same as the in-person classes?

The contents are the same; we strive to offer the same "magic" in-person and online, helping students one-on-one as needed. Still, there are inherent advantages to attending in person. Learn more from our online-vs-in-person blog post.

Should our team attend a public class, or a private on-site class?

We offer group discounts for 4 or more tickets. If you have 6 or more developers, it may be more economical to bring an instructor to you. In private classes, the instructor can tailor the class topics to your team's needs, and discuss specific use cases in more depth.

Are more advanced classes available?

Yes! Angular Boot Camp covers introductory through intermediate topics, while our other other classes cover more advanced and related tools and topic in the Angular ecosystem.

Do the classes cover server-side API / data services?

Angular Boot Camp covers how to call server-side APIs, while our other classes and consulting services go in depth on full stack development.

Can students receive a Certificate of Completion?

Yes, we can issue a certificate on request; please inquire by email after your class is complete.

Is an AngularJS 1.x class still available?

Demand for 1.x live training is not sufficient for ticketed classes, but we occasionally teach it for private groups.

Do you cover Node.js in Angular Boot Camp?

We discuss Node.js, and assist with installation, as Node.js powers the Angular development tools. If you want to dive deeper, we recommend our Node.js/TypeScript class.

Do the classes cover HTML and CSS?

Students should already be familiar with HTML and CSS, but we cover the basics in the context of the HTML DOM which Angular manipulates. We recommend the extensive free or inexpensive HTML and CSS materials online, but also often assist teams to make best use of HTML and CSS (including SCSS) at scale.

How about code review and project assistance?

Our private Angular Boot Camp classes often include additional days of customized training, with code review, project launch or design assistance.

What should students bring to class?

Students should bring a laptop with Chrome and their preferred editor or IDE. We'll provide more preparation details after sign-up.

Angular for Architects

Navigate the challenges of scaled Angular systems

Training Catalog

Learn as a Team

Immediate Answers

Enterprise Focus

Move Faster

Future Ready

Proven Results