Angular 2 vs React

Евгений Гусев

Илья Таратухин

http://bit.ly/ng2-react

Часть 1: Знакомство

Perfect React
starter
project

http://andrewhfarmer.com/starter-project/


							render() {
								return (
								<div className="App">
									<input value={this.state.value} onChange={this.handleChange} />
									<WeatherWidget city={this.state.city}></WeatherWidget>
								</div>
								);
							}

							handleChange(event) {
								this.setState({city: event.target.value});
							}


							constructor(props) {
								super(props);
								this.state = {};
								this.handleChange = this.handleChange.bind(this);
							}

Вкратце о тестах:

Заметки на полях:

Как совместить названия компонентов и названия классов по styleguide
Я хочу DI!
Статей прочитано: 4 (кроме доков)
Модулей подключено: 3
И это всё ещё без Redux!

Итого:

Default Angular2
#CLI quickstart

https://angular.io/docs/ts/latest/cli-quickstart.html


							#npm install -g @angular/cli
							#ng new my-angular-project
							#cd my-app
							#ng serve

Первые впечатления

4 команды
10 минут
Работающее приложение с hot-reload.


							#ng generate component weather-report


							getWeather(city: string): Observable<WeatherData> {
								const params = new URLSearchParams();
								params.set('units', 'metric');
								params.set('q', city);

								return this.http.get(this.weatherApiUrl, {search: params})
								  .toPromise()
								  .map(this.extractData)
								  .catch(this.processError);
							}


							private processData = (res: Response) => {
								let body = res.json();
								this.weatherData = new WeatherData(body);
							}

Открытые вопросы

Как получить контроль над сборкой?
Как подключить less/sass/postcss?

Итого:

Идеально для разработчик вашего первого SPA
Нужно быть готовым изучать инструменты фреймворка

Часть 2: Спор

$$$ Супер Проект $$$

Data-Flow

Component Definition

@Component({
  selector: 'app-comments',
  //...
})
export class CommentsWidget {

export const Comments = ({comments, commentAdd}) => {
  return `//template JSX code goes here`
};

@Component({
  selector: 'app-comments',
  template: `
      <comment *ngFor="let comment of comments" [comment]="comment"></comment>
      <comment-form (onAdd)="commentAdd"></comment-form>
  `
})
export class CommentsWidget {

export const Comments = ({comments, commentAdd}) => (
  <div>
    {comments.map(comment => <Comment comment={comment} key={comment.date}/>)}
    <CommentForm commentAdd={commentAdd} />
  </div>
);

export class CommentsWidget implements OnInit {
  private comments: Array<Object>

  constructor(private commentsService: CommentsService) {
  }

  ngOnInit() {
    this.commentsService.getComments().subscribe(
      (comments) => this.comments = comments,
      (error) => console.log(error));
  }

const mapDispatchToProps = {
  commentAdd
};

const mapStateToProps = (state) => ({
  comments : state.comments
});

export default connect(mapStateToProps, mapDispatchToProps)(Comments)

User interaction

Часть 3: Боль


							<textarea (mousemove)="onMouseMove($event)"></textarea>

							//...

							onMouseMove(e) {
							  //do something with e
							}


							<textarea #inpt> </textarea>

							//...

							@ViewChild('inpt') inpt:ElementRef;

							ngOnInit() {
								this.zone.runOutsideAngular(() => {
									sub = Observable.fromEvent(this.inpt.nativeElement, 'mousemove')
										.subscribe(e => {
											this.onMouseMove(e);
									})
								});
							}


							import { Map } from '2gis-maps-react';

							export const ContactsMap = () => {
								const mapCenter = [59.933608, 30.305743];
								const mapStyle = {width: "100%", height: 400};

								return <Map style={mapStyle} center={mapCenter} zoom={16} />;
							};


							class contactsMap extends React.Component {
								componentDidMount() {
									this.map = new Map('#map');
								}

								componentWillReceiveProps(newProps) {
									this.map.update(newProps);
								}

								shouldComponentUpdate() {
									return false;
								}

								render() {
									return <div id="map"></div>;
								}
							}