Артем Тритяк, Lead Front-End developer в Electric Cloud
-
Upload
provectus -
Category
Technology
-
view
108 -
download
2
Transcript of Артем Тритяк, Lead Front-End developer в Electric Cloud
![Page 1: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/1.jpg)
React.jsBackbone и FLUX
Артем Тритяк
![Page 2: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/2.jpg)
• Построение сложного UI без боли
• Все просто - перерисовка всей страницы на любое изменение
• React.js сделает diff и внесет только изменения в DOM
Реакт? Что такое Реакт? Зачем Реакт?
![Page 3: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/3.jpg)
JSX, Virtual DOM
![Page 4: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/4.jpg)
![Page 5: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/5.jpg)
Композиция элементов
![Page 6: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/6.jpg)
Вложенные элементы
![Page 7: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/7.jpg)
Вложенные элементы
![Page 8: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/8.jpg)
Вложенные элементы
this.props.children
![Page 9: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/9.jpg)
JSX -> JS compilerReact Rails
PyReact, Django React
Grunt.js React, Gulp.js React, React Tools
![Page 10: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/10.jpg)
• SEO - не нужен phantom.js renderer для SPA
• Ускорение первой загрузки
• Подхватывание JS-bindings «на лету»
Server Side Rendering
![Page 11: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/11.jpg)
Server Side Rendering: Node.js
![Page 12: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/12.jpg)
Server Side Rendering: Node.js
https://github.com/artyomtrityak/react-server-render-node
![Page 13: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/13.jpg)
![Page 14: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/14.jpg)
Flux
![Page 15: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/15.jpg)
Flux: one directional data flow
![Page 16: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/16.jpg)
Сервер
Model.fetch
Model.destroy
Model.saveCollection.fetch
Model.parse
![Page 17: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/17.jpg)
onClick onSelect
onChange …
Actions.actionName(params)8!
UserActions.createUser(…) UserActions.selectGroup(…) 1
2
3
Flux: Кто главный? React главный
![Page 18: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/18.jpg)
1
2
3
4
![Page 19: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/19.jpg)
Flux: Action -> WebUtils -> Dispatcher
12
3
![Page 20: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/20.jpg)
Model
Model Eventschange
change:fieldName invalid
…
1
2
3
![Page 21: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/21.jpg)
Flux: examples
https://github.com/facebook/flux/tree/master/examples
https://github.com/gaearon/flux-react-router-example
![Page 22: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/22.jpg)
+Bonus
React Native
![Page 23: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/23.jpg)
Facebook groups app
![Page 24: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/24.jpg)
• JavaScript
• НЕ WebView
• НЕ браузер
• JavaScript логика в отдельном потоке, не блокирует Native UI
• JSX HTML -> Native platform elements
• Learn once, write everywhere
• Example: http://www.facebookgroups.com/
React Native
![Page 25: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/25.jpg)
CSSBEM, MCSS…
!
SASS, Akella SASS :) LESS, STYLUS…
!
Пре-процессоры Пост-процессоры
Приоритет: #id .class <div> inline
![Page 26: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/26.jpg)
![Page 27: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/27.jpg)
Глобальный namespace использовать плохо, да?
![Page 28: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/28.jpg)
CSS
![Page 29: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/29.jpg)
Inline CSS, CSS in JS
![Page 30: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/30.jpg)
• Все знают JavaScript
• Функции
• Переменные
• Scopes
• Минификация
• Наследование
Преимущества
![Page 31: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/31.jpg)
Но это же…
![Page 32: Артем Тритяк, Lead Front-End developer в Electric Cloud](https://reader031.fdocuments.net/reader031/viewer/2022032217/55a89aae1a28abb87f8b45ff/html5/thumbnails/32.jpg)