Funny JS - Это серия встреч для фронтэнд-разработчиков и не только. Я не буду читать лекцию или проводить тренинг. Мы будем общаться в живом формате и разбирать интересные и необычные задачи из мира JS, которые помогут лучше разобраться в теме и повысить скиллы. В этот раз мы создадим свое приложение на React и Angular. И сравним!

1. Funny JS #3
Коновалов Александр

2. Обо мне:
Тренер «Основы JS» и «Funny JS»,
Эксперт AT-Consulting, блок «Инновационные решения»

3. Темы:
switch (Темы) {
case «Angular vs React»:
case «Создаем свой твиттер»:
case «Angular Tweeter»:
case «React Tweeter» :
case «Итоги» :
default:
смотреть();
}

4. Funny JS.
React vs Angular

5. Funny JS. Angular vs React
Angular = Angular 2/4 = angular ^4.3.6
React = React JS = react ^15.6.1
AngularJS = Angular JS ^1.5*
Наименование версий:

6. Funny JS. Angular vs React
Angular vs React
Typescript Язык JSX
HTML файлы Разметка JSX файлы
Двунаправленный Поток данных Однонаправленный
2010 (AngularJS) Дата создания 2013
Google,
Sony,
Nike
Компании Facebook,
Instagram,
Codecademy, Сбербанк
144KB Размер сборки (prod)* 117KB
1MB Размер сборки (dev)* 559KB

7. Funny JS. Сделаем свой
твиттер

8. Funny JS. Создаем свой твиттер
Из чего состоит:
• загрузка списка твитов
• просмотр стены пользователя
• добавление нового твита

9. Funny JS. Создаем свой твиттер
Загрузка списка твитов:
• запрос к сервису – асинхронная загрузка
• каждый твит - компонент
• асинхронная проверка новых твитов
• service workers
• серверный рендеринг

10. Funny JS. Создаем свой твиттер
добавление твита:
• валидация
• асинхронно
• обновление списка
• параллельная отправка данных
• показываем ошибку, если не
удалось отправить

11. Funny JS. Создаем свой твиттер
Компоненты:
• настройка проекта - конфиги
• роутинг
• работа со стилями
• http-запросы

12. Funny JS. Создаем свой твиттер
React:
1) npm init
2) React Router v4
3) axios
4) redux-form, redux
Angular:
1) ng create
2) @angular/router
3) @angular/http
4) @angular/forms

13. Funny JS. Подготовка. Сервисы
GraphQL + graph.cool:
• схема
• запросы
• сервисы
https://github.com/graphcool-examples/react-graphql
https://github.com/graphcool-examples/angular-graphql

14. Funny JS. Подготовка. Стили
Bootstrap:
https://github.com/twbs/bootstrap
https://getbootstrap.com/docs/4.0/getting-started/introduction/

15. Funny JS. Подготовка. Babel
React:
{
"presets": [
"es2015",
"react",
"stage-0"
]
}
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"]
/*------------- ... ---------------*/
}
}
Angular:

16. Funny JS. Итоги
React: Angular:

17. Funny JS. Итоги
React:
Angular:
Примерно совпадают, у Angular
чуть больше

18. Funny JS. Итоги
React:
Плюсы:
+ Быстрый старт
+ Библиотека
+ Virtual DOM
Минусы:
- Библиотека
- Поиск компонентов
Плюсы:
+ Фреймворк
+ Angular CLI
+ Веб-компоненты
+ Typescript
Минусы:
- Сложность в изучении
- Взаимодействие с DOM напрямую
Angular:

19. Funny JS. Стартовыепроекты для разработки
react-starter:
React, Webpack, React Router, Less, Redux, Redux-Form, NodeJS
Angular4, Webpack и Angular CLI, NodeJS
angular-starter: https://github.com/sani-banani/angular4-
starter
https://github.com/sani-banani/react-starter

20. Funny JS. Исходный код готового проекта
react-tweeter:
angular-tweeter:
https://github.com/sani-banani/angular4-starter/tree/example-tweeter
https://github.com/sani-banani/react-starter/tree/example-tweeter

21. Полезные ссылки:
https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-
33b932d97cf2
https://www.graph.cool/
https://www.madewithangular.com/
https://github.com/facebook/react/wiki/sites-using-react
http://blog.techmagic.co/angular-2-vs-react-what-to-chose-in-2017/

22. Контакты:
Mail: akonovalov@at-consulting.com
FB: sancho.konovalov
Skype: s2dent_73
GitHub: sani-banani