Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Angular's new Standalone Components: How Will They Affect My Architecture? @iJS London 2022
Manfred Steyer
PRO
April 26, 2022
Programming
0
390
Angular's new Standalone Components: How Will They Affect My Architecture? @iJS London 2022
Manfred Steyer
PRO
April 26, 2022
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
Sustainable SPAs with Strategic Design: A Wonderful Friendship?
manfredsteyer
PRO
0
24
Micro Frontends with Module Federation: Beyond the Basics @codecrafts2022
manfredsteyer
PRO
0
97
Rethinking Auth for SPAs and Micro Frontends: Easy and Secure With Gateways
manfredsteyer
PRO
0
44
Micro Frontends with Module Federation: Beyond the Basics @jax2022
manfredsteyer
PRO
1
290
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
manfredsteyer
PRO
0
300
Micro Frontends with Module Federation: Beyond the Basics
manfredsteyer
PRO
0
310
Micro Frontends with Module Federation: Beyond the Basics
manfredsteyer
PRO
0
110
Micro Frontends with Module Federation @HubsWebConf 2022
manfredsteyer
PRO
0
120
Micro Frontends with Module Federation: Beyond the Basics @GlobalAngularSummit22
manfredsteyer
PRO
0
150
Other Decks in Programming
See All in Programming
Jetpack Compose 頑張らないPreviewParameterProvider
horie23
0
110
Kotlin 最新動向2022 #tfcon #techfeed
ntaro
1
1.1k
New Relicを使った Observabilityの実現方法と活用例 / gocon 2022 spring after talk
budougumi0617
0
1.1k
About Type Syntax Proposal
quramy
1
1.1k
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
3
1.8k
Yumemi.apk #6 ~ゆめみのAndroidエンジニア 日頃の成果大発表会!~ Session 2
blendthink
1
210
CIでAndroidUIテストの様子を録画してみた
mkeeda
0
180
Groovy Roadmap
paulk
7
13k
Oculus Interaction SDK 概説 / xrdnk-caunity-LT4
xrdnk
0
170
코드 품질 1% 올리기
pluu
1
970
WindowsコンテナDojo:第2回 Windowsコンテナアプリのビルド、公開、デプロイ
oniak3ibm
PRO
0
140
ebpfとWASMに思いを馳せる2022 / techfeed-conference-2022-ebpf-wasm-amsy810
masayaaoyama
0
670
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
A better future with KSS
kneath
225
15k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
GraphQLの誤解/rethinking-graphql
sonatard
24
6.2k
Atom: Resistance is Futile
akmur
255
20k
Why Our Code Smells
bkeepers
PRO
324
54k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
KATA
mclloyd
7
8.6k
Visualization
eitanlees
124
11k
Three Pipe Problems
jasonvnalue
89
8.6k
Docker and Python
trallard
27
1.5k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Transcript
@ManfredSteyer Angular's new Standalone Components How Will They Affect My
Architecture?
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Angular 2 BETA, Feb 2016 @Component({ selector: 'app', directives:
[ROUTER_DIRECTIVES, MyComponent, NgIf, NgFor], templateUrl: 'app/app.html' }) @RouteConfig([ { path: '/', component: Home, … }, { path: '/voucher', component: Voucher, … }, ]) export class App { […] }
@ManfredSteyer Angular 2 RC.5, August 2016 import { NgModule }
from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; […] @NgModule({ imports: [BrowserModule, OtherModule], declarations: [AppComponent, OtherComponent, OtherDirective], providers: [], bootstrap: [AppComponent], }) export class AppModule {}
@ManfredSteyer Angular 2 RC.5, August 2016 import { NgModule }
from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; […] @NgModule({ imports: [BrowserModule, OtherModule], declarations: [AppComponent, OtherComponent, OtherDirective], providers: [], bootstrap: [AppComponent], }) export class AppModule {}
@ManfredSteyer Angular 2 RC.5, August 2016 import { NgModule }
from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; […] @NgModule({ imports: [BrowserModule, OtherModule], declarations: [AppComponent, OtherComponent, OtherDirective], providers: [], bootstrap: [AppComponent], }) export class AppModule {} TypeScript Modules Angular Modules
@ManfredSteyer My Ivy Talk at ng-conf 2020
@ManfredSteyer @Component({ standalone: true, selector: 'app-root', imports: [ HomeComponent, AboutComponent,
HttpClientModule, ], templateUrl: '…' }) export class AppComponent { […] }
@ManfredSteyer bootstrap(AppComponent);
@ManfredSteyer
@ManfredSteyer #1 Mental Model #2 Compatibility #3 Architecture
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer Standalone Component = Component + NgModule (not implemented that
way!)
@ManfredSteyer @Component({ standalone: true, selector: 'app-root', imports: [ HomeComponent, AboutComponent,
HttpClientModule, ], templateUrl: '…' }) export class AppComponent { […] } @NgModule({ imports: [ HttpClientModule, HomeComponentModule, AboutComponentModule, ], declares: [ AppComponent ] }) export class AppModule { … } @Component({ selector: 'app-root', templateUrl: '…' }) export class AppComponent { […] } @Component({ selector: 'app-root', templateUrl: '…' }) export class AppComponent { […] }
@ManfredSteyer @Pipe({ standalone: true, name: 'city', pure: true }) export
class CityPipe implements PipeTransform { […] }
@ManfredSteyer @Directive({ standalone: true, selector: 'input[appCity]', providers: [ … ]
}) export class CityValidator implements Validator { […] }
@ManfredSteyer @Component({ standalone: true, imports: [ […], FlightCardComponent, CityPipe, CityValidator,
], selector: 'flight-search', templateUrl: '…' }) export class FlightSearchComponent { […] }
@ManfredSteyer
@ManfredSteyer It looks like you want to use NgIfDirective and
MyComponent. Shall I import it for you?
@ManfredSteyer (… using a shim for Standalone Blocks NOT intented
for production)
@ManfredSteyer
@ManfredSteyer → @Component({ standalone: true, selector: 'app-root', imports: [ […]
HttpClientModule, ], templateUrl: '…' }) export class AppComponent { }
@ManfredSteyer → @Component({ standalone: true, selector: 'app-root', imports: [ […]
HttpClientModule, ], templateUrl: '…' }) export class AppComponent { }
@ManfredSteyer → @NgModule({ imports: [ FlightCardComponent, ], declarations: [ MyTicketsComponent
], }) export class TicketsModule { }
@ManfredSteyer → @NgModule({ imports: [ FlightCardComponent, ], declarations: [ MyTicketsComponent
], }) export class TicketsModule { }
@ManfredSteyer
@ManfredSteyer (… using a shim for Standalone Blocks NOT intented
for production)
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer // index.ts == Public API export * from './flight-booking.component';
export * from './flight-card/flight-card.component';
@ManfredSteyer import * as booking from './booking'; […] @Component({ standalone:
true, imports: [ ...Object.values(booking) as any[], […] ], […] }) export class MyComponent { […] }
@ManfredSteyer import * as booking from './booking'; […] @Component({ standalone:
true, imports: [ ...Object.values(booking) as any[], […] ], […] }) export class MyComponent { […] } Not beautiful!
@ManfredSteyer import * as booking from './booking'; […] @Component({ standalone:
true, imports: [ ...all(booking), […] ], […] }) export class MyComponent { […] } Custom Helper Function
@ManfredSteyer
@ManfredSteyer import * as booking from './booking'; […] @Component({ standalone:
true, imports: [ booking, […] ], […] }) export class MyComponent { […] } Wish List
@ManfredSteyer
@ManfredSteyer "paths": { "@demo/data": ["src/app/data/index.ts"], "@demo/shared": ["src/app/shared/index.ts"], "@demo/shell": ["src/app/shell/index.ts"], "@demo/booking":
["src/app/booking/index.ts"] }
@ManfredSteyer import * as booking from '@demo/booking'; […] @Component({ standalone:
true, imports: [ ...Object.values(booking) as any[], […] ], […] }) export class MyComponent { […] }
@ManfredSteyer (… using a shim for Standalone Blocks NOT intented
for production)
@ManfredSteyer
@ManfredSteyer + Generates path mappings + Generates initial barrel +
Prevents bypassing index.ts + much more
@ManfredSteyer
@ManfredSteyer Booking Booking Boarding Boarding Shared Shared Feature Feature Feature
Feature Feature Feature Feature Feature Feature Feature UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI UI Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Domain Util Util Util Util Util Util Util Util Util Util Util Util @ManfredSteyer
@ManfredSteyer (… using a shim for Standalone Blocks NOT intented
for production)
@ManfredSteyer Free eBook ANGULARarchitects.io/book Updated for Module Federation and Alternatives
@ManfredSteyer Conclusion Mental Model Mental Model Folders & Barrels Folders
& Barrels Mapped Paths Mapped Paths Nx, Libs, and Constraints FTW! Nx, Libs, and Constraints FTW!
@ManfredSteyer 2022
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io