Create a gist now

Instantly share code, notes, and snippets.

@ALF-er /Opinion.md
Last active Jul 11, 2017

What would you like to do?
ReactJS Conf 2016

Disclaimer 1: Первую которая "про то чего мы достигли" я таки пропустил.

Disclaimer 2: Многие доклады смотрелись и отчёты писались в состоянии алкогольного опьянения.

1. Ben Alpert - What Lies Ahead

Сейчас посмотрел Ben Alpert - What Lies Ahead она про то какие идеи они имеют о дальнейшем развитии. И они делят на UX-идеи и DX-идеи. В UX у них:

  • Анимации. Судя по 3 строкам кода что показали, это весьма похоже на react-motion
  • Гесчуры. Хотят чтоб было универсально на всех плафтормах
  • Перформанс. В частности хотят сделать List-ы которые бы работали быстро везде (там несколько идей)
  • Сделать лейаут движок в жс-е. Чтоб не было такого, что вам надо что-то отрисовать чтоб узнать какого оно будет размера от которого вам надо плясать (кто работал с d3 поймёт). Не надо будет по два раза рендерить, не надо будет лишние рефловы браузеру делать, легче виндовинг. Не нужны будут эллементы которые нужны только для лейаута. Будет проще делать всякие компоненты-лейауты, типо Масонри

В DX у них:

  • react-cli с идеей что хтмл-жс-цсс привлекателен тем, что ты создал просто текстовый файл, открыл его браузером и оно работает.
  • улучшить девтулзы для браузеров
  • улучшить HMR
  • улучшить поддержу IDE
  • дата-менджмент. Они там хотят сделать Релей с которым намного проще работать и с локальным стейтом и блек-джеком. Короче, вроде что-то похожее на ОМ.некст (как я его понял по рассказам Ромы)
  • реакт-нейтив для веба. Походу идея в том чтоб сделать какие-то общие компоненты для веба-андроида-айоса-вашалюбимаяплатформа

И в конце задвинул про то, что будет в 15: полный SVG, не оборачивают текстовые ноды в спаны, удаляют дата-реактид (+10% перформанса из-за этого почему-то). 300 контрибьюторов в реакте и 600 в реакт-нейтиве

2. Isaac Salier-Hellendag - Rich Text Editing with React

Он об одном из немногих (единственном?) что было нового (продуктового) представленного на этой конфе - 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 для реакта" то это для вас

3. Lin Clark - A Cartoon Guide to the Wilds of Data Handling.

Инетерсные факты о Лине:

  • она разрабатывает Девтулзы для ФФ и делает это на реакте
  • если бы он сбрила только один висок это было бы красивей (красивее?) (kudos to Натали Дормер)

Он о её сайдпроекте https://code-cartoons.com/ - это блог на Медиуме (узнал, что Медиум умеет в кастомные домены) который в картинках-коммиксах рассказывает о каких-то штуках в программировании. Пока там не то чтоб много статей но они крутые. Я читал о Флюкс, Редакс и Релей но там вроде ещё есть о хот-релоаде. Идея в том чтоб подавать инфу в виде наглядных коммиксов с персонажами и там не "как настроить Релей чтоб он работал", а о "какие принципы заложены в Subject", "какой лайфсайкл данных подразумевается в той или иной идее". Короче советую! И доклад не то чтоб плохой, но уместить все статьй о Флакс, Редакс и Релей в 30мин не лучшая затея. Лучше реально почитайте статьй. Или знайте, когда вас спросят об одной из этих технологий, куда отослать вопрошающего

4. Helena Milosevic - Demystifying Tech Recruiting

Какого лешего он делает на этой конфе я не знаю. Он о процессе рекрутинга в частности в ФБ. Если кому интересны какие там есть этапы или какие ващи вам помогут попасть к ним на работу можете посмотреть.

5. Parashuram N - Web-like Release Agility for Native Apps

Второй доклад поинтересней 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. Докладчик индус и его писец тяжело слушать =/

6. Eric Florenzano - React, Meet Virtual Reality

Чувак доступно рассказывает с какими проблемами (в первом приближении) сталкиваешься когда делаешь программы для VR (90fps для каждого глаза отдельно на мобилке) и какие есть пути решения. Рассказывает как он своими экспериментами дошёл до того, что и в 3Д декларативность и ВиртуальныйДОМ решают кучу проблем. В конце говорит, что "вообще-то ребята в Мозилле всё уже придумали" и назвали это https://aframe.io/ и есть даже https://github.com/ngokevin/aframe-react. К Реакту доклад имеет весьма и весьма опосредованное отношение. Смотрите если вам захочется поиграться с VR

7. Aditya Punjani - Building a Progressive Web App

Доклад о http://www.flipkart.com/ Это что-то типа Амазона только в Индии (самый популярный сайт в Индии вроде). Какони ускоряли свой мобильный сайт, придумали сначала грузить пребилдженные хтмлки с оптимистик-апдейт заглушками, приделали Service Worker'ы для кешей, gpu ускорение, потом как они приделали manifest.json (сайт превратился в почти приложение) и как они прикрутили нотификейшн-пуши. И долго танцевали танец счастья. Слушать чувака почти невозможно с его акцентом, но доклад хорош в познавательных целях о том какие есть неплохие идеи для улучшения сайта на мобилках

8. Keith Poplawski - How To Use React In A Wedding Gift Without Being A Bad Friend

Доклад о том как чувак сделал подарок лучшему другу на свадьбу - DIY версию Jeopardy (это интелектуальное шоу где выбирается тема и сложность и кто первый жмакнет кнопку и правильно ответит получает очки). Чувак довольно весело рассказывает как связать Разбери, Ардуино, микрофон, кнопки, экран и тд чтоб сделать такую игру чтоб это было что-то физическое, а не просто апликейшн на телефон. Рассказывает какие фреймворки и тулзы для этого использовал (сокет.ио, джонни-файв, реакт, спич-рекогнишн в хромиуме, открытая апишка для вопросов-ответов). Про код почти ничего, больше общая идея - куда копать если вам захотелось самому что-то поделать руками.

9. Lightning Talks - Andy Matuschak

Лайтнинг от чувака который работает в КханАкадемии до этого работал в Эпл. Рассказывает о том с какими трудностями сталкиваются те кто пытаются реализовать умную систему обработки жестов и как лучше решать эти трудности. Не про код, а про идеи. Что лучше для каждого гесчура сделать свои стейт машины и сделать декларативную систему правил по которым они будут взаимодействовать.

10. Lightning Talks - Vivian Cromwell

Лайтнинг о том, что нейтивная реализация листов в RN быстро сожрёт память если делать бесконечные списки, а реализация в каком-то Chop под RN не сожрёт и будет работать быстро. Вроде объясняется идея, но я так и не понял что там революционного. Вроде стандартная идея бесконечных списков. И ещё я походу в этом докладе услышал больше повторений "so" чем за всю прошедшую жизнь

11. Lightning Talks - Vivek Patel

Вот это полезный лайтнинг. Чувак представляет https://github.com/revivek/oy - набор готовых компонент для вёрстки имейлов. Выдаёт варнинги когда вы забыли какие-нибудь обязательные атрибуты (ширина, высота у картинок в имейлах - обязательны). Короче годнота если вам надо верстать имейлы

12. Lightning Talks - Maria Hollweck

Копетанский лайтнинг о том, что если вы делаете приложение на RN под разные плафтормы и компонент под одну отличается от компонента под другую, то можно сделать свою универасльную обёртку.

13. Lightning Talks - Kyle Matthews

Лайтнинг-представление https://github.com/gatsbyjs/gatsby генератор статических сайтов. Походу удобен для всяких лендингпейджев, промопейджев и тд. Но исходники вы пишете на markdown'е. Если вам нужен лендингпейдж для вашей либы, то стоит взглянуть на него

14. Lightning Talks - Eric Vlad Vicenti

Лайтнинг о том, что в RN запилили новую систему с Navigator'ами. Стало заметно круче и легче приделывать анимации и легче реюзать код и одни "Экраны" в приложении стали более отделёнными от других "Экранов" в приложении. Судя по тому, что в чатике уже не раз сетовали на навигаторы в RN это должно быть полезно

15. Lightning Talks - Andres Suarez

Лайтнинг о том, что нынче есть в Nuclide в частности для RN: полнофункциональный дебагер, полнофункциональный инспектор, поддержка Флоу и тд и тп. Если кто не в курсе, Nuclide - это целая большая пачка плагинов к Atom и он не только для разработки под RN там и просто React и Hip-Hop. В FB его юзают для разработки своих продуктов. Вобщем not bad (лично я останусь на Code =) ). И я не знал, что Суарез свалил из СаундКлауд.

16. Lightning Talks - Jake Taylor

Лайтнинг о https://www.fusetools.com/ Он уже тут обсуждался коротенько. Это альтернатива RN. Он очень похож (декларативная разметка, логика на JS) и если честно выглядит круто. И у него есть крутые фичи типо поддержки нативных анимаций, прямого юзания OpenGL. Чуваки вроде и не такие известные но оказывается они же и разрабатывают GPU Mali-400 которые юзаются в ядрах Cortex-AX, а следовательно в миллионах смартфонов

17. Lightning Talks - Ken Wheeler

Лайтнинг-саксессстори о том как Walmart сделал приложение Walmart IOS Pharmacy на RN. Что интересно, у них есть основное приложение нативное и Фармаси они запускают изнутри своего приложения, причём как я понял, оно запускается не как отдельное, а какбудто ты не выходил из основного (возможно я не правильно понял чувака). Расказывает несколько проблем с которыми они столкнулись и как они их порешали. Упоминает, что у Волмарта есть некая Electrode platform - набор их компонент и тулзов. Но походу она не опенсорснута, но что-то у них есть https://github.com/walmartreact

18. Lightning Talk - Scott Kyle

Лайтнинг-представление https://realm.io/ Это асинхронное персистент хранилище для мобилок. Это скорее альтернатива SQLite. Транзакции, выборки, производительность судя по тестам выше чем у SQLite и юзается кучей компаний. Имеет байндинги в RN, ObjC, Swift, Java

19. James Ide - Team × Technology

Доклад(!)-реклама RN. С технической точки зрения - бесполезен чуть более чем полностью. Может быть полезен, если вы кому-то (начальству) хотите впарить RN ито есть крупный минус: чувак рассказывает с такими интонациями "гуру продажника". Возникло ощущение, что мне Эмвей пытаются впарить. Если будете делать доклад, то посмотрите несколько минут этого чтоб понять как не надо говорить

20. Gaetan Renaudeau - Universal GL Effects for Web and Native

Наконец-то вау доклад! Чуваки запилили декларативную настройку OpenGL шейдеров для чего угодно - https://github.com/ProjectSeptemberInc/gl-react Работает как в Веб так и в Нейтиве. Работает быстро (судя по демкам). Писать удобно. Шейдеры можно легко переиспользовать и уже есть кучка шейдеров написаных которые можно просто из npm ставить. Чувак кратко рассказывает как работает OpenGL, как они это заимплементили, как они это оптимизировали, как это выглядит в коде. У них даже есть удобный инспектор для используемых "эффектов" который строит граф и в риалтайме может показывать производительность каждого звена https://github.com/gre/gl-react-inspector. Выглядит это всё отлично. Доклад от француза с сильным акцентом, но слушать его намного легче чем индусов. Маст си, имхо

21. Jared Forsyth - Redux, Re-frame, Relay, Om/next, oh my!

Отличный докладец собственно о сабже. Чувак рассказывает, о том какие сейчас популярны подходы в управлении данными. У кого какие pros and cons. Как примерно они один относительно другого "располагаются". Примерный график "полезность/размер проекта" (правда жаль, что он не отобразил на нём Re-frame и Om/next).

22. Lightning Talks - Devon Lindsey

Лайтнинг о том как можно контрибьютить в OSS если вы не умеете в код (доки, обучающие видео, блогпосты, тестирование на ваших девайсах и тд и тп). Лайтниг к Реакту имеет отношение постольку-поскольку (Если мне кто объяснит к чему она приплела проблемы ЛГБТ и других меньшинств тому благодарочка)

23. Lightning Talks - Eric Sauter

Слегка копетанский лайтнинг о том с какими проблемами сталкиваешься при разработке на RN. Коротко - рано или поздно приходится писать на ObjC/Swift или Java. Но "не беда, всё хорошо, комьюнити заебись, вам помогут и вы помогайте всем". Какой-то технической важности в лайтнинге нет

24. Lightning Talks - Adam Wolff

Лайтнинг от engineering director at Facebook о том, о чём он много думал в последнее время. Reactive, live-updating, distributed GraphQL server. Он рассказывает на каких идеях он хочет построить какой-то высокопроизводительный, следующего поколения, сервер для общения с помощью ГрафКЛ

25. Lightning Talks - Nicolas Gallagher

Хороший лайтнинг про классную идею - перенести RN в Web. Казалось бы зачем, но чувак из одной из команд Твиттера объясняет, что это будет выгодно во многих аспектах, в частности он рассказывает какой выигрыш получается при использовании StyleSheet вместо CSS (читай CSS-in-JS подход) тем самым снижая размер результирующего бандла и выкидывая один этап сборки и рассказывает о том какой профит будет в плане внедрения accessability. Проект опенсорснут https://github.com/necolas/react-native-web

26. Lightning Talks - Cole Voss

Ещё один слегка копетанский лайтнинг о том, что учите другие языки чтоб стать лучше в своём родном (и это как об обычных языках так и ЯП). Чувак рассказывает чему он научился у C#, Haskell, Clojure и тд. Короче - расширяйте кругозор, ато будете как сычи

27. Steve McGuire - Performance Without Compromise

Уже не раз тут проскакивавший доклад от Нетфликса о том как они оптимизируют свои приложения на Реакте под самые убогие девайсы и какие идеи они использовали в своей (увы не открытой платформе) Gibbon. Доклад технически интересный но полезен будет тем кому надо запустить красивый интерфейс на часах Монтана

28. Syrus Akbary - A GraphQL Framework in Non-JS Servers

Хороший доклад о том как чуваки пришли к желанию уйти от REST api. Даётся сравнение Falcor и GraphQL, и почему они выбрали второй. Как они сделали http://graphene-python.org/ (реализация ГрафКЛ на Питоне), показано чего он умеет и что, например, схема SW из официального примера GraphQL занимает 2000 LOC, а та же схема на Graphene - 150 LOC. Очень добротный, хороший, наглядный доклад о том почему стоит переходить на GraphQL

29. Bhuwan Khattar - Speeding up Startup for Large React Apps

Имхо, важный доклад о том как в ФБ ускоряют первую загрузку. Они разбивают на бандлы согласно историческим данным какие бандлы с какими чаще рекваерятся. Описывается их система загрузки модулей, описывается идеи которые они применяют для уменьшения времени ожидания Execution of JS. Как они рекваерят бандлы которые возможно будут нужны юзеру в requestIdleCallback. Описывается почему для них класический SSR не эффективен (от себя добавлю, что для СЕО он по прежнему эффективен). Советую всем посмотреть хоть и у чувака неприятный акцент и он всё читает с монитора

30. Jamison Dance - Rethinking All Practices: Building Applications in Elm

Доклад-представление Elm. Отлично описано какие именно проблемы JS решены в Elm by design. Какие идеи заложены в Elm и какой у него замечательный компилятор и тд. Очень приятный доклад, хотелось бы чтоб все доклады были такими

31. Tadeu Zagallo - Optimising React Native: Tools and Tips

Собственно доклад о сабже. Наглядно показывается и рассказывается какие треды есть в RN и как они взаимодействуют. Рассказывается о тулзах которыми можно дебажить RN приложения (Perf monitor, Systrace, CPU profiler) и показывается на примере как ими пользоваться. Рассказывается об оптимизациях которые они сделали в последнее время в RN. Советуется на какие вещи стоит обратить внимание при разработке приложений. В чём помогает Shadow тред и тд и тп. Тем кто разарбатывает на RN маст си, имхо

32. Andrew Clark - Back to React

Доклад о том, что можно подсмотреть у Cycle и Elm и как примерно их хорошие идеи можно заюзать в React. Рассказывается о том как примерно работает Cycle и что можно оттуда позаимствовать и то же самое об Elm.

33. Lightning Talks - Elie Rotenberg

Лайтнинг-представление хитрой штуки https://github.com/elierotenberg/react-armor от всёлого чувака с видом безумного-профессора. Либа решает проблему: third-party скрипты могут таргетировано (и нарочно) сломать ваш DOM или стили для этого дома. Либа умеет: превратить в нечитаемое месиво имена всех классов, превратить все хтмл-теги которые вы юзаете в нечитаемые и она умеет добавить в дом-дерево рандомных тегов. Всё чтоб никакими заранее подготовленными селекторами или xpath-ами нельзя было сломать ваше приложение. Идея интересная

34. Lightning Talks - Leland Richardson

Лайтнинг-представление Enzyme. Расказывается, что Энзим - это набор моков, тулзов и тд от Airbnb для тестирования React, RN и у них есть облегчалки Интеграционного тестирования. Короче, для тестирования - мастхев

35. Lightning Talks - Nikolay Bachiyski

Лайтнинг-рассказ о том зачем Automattic переписали WordPress на React и всё это заопенсорсили. Если чо, репа тут: https://github.com/automattic/wp-calypso Технического значения не имеет, но показаны плюсы ухода в опенсорс и дан пример не маленького приложения на Реакте

36. Lightning Talks - Gabe Scholz

Лайтниг об общей идее того как прикрутить RxJS к React. Снова симпатичные, анимированные визуализации того как работают Observable. Примерчик того как не правильно прикручивать RxJS к React и примерчик того как правильно.

37. Lightning Talks - Zak El Fassi

Лайтнинг-рассуждение о том с какого возраста детям стоит учить программирование и стоит ли вообще. Полезность сомнительная

суперкруто! спасибо за ревью! 👍

Вообще офигенно, несколько решил посмотреть после твоей рецензии 👍

Многие доклады хорошо сморятся просто по подаче - даже если тема неинтересна, то все равно время с удовольствием проводишь.

Хз, зачем приплели draft.js, когда уже столько подобных решений и так есть, и все в общем-то по такому же принципу и работают. NIH в чистом виде.

koistya commented Mar 15, 2016

Супер! 👍 Мне, почему-то, больше запал в душу доклад "Speeding up Startup for Large React Apps"

vyorkin commented Mar 18, 2016

спасибо за ревью тк мне пока не удалось посмотреть все 👍 но я наконец-то увидел как многие из них в жизни выглядят, многих я себе вообще не так представлял :)

gladkih commented Mar 25, 2016

Спасибо за ревью, очень круто.

А вот эта штука https://github.com/elierotenberg/react-armor очень попахивает борьбой с блокировщиками рекламы.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment