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

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

TL;DR

  • Нет лучшей структуры, только выбор. 👑
  • Анимируйте все! (Но не слишком медленная, медленная анимация сделает ваш пользовательский интерфейс еще более искаженным, чем отсутствие анимации.) 👁
  • Ничего из того, что я сделал до сих пор, не является настолько «PWA», каким должно быть. 🤐
  • Управление данными может быть трудным, но есть несколько хороших вещей для хранения данных. 💾
  • Порталы - вещь в веб-разработке. 🍰 (ЧЕРТ! Я снова фанат портального пирога.)
  • Автоматизируйте и тестируйте свои вещи ⚙️
  • Самые крутые инструменты разработчика создаются постоянно. 🛠

Лучший фреймворк

Нет такого.

В первый день нам показали множество разных подходов с использованием разных фреймворков. С каждым из них было весело работать. Даже «без фреймворка» возможен рост количества веб-компонентов. Перед тем, как выбрать фреймворк, вам просто нужно рассмотреть потребности вашего проекта / компании, сопоставить все и сделать свой выбор. Это то, что мы как бы упустили, Vue вызывал много восторга, насколько он прост в использовании, и он закрепился, но, в конце концов, это личный выбор.

Об анимации

Анимация - вещь прекрасная, но ее часто считают приятным занятием. «Просто вставьте несколько переходов, когда у вас останется время». А жаль. Как заявила Сара Драснер, наш мозг работает импульсами по 100 миллисекунд, и внезапные изменения ... ну, слишком внезапны. Это означает, что использование затухания вместо жесткого резания добавляет большую ценность за такое небольшое усилие. Вы можете - и должны - на самом деле сделать это еще дальше, вы можете перенести определенные ключевые элементы на что-то еще, например: кнопка отправки может стать анимацией загрузки.

Эдуардо Сан Мартин Мороте (он же Posva) сделал несколько приятных дополнений об анимации на второй день.

Когда использовать анимацию?

  • по взаимодействию с пользователем
  • чтобы привлечь внимание пользователя
  • чтобы было веселее

Vue предлагает несколько простых и мощных возможностей анимации:

Posva сделал несколько хороших плагинов для анимации:

Итак, прогрессивные веб-приложения?

Или для краткости PWA. Для меня это звучало как старая добрая изящная деградация, сделанная еще на один шаг вперед. Имея все эти фреймворки, которые заботятся о сложных частях для нас, мы иногда забываем, что не все / все могут прочитать ерунду до того, как сработает фреймворк. Иметь интерфейсный фреймворк, извлекающий данные из API, - это хорошо и все такое, но что происходит, когда API звонок не проходит? Что происходит, если, к сожалению, в вашем JS-файле возникает ошибка, и на этом она останавливается? Можно пустую или битую страницу, вот что. А что касается поисковых систем, им плевать на ваши глупые фреймворки, так что лучше на стороне сервера отрисовывать это. (Кстати: я думал, что Google выполняет какой-то JS, но, возможно, это не самый безопасный вариант: https://www.stephanboyer.com/post/122/does-google-execute-javascript)

Важно помнить:

Рендеринг на стороне сервера:

  • Мы добавили интерфейс в ваш сервер, чтобы вы могли использовать его, пока вы работаете.
  • Делает ваши страницы индексируемыми
  • Следите за таймаутами / интервалами!

Используйте сервис-воркеров

  • прокси для получения данных
  • делать что-то в автономном режиме
  • но остерегайтесь объема

Разное

  • Сделайте это быстрым и легким
  • Добавить файл манифеста
  • Добавить метаданные

Управление данными в вашем интерфейсе

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

Vue

Реагировать

Угловой

И т.д., этот список, вероятно, можно было бы продолжать бесконечно, но это были (по крайней мере, некоторые из них) упомянутые.

Порталы

Поскольку я фанат Portal, здесь есть небольшой раздел, посвященный «порталам». Упомянутые порталы были упомянуты в React-Talk, но они должны присутствовать и в других фреймворках.

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

Тестирование и автоматизация

Я думаю, что они очень хорошо сочетаются друг с другом.

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

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

Настройте живое руководство по стилю, чтобы упростить реализацию ваших компонентов. Вы можете использовать такие инструменты, как UIEngine или Storybook. Или разработайте это самостоятельно, но подумайте о поиске существующего решения, даже если оно не на 100%. Возможно, вы сможете исправить недостатки самостоятельно или с помощью сообщества, и другие также выиграют от этого.

И когда вы закончите с этим, перейдите к модульному тестированию или начать с тестирования? Вы также можете написать свои тесты перед написанием своего компонента, чтобы ограничить себя повсюду. У Vue есть хорошая оболочка для Jest, чтобы тестировать ваши компоненты, и я уверен, что у других фреймворков есть хорошие альтернативы и / или оболочки вокруг утилит тестирования.

Инструменты инструменты инструменты

Много инструментов.

Должен сказать, что больше всего меня впечатлил codeandbox.io , созданный Айвсом ван Хорном. Это невероятно удобная IDE, которая полностью работает в вашем браузере и даже компилирует все локально. В качестве дополнительного бонуса у него хорошая домашняя страница с блестками и вращающимися кубиками. Кроме того, развертывание прямо из вашего браузера с: https://zeit.co/now

Chrome dev-tools постоянно обновляется аудитами, мониторами производительности и т. Д.

У вашего предпочтительного фреймворка, вероятно, есть какой-нибудь плагин Chrome или хороший интерфейс, работающий где-то. Хочешь взглянуть на это:

Эта статья написана robbe clerckx, изображения Axel Verdruye - Базука