Размышления с конференций Frontend Love и VueJS Amsterdam

Сердце Амстердама - поистине красивое место с очень гармоничной архитектурой и дружелюбной инфраструктурой. Мне очень понравилось открывать для себя этот город, особенно район Йордан - тихое место с заметной артистической душой и умиротворенной атмосферой. Это отличный пример сложной джентрификации, потому что в 70-х это был типичный рабочий район.

Конференция проходила в пригороде порта, в Театре Амстердама. Окрестности были не особенно привлекательными из-за продолжающегося ремонта города, но сам театр действительно впечатлял. У него самый большой экран, который я когда-либо видел - это действительно усилило ощущение и улучшило восприятие лекций. Два дня конференции были разделены на разные темы и носили отдельные названия: Frontend Love и VueJS Amsterdam.

Реактивное программирование было очень модной темой в последние несколько лет. Ваша первая ассоциация, вероятно, будет RxJS, но эта парадигма часто скрыта под капотом фреймворков / других инструментов, с которыми вы, вероятно, действительно знакомы - мы убедились в этом на обоих днях конференции.

«Анимация Vue: насколько Vue.js умен и элегантен с точки зрения анимации»

Сара Драснер

Основные методы анимации с помощью VueJS - это <transition> и <transition-group> components. Конечно, вы можете использовать CSS-анимацию, но помните, что вы должны использовать ее с принципом DRY. Более продвинутые методы используют наблюдатели и реактивность для создания настраиваемых директив, гибкую SVG-анимацию (возможность использования без D3) и компоненты переходов с nuxt.js .

Vue предоставляет простые решения для создания сложных и красивых взаимодействий, которые в то же время кажутся удобными для пользователей. Мне очень понравился слайд ниже, который очень четко объясняет, что такое реактивность, где она есть, а где нет:

«Реагировать; это не структура пользовательского интерфейса, а структура ума »

Мишель Вестстрат

Итак, теперь мы знаем, что React не является реактивным, потому что он декларативен, а название этого фреймворка вводит в заблуждение - я думаю, слово Scheduler подходит лучше. Но это не дефект, поскольку он не навязывает какую-либо парадигму, которую вы хотите использовать.

В любом случае React предназначен не только для пользовательского интерфейса. Не случайно, что пакеты react и react-dom разделены - JSX не просто библиотека шаблонов, но также подходит для создания любых пользовательских интерфейсов, таких как мобильные приложения с React Native, настольные приложения (Cacoa, UWP, QT), Shell и CLI (Blessed и Ink), а также, слайды, игры или приложения для ТВ.

Как сказал Майкл, это каркас для разума, и вы можете использовать его для чего-нибудь новаторского в мире программирования. Я слышал анекдот «если что-то еще не написано на React, то скоро будет», как до недавнего времени, в основном на JavaScript.

«Дерево состояний MobX + React: обеспечена чистая реактивность»

Лука Меццалира

MobX - это полностью реактивная библиотека, которая предоставляет декоратор наблюдателя и содержит состояние, а с деревом состояний имеет тот же шаблон, что и в VueX или CycleJS. - вы можете писать императивно, и это очень хорошая идея для начала в реактивном мире. Он также самоуверен и транзакционен - ​​Дерево состояний в первую очередь содержит хуки жизненного цикла для магазинов, систему типов, снимки для изменяемого / неизменяемого дерева - больше вы можете узнать об этом из приятного документация.

Кстати, Лука написал очень многообещающее название о реактивности в JS-библиотеках, таких как RxJS, Mobx или CycleJS - его книга «Front-End Reactive Architectures» доступен на apress.com за 22 евро - я считаю, что оно того стоит.

«Захватывающее будущее React»

Китце Ристовски

После самой большой версии Fiber version номер 16.4 приносит нам новые шаблоны, такие как Portals, и новые методы, такие как componentDidCatch, createRef, new Context API и, вероятно, обеспечит удобство использования без классов. Кроме того, в новой версии такие компоненты, как componentWillMount , componentWillUpdate, componentWillReceiveProps , будут устаревшими, поэтому их лучше не использовать в следующих проектах.

Мой любимый слайд для фанатов Vue:

«Почему мне никто не сказал о ngrx / entity?»

Джерард Санс

Ngrx / store - это повторная реализация Redux поверх Angular и RxJS 5.

Внутри ngrx 5 есть оператор new Pipeable select и RxJS 5.5. Ngrx / entity - хороший выбор для более эффективного управления списками более понятным способом.

«Настоящее и будущее Vue»

Эван Ю

Как и в Mobx 4.0, в Vue 2.6 Прокси будут реализованы на основе системы реактивности. В новом выпуске Vuex они упрощают API с помощью async / await и потенциально устраняют разделение действий и мутаций.

«Apollo, GraphQL и Vue: идеальный стек»

Гийома Чау

Я действительно обожаю это сочетание. Это дает нам четкую и простую структуру, с которой вам больше ничего не нужно, даже контейнеры состояний - Vue-Apollo помогает вам избежать этого и делает взаимодействие между компонентами и ответами от бэкэнда более строгим и понятным.

Движок Apollo предоставляет нормализованный кеш и дает возможность использовать свою наблюдаемую систему (они используют реализацию zen-observable, чтобы использовать ее как полифил с наблюдаемым предложением).

Резюме

Как видите, Observables, вероятно, изначально встроены в Javascript. Стоит отметить, что Observables Pattern - рабочая лошадка в реактивной парадигме. Так что просто приготовьтесь использовать их для лучших целей и помните о том, что мир вокруг вас работает с реактивностью, поэтому, может быть, пора написать все более реактивно?

Сама конференция стала прекрасной возможностью увидеть, что больше всего ценится в рамках. Если вас интересует тема VueJS, я рекомендую вам посетить VueJS Amsterdam в следующем году. Если ваш ответ отличается, подумайте о Frontend Love или о них обоих.

Спасибо организаторам и до встречи в следующем году!

Если вам понравился этот пост, нажмите кнопку хлопка ниже 👏👏👏

Вы также можете подписаться на нас в Facebook, Twitter и LinkedIn.