D2D Pizza JS Илья Беда "Куда мы все катимся?"
0 likes128 views
Доклад Ильи Беды обсуждает развитие JavaScript и его экосистемы, включая проблемы, связанные с использованием jQuery в больших проектах и переход к более современным фреймворкам, таким как React и Elm. Он подчеркивает необходимость архитектурных решений и управления зависимостями в быстрорастущей индустрии фронтенд-разработки. Также обсуждается влияние нового подхода к типизации и организации кода на эффективность разработки.
![Компромиcсы на бэкэнде
{% for fset, cap, tid in study_formsets.fset_cap_tid %}
$(function() {
$('.form_container_{{ tid }}').formset({
prefix: '{{ fset.prefix }}',
formCssClass: '{{ tid }}',
extraClasses: ['myrow1', 'myrow2']
});
});
19](https://image.slidesharecdn.com/kudamyvsekatimsya-170417171557/85/D2D-Pizza-JS-19-320.jpg)
![Интеграция с JavaScript runtime
Elm interop guide
var div = document.getElementById('elm-stamps');
var stamps = Elm.embed(Elm.Stamps, div, { reset:[] });
stamps.ports.reset.send([]);
stamps.ports.count.subscribe(function(count) {
console.log(count);
});
79](https://image.slidesharecdn.com/kudamyvsekatimsya-170417171557/85/D2D-Pizza-JS-79-320.jpg)
![Интеграция с JavaScript runtime
Elm interop guide
var div = document.getElementById('elm-stamps');
var stamps = Elm.embed(Elm.Stamps, div, { reset:[] });
stamps.ports.reset.send([]);
stamps.ports.count.subscribe(function(count) {
console.log(count);
});
80](https://image.slidesharecdn.com/kudamyvsekatimsya-170417171557/85/D2D-Pizza-JS-80-320.jpg)
![Интеграция с JavaScript runtime
Elm interop guide
var div = document.getElementById('elm-stamps');
var stamps = Elm.embed(Elm.Stamps, div, { reset:[] });
stamps.ports.reset.send([]);
stamps.ports.count.subscribe(function(count) {
console.log(count);
});
81](https://image.slidesharecdn.com/kudamyvsekatimsya-170417171557/85/D2D-Pizza-JS-81-320.jpg)
![Интеграция с JavaScript runtime
Elm interop guide
var div = document.getElementById('elm-stamps');
var stamps = Elm.embed(Elm.Stamps, div, { reset:[] });
stamps.ports.reset.send([]);
stamps.ports.count.subscribe(function(count) {
console.log(count);
});
82](https://image.slidesharecdn.com/kudamyvsekatimsya-170417171557/85/D2D-Pizza-JS-82-320.jpg)
D2D Pizza JS Илья Беда "Куда мы все катимся?"
- 1. Куда мы все катимся? Беда Илья bro.agency 1
- 2. Кто я? • Тимлид и один из основателей bro.agency • Разрабатываю веб-формочки на python в течение 8 лет • Продвигаю функциональное программирование в массы • Провожу воркшопы и мастер-классы 2
- 3. Про что доклад? • JavaScript сейчас на гребне волны • Я расскажу свой личный опыт. Свое видение индустрии • Расскажу о причинах, по которым произошел такой бурный рост JavaScript • Расскажу о проблемах и возможном пути их решения 3
- 4. Когда-то давно все было просто <script type="text/javascript"> $(document).ready(function() { $(".fancybox").fancybox(); }); </script> 4
- 5. Когда-то давно все было просто <script type="text/javascript"> $(document).ready(function() { $(".fancybox").fancybox(); }); </script> 5
- 6. Потом стало немного сложнее <script type="text/javascript"> $(document).ready(function() { $("p").click(function() { $(this).slideUp(); }); }); </script> 6
- 7. Потом стало немного сложнее <script type="text/javascript"> $(document).ready(function() { $("p").click(function() { $(this).slideUp(); }); }); </script> 7
- 8. Дальше появилась динамика <script type="text/javascript"> $.get("ajax/test.html", function(data) { $(".result").html(data); }); </script> 8
- 9. Дальше появилась динамика <script type="text/javascript"> $.get("ajax/test.html", function(data) { $(".result").html(data); }); </script> 9
- 10. Дальше появилась динамика <script type="text/javascript"> $.get("ajax/test.html", function(data) { $(".result").html(data); }); </script> 10
- 11. Браузеры стали еще быстрее • 2009 — Mozilla Firefox 3.5 TraceMonkey(SpiderMonkey) • 2010 — Mozilla Firefox 4.0 JägerMonkey 11
- 12. И все продолжили использовать JQuery 12
- 13. Кто из вас знает, почему JQuery плох для больших фронтенд проектов со сложной логикой? 13
- 14. Проблемы JQuery • Не задает структуру проекта • Не задает архитектуру приложения • Набор низкоуровневых императивных примитивов • Нет единого мнения, как делать правильно • Очень много степеней свободы 14
- 15. Крупные компании с опытом сразу это понимали. Они делали внутренние фреймворки для создания фронтенда. 15
- 16. Нельзя написать сложный фронтенд на JQuery без подготовки <script type="text/javascript"> ... $('a.tra.papa').unbind('click'); $('a.tra.papa').bind(doSomething); ... </script> 16
- 17. Нельзя написать сложный фронтенд на JQuery без подготовки <script type="text/javascript"> ... $('a.tra.papa').unbind('click'); $('a.tra.papa').bind(doSomething); ... </script> 17
- 18. Нельзя написать сложный фронтенд на JQuery без подготовки <script type="text/javascript"> ... $('a.tra.papa').unbind('click'); $('a.tra.papa').bind(doSomething); ... </script> 18
- 19. Компромиcсы на бэкэнде {% for fset, cap, tid in study_formsets.fset_cap_tid %} $(function() { $('.form_container_{{ tid }}').formset({ prefix: '{{ fset.prefix }}', formCssClass: '{{ tid }}', extraClasses: ['myrow1', 'myrow2'] }); }); 19
- 20. У кого был legacy проект на JQuery, который хотелось быстрее забросить? 20
- 21. Самые стойкие извлекли урок и начали делать фронтенд по-другому 21
- 22. backbone.js • Шаблонизатор • Не дает архитектуру • Позволяет взять за основу MVC 22
- 23. marionettejs • Архитектура • Набор хэлперов для backbone.js • Data-Binding 23
- 24. • Больше логики и структуры • Все включено • Полноценный фронтенд фреймворк AngularJS 24
- 25. <!doctype html> <html ng-app> <head> <script src="scripts/angular.1.5.3.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body> </html> AngularJS 25
- 26. <!doctype html> <html ng-app> <head> <script src="scripts/angular.1.5.3.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body> </html> AngularJS 26
- 27. <!doctype html> <html ng-app> <head> <script src="scripts/angular.1.5.3.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body> </html> AngularJS 27
- 28. <!doctype html> <html ng-app> <head> <script src="scripts/angular.1.5.3.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body> </html> AngularJS 28
- 29. AngularJS • Код из примеров и документации не подходит для реальных проектов • Много магии, которую ты не понимаешь • С определенного момента, не зная эту магию, нельзя создавать эффективные приложения 29
- 30. React • Функциональный подход к фронтенду • Фронтенд как чистая функция от состояния 30
- 31. Фронтенд как чистая функция от состояния 31
- 32. Фронтенд как чистая функция от состояния 32
- 33. Фронтенд как чистая функция от состояния 33
- 34. React открыл дверь функциональному миру во фронтенд Виртуальный дом решил проблему производительности, что позволило использовать концепции реактивного программирования для фронтенда на реальных проектах 34
- 35. Webcomponents Создатели браузеров знают, как делать фронтенд, и предлагают свою концепцию компонетного подхода в вебе. 35
- 36. Angular2 Это абсолютно новый фреймворк Предлагает изначально пользоваться TypeScript 36
- 37. Gradual typing Недостаточно писать код на императивном языке со слабой динамической типизацией Нужно больше гарантий - нужна система типов • Typescript • Flow 37
- 39. Почему идет такой стремительный рост и развитие фронтенда? 39
- 40. Достаточно освоить JavaScript, и ты можешь писать фуллстек приложения и оптимизировать свой рабочий процесс 40
- 41. node.js Полностью гомогенная структура В отличие от: • C/C++ и Makefile • Android и gradle 41
- 42. node.js • Grunt • Gulp • Babel • Webpack 42
- 43. Но все ли так хорошо? 43
- 45. Проблемы зависимостей и менеджера пакетов 45
- 46. npm -> npm2 -> npm3 • npm 1 • npm 2 • npm 3 46
- 47. npm -> npm2 -> npm3 • npm 1 — dependency hell • npm 2 • npm 3 47
- 49. npm -> npm2 -> npm3 • npm 1 — dependency hell • npm 2 • npm 3 49
- 50. npm -> npm2 -> npm3 • npm 1 — dependency hell • npm 2 — 1,5 GB зависимостей в node_modules • npm 3 50
- 51. npm -> npm2 -> npm3 • npm 1 — dependency hell • npm 2 — 1,5 GB зависимостей в node_modules • npm 3 — долгая установка: 40 минут занимает разворачивание проекта с нуля 51
- 52. npm -> npm2 -> npm3 • npm 1 — dependуncy hell • npm 2 — 1,5 GB зависимостей в node_modules • npm 3 — долгая установка: 40 минут занимает разворачивание проекта с нуля • npm 3 — если жестко фиксировать версии, работает как npm2 52
- 53. ReactRouter v1.0.2 Минорное изменение в history с 1.12 на 1.13 сломало ReactRouter Разработчики не всегда следуют спецификации semver 53
- 55. React Native Проект начали в ноябре на react-native 0.13.0 В процессе разработки обновились до 0.15.0, дальше не получилось Закончили активную разработку при 0.19.0 Сейчас 0.23.0 55
- 56. React Native Проект начали в ноябре на react-native 0.13.0 В процессе разработки обновились до 0.15.0, дальше не получилось Закончили активную разработку при 0.19.0 Сейчас 0.24.1 56
- 57. Баги на этапе установки зависимостей 57
- 58. Баги на этапе установки зависимостей 58
- 59. Баги на этапе установки зависимостей 59
- 60. Баги на этапе установки зависимостей 60
- 61. Новый стек - новый toolset 61
- 62. Иммутабельные данные в мутабельном языке 62
- 63. Иммутабельные данные в мутабельном языке 63
- 69. Цикличность мира Мы пытаемся использовать старые добрые инструменты для решения новых задач более высокого уровня 69
- 70. Цикличность мира Но это уже с нами было 70
- 71. Цикличность мира Мы имеем проблемы, аналогичные тем, что были у JQuery, но на уровне инфраструктуры и языка 71
- 72. И что же нам делать? 72
- 73. Elm 73
- 74. Elm • Статически типизированный с автоматическим выводом типов • Изначально ориентирован на фронтенд • Свой менеджер пакетов • Интеграция с JavaScript • Интеграция с webpack и React 74
- 75. Статически типизированный с автоматическим выводом типов 75
- 76. Изначально ориентирован на фронтенд • The Elm Architecture • Реактивный • Компоненты могут вкладываться друг в друга бесконечно • Высокая модульность и ориентированность на повторное использование кода 76
- 77. Реактивный • Интерфейс — свертка потока событий • Логирование всех событий • Time travel debugger 77
- 78. Свой менеджер пакетов • Содержит все необходимые базовые примитивы • Легко интегрируется с github • Документация генерируется автоматически • Строго следит за тем, чтобы пакеты следовали semver 78
- 79. Интеграция с JavaScript runtime Elm interop guide var div = document.getElementById('elm-stamps'); var stamps = Elm.embed(Elm.Stamps, div, { reset:[] }); stamps.ports.reset.send([]); stamps.ports.count.subscribe(function(count) { console.log(count); }); 79
- 80. Интеграция с JavaScript runtime Elm interop guide var div = document.getElementById('elm-stamps'); var stamps = Elm.embed(Elm.Stamps, div, { reset:[] }); stamps.ports.reset.send([]); stamps.ports.count.subscribe(function(count) { console.log(count); }); 80
- 81. Интеграция с JavaScript runtime Elm interop guide var div = document.getElementById('elm-stamps'); var stamps = Elm.embed(Elm.Stamps, div, { reset:[] }); stamps.ports.reset.send([]); stamps.ports.count.subscribe(function(count) { console.log(count); }); 81
- 82. Интеграция с JavaScript runtime Elm interop guide var div = document.getElementById('elm-stamps'); var stamps = Elm.embed(Elm.Stamps, div, { reset:[] }); stamps.ports.reset.send([]); stamps.ports.count.subscribe(function(count) { console.log(count); }); 82
- 83. Интеграция с Webpack и React • elm-webpack-loader • elm-react-component 83
- 84. Как начать? http://elm-lang.org/docs http://elm-lang.org/try Mario example Time travel debugger example 84
- 85. Время для вопросов Илья Беда [email protected] js.bro.agency 85