Angular наносит

ответный удар

О себе

AngularConnect

Итак, Angular 1

2009

Время шло...

Сложный

Медленный

Куда уходить?

React

2

2

Скорость

Скорость

Change Detection Angular 1

Change Detection Angular 2

time (ms) / # of items

Работает везде

Рендерится

Везде

React Native?

Простота

Разделение понятий

Синтаксис

@Component({
  selector: 'my-dashboard',
  templateUrl: 'app/dashboard.component.html',
  styleUrls: ['app/dashboard.component.css'],
  directives: [CORE_DIRECTIVES, StatusComponent]
})
export class DashboardComponent {
  heroes: Hero[];
  ...
  constructor(private _heroService: HeroService) {
    _heroService.getHeroes()
        .then((resp) => this.heroes = resp);
  }
  ...
}
@Directive({
  selector: '[tooltip]',
  properties: [
    'text: tooltip'
  ],
  host: { '(mouseover)': 'show()' }
}) 
class Form {
  text:string;  
  show() {
    console.log(this.text);
  }
}
<span tooltip="Tooltip text goes here.">
Some text here.</span>
@Component({selector: 'todo-cmp'})
class TodoCmp {
  @Input() model;
  @Output() complete = new EventEmitter();
  // TypeScript supports initializing fields

  onCompletedButton() {
    this.complete.next(); // this fires an event
  }
}
...
<todo-cmp [model]="todo"
 (complete)="onCompletingTodo(todo)"></todo-cmp>

Input Output

Input Output

Hello {{user}}!
<div *ng-if="isAdministrator">
  ...administrator menu here...
</div>

Inline Templates

Hello {{user}}!
<template [ng-if]="isAdministrator">
  <div>
    ...administrator menu here...
  </div>
</template>
<video-player #player></video-player>
<button (click)="player.pause()">Pause</button>

Local Variable

(Веб)Компоненты

“I definitely think it's the wrong programming paradigm; I really hope that [web components] do not succeed.”
Pete Hunt

import {Component, Input, ngClass, ViewEncapsulation}
...
@Component({
encapsulation: ViewEncapsulation.Emulated 
// ViewEncapsulation.Native 
// ViewEncapsulation.None
})
.started[_ngcontent-swe-4] {
    color: green;
}

Легкая

Миграция

angular.module('app')
    .service('serviceA', function() {})
@Component({
  selector: 'component-a'
})
@Inject("serviceA")
export class ComponentA {
  constructor(serviceA) { }
}
ng1module.directive('user', function() {
  return {
    scope: {handle: '@', reset: '&'},
    template: `
      User: {{handle}}
      <hr>
      <button ng-click="reset()">clear</button>`
  };
});
@Component({
  selector: 'upgrade-app',
  template: `<div>
                <h1>Title: {{user}}</h1>
                <user [handle]="user"></user>
            </div>`,
  directives: [adapter.upgradeNg1Component('user')]
})
class UpgradeApp {
  @Input() user: string;
  @Output() reset = new EventEmitter();
  constructor() {}
}

ng1module.directive('upgradeApp',
 adapter.downgradeNg2Component(UpgradeApp));

Проблемы

Все еще альфа

Не готова документация

И все же...

React

App = React.createClass({
  render() {
    return this.numbers.map((number, index) => {
      return (<li key={index}>{{number}}</li>);
    });
  }
});
<li *ng-for="#number of numbers">{{number}}</li>

Angular 2

Полезные видео

Полезные статьи

Обращайтесь

deck

By vladferix