Router-First Architecture in Angular Apps

DOGUHAN ULUCA

@duluca

Ways We Develop Apps

1. On your own time
2. Passion-driven
3. Likely under engineered
4. No routing

1. On company time
2. Requirement-driven
3. Likely over engineered
4. ngrx

Apps We Develop

Line-of-Business Apps

The Enterprise Niche

1. When we start coding, we really never know how much or how little our app will be used

2. Our apps can quickly become a LOB app

3. LOB apps are really important to businesses

So

Thus

What is Router-First Architecture?

• enforce high-level thinking
• ensuring consensus on features
• before you start coding
• plan on your codebase/team to grow
• little engineering overhead

High-Level Architecture

Lemon

Mart

Lemon

Mart

Stakeholders

Stakeholders

Stakeholders

Stakeholders

😰

🤬

😱

🤮

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

How to implement Router-First?

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

How to implement Router-First?

Site Map

Site Map

Site Map

1. Develop a Roadmap and Scope

• Get high-level architecture right
• Define the map before getting on the road
• Capture the vision concretely
• Bring tools in only when necessary
• Implement iteratively
• Drive for perfection only after the fundamentals are in place and agreed upon
• Document every artifact you create

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

How to implement Router-First?

First-Paint Matters, A Lot

• 53% of mobile users* abandon if load times > 3 secs
• Content is consumed mostly on mobile*
• 70% in the US
• 90% in China
• Angular Universal is hard

Define User Roles

• manager
• inventory
• pos
• unauthorized

Lazy Loading Tips

2. Design with Lazy-Loading in Mind

• First-paint matters a lot
• Lazy loading is low hanging fruit
• Requires user roles to be defined early on
• Very difficult implement lazy-loading after the fact

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

How to implement Router-First?

• Gather feedback from users
• Workout fundamental workflow and integration issues quickly
• Concrete representation of scope
• Sets the stage for multiple teams to work in tandem

3. Walking-Skeleton Navigation UX

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

How to implement Router-First?

RxJS/BehaviorSubject as Data Anchors

Using RxJS/BehaviorSubject

4. Be Stateless & Data-Driven

• Define "data anchors"
• Leverage RxJS features
• Write "functional" code
• Don't store data in components
• Data across components are kept in sync

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

How to implement Router-First?

Loading Data

Router Doesn't Always Make Sense

@Input and @Output Bindings

Simple Hierarchy of Components

Router Outlets and Auxiliary Paths to Compose Screens

Router Links

Resolvers

Auth Guards

5. Be Decoupled

• Every component should be responsible of loading their own data
• Allows for composition of components
• Router enables URL driven composition
• Don't abuse the router
• Ok to design for a parent component to contain multiple hard-coded components

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

How to implement Router-First?

What's a User Control?

What is a component?

Reusability

6. User Controls vs Components

• Wire-framing allows to identify reusable elements early on
• Keep user interaction code separate from business logic
• Encapsulate domain specific behavior and share it

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

How to implement Router-First?

DRY

Object-Oriented Design

Interfaces

Enum

Validators and Pipes

7. Use ES6 & TypeScript Features

• Design around abstractions
• Use classes to reuse context specific behavior
• Use interfaces to communicate the shape of internal and external data
• Use enums instead of string literals
• Leverage Angular Validators and Pipes to reuse logic

Router-First Metrics

• 6 months of development
• Increasing team size
• Increasing velocity
• Increasing quality
• First-paint 2-3 seconds
• Module loads vary 25-30 seconds
• Unoptimized, uncompressed
• Slow 3G first-paint

AngularForEnterprise.com

@duluca

github.com/duluca