D2D Pizza JS Илья Беда "Куда мы все катимся?"

Куда мы все катимся?
Беда Илья
bro.agency
1

Кто я?
• Тимлид и один из основателей bro.agency
• Разрабатываю веб-формочки на python в течение 8 лет
• Продвигаю функциональное программирование в массы
• Провожу воркшопы и мастер-классы
2

Про что доклад?
• JavaScript сейчас на гребне волны
• Я расскажу свой личный опыт. Свое видение индустрии
• Расскажу о причинах, по которым произошел такой бурный рост
JavaScript
• Расскажу о проблемах и возможном пути их решения
3

Когда-то давно все было просто
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
4

Когда-то давно все было просто
$(".fancybox").fancybox();
});
</script>
5

Потом стало немного сложнее
$("p").click(function() {
$(this).slideUp();
});
});
</script>
6

Потом стало немного сложнее
$("p").click(function() {
$(this).slideUp();
});
});
</script>
7

Дальше появилась динамика
$.get("ajax/test.html", function(data) {
$(".result").html(data);
});
</script>
8

});
</script>
9

});
</script>
10

Браузеры стали еще быстрее
• 2009 — Mozilla Firefox 3.5 TraceMonkey(SpiderMonkey)
• 2010 — Mozilla Firefox 4.0 JägerMonkey
11

И все продолжили использовать
JQuery
12

Кто из вас знает, почему JQuery
плох для больших фронтенд
проектов со сложной логикой?
13

Проблемы JQuery
• Не задает структуру проекта
• Не задает архитектуру приложения
• Набор низкоуровневых императивных примитивов
• Нет единого мнения, как делать правильно
• Очень много степеней свободы
14

Крупные компании с опытом сразу
это понимали.
Они делали внутренние
фреймворки для создания
фронтенда.
15

Нельзя написать сложный
фронтенд на JQuery без подготовки
...
$('a.tra.papa').unbind('click');
$('a.tra.papa').bind(doSomething);
...
</script>
16

...
...
</script>
17

...
...
</script>
18

Компроми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

У кого был legacy проект на JQuery,
который хотелось быстрее
забросить?
20

Самые стойкие извлекли урок и
начали делать фронтенд по-другому
21

backbone.js
• Шаблонизатор
• Не дает архитектуру
• Позволяет взять за основу MVC
22

marionettejs
• Архитектура
• Набор хэлперов для backbone.js
• Data-Binding
23

• Больше логики и структуры
• Все включено
• Полноценный фронтенд фреймворк
AngularJS
24

<!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

<!doctype html>
<html ng-app>
<head>
</head>
<body>
<div>
<hr>
</div>
</body>
</html>
AngularJS
26

<!doctype html>
<html ng-app>
<head>
</head>
<body>
<div>
<hr>
</div>
</body>
</html>
AngularJS
27

<!doctype html>
<html ng-app>
<head>
</head>
<body>
<div>
<hr>
</div>
</body>
</html>
AngularJS
28

AngularJS
• Код из примеров и документации не подходит для реальных
проектов
• Много магии, которую ты не понимаешь
• С определенного момента, не зная эту магию, нельзя создавать
эффективные приложения
29

React
• Функциональный подход к фронтенду
• Фронтенд как чистая функция от состояния
30

Фронтенд как чистая функция от
состояния
31

состояния
32

состояния
33

React открыл дверь
функциональному миру во
фронтенд
Виртуальный дом решил проблему производительности, что
позволило использовать концепции реактивного программирования
для фронтенда на реальных проектах
34

Webcomponents
Создатели браузеров знают, как делать фронтенд, и
предлагают свою концепцию компонетного подхода в вебе.
35

Angular2
Это абсолютно новый фреймворк
Предлагает изначально пользоваться TypeScript
36

Gradual typing
Недостаточно писать код на императивном языке со слабой
динамической типизацией
Нужно больше гарантий - нужна система типов
• Typescript
• Flow
37

Развитие идет колоссальными
темпами
38

Почему идет такой стремительный
рост и развитие фронтенда?
39

Достаточно освоить JavaScript, и ты
можешь писать фуллстек
приложения и оптимизировать свой
рабочий процесс
40

node.js
Полностью гомогенная структура
В отличие от:
• C/C++ и Makeﬁle
• Android и gradle
41

node.js
• Grunt
• Gulp
• Babel
• Webpack
42

Но все ли так хорошо?
43

Быстрорастущая индустрия
создает проблемы
44

Проблемы зависимостей и
менеджера пакетов
45

npm -> npm2 -> npm3
• npm 1
• npm 2
• npm 3
46

npm -> npm2 -> npm3
• npm 1 — dependency hell
• npm 2
• npm 3
47

npm -> npm2 -> npm3
• npm 2
• npm 3
49

npm -> npm2 -> npm3
• npm 2 — 1,5 GB зависимостей в node_modules
• npm 3
50

npm -> npm2 -> npm3
• npm 3 — долгая установка: 40 минут занимает разворачивание проекта
с нуля
51

npm -> npm2 -> npm3
• npm 1 — dependуncy hell
• npm 3 — долгая установка: 40 минут занимает разворачивание проекта
с нуля
• npm 3 — если жестко фиксировать версии, работает как npm2
52

ReactRouter v1.0.2
Минорное изменение в history с 1.12 на 1.13 сломало ReactRouter
Разработчики не всегда следуют спецификации semver
53

Старые зависимости
54

React Native
Проект начали в ноябре на react-native 0.13.0
В процессе разработки обновились до 0.15.0, дальше не получилось
Закончили активную разработку при 0.19.0
Сейчас 0.23.0
55

React Native
Проект начали в ноябре на react-native 0.13.0
В процессе разработки обновились до 0.15.0, дальше не получилось
Закончили активную разработку при 0.19.0
Сейчас 0.24.1
56

Баги на этапе установки
зависимостей
57

58

59

60

Новый стек - новый toolset
61

Иммутабельные данные в
мутабельном языке
62

Иммутабельные данные в
мутабельном языке
63

“Головокружение от успехов”
68

Цикличность мира
Мы пытаемся использовать старые добрые инструменты для решения
новых задач более высокого уровня
69

Но это уже с нами было
70

Мы имеем проблемы, аналогичные тем, что были у JQuery, но на
уровне инфраструктуры и языка
71

И что же нам делать?
72

Elm
• Статически типизированный с автоматическим выводом типов
• Изначально ориентирован на фронтенд
• Свой менеджер пакетов
• Интеграция с JavaScript
• Интеграция с webpack и React
74

Статически типизированный с
автоматическим выводом типов
75

Изначально ориентирован на
фронтенд
• The Elm Architecture
• Реактивный
• Компоненты могут вкладываться друг в друга бесконечно
• Высокая модульность и ориентированность на повторное
использование кода
76

Реактивный
• Интерфейс — свертка потока событий
• Логирование всех событий
• Time travel debugger
77

Свой менеджер пакетов
• Содержит все необходимые базовые примитивы
• Легко интегрируется с github
• Документация генерируется автоматически
• Строго следит за тем, чтобы пакеты следовали semver
78

Интеграция с 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

Elm interop guide
console.log(count);
});
80

Elm interop guide
console.log(count);
});
81

Elm interop guide
console.log(count);
});
82

Интеграция с Webpack и React
• elm-webpack-loader
• elm-react-component
83

Как начать?
http://elm-lang.org/docs
http://elm-lang.org/try
Mario example
Time travel debugger example
84

Время для вопросов
Илья Беда
ilya@bro.agency
js.bro.agency
85

D2D Pizza JS Илья Беда "Куда мы все катимся?"

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie D2D Pizza JS Илья Беда "Куда мы все катимся?"

Ähnlich wie D2D Pizza JS Илья Беда "Куда мы все катимся?" (20)

Mehr von Dev2Dev

Mehr von Dev2Dev (20)

D2D Pizza JS Илья Беда "Куда мы все катимся?"