Disclaimer 1: Первую которая "про то чего мы достигли" я таки пропустил.
Disclaimer 2: Многие доклады смотрелись и отчёты писались в состоянии алкогольного опьянения.
Сейчас посмотрел Ben Alpert - What Lies Ahead она про то какие идеи они имеют о дальнейшем развитии. И они делят на UX-идеи и DX-идеи. В UX у них:
- Анимации. Судя по 3 строкам кода что показали, это весьма похоже на react-motion
- Гесчуры. Хотят чтоб было универсально на всех плафтормах
- Перформанс. В частности хотят сделать List-ы которые бы работали быстро везде (там несколько идей)
- Сделать лейаут движок в жс-е. Чтоб не было такого, что вам надо что-то отрисовать чтоб узнать какого оно будет размера от которого вам надо плясать (кто работал с d3 поймёт). Не надо будет по два раза рендерить, не надо будет лишние рефловы браузеру делать, легче виндовинг. Не нужны будут эллементы которые нужны только для лейаута. Будет проще делать всякие компоненты-лейауты, типо Масонри
В DX у них:
- react-cli с идеей что хтмл-жс-цсс привлекателен тем, что ты создал просто текстовый файл, открыл его браузером и оно работает.
- улучшить девтулзы для браузеров
- улучшить HMR
- улучшить поддержу IDE
- дата-менджмент. Они там хотят сделать Релей с которым намного проще работать и с локальным стейтом и блек-джеком. Короче, вроде что-то похожее на ОМ.некст (как я его понял по рассказам Ромы)
- реакт-нейтив для веба. Походу идея в том чтоб сделать какие-то общие компоненты для веба-андроида-айоса-вашалюбимаяплатформа
И в конце задвинул про то, что будет в 15: полный SVG, не оборачивают текстовые ноды в спаны, удаляют дата-реактид (+10% перформанса из-за этого почему-то). 300 контрибьюторов в реакте и 600 в реакт-нейтиве
Он об одном из немногих (единственном?) что было нового (продуктового) представленного на этой конфе - http://draftjs.org/ О том как ФБ перешёл с <textarea /> на contenteditable. Вроде у Медиума не так давно (около года назад?) не получилось затеймить контентэдитабл и основная проблема - БРАУЗЕРЫ (as usual). Но у него и кучка преимуществ:
- он появился где-то в 2000 году и он есть во всех браузерах
- он нативно поддерживает курсор и выделения
- он нативно поддерживает key events и IME (@TODO: таки почитать поподробней об этом чтоб не отвечать "ну это поддержка кучи языков и направлений текста")
- с помощью него намного проще реализовывать rich text фичи чем с текстарией
- вам не надо париться с подсчётом высоты строки чтоб увеличить поле ввода когда много текста
- нативная поддержка accessability
И они сделали draftjs. Это не wysiwyg, это фреймворк для создания wysiwyg. Вроде как уже сейчас Facebook Notes на нём (в видео есть демка выглядит весьма найс). И вроде как он отвязан от Реакта. Но идеи там такие же. У вас есть State текста и это не просто строка, а Record'ы описывающие куски текста и их можно отдельно и иммутабельно менять и потом рендерить новый State. Опять же очень удобно делается undo/redo без сохранения каждой буквы (а как в ворде и тд). Любые преобразования можно атомарно выполнять (там пример с заменой @grand hyatt на Grand Hotel Hayatt San Francisco с сылкой) (привет FP). Короче, если вам нужен хороший редактор или вы хотите первым сделать "крутой wysiwyg для реакта" то это для вас
Инетерсные факты о Лине:
- она разрабатывает Девтулзы для ФФ и делает это на реакте
- если бы он сбрила только один висок это было бы красивей (красивее?) (kudos to Натали Дормер)
Он о её сайдпроекте https://code-cartoons.com/ - это блог на Медиуме (узнал, что Медиум умеет в кастомные домены) который в картинках-коммиксах рассказывает о каких-то штуках в программировании. Пока там не то чтоб много статей но они крутые. Я читал о Флюкс, Редакс и Релей но там вроде ещё есть о хот-релоаде. Идея в том чтоб подавать инфу в виде наглядных коммиксов с персонажами и там не "как настроить Релей чтоб он работал", а о "какие принципы заложены в Subject", "какой лайфсайкл данных подразумевается в той или иной идее". Короче советую! И доклад не то чтоб плохой, но уместить все статьй о Флакс, Редакс и Релей в 30мин не лучшая затея. Лучше реально почитайте статьй. Или знайте, когда вас спросят об одной из этих технологий, куда отослать вопрошающего
Какого лешего он делает на этой конфе я не знаю. Он о процессе рекрутинга в частности в ФБ. Если кому интересны какие там есть этапы или какие ващи вам помогут попасть к ним на работу можете посмотреть.
Второй доклад поинтересней Parashuram N - Web-like Release Agility for Native Apps. Он о тулзах которые сделал Microsoft для Реакт-Нейтив экосистемы. Это крутой плагин для VSCode для RN (там есть демка) - подсказки, интеллисенс, дебагинг, консоль логи и тд. Code-push - это тулзовина с помощью которой можно удобно выкатывать апдейты к вашему уже запаблишенному приложению, вы сами рулите чего сделать на клиенте при апдейте. Плагин для HockeyApp под RN. HockeyApp - это походу SDK для удобного распространения Бета версий приложений. Типо "только для определённой части юзеров старой версии", "сбор краш-логов и фидбеков" и тд. Поддержа RN для Visual Studio Team Services. VSTS - это Continuous Integration система. Ещё в начале он упомянул, что он автор react-worker-dom - выполнение реакта в веб-воркере. И соавтор react-native-cordova-plugin - тулзы для запуска любого плагина для кордовы в RN. Докладчик индус и его писец тяжело слушать =/
Чувак доступно рассказывает с какими проблемами (в первом приближении) сталкиваешься когда делаешь программы для VR (90fps для каждого глаза отдельно на мобилке) и какие есть пути решения. Рассказывает как он своими экспериментами дошёл до того, что и в 3Д декларативность и ВиртуальныйДОМ решают кучу проблем. В конце говорит, что "вообще-то ребята в Мозилле всё уже придумали" и назвали это https://aframe.io/ и есть даже https://github.com/ngokevin/aframe-react. К Реакту доклад имеет весьма и весьма опосредованное отношение. Смотрите если вам захочется поиграться с VR
Доклад о http://www.flipkart.com/ Это что-то типа Амазона только в Индии (самый популярный сайт в Индии вроде). Какони ускоряли свой мобильный сайт, придумали сначала грузить пребилдженные хтмлки с оптимистик-апдейт заглушками, приделали Service Worker'ы для кешей, gpu ускорение, потом как они приделали manifest.json (сайт превратился в почти приложение) и как они прикрутили нотификейшн-пуши. И долго танцевали танец счастья. Слушать чувака почти невозможно с его акцентом, но доклад хорош в познавательных целях о том какие есть неплохие идеи для улучшения сайта на мобилках
Доклад о том как чувак сделал подарок лучшему другу на свадьбу - DIY версию Jeopardy (это интелектуальное шоу где выбирается тема и сложность и кто первый жмакнет кнопку и правильно ответит получает очки). Чувак довольно весело рассказывает как связать Разбери, Ардуино, микрофон, кнопки, экран и тд чтоб сделать такую игру чтоб это было что-то физическое, а не просто апликейшн на телефон. Рассказывает какие фреймворки и тулзы для этого использовал (сокет.ио, джонни-файв, реакт, спич-рекогнишн в хромиуме, открытая апишка для вопросов-ответов). Про код почти ничего, больше общая идея - куда копать если вам захотелось самому что-то поделать руками.
Лайтнинг от чувака который работает в КханАкадемии до этого работал в Эпл. Рассказывает о том с какими трудностями сталкиваются те кто пытаются реализовать умную систему обработки жестов и как лучше решать эти трудности. Не про код, а про идеи. Что лучше для каждого гесчура сделать свои стейт машины и сделать декларативную систему правил по которым они будут взаимодействовать.
Лайтнинг о том, что нейтивная реализация листов в RN быстро сожрёт память если делать бесконечные списки, а реализация в каком-то Chop под RN не сожрёт и будет работать быстро. Вроде объясняется идея, но я так и не понял что там революционного. Вроде стандартная идея бесконечных списков. И ещё я походу в этом докладе услышал больше повторений "so" чем за всю прошедшую жизнь
Вот это полезный лайтнинг. Чувак представляет https://github.com/revivek/oy - набор готовых компонент для вёрстки имейлов. Выдаёт варнинги когда вы забыли какие-нибудь обязательные атрибуты (ширина, высота у картинок в имейлах - обязательны). Короче годнота если вам надо верстать имейлы
Копетанский лайтнинг о том, что если вы делаете приложение на RN под разные плафтормы и компонент под одну отличается от компонента под другую, то можно сделать свою универасльную обёртку.
Лайтнинг-представление https://github.com/gatsbyjs/gatsby генератор статических сайтов. Походу удобен для всяких лендингпейджев, промопейджев и тд. Но исходники вы пишете на markdown'е. Если вам нужен лендингпейдж для вашей либы, то стоит взглянуть на него
Лайтнинг о том, что в RN запилили новую систему с Navigator'ами. Стало заметно круче и легче приделывать анимации и легче реюзать код и одни "Экраны" в приложении стали более отделёнными от других "Экранов" в приложении. Судя по тому, что в чатике уже не раз сетовали на навигаторы в RN это должно быть полезно
Лайтнинг о том, что нынче есть в Nuclide в частности для RN: полнофункциональный дебагер, полнофункциональный инспектор, поддержка Флоу и тд и тп. Если кто не в курсе, Nuclide - это целая большая пачка плагинов к Atom и он не только для разработки под RN там и просто React и Hip-Hop. В FB его юзают для разработки своих продуктов. Вобщем not bad (лично я останусь на Code =) ). И я не знал, что Суарез свалил из СаундКлауд.
Лайтнинг о https://www.fusetools.com/ Он уже тут обсуждался коротенько. Это альтернатива RN. Он очень похож (декларативная разметка, логика на JS) и если честно выглядит круто. И у него есть крутые фичи типо поддержки нативных анимаций, прямого юзания OpenGL. Чуваки вроде и не такие известные но оказывается они же и разрабатывают GPU Mali-400 которые юзаются в ядрах Cortex-AX, а следовательно в миллионах смартфонов
Лайтнинг-саксессстори о том как Walmart сделал приложение Walmart IOS Pharmacy на RN. Что интересно, у них есть основное приложение нативное и Фармаси они запускают изнутри своего приложения, причём как я понял, оно запускается не как отдельное, а какбудто ты не выходил из основного (возможно я не правильно понял чувака). Расказывает несколько проблем с которыми они столкнулись и как они их порешали. Упоминает, что у Волмарта есть некая Electrode platform - набор их компонент и тулзов. Но походу она не опенсорснута, но что-то у них есть https://github.com/walmartreact
Лайтнинг-представление https://realm.io/ Это асинхронное персистент хранилище для мобилок. Это скорее альтернатива SQLite. Транзакции, выборки, производительность судя по тестам выше чем у SQLite и юзается кучей компаний. Имеет байндинги в RN, ObjC, Swift, Java
Доклад(!)-реклама RN. С технической точки зрения - бесполезен чуть более чем полностью. Может быть полезен, если вы кому-то (начальству) хотите впарить RN ито есть крупный минус: чувак рассказывает с такими интонациями "гуру продажника". Возникло ощущение, что мне Эмвей пытаются впарить. Если будете делать доклад, то посмотрите несколько минут этого чтоб понять как не надо говорить
Наконец-то вау доклад! Чуваки запилили декларативную настройку OpenGL шейдеров для чего угодно - https://github.com/ProjectSeptemberInc/gl-react Работает как в Веб так и в Нейтиве. Работает быстро (судя по демкам). Писать удобно. Шейдеры можно легко переиспользовать и уже есть кучка шейдеров написаных которые можно просто из npm ставить. Чувак кратко рассказывает как работает OpenGL, как они это заимплементили, как они это оптимизировали, как это выглядит в коде. У них даже есть удобный инспектор для используемых "эффектов" который строит граф и в риалтайме может показывать производительность каждого звена https://github.com/gre/gl-react-inspector. Выглядит это всё отлично. Доклад от француза с сильным акцентом, но слушать его намного легче чем индусов. Маст си, имхо
Отличный докладец собственно о сабже. Чувак рассказывает, о том какие сейчас популярны подходы в управлении данными. У кого какие pros and cons. Как примерно они один относительно другого "располагаются". Примерный график "полезность/размер проекта" (правда жаль, что он не отобразил на нём Re-frame и Om/next).
Лайтнинг о том как можно контрибьютить в OSS если вы не умеете в код (доки, обучающие видео, блогпосты, тестирование на ваших девайсах и тд и тп). Лайтниг к Реакту имеет отношение постольку-поскольку (Если мне кто объяснит к чему она приплела проблемы ЛГБТ и других меньшинств тому благодарочка)
Слегка копетанский лайтнинг о том с какими проблемами сталкиваешься при разработке на RN. Коротко - рано или поздно приходится писать на ObjC/Swift или Java. Но "не беда, всё хорошо, комьюнити заебись, вам помогут и вы помогайте всем". Какой-то технической важности в лайтнинге нет
Лайтнинг от engineering director at Facebook о том, о чём он много думал в последнее время. Reactive, live-updating, distributed GraphQL server. Он рассказывает на каких идеях он хочет построить какой-то высокопроизводительный, следующего поколения, сервер для общения с помощью ГрафКЛ
Хороший лайтнинг про классную идею - перенести RN в Web. Казалось бы зачем, но чувак из одной из команд Твиттера объясняет, что это будет выгодно во многих аспектах, в частности он рассказывает какой выигрыш получается при использовании StyleSheet вместо CSS (читай CSS-in-JS подход) тем самым снижая размер результирующего бандла и выкидывая один этап сборки и рассказывает о том какой профит будет в плане внедрения accessability. Проект опенсорснут https://github.com/necolas/react-native-web
Ещё один слегка копетанский лайтнинг о том, что учите другие языки чтоб стать лучше в своём родном (и это как об обычных языках так и ЯП). Чувак рассказывает чему он научился у C#, Haskell, Clojure и тд. Короче - расширяйте кругозор, ато будете как сычи
Уже не раз тут проскакивавший доклад от Нетфликса о том как они оптимизируют свои приложения на Реакте под самые убогие девайсы и какие идеи они использовали в своей (увы не открытой платформе) Gibbon. Доклад технически интересный но полезен будет тем кому надо запустить красивый интерфейс на часах Монтана
Хороший доклад о том как чуваки пришли к желанию уйти от REST api. Даётся сравнение Falcor и GraphQL, и почему они выбрали второй. Как они сделали http://graphene-python.org/ (реализация ГрафКЛ на Питоне), показано чего он умеет и что, например, схема SW из официального примера GraphQL занимает 2000 LOC, а та же схема на Graphene - 150 LOC. Очень добротный, хороший, наглядный доклад о том почему стоит переходить на GraphQL
Имхо, важный доклад о том как в ФБ ускоряют первую загрузку. Они разбивают на бандлы согласно историческим данным какие бандлы с какими чаще рекваерятся. Описывается их система загрузки модулей, описывается идеи которые они применяют для уменьшения времени ожидания Execution of JS. Как они рекваерят бандлы которые возможно будут нужны юзеру в requestIdleCallback. Описывается почему для них класический SSR не эффективен (от себя добавлю, что для СЕО он по прежнему эффективен). Советую всем посмотреть хоть и у чувака неприятный акцент и он всё читает с монитора
Доклад-представление Elm. Отлично описано какие именно проблемы JS решены в Elm by design. Какие идеи заложены в Elm и какой у него замечательный компилятор и тд. Очень приятный доклад, хотелось бы чтоб все доклады были такими
Собственно доклад о сабже. Наглядно показывается и рассказывается какие треды есть в RN и как они взаимодействуют. Рассказывается о тулзах которыми можно дебажить RN приложения (Perf monitor, Systrace, CPU profiler) и показывается на примере как ими пользоваться. Рассказывается об оптимизациях которые они сделали в последнее время в RN. Советуется на какие вещи стоит обратить внимание при разработке приложений. В чём помогает Shadow тред и тд и тп. Тем кто разарбатывает на RN маст си, имхо
Доклад о том, что можно подсмотреть у Cycle и Elm и как примерно их хорошие идеи можно заюзать в React. Рассказывается о том как примерно работает Cycle и что можно оттуда позаимствовать и то же самое об Elm.
Лайтнинг-представление хитрой штуки https://github.com/elierotenberg/react-armor от всёлого чувака с видом безумного-профессора. Либа решает проблему: third-party скрипты могут таргетировано (и нарочно) сломать ваш DOM или стили для этого дома. Либа умеет: превратить в нечитаемое месиво имена всех классов, превратить все хтмл-теги которые вы юзаете в нечитаемые и она умеет добавить в дом-дерево рандомных тегов. Всё чтоб никакими заранее подготовленными селекторами или xpath-ами нельзя было сломать ваше приложение. Идея интересная
Лайтнинг-представление Enzyme. Расказывается, что Энзим - это набор моков, тулзов и тд от Airbnb для тестирования React, RN и у них есть облегчалки Интеграционного тестирования. Короче, для тестирования - мастхев
Лайтнинг-рассказ о том зачем Automattic переписали WordPress на React и всё это заопенсорсили. Если чо, репа тут: https://github.com/automattic/wp-calypso Технического значения не имеет, но показаны плюсы ухода в опенсорс и дан пример не маленького приложения на Реакте
Лайтниг об общей идее того как прикрутить RxJS к React. Снова симпатичные, анимированные визуализации того как работают Observable. Примерчик того как не правильно прикручивать RxJS к React и примерчик того как правильно.
Лайтнинг-рассуждение о том с какого возраста детям стоит учить программирование и стоит ли вообще. Полезность сомнительная
суперкруто! спасибо за ревью! 👍