secon'2017, Васильков Василий, elm в production

23
Elm в production Василий Васильков, Ecwid

Upload: secon

Post on 21-Jan-2018

70 views

Category:

Internet


5 download

TRANSCRIPT

Page 1: SECON'2017, Васильков Василий, Elm в production

Elm в production

Василий Васильков, Ecwid

Page 2: SECON'2017, Васильков Василий, Elm в production

Ecwid• SaaS-платформа для создания интернет-магазинов

• больше миллиона клиентов• ~250.000.000 посетителей в месяц

• 120+ человек в команде

• Ульяновск, Самара, San Diego

Page 3: SECON'2017, Васильков Василий, Elm в production

Наш опыт

Вот такой красоты —

• Текущая версия “морды” написана на GWT

• Есть нюансы, но GWT правда хорошая технология ;)

• ~300.000 LOC на Java, компилируемого в JS

• Это транслируется в ~7mb (!) “красоты”

Page 4: SECON'2017, Васильков Василий, Elm в production

Наши условия

• больше 20 разработчиков в команде

• срок жизни — не меньше 5 лет

• больше 100.000 LOC

• Очень активная разработка и рефакторинг

Page 5: SECON'2017, Васильков Василий, Elm в production

Новая “морда”

• GWT

• Plain JS

• TypeScript + Redux + React

• <Lang>.js

Page 6: SECON'2017, Васильков Василий, Elm в production

Elm

• Первое упоминание - 2012

• Независимый язык, НЕ надстройка над JS• Компиляция Elm → JavaScript (очень быстрая!)

• Функциональный• Строгая статическая типизация

Page 7: SECON'2017, Васильков Василий, Elm в production

Elm

• Глобальный вывод типов• Неизменяемые структуры данных

• Чистые функции• Алгебраические типы данных

Page 8: SECON'2017, Васильков Василий, Elm в production

Почему Elm?Это все прекрасно, однако:

• Функциональных языков много• Компилируемых в JS тоже достаточно

• Нет ошибок в runtime

• Очень простой синтаксис

Никаких “undefined is not a function” :)

Page 9: SECON'2017, Васильков Василий, Elm в production

Elm architectureКлассика

• начальная модель• отрисовка модели• изменение модели• опять отрисовка• и опять изменение

• Update: Model → Model

• Render: Model → Html

Page 10: SECON'2017, Васильков Василий, Elm в production
Page 11: SECON'2017, Васильков Василий, Elm в production

Elm

Page 12: SECON'2017, Васильков Василий, Elm в production

Elm

Page 13: SECON'2017, Васильков Василий, Elm в production

Elm

Page 14: SECON'2017, Васильков Василий, Elm в production

Elm

Update→Model→Render

User Input

Network packet

Timers

Все проходит через update-функцию

Page 15: SECON'2017, Васильков Василий, Elm в production

Elm debug

• Отладка не нужна ;)• Если всё-таки нужна — есть Time Travel Debugger

• Еще можно JavaScript почитать, но без фанатизма

Page 16: SECON'2017, Васильков Василий, Elm в production

Time Travel Debugger

Все в debug-console. Как-то так:

• Initial Model

• onClick + Network (User logged In)

• onClick + Network (User add first item)

• onClick + Network (User add second item)

Page 17: SECON'2017, Васильков Василий, Elm в production

Time Travel Debugger

Page 18: SECON'2017, Васильков Василий, Elm в production

Time Travel Debugger

Page 19: SECON'2017, Васильков Василий, Elm в production

Time Travel Debugger

Page 20: SECON'2017, Васильков Василий, Elm в production
Page 21: SECON'2017, Васильков Василий, Elm в production

Elm packages

• У Elm есть стандартная библиотека

• Ну и пакетный менеджер (с пакетами)• И поддержка semver (просто космос!)

Page 22: SECON'2017, Васильков Василий, Elm в production

Как попробовать

• elm-make

• elm-reactor

• elm-format

• elm-package

• elm-repl

• Установить готовый пакет с elm-lang.org

• Через npm-магию

Page 23: SECON'2017, Васильков Василий, Elm в production

Василий Васильков, @2vgv

Хотите писать на Elm?https://github.com/Ecwid/new-job