Доброе утро! Буквально через пять минут начинаем второй день #wstdays в Минске.
Первый доклад — «Переходим на React, взгляд Angular-разработчика», Евгений Жарков.
@xufocoder как только доклад начнётся — сразу будет ссылка. А то вы заранее всё пролистаете и будет неинтересно.
А мы уже начали. @pepelsbey рассказывает про наш публичный Slack slack.web-standards.ru
Трансляция — youtu.be/UPtDcAbg6EI
Иии.... Слайды про Реакт: webstandardsdays.ru/2015/10/31/pre…
Женя с реактом совсем недавно, буквально месяц. Будет делиться свежими впечатлениями.
Почему? Потому что устал от непоняток со сроками выхода Angular2.
Если вы входите в Реакт постепенно, то всё ОК, а вот если вы сразу прыгаете в проект который уже давно на Реакте — будет много нового.
Сам Реакт прост, но вот вокруг него много штук с довольно высоким порогом входа.
«Иногда я чувствую себя не разработчиком, а каким-то плагин-менеджером».
Директивы — это самая большая проблема в Angular, нет нормальной документации, бест-практис и т.п.
В реакте методы лайв-цикла говорят сами за себя. pic.twitter.com/kCY2FS5vU1
Старайтесь дробить свою вёрстку на маленькие компоненты, тогда и JSX будет не страшным.
Если вы генерите размету в render() динамически (через .map(), например) — не забывайте указать уникальный ключ компоненту.
Инлайн-стили, который продвигает команда реакта — это не ок, по мнению Жени. Но ему нравится подход, который используется в Material UI.
Сам же он пользуется препроцессорами и PostCSS.
С роутингов в Ангуляре всё уже давно обкатано, в реакте есть отдельная библиотека react-router. Для работы с HistoryAPI — библиотека history
Как работать с данными? Реакту всё равно, можете использовать хоть модельки от Backbone.
Но, конечно, всё больше команд переходят на архитектуру Flux от фейсбука.
Redux — Flux-архитектура в функциональном стиле.
У редакса простая идея, но использование его в реальном состоянии, несколько, эм... pic.twitter.com/bYFOQBhPvv
Вопросы из зала:
— Таки надо использовать реакт или нет?
— А у вас есть время ждать второй Ангуляр?
В общем, серебряной пули по прежнему нет. Думайте, думайте, думайте.
Второй доклад — «Angular наносит ответный удар», Владимир Столяров.
Владимир работает в Fitbit и Angular помогает им делать продукты для здорового образа жизни.
Ангуляр был супер-героем, принёсшим двустороннее связывание данных.
Слайды? Вот они slides.com/vladferix/deck…
Основных претензий к Ангуляру, в общем-то две. pic.twitter.com/xyxTSJVmoe
А вот, кратенько, что нам обещают в Angular 2. pic.twitter.com/P8YC4i8j19
Почему ангуляр тормозит? Основная причина в хаотичной работе Change Detection. В A2 это упростили и структурировали.
Тесты скорости работы с большим деревом от ребят из метеора. Angular1 — всё очень плохо, в A2 — сравнимо с реактом. pic.twitter.com/TmMuBoUip3
Также обещеают Angular Universal, который работает везде — в браузере, на сервере, в мобильных приложениях.
Скоупы ожидает печальное будущее. jQLite — тоже. pic.twitter.com/Txa6FdXgRg
Вообще всё идёт по пути упрощения и разделения областей ответственности.
@alexeyraspopov но иммутабельность же!
@alexeyraspopov а расскажи, как правильно, на твой взгляд? А мы ретвитнем.
Миграция с первой на вторую версию обещает быть не очень сложной, есть два инструмента:
— ng-forward
— ng-update
Можно делать постепенную миграцию, когда разные компоненты сайта работают на разных версиях Angular. pic.twitter.com/LPFxVtbKrg
Есть и проблемы — фреймворк всё ещё в alpha-версии, очень скудная документация.
Список полезный ссылок: slides.com/vladferix/deck…
В комментариях @alexeyraspopov делится своим взглядом на redux twitter.com/alexeyraspopov…
Вопросы
— Сколько времени займёт обучение A2 «с нуля»
— Многие сложные вещи ушли, но время покажет, как оно будет с большими приложениями.
Третий доклад — «Создание универсальных приложений на React», Роман Якобчук
Слайды доклада — slides.com/romaniakobchuk…
Зачем нам SPA? Чтобы получить ответ от сервера как можно быстрее и не терять клиентов (которые покупатели, а не браузеры).
Но и у классических синхронных приложений есть свои плюсы. pic.twitter.com/VRqFGD13yk
Гугл говорит, что они умеют индексировать SPA. Но хорошо ли они это умеют делать на самом деле? Пока что нет.
Как получить серверный рендеринг для SPA?
Заплатить денег облачному серверу, рендерить через PhantomJS или использовать Universal App.
Что делать — понятно. Осталось понять, как. pic.twitter.com/J51nHdauKh
Тяжело найти репозиторий у которого меньше звёздочек на гитхабе, чем у github.com/angular/univer…
У реакта есть серверный рендеринг изначально — React.renderToString. Было бы странно, если бы они наступили на те же грабли.
Но реакт — это чистый рендеринг вьюх. А вот как реализовать работу с данными — это открытый вопрос.
Прервёмся на демонстрацию радуги. pic.twitter.com/kEq3NWjORC
Зачем нам весь этот матан? А вот зачем. pic.twitter.com/4fRH3NYkYE
Redux даёт нам редьюсеры, как чистые функции и иммутабельный стор, корый трансформируется редьюсерами.
Но весь наш веб построен на сайд-эффектах. Где же они? Они в middleware. pic.twitter.com/XJDhjnvk2S
В Redux есть много проблем, но это огромный шаг по донесению концепций FP до широкой аудитории.
— Не станет ли так, что вся основаная работа уйдёт в middleware и они станут огромны?
— По моему опыту — нет, не станут. Не бойтесь.
Четвёртый доклад — «Инструментируй это», Роман Дворнов.
Слайды к докладу — webstandardsdays.ru/2015/10/31/pre…
Задача — найти нужное место в исходном коде большого, нет, огромного проекта.
Как работает покрытие кода тестами? Расставляем по всем веткам код вызовы служебной функции и считаем процент реальных вызовов от ожидаемого
В общем, инструментирование кода — это добавление дополнительного кода в наш код.
Дополнительного кода, который делает какую-то свою полезную работу. Это — главное отличие от транспиляции.
Второй известный пример инструментирования кода — React Hot Loader.
Инструмент про который пойдёт речь в докладе позволяет, в том числе, открыть файл, в котором определён нужный компонент, сразу в редакторе.
Инструмент разрабатывается для Basis.js, но не печальтесь — он изначально может подключаться к другим фреймворкам. В том числе к реакту.
RT @alxe_master: #wstdays . эх. Где же ты @rdvornov был два года назад?
Чтобы всё это работало, нужен дев-сервер и некоторый API. pic.twitter.com/SbTywPbXB8
Дополнительный код для инструментирования делате отдельный плагин для Babel. pic.twitter.com/6eyrXo72wl
Вот, вот этот плагин github.com/restrry/babel-…
Под капотом используется ES6 WeakMap, в том числе и для того, чтобы не думать об очистке памяти.
Основной API плагина в трёх картинках. pic.twitter.com/zyePmYTEfY
Твит занудства. API — это что-то там интерфейс, а значит он мужского рода.
Для basis.js инспектор встроен в ядро, для реакта и бекбона — npm i component-inspector
Если покопаться в коде component-inspector, то можно построить свою версию для любого другого фреймворка.
Пример react-приложения c component-inspector github.com/lahmatiy/compo…
А ещё случились некоторые сайт-<s>эффекты</s>проекты. pic.twitter.com/3eLWpOhtfM
Чтобы не видеть тот мусор, который добавляет инспектор — используйте карты кода. pic.twitter.com/U35r915DhX
Чтобы выкинуть лишние вызовы при дебаггинге — используйте balckboxing. pic.twitter.com/sz3q2r64wS
Итого: инструментирование – метод,
расширяющий возможности
разработки.
А у нас — обед до 14:20. И вы сходите, перекусите. После перерыва продолжим про автоматизацию и тестирование.
«Если человек в состоянии написать плагин для галпа, то называть его верстальщиком грешно».
Шестой доклад — «Тестирование: руководство от чайников», Елизавета Селиваноа и Ирина Левина.
А вы тестируете?
Слайды — slides.com/elizaveta_s/de…
Виды тестирования. pic.twitter.com/Hw9RUcSOfh
Можно тестировать свой код людьми-тестировщиками, но они просят за свою работу денег.
Ок, будет писать тесты сами. Для начала возьмём Jasmine.
Кстати, по программе нашей конференции видно, что девушки во фронтенде — это нормально и даже хорошо.
Ещё полезная штука — имитатор бешенства пользователя gremlin.js github.com/marmelab/greml… camo.githubusercontent.com/130e101ee69d4d…
Ещё полезная штука — имитатор бешенства пользователя gremlin.js github.com/marmelab/greml… pic.twitter.com/6fjz1ZcnrA
— А вы тестируете UI?
— Да, Фантомас.
npm i grunt-phantomas pic.twitter.com/JtwNQWq9Yt
Чуть более мощно, но сложнее — CasperJS. casperjs.org
Надо правда ставить python, если у вас винда.
Тестирование вёрстки — BackstopJS.
$ npm i backstopjs
К сожалению, мантейнеры забросили CasperJS.
Ещё от себя — есть стандарт WebDriver и webdriver.io для работы с ним.
@Vitalliumm вторая версия вышел вроде как полгода назад. А вот с npm-модулем беда, это да. pic.twitter.com/h2iqkWerGo
Седьмой доклад — «Интернационализация одностраничных приложений», Константин Кривленя.
Слайды — mavrin.github.io/i18n-pres/
Для работы с форматами Константин и его команда выбрали formatjs.io
Для работы с числами и датами удобно использовать window.intl
Полезная библиотека для работы с относительными (три часа назад) датами — npmjs.com/package/intl-r…
Но всё это не работает угадайте где? Правильно, в Safari.
Но уже есть полифил github.com/andyearnshaw/I…
Решение тестового задания на позицию разработчика интерфейсов в Яндексе. pic.twitter.com/47pOurk6j7
Также рекомендуем к просмотру доклад Антона Немцева «l20n как система локализации» youtube.com/watch?v=wYQUoh…
При работе с переводами, который отдаются сторонним переводчикам всегда нужно помнить про XSS-уязвимость и предусмотреть защиту от неё.
Личная просьба от Константина — пишите название страны буквами, а не флагом. pic.twitter.com/r7XwEucIhU
Например, потому что в Канаде, например, два государственных языка. И в Финляндии — тоже. А в Швейцарии — вообще четыре.
Восьмой доклад — «Пишем клиент без JavaScript», Владимир Дашукевич
Слайды: webstandardsdays.ru/2015/10/31/pre…
Почему JavaScript плохой? Потому что можно писать как хотим. Хотим, хотим — и получаем. pic.twitter.com/Q5IFACd6nN
Но если не нужно писать на JavaScript, то на чём же нам писать? На EcmaScript 2015.
Или можно писать на TypeScript, Dart, тысячи их...
А ещё можно писать на C++ и потом сконвертировать его в JS.
Но вообще, идея «я пишу на том, на чём умею, а потом сконвертирую в JS» не нова. pic.twitter.com/bf0o9nVEG0
Почему JavaScript медленный? Потому что мы можем писать совершенно непредсказуемо.
Вчерашний доклад про V8 был как раз про то, как бороться с этой непредсказуемостью.
NaCl должен работать гораздо быстрее, чем anno.js, но что-то в демке пошло не так.
Последний доклад через 10 минут — «Прокси из ES6: сахар для работы с DOM и не только» Алексей Швайка.
Слайды — webstandardsdays.ru/2015/10/31/pre…
Но трансляции в твиттер не будет, мне уже пора быстро-быстро бежать на поезд ;(
Всем спасибо за внимание, с вами бы @_h4_
<<<<<<< Updated upstream @Semenov да, всё верно. Отпечатался
@Semenov да, всё верно. Отпечатался
Stashed changes