The document discusses how Angular components can "parasitize" the React ecosystem. It begins by providing code examples of basic Angular component creation. It then explores terminology related to parasitism and parasitoids. Various approaches for communicating between Angular components using services, properties, and Redux are presented. The document also discusses ideas for libraries that could help convert React components to Angular. It covers tools and patterns for state management in Angular like Redux and MobX. Finally, it discusses how Angular components could potentially "parasitize" the React ecosystem in both helpful and harmful ways.

1. Паразитируем на
React-экосистеме
(Angular 4+)
Алексей Охрименко (IPONWEB)
#ritfest2017

2. Алексей
Охрименко
Tweeter: @Ai_boy
Gitter: aiboy

3. IPONWEB

6. 4.x

7. import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'project-name-app',
template: `
<h1 (click)='onClick()'>
{{title}}
</h1>
`,
styleUrls: ['project-name.component.css']
})
export class PROJECTNAMEAppComponent {
title = 'project-name works!';
}

8. import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'project-name-app',
template: `
<h1 (click)='onClick()'>
{{title}}
</h1>
`,
styleUrls: ['project-name.component.css']
})
export class PROJECTNAMEAppComponent {
title = 'project-name works!';
}

9. import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'project-name-app',
template: `
<h1 (click)='onClick()'>
{{title}}
</h1>
`,
styleUrls: ['project-name.component.css']
})
export class PROJECTNAMEAppComponent {
title = 'project-name works!';
}

10. Терминология

11. Терминология
Паразит Паразитоид

12. Паразитизм
• форма взаимоотношений между организмами различных
видов, из которых один (паразит — aka Angular 4+)
использует другого (хозяина — aka React) в качестве среды
обитания и источника питания, нанося ему вред, но при
этом не убивая.

13. Паразитоид
• организм, который проводит значительную часть своей
жизни (в личиночной стадии), проживая на или внутри
своего единственного хозяина, которого он постепенно
убивает в процессе.

14. Паразитоид
• организм, который проводит значительную часть своей
жизни (в личиночной стадии), проживая на или внутри
своего единственного хозяина, которого он постепенно
убивает в процессе.

15. Patient zero

16. + + + + + + + + + +
• RxJs -> Observable

17. + + + + + + + + + +
• RxJs -> Observable
• поддержка Immutable структур данных

18. + + + + + + + + + +
• RxJs -> Observable
• поддержка Immutable структур данных
• Denendency Injection

19. + + + + + + + + + +
• RxJs -> Observable
• поддержка Immutable структур данных
• Denendency Injection
• нет необходимости ничего Angular-ифаить, оборачивать и
адаптировать

20. + + + + + + + + + +
• RxJs -> Observable
• поддержка Immutable структур данных
• Denendency Injection
• нет необходимости ничего Angular-ифаить, оборачивать и
адаптировать
• Многопоточность с WebWorkers

21. Массовое заражение

23. Telegram
https://t.me/angular_ru
768

24. Паразитизм

25. Подходы
React
Component

26. Подходы
React
Component
Renderer

27. Подходы
React Angular
Component Component
Renderer

28. Подходы
React Angular
Component
Module
Component
Renderer

29. Подходы
React Angular
Component
Module
Component
Platform
Renderer

30. Подходы
React Angular
Component
Module
Component
Platform
Renderer
Module
Comp

31. SSR (Universal App) - EASY MODE
https://github.com/angular/angular-cli
https://github.com/evertonrobertoauler/cli-
universal-demo

32. Подходы
Декларативный Императивный
React.createElement(‘div’, [
React.createElement(‘span’)
])
let div = Renderer2.createElement(‘div’)
let span = Renderer2.createElement(‘span’)
Renderer2.appendChild(div, span)

33. Коммуникация между компонентами
React Angular
Components Props and Events Components Props and Events
Services

34. Коммуникация между компонентами
React Angular
Components Props and Events Components Props and Events
Services

35. Коммуникация между компонентами
ROOT
TARGET
Components Props

36. Коммуникация между компонентами
ROOT
TARGET
Components Props

37. Коммуникация между компонентами
ROOT
TARGET
Components Props

38. Коммуникация между компонентами
ROOT
TARGET
Components Props

39. Коммуникация между компонентами
ROOT
TARGET
Services
SERVICE

40. Коммуникация между компонентами
ROOT
TARGET
Services
SERVICE

41. Коммуникация между компонентами
ROOT
TARGET
Services
SERVICE

42. Коммуникация между компонентами
ROOT
TARGET
Services
SERVICE

43. Коммуникация между компонентами
ROOT
TARGET
Redux, Mobx
SERVICE

44. Идеи

45. Идеи
https://github.com/roman01la/html-to-react-components
https://github.com/poetic/reacterminator

46. Идеи
create-angular-components

47. CLI
npm install -g create-react-app
create-react-app PROJECT-NAME
cd PROJECT-NAME/
npm start
npm install -g @angular/cli
ng new PROJECT-NAME
cd PROJECT-NAME/
ng serve

48. Angular/CLI - Scaffolding
Component
ng g component my-new-
component
Directive
ng g directive my-new-
directive
Pipe
ng g pipe my-new-pipe
Service
ng g service my-new-
service
Class
ng g class my-new-class
Guard
ng g guard my-new-guard
Interface
ng g interface my-new-
interface
Enum
ng g enum my-new-enum
Module
ng g module my-module

49. Redux
https://github.com/angular-redux/store
https://github.com/angular-redux/example-app
https://github.com/ngrx/store

50. Redux
Angular Redux + Redux Observable

51. Redux
import {
applyMiddleware,
Store,
combineReducers,
compose,
createStore
} from 'redux';
import { NgReduxModule, NgRedux } from '@angular-redux/store';
import { createLogger } from 'redux-logger';
import { rootReducer } from './reducers';

52. Redux
import {
applyMiddleware,
Store,
combineReducers,
compose,
createStore
} from 'redux';
import { NgReduxModule, NgRedux } from '@angular-redux/store';
import { createLogger } from 'redux-logger';
import { rootReducer } from './reducers';

53. Redux
import {
applyMiddleware,
Store,
combineReducers,
compose,
createStore
} from 'redux';
import { NgReduxModule, NgRedux } from '@angular-redux/store';
import { createLogger } from 'redux-logger';
import { rootReducer } from './reducers';

54. Redux
import {
applyMiddleware,
Store,
combineReducers,
compose,
createStore
} from 'redux';
import { NgReduxModule, NgRedux } from '@angular-redux/store';
import { createLogger } from 'redux-logger';
import { rootReducer } from './reducers';

55. Redux
interface IAppState { /* ... */ };
export const store: Store<IAppState> = createStore(
rootReducer,
applyMiddleware(createLogger())
);

56. Redux
interface IAppState { /* ... */ };
export const store: Store<IAppState> = createStore(
rootReducer,
applyMiddleware(createLogger())
);

57. Redux
interface IAppState { /* ... */ };
export const store: Store<IAppState> = createStore(
rootReducer,
applyMiddleware(createLogger())
);

58. Redux
@NgModule({
/* ... */
imports: [ /* ... */, NgReduxModule ]
})
class AppModule {
constructor(ngRedux: NgRedux<IAppState>) {
ngRedux.provideStore(store);
}
}

59. Redux
@NgModule({
/* ... */
imports: [ /* ... */, NgReduxModule ]
})
class AppModule {
constructor(ngRedux: NgRedux<IAppState>) {
ngRedux.provideStore(store);
}
}

60. Redux
import { select } from '@angular-redux/store';
@Component({
template: '<button (click)="onClick()">Clicked {{ count | async }} times</button>'
})
class App {
@select() count$: Observable<number>;
constructor(private ngRedux: NgRedux<IAppState>) {}
onClick() {
this.ngRedux.dispatch({ type: INCREMENT });
}
}

61. Redux
import { select } from '@angular-redux/store';
@Component({
template: '<button (click)="onClick()">Clicked {{ count | async }} times</button>'
})
class App {
@select() count$: Observable<number>;
constructor(private ngRedux: NgRedux<IAppState>) {}
onClick() {
this.ngRedux.dispatch({ type: INCREMENT });
}
}

62. Redux
import { select } from '@angular-redux/store';
@Component({
template: '<button (click)="onClick()">Clicked {{ count | async }} times</button>'
})
class App {
@select() count$: Observable<number>;
constructor(private ngRedux: NgRedux<IAppState>) {}
onClick() {
this.ngRedux.dispatch({ type: INCREMENT });
}
}

63. Redux
import { select } from '@angular-redux/store';
@Component({
template: '<button (click)="onClick()">Clicked {{ count | async }} times</button>'
})
class App {
@select() count$: Observable<number>;
constructor(private ngRedux: NgRedux<IAppState>) {}
onClick() {
this.ngRedux.dispatch({ type: INCREMENT });
}
}

64. Redux
import { select } from '@angular-redux/store';
@Component({
template: '<button (click)="onClick()">Clicked {{ count | async }} times</button>'
})
class App {
@select() count$: Observable<number>;
constructor(private ngRedux: NgRedux<IAppState>) {}
onClick() {
this.ngRedux.dispatch({ type: INCREMENT });
}
}

65. Mobx
https://github.com/mobxjs/mobx-angular

66. Mobx
import { MobxAngularModule } from 'mobx-angular';
@NgModule({
imports: [..., MobxAngularModule]
})
export class MyModule {}

67. Mobx
import { MobxAngularModule } from 'mobx-angular';
@NgModule({
imports: [..., MobxAngularModule]
})
export class MyModule {}

68. Mobx
import { MobxAngularModule } from 'mobx-angular';
@NgModule({
imports: [..., MobxAngularModule]
})
export class MyModule {}

69. Mobx
import {store} from './store/counter';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div *mobxAutorun>
{{ store.value }} - {{ store.computedValue }}
<button (click)="store.action">Action</button>
</div>
`
})
export class AppComponent {
store = store;
}

70. Mobx
import {store} from './store/counter';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div *mobxAutorun>
{{ store.value }} - {{ store.computedValue }}
<button (click)="store.action">Action</button>
</div>
`
})
export class AppComponent {
store = store;
}

71. Mobx
import {store} from './store/counter';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div *mobxAutorun>
{{ store.value }} - {{ store.computedValue }}
<button (click)="store.action">Action</button>
</div>
`
})
export class AppComponent {
store = store;
}

72. Mobx
import {store} from './store/counter';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div *mobxAutorun>
{{ store.value }} - {{ store.computedValue }}
<button (click)="store.action">Action</button>
</div>
`
})
export class AppComponent {
store = store;
}

73. Mobx
import {store} from './store/counter';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div *mobxAutorun>
{{ store.value }} - {{ store.computedValue }}
<button (click)="store.action">Action</button>
</div>
`
})
export class AppComponent {
store = store;
}

74. Mobx
import {store} from './store/counter';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div *mobxAutorun>
{{ store.value }} - {{ store.computedValue }}
<button (click)="store.action">Action</button>
</div>
`
})
export class AppComponent {
store = store;
}

75. Mobx
import {store} from './store/counter';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div *mobxAutorun>
{{ store.value }} - {{ store.computedValue }}
<button (click)="store.action">Action</button>
</div>
`
})
export class AppComponent {
store = store;
}

76. GraphQL
https://www.apollodata.com/

77. GraphQL
https://www.apollodata.com/
Relay

78. GraphQL
https://www.apollodata.com/
Relay

79. GraphQL
https://www.apollodata.com/

80. GraphQL
import { ApolloClient } from 'apollo-client';
import { ApolloModule } from 'apollo-angular';

81. GraphQL
import { ApolloClient } from 'apollo-client';
import { ApolloModule } from 'apollo-angular';
const client = new ApolloClient();
export function provideClient(): ApolloClient {
return client;
}

82. GraphQL
import { ApolloClient } from 'apollo-client';
import { ApolloModule } from 'apollo-angular';
const client = new ApolloClient();
export function provideClient(): ApolloClient {
return client;
}

83. GraphQL
import { ApolloClient } from 'apollo-client';
import { ApolloModule } from 'apollo-angular';
const client = new ApolloClient();
export function provideClient(): ApolloClient {
return client;
}

84. GraphQL
@NgModule({
imports: [
BrowserModule,
ApolloModule.forRoot(provideClient)
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
class AppModule {}

85. GraphQL
@NgModule({
imports: [
BrowserModule,
ApolloModule.forRoot(provideClient)
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
class AppModule {}

86. GraphQL
import { Component, OnInit } from '@angular/core';
import { Apollo } from 'apollo-angular';
import gql from 'graphql-tag';

87. GraphQL
// We use the gql tag to parse our query string into a query
document
const CurrentUserForProfile = gql`
query CurrentUserForProfile {
currentUser {
login
avatar_url
}
}
`;

88. GraphQL
@Component({ ... })
class ProfileComponent implements OnInit {
constructor(private apollo: Apollo) {}
ngOnInit() {
this.apollo.watchQuery<QueryResponse>({
query: CurrentUserForProfile
}).subscribe(({data}) => {
this.loading = data.loading;
this.currentUser = data.currentUser;
});
}
}

89. GraphQL
@Component({ ... })
class ProfileComponent implements OnInit {
constructor(private apollo: Apollo) {}
ngOnInit() {
this.apollo.watchQuery<QueryResponse>({
query: CurrentUserForProfile
}).subscribe(({data}) => {
this.loading = data.loading;
this.currentUser = data.currentUser;
});
}
}

90. GraphQL
@Component({ ... })
class ProfileComponent implements OnInit {
constructor(private apollo: Apollo) {}
ngOnInit() {
this.apollo.watchQuery<QueryResponse>({
query: CurrentUserForProfile
}).subscribe(({data}) => {
this.loading = data.loading;
this.currentUser = data.currentUser;
});
}
}

91. GraphQL
@Component({ ... })
class ProfileComponent implements OnInit {
constructor(private apollo: Apollo) {}
ngOnInit() {
this.apollo.watchQuery<QueryResponse>({
query: CurrentUserForProfile
}).subscribe(({data}) => {
this.loading = data.loading;
this.currentUser = data.currentUser;
});
}
}

92. Паразитоид

93. Быстрая смерть
create-angular-components

94. Долгая и мучительная

95. Article List
<div>
{
props.articles.map(article => {
return (
<ArticlePreview article={article} key={article.slug} />
);
})
}
</div>

96. Способы выражения логики в
шаблонах Angular
• Структурные директивы

97. Способы выражения логики в
шаблонах Angular
• Структурные директивы
• Pipes

98. Способы выражения логики в
шаблонах Angular
• Структурные директивы
• Pipes
• Кастомные структурные директивы

99. Способы выражения логики в
шаблонах Angular
• Структурные директивы
• Pipes
• Свои структурные директивы
• ViewModel + Структурные директивы

100. Структурные Директивы
NgIf, NgFor, and NgSwitch...

101. Article List
<article-preview
*ngFor="let article of results"
[article]="article">
</article-preview

102. Article List (не нужен)
<article-preview
*ngFor="let article of results"
[article]="article">
</article-preview

103. Pipes
<article-preview
*ngFor="let article of (results | intrestingArticles)"
[article]="article">
</article-preview>
@Pipe({ name: 'intrestingArticles' })
export class ArticlesPipe implements PipeTransform {
transform(items: any[]) {
return items.filter(item => item.intresting);
}
}

104. Pipes
<article-preview
*ngFor="let article of (results | intrestingArticles)"
[article]="article">
</article-preview>
@Pipe({ name: 'intrestingArticles' })
export class ArticlesPipe implements PipeTransform {
transform(items: any[]) {
return items.filter(item => item.intresting);
}
}

105. Pipes
<article-preview
*ngFor="let article of (results | intrestingArticles)"
[article]="article">
</article-preview>
@Pipe({ name: 'intrestingArticles' })
export class ArticlesPipe implements PipeTransform {
transform(items: any[]) {
return items.filter(item => item.intresting);
}
}

106. Pipes
<article-preview
*ngFor="let article of (results | intrestingArticles)"
[article]="article">
</article-preview>
@Pipe({ name: 'intrestingArticles' })
export class ArticlesPipe implements PipeTransform {
transform(items: any[]) {
return items.filter(item => item.intresting);
}
}

107. Свои структурные директивы
@Directive({
selector: '[appDelay]'
})
export class DelayDirective {
constructor(
private templateRef: TemplateRef<any>,
private viewContainerRef: ViewContainerRef
) { }
@Input()
set appDelay(time: number): void { }
}

108. Свои структурные директивы
@Directive({
selector: '[appDelay]'
})
export class DelayDirective {
constructor(
private templateRef: TemplateRef<any>,
private viewContainerRef: ViewContainerRef
) { }
@Input()
set appDelay(time: number): void { }
}

109. Свои структурные директивы
@Directive({
selector: '[appDelay]'
})
export class DelayDirective {
constructor(
private templateRef: TemplateRef<any>,
private viewContainerRef: ViewContainerRef
) { }
@Input()
set appDelay(time: number): void { }
}

110. Свои структурные директивы
@Directive({
selector: '[appDelay]'
})
export class DelayDirective {
constructor(
private templateRef: TemplateRef<any>,
private viewContainerRef: ViewContainerRef
) { }
@Input()
set appDelay(time: number): void { }
}

111. Свои структурные директивы
<card *appDelay="5000">
{{item}}
</card>

112. Свои структурные директивы
<card *appDelay="5000">
{{item}}
</card>

113. Свои структурные директивы
@Input()
set appDelay(time: number): void {
setTimeout(
() => {
this.viewContainerRef.createEmbeddedView(this.templateRef);
},
time);
}

114. Свои структурные директивы
@Input()
set appDelay(time: number): void {
setTimeout(
() => {
this.viewContainerRef.createEmbeddedView(this.templateRef);
},
time);
}

115. Свои структурные директивы
@Input()
set appDelay(time: number): void {
setTimeout(
() => {
this.viewContainerRef.createEmbeddedView(this.templateRef);
},
time);
}

116. ViewModel + Структурные директивы
https://www.youtube.com/watch?v=WIgXOG49mdI
"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25
https://github.com/aiboy/COD.js
onUpdate(data) {
this.fire('update', data.map((item) => {
return { id: item, selected: item === this.selectedItemId }
}));
this.data = data;
}
onItemSelected(id) {
this.selectedItemId = id;
this.onUpdate(this.data);
}

117. ViewModel + Структурные директивы
https://www.youtube.com/watch?v=WIgXOG49mdI
"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25
https://github.com/aiboy/COD.js
onUpdate(data) {
this.fire('update', data.map((item) => {
return { id: item, selected: item === this.selectedItemId }
}));
this.data = data;
}
onItemSelected(id) {
this.selectedItemId = id;
this.onUpdate(this.data);
}

118. ViewModel + Структурные директивы
https://www.youtube.com/watch?v=WIgXOG49mdI
"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25
https://github.com/aiboy/COD.js
onUpdate(data) {
this.fire('update', data.map((item) => {
return { id: item, selected: item === this.selectedItemId }
}));
this.data = data;
}
onItemSelected(id) {
this.selectedItemId = id;
this.onUpdate(this.data);
}

119. ViewModel + Структурные директивы
https://www.youtube.com/watch?v=WIgXOG49mdI
"Изоморфный D3 + MALEVICH", Алексей Охрименко, MoscowJS 25
https://github.com/aiboy/COD.js
onUpdate(data) {
this.fire('update', data.map((item) => {
return { id: item, selected: item === this.selectedItemId }
}));
this.data = data;
}
onItemSelected(id) {
this.selectedItemId = id;
this.onUpdate(this.data);
}

120. Контекст

121. Контекст
@Component({
selector: 'child',
template: '<div>child</div>'
})
export class Child {
constructor(private parent: Parent) {
parent.sharedList.push('Me.');
}
}

122. Контекст
@Component({
selector: 'child',
template: '<div>child</div>'
})
export class Child {
constructor(private parent: Parent) {
parent.sharedList.push('Me.');
}
}

123. Контекст
@Component({
selector: 'child',
template: '<div>child</div>'
})
export class Child {
constructor(private parent: Parent) {
parent.sharedList.push('Me.');
}
}

124. и т.д.

126. Не забудьте
помыть руки!
Tweeter: @Ai_boy
Gitter: aiboy
http://bit.ly/2s6VDcK
#ritfest2017