Ivy’s best kept secret

”ivy features” on Google Search IVY'S BEST KEPT SECRET

Ivy features Overview IVY'S BEST KEPT SECRET

Ivy feature types • Directive features • Component features • Host features for bootstrapped components IVY'S BEST KEPT SECRET

Username feature Add username observable to component import { ɵComponentDef, ɵɵdirectiveInject } from '@angular/core'; import { select, Store } from '@ngrx/store'; export function withUsername() { return (componentDef: ɵComponentDef) => { const originalFactory = componentDef.factory; componentDef.factory = () => { const component = originalFactory(componentDef.type); const store = ɵɵdirectiveInject(Store); component.username$ = store.pipe(select('username’)); return component; }; }; } IVY'S BEST KEPT SECRET

Username feature Add username observable to component import { ɵComponentDef, ɵɵdirectiveInject } from '@angular/core'; import { select, Store } from '@ngrx/store'; export function withUsername() { return (componentDef: ɵComponentDef) => { const originalFactory = componentDef.factory; componentDef.factory = () => { const component = originalFactory(componentDef.type); const store = ɵɵdirectiveInject(Store); component.username$ = store.pipe(select('username')); return component; }; }; } IVY'S BEST KEPT SECRET

Username feature Add username observable to component @Component({ features: [ withUsername(), ], selector: 'app-profile', templateUrl: './profile.component.html', }) export class ProfileComponent { username$: Observable; } IVY'S BEST KEPT SECRET

Component features today Features are supported by the Ivy runtime Not yet available as an option for the Component and Directive decorator factories MyComponent.ɵcmp = ɵɵdefineComponent({ features: [myFeature], }); IVY'S BEST KEPT SECRET

Component features today Features are supported by the Ivy runtime Not yet available as an option for the Component and Directive decorator factories MyComponent.ɵcmp = ɵɵdefineComponent({ features: [myFeature], }); export function componentFeatures(features) { return ({ ɵcmp }) => { // At runtime, before bootstrap Promise.resolve().then(() => { // Add features to component definition Object.assign(ɵcmp, { features }); // Apply features features.forEach(feature => feature(ɵcmp)); }); }; } IVY'S BEST KEPT SECRET

Component features today Features are supported by the Ivy runtime Not yet available as an option for the Component and Directive decorator factories @Component({ selector: 'app-profile', templateUrl: './profile.component.html', }) @componentFeatures([ withUsername(), ]) export class ProfileComponent { username$: Observable; } IVY'S BEST KEPT SECRET

Host features Enable lifecycle hooks for bootstrapped components import { ɵLifecycleHooksFeature, ɵrenderComponent, } from '@angular/core'; ɵrenderComponent(AppComponent, { hostFeatures: [ ɵLifecycleHooksFeature, ], }); IVY'S BEST KEPT SECRET

Internal Ivy features Ivy applies these internal features to directives and components: ɵɵNgOnChangesFeature ɵɵProvidersFeature ɵɵInheritDefinitionFeature ɵɵCopyDefinitionFeature IVY'S BEST KEPT SECRET

Observe state from store Case study IVY'S BEST KEPT SECRET

Observe state from store Mixed component code smells: ❎ UI depends on state ❎ UI has querying details ❎ UI has a container object, @Component({ selector: 'app-todo-list', template: `

• {{todo.description}}

`, }) export class TodoListComponent { todos$: Observable = this.store.pipe(select('todos')); constructor(private store: Store) {} } IVY'S BEST KEPT SECRET container not the actual data structures

Observe state from store Presentational component with component feature ☑️ UI has no dependencies ❎ UI has querying details ❎ UI has a container object, @Component({ features: [ fromStore({ todos$: 'todos' }), ], selector: 'ivy-todo-list', template: `

• {{todo.description}}

`, }) export class TodoListComponent { todos$: Observable; } IVY'S BEST KEPT SECRET not the actual data structures

Observe state from store Presentational component with component feature ☑️ UI has no dependencies ☑️ UI is passed data ❎ UI has a container object, @Component({ features: [ todosFromStore('todos$'), ], selector: 'ivy-todo-list', template: `

• {{todo.description}}

`, }) export class TodoListComponent { todos$: Observable; } IVY'S BEST KEPT SECRET not the actual data structures

Observe state from store Presentational component with simple data structure @Component({ selector: '[ivyTodoItem]', template: ` {{todo.description}} `, }) export class TodoItemComponent { @Input('ivyTodoItem') todo: Todo; } IVY'S BEST KEPT SECRET

Observe state from store Presentational component with component feature ☑️ UI has no dependencies ☑️ UI is passed data ☑️ UI has the actual data @Component({ features: [ todosFromStore('todos$'), ], selector: 'ivy-todo-list', template: `

`, }) export class TodoListComponent { todos$: Observable; } IVY'S BEST KEPT SECRET structures

Observe state from store Presentational component with component feature ❎ List UI has a container @Component({ features: [ todosFromStore('todos$'), ], selector: 'ivy-todo-list', template: `

`, }) export class TodoListComponent { todos$: Observable; } IVY'S BEST KEPT SECRET object, not the actual data structures

Observe state from store Presentational component with component feature and simple data structures ☑️ List UI has the actual data @Component({ features: [ withTodos(), ], selector: 'ivy-todo-list', template: `

`, }) export class TodoListComponent { @Input() todos: Todos; } IVY'S BEST KEPT SECRET structures

Dispatch actions to store Case study IVY'S BEST KEPT SECRET

Dispatch actions to store Mixed component code smells: ❎ UI depends on state ❎ UI creates actions ❎ UI dispatches actions @Component({ selector: 'app-add-todo-form', template: ` Add `, }) export class AddTodoFormComponent { constructor(private store: Store) {} onAdd(description: string) { this.store.dispatch(addTodo(description)); } } IVY'S BEST KEPT SECRET container

Dispatch actions to store Presentational component emitting primitive value @Component({ selector: 'app-add-todo-form-ui', template: ` Add `, }) export class AddTodoFormComponent { @Output() add = new EventEmitter(); } IVY'S BEST KEPT SECRET

Dispatch actions to store Container component creating and dispatching actions ☑️ UI has no dependencies ☑️ UI emits simple data ☑️ UI doesn’t dispatch actions import { addTodo } from './todo.actions'; @Component({ selector: 'app-add-todo-form', template: ` `, }) export class AddTodoFormContainerComponent { constructor(private store: Store) {} onAddTodo(description: string) { this.store.dispatch(addTodo(description)); } } IVY'S BEST KEPT SECRET structures

Dispatch actions to store Container component creating and dispatching actions ❎ Container component import { addTodo } from './todo.actions'; @Component({ selector: 'app-add-todo-form', template: ` `, }) export class AddTodoFormContainerComponent { constructor(private store: Store) {} onAddTodo(description: string) { this.store.dispatch(addTodo(description)); } } IVY'S BEST KEPT SECRET exists only to translate component-specific events to actions

Dispatch actions to store Presentational component with component feature ☑️ UI has no dependencies ☑️ UI emits simple data ☑️ UI doesn’t dispatch actions import { addTodo } from './todo.actions'; @Component({ features: [ toStore({ add: addTodo }), ], selector: ‘ivy-todo-form', template: ` Add `, }) export class TodoFormComponent { @Output() add = new EventEmitter(); } IVY'S BEST KEPT SECRET structures

Dispatch actions to store Presentational component with component feature ❎ UI knows about the action import { addTodo } from './todo.actions'; @Component({ features: [ toStore({ add: addTodo }), ], selector: 'ivy-todo-form', template: ` Add `, }) export class TodoFormComponent { @Output() add = new EventEmitter(); } IVY'S BEST KEPT SECRET creator

Dispatch actions to store Presentational component with component feature ☑️ UI only emits events @Component({ features: [ toAddTodoAction('add'), ], selector: 'ivy-todo-form', template: ` Add `, }) export class TodoFormComponent { @Output() add = new EventEmitter(); } IVY'S BEST KEPT SECRET

Conclusion IVY'S BEST KEPT SECRET

Use cases for features • Route parameters, route data, query parameters • Replace container components • Local store for local UI state • Observable lifecycle events • Convert observables to event emitters • Advanced (requires working with Ivy instructions): Observable UI events (click, keypress, and so on) • Manage subscriptions and call markDirty or detectChanges IVY'S BEST KEPT SECRET

Higher-order components with Ivy component features • No inheritance • No class decorators • No property decorators • No extra package dependencies • No custom WebPack configuration • Component features are tree-shakable IVY'S BEST KEPT SECRET

Feature limitations • Features are not public in the Angular API yet • Feature declarations can’t vary at runtime • Only one feature declaration list per component or directive IVY'S BEST KEPT SECRET

Get in touch IVY'S BEST KEPT SECRET bit.do/ivy-features-slides bit.do/ivy-features github.com/LayZeeDK/ngx-ivy-features github.com/LayZeeDK twitter.com/LayZeeDK www.linkedin.com/in/larsgbn/ [email protected]