Download to read offline
![Компроми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/75/D2D-Pizza-JS-19-2048.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/75/D2D-Pizza-JS-79-2048.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/75/D2D-Pizza-JS-80-2048.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/75/D2D-Pizza-JS-81-2048.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/75/D2D-Pizza-JS-82-2048.jpg)
Uploaded byDev2Dev
D2D Pizza JS Илья Беда "Куда мы все катимся?"
Доклад Ильи Беды обсуждает развитие JavaScript и его экосистемы, включая проблемы, связанные с использованием jQuery в больших проектах и переход к более современным фреймворкам, таким как React и Elm. Он подчеркивает необходимость архитектурных решений и управления зависимостями в быстрорастущей индустрии фронтенд-разработки. Также обсуждается влияние нового подхода к типизации и организации кода на эффективность разработки.
More Related Content
Similar to D2D Pizza JS Илья Беда "Куда мы все катимся?"
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. Дальше появилась динамика <scripttype="text/javascript"> $.get("ajax/test.html", function(data) { $(".result").html(data); }); </script> 8
- 9. Дальше появилась динамика <scripttype="text/javascript"> $.get("ajax/test.html", function(data) { $(".result").html(data); }); </script> 9
- 10. Дальше появилась динамика <scripttype="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> <scriptsrc="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> <scriptsrc="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> <scriptsrc="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> <scriptsrc="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
- 38.
- 39. Почему идет такойстремительный рост и развитие фронтенда? 39
- 40. Достаточно освоить JavaScript,и ты можешь писать фуллстек приложения и оптимизировать свой рабочий процесс 40
- 41. node.js Полностью гомогенная структура Вотличие от: • C/C++ и Makefile • Android и gradle 41
- 42. node.js • Grunt • Gulp •Babel • Webpack 42
- 43. Но все литак хорошо? 43
- 44.
- 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
- 48.
- 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
- 54.
- 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.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69. Цикличность мира Мы пытаемсяиспользовать старые добрые инструменты для решения новых задач более высокого уровня 69
- 70. Цикличность мира Но этоуже с нами было 70
- 71. Цикличность мира Мы имеемпроблемы, аналогичные тем, что были у JQuery, но на уровне инфраструктуры и языка 71
- 72. И что женам делать? 72
- 73.
- 74. Elm • Статически типизированныйс автоматическим выводом типов • Изначально ориентирован на фронтенд • Свой менеджер пакетов • Интеграция с JavaScript • Интеграция с webpack и React 74
- 75. Статически типизированный с автоматическимвыводом типов 75
- 76. Изначально ориентирован на фронтенд •The Elm Architecture • Реактивный • Компоненты могут вкладываться друг в друга бесконечно • Высокая модульность и ориентированность на повторное использование кода 76
- 77. Реактивный • Интерфейс —свертка потока событий • Логирование всех событий • Time travel debugger 77
- 78. Свой менеджер пакетов •Содержит все необходимые базовые примитивы • Легко интегрируется с github • Документация генерируется автоматически • Строго следит за тем, чтобы пакеты следовали semver 78
- 79. Интеграция с JavaScriptruntime 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. Интеграция с JavaScriptruntime 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. Интеграция с JavaScriptruntime 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. Интеграция с JavaScriptruntime 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 Timetravel debugger example 84
- 85. Время для вопросов ИльяБеда ilya@bro.agency js.bro.agency 85
- 86.