Angular: The Big Picture
The following is rough notes that I made while watching Angular: The Big Picture by Joe Eames.
I hope that the following information is useful to you and recommend that you watch the course yourself to get the full lowdown on this great JavaScript framework and platform.
Benefits & Features of Angular
- Reduction of Cost
- Standard Compliance
- ES6+
- Modules
- Internationalization & Accessibility - Performance
- Open Source
- Popularity
- Documentation
Subjective & Situational Benefits
- Framework
- Router, http, forms, rxjs, etc.
- Less Decisions
Angular is opinionated in some ways but allows you to choose your own state management solution
- Uniformity
- Google backing
- TypeScript
Basic Features
- Progressive Web Apps
- Lazy Loading
- Forms
- RxJS
- Fully Featured Router
- Animations
Advanced Features
+ Server-Side Rendering
+ Mobile friendly
+ Angular Language Service
+ ngUpgrade for upgrading an app from AngularJS to Angular
Angular Architecture
One Way Data Flow
Really about change detection
Dependency Injection
export class AddNewTagComponent {
constructor(private articleSvc: ArticleService) {}
}
Components
@Component({
selector: ‘add-new-tag’,
}
export class AddNewTagComponent {
}
<div>
<h1>Hello</h1>
<add-new-tag></add-new-tag>
</div>
Directives
A way to add new capabilities to an element of your display.
Example:
- Make element draggable
- Make element appear on hover
Usually implemented as html attributes
<div hover-trigger>
Hover Over Me to See
</div>
<div appear-on-hover>
Some Content
</div>
Templates in-line in Components
Specify how components display
@Component({
selector: ‘app-about’,
template: `<div>
<h1>Title</h1>
</div>`
})
export class AboutComponent {
}
Zone.js & Change Detection
One thing you want from any framework is for it to re-render the display
when an elements state changes.
Zone.js is the key to Angular’s change detection
It creates a wrapper around all asynchronous operations in the browser
such as user interactions, HTTP, Timers, and any other events that can cause changes in state.
Rendering targets
- Desktop
- Mobile
- Native Desktop applications
Rendering Options
Browser/DOM
Server-Side
Native Mobile Apps
Native Desktop Apps
Tooling
Angular CLI
Some things to consider for an app:
- Module Handling
- Bundling
- Minifying
- TypeScript/ES6 Transpilation
- Browser Shims
- Zone.js
CLI Capabilities:
- Create New Applications and set them up correctly
- New Component/Service/Pipe/Etc
- Serving up the Application
- Linting
- Testing
- Building
Server-Side Rendering
Performance: Smaller download size, faster Render Time
Better SEO (although Google now parses JavaScript)
Server-Side Rendering Operation Modes
- Full Pre-Render
- Dynamic Pre-Render: built by Angular Universal,
the HTML and CSS is sent down to the browser,
then the switch happens. Only Node and ASP.NET Core are supported - Client-Side Switch
- Download App including Angular framework.
- In a hidden div, it boots the app, renders the current page,
replays any events the user has done so far to the page to maintain the
current state, swap display inside of the hidden div to the main page.
Quite complex! But can pay off in the right situations
Mobile & Native Frameworks
Ionic and NativeScript
Desktop with Electron
All work with Angular
Testing Tools
Karma — unit testing
Protractor — web automation testing
Some alternatives to these are:
- Jest
- theIntern
- Cypress.io
Angular Testing Utilities
- TestBed
- Async & fakeAsync
- MockBackend
AOT Compiler
Ahead of Time Compiler
Radically improves the performance of Angular applications
Older Angular used JIT process for turning templates into JS functions
Editors
Angular Language Service is supported in VS Code,
WebStorm and Sublime Text
Tips, Tricks & Gotchas
Gotchas (in Angular 6)
- TypeScript & Decorators
Decorators are a different type of syntax
TypeScript has its own learning curve
- Custom Pipes
there are two flavors, pure (simple) and impure (advanced)
Pure: only evaluated when input changes
Impure: evaluated on every change detection cycle
(non performant)
- Module API
You can easily forget to register a service or component and cause a bug
imports
exports
bootstrap
providers
declarations
And more…
Simple example module:
@NgModule({
declarations: [ AppComponent, HomeComponent ],
imports: [ BrowserModule ],
providers: [ Auth ],
bootstrap: [AppComponent]
})
- Dealing with Multiple Modules
Dealing with Routing
Importing and exporting items from each of the modules
- Cryptic Error Messages
- Build
Angular builds are significantly more complex than AngularJS was.
- Delivery Size
1 MB hello world app
- RxJS
Promises vs. observables
Self-subscribe or not
Forgetting to subscribe
Accidentaly making multiple http requests
Hot vs. cold observables
Shared observables
Tips & Tricks
Use the CLI
Follow the style guide
Do sorting & filtering in your component
Learn & use TypeScript
Learn & use Ngrx
Learn Webpack
Use lazy loading
Use VS Code
Don’t touch the DOM directly
Understand what you’re sending down to the browser
Use immutable or observable data to maximize performance where appropriate
Present and Future
Angular vs Other Frameworks
- Factors to Consider
Technical aspects
Political environment
Personnel considerations
Likely future landscape
- Conditions to Consider Using Angular
Enterprise type company?
Do you use a Typed backend such as C# or Java?
Apps written in AngularJS?
Do you like keeping Templates separate from code?
Do you like large company backing?
Do you prefer a framework vs set of libraries?
Do you like an established track record?
Popularity and momentum?
Future
Angular Labs: the Angular team’s formalized umbrella for trying out experiments
Angular Elements: write a UI control in Angular and compile it down to a web component
Schematics: part of the CLI project, allowing you to customize what it produces
Universal: make server-side rendering easy
Migrations
Build system: more targets and options and optimizations
ABC: Angular, Babel and Closure
