14 и 15 февраля этого года в Амстердамском театре проходила выставка VueJS Amsterdam 2019 - крупнейшая конференция Vue.js в мире.

Vue.js - это самый популярный JavaScript-фреймворк в Интернете на данный момент, и это было особенно интересно для нас здесь, в мобильной компании, поскольку мероприятие проходило прямо на первом этаже в нашем собственном здании!

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

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

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

Среди спикеров были такие заметные личности, как Эван Ю (создатель Vue.js), Александр Шопен (соавтор Nuxt.js), Наталья Теплухина (технический директор Vue Vixens) и многие другие.

Эван Ю (основатель Vue.js)
Состояние Vuenion

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

Он упомянул недавно выпущенную версию 2.6.0 и привел примеры слотов с ограниченной областью видимости и то, как они улучшают существующую парадигму базовых слотов компонентов.

Заглядывая в будущее, Эван выделил некоторые ключевые функции, запланированные для Vue 3.0, в том числе:

  • Принятие TypeScript для базовой библиотеки
  • Модуляризация кодовой базы Vue.js
  • Внедрение наблюдения на основе прокси в ES2015 для увеличения вдвое скорости при половинном потреблении памяти
  • Предварительно настроенные функции веб-пакета, такие как встряхивание дерева (чтобы библиотека, которую вы упаковываете в свое приложение, была как можно меньше), разделение кода, горячая замена модулей, наложения ошибок и т. Д.

Ознакомьтесь с подробным описанием того, что было освещено в этом сообщении в блоге.

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

При этом, объяснил Эван, проект Vue.js внедряет систему использования RFC или запросов на комментарии. Это позволит проекту развиваться в соответствии с пожеланиями и идеями сообщества в целом, а не только основной команды Vue.

Гийом Чау (основная команда Vue.js)
Рендеринг на стороне сервера + универсальные приложения

Следующим был Гийом Чау - один из членов основной команды VueJS - с интересным обзором SSR (рендеринга на стороне сервера) и концепции универсального приложения, что означает, что ваше приложение визуализируется на бэкэнде и передается в ваш браузер, чтобы быть отображается. Здесь код приложения выполняется «универсально» на сервере и в вашем браузере - отсюда и название.

Гийом объяснил, что улучшение SEO является одним из основных преимуществ при настройке вашего приложения для использования SSR, поскольку сканеры поисковых систем будут напрямую использовать полностью отображаемую страницу - в отличие от, возможно, более традиционных одностраничных приложений (SPA), посредством которых загружаются элементы / код. асинхронно и не могут быть проиндексированы этими поисковыми роботами.

Затем он обрисовал в общих чертах еще одно преимущество использования SSR: лучший пользовательский интерфейс для более медленных интернет-соединений, поскольку пользователь будет видеть полностью отрисованную страницу, не дожидаясь загрузки всего кода JavaScript, прежде чем приложение станет «доступным».

Вы можете следить за Гийомом на Github.

Тим Бенникс (Valtech Paris)
Vue.js для L ’Oréal: пример из практики

Тим Бенникс - директор отдела фронтенд-инжиниринга в Valtech Paris, работает в L'Oréal и управляет их ландшафтом фронтенд-инжиниринга, обеспечивая соответствие онлайн-платформ L'Oréal их высоким стандартам с точки зрения качества, разработки продуктов, а также обслуживания, а также они управляют всеми этими отдельными приложениями согласованно в рамках одной более крупной организации.

Тим рассказал о том, почему Vue.js - идеальное решение для L’Oréal, позволяющее справиться с этой проблемой, и о том, как фреймворк поддерживает пользователей по всему миру, не ограничивая их взаимодействие с пользователем, даже если у них плохое подключение к Интернету.

Тим также подчеркнул, что низкий входной барьер для разработки Vue.js является огромным преимуществом для Valtech, принявшего его в качестве предпочтительной веб-среды, поскольку они управляют множеством команд с разным уровнем опыта в каждой из этих команд. Vue.js идеально подходит для их нужд, в том числе потому, что они используют Sitecore - компонентное решение CMS, которое прекрасно интегрируется в компонентную архитектуру Vue.

«Vue.js соответствует нашему стеку технологий, архитектуре, KPI, подходу к дизайну и потребности в простоте».

Джен Лупер (советник разработчиков в процессе)
NativeScript-Vue + ML = Большая проблема с мини-баром: MixoLogy

Джен Лупер из Progress (создатель NativeScript) сделала очень интересный доклад о том, как создавать собственные мобильные приложения с помощью NativeScript и Vue.js. По мере того, как мы углублялись в мир нативных приложений от The Mobile Company, я, естественно, заинтересовался :)

Команда Progress работала с основной командой Vue.js над созданием NativeScript-Vue, плагина, который позволяет использовать Vue.js для разработки собственных мобильных приложений. Это определенно интересная область современной мобильной разработки: в связи с тем, что в последние годы стали очень популярными другие претенденты, такие как React Native и Ionic, идет сильная конкуренция за корону «лучшей нативной технологии кроссплатформенной разработки» - броское звание!

Поскольку Vue.js набирает огромную популярность (превосходя Angular и React на Github по количеству звезд, которые они получили, и общему количеству загрузок NPM в 2018 году), это может вывести NativeScript на первое место - если многие преданные поклонники Vue.js начнут развиваться на мобильных устройствах. и им нужна технология, которую они уже знакомы и с которой им удобно.

Джен продемонстрировала собственное мобильное приложение (работающее на ее iPhone), используя интерфейс командной строки NativeScript с плагинами Vue и Firebase, чтобы подключить свое приложение Vue к Firebase и использовать MLKit. Она разработала приложение для машинного обучения, в котором она обучила модель TensorFlow и сжала ее в модель TensorFlow Lite (для работы на мобильных устройствах), чтобы распознавать бутылки с различными спиртами (виски, джин, водка)… тчин-тчин!

В результате получилось очень забавное нативное приложение для iOS, позволяющее ей сделать снимок бутылки (или бутылок) и заставить модель машинного обучения, работающую на ее телефоне, распознавать этикетки на картинке - отличный способ продемонстрировать возможности NativeScript с Vue, а также интеграция с TensorFlow и Firebase.

В качестве забавного примечания Джен сослалась на aiwerdness.com «», сайт, на котором алгоритмы машинного обучения и ИИ использовались для создания всевозможных странных и замечательных (а иногда и преследующих) вещей.

Филип Раковски (основатель Vue Storefront)
Уловки производительности современных веб-приложений с помощью PWA и Vue.js

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

«Сокращение времени загрузки на 2.2 привело к увеличению загрузок на 15,4%». - Филип Раковски о Firefox

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

Чтобы легко это проанализировать, Филип порекомендовал webpack-bundle-analyzer, который дает вам четкое визуальное представление о составе ваших пакетов и позволяет точно увидеть, что включено в каждый модуль.

Помимо ленивой загрузки пакетов, Филип объяснил, что мы должны тщательно изучить размер наших внешних зависимостей, и сослался на bundlephobia, удобный инструмент для проверки размера конкретной библиотеки или пакета. Bundlephobia предлагает альтернативы, которые меньше по размеру и служат той же цели, поэтому они лучше подходят для вашего приложения с точки зрения производительности.

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

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

Последние слова

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

Гэри О’Донохью
Мобильный разработчик в The Mobile Company. Любит учиться на работе, построил игрушечную машинку, управляемую мозговыми волнами, и слушает все, от хэви-метала до Тейлор Свифт.

Мобильная компания

Мы - отмеченное наградами мобильное агентство из Амстердама, работающее с ведущими компаниями и известными брендами над созданием приложений для миллионов пользователей. Мы публикуем о крутых технологиях, крутых проектах и ​​других забавных вещах. Настигнуть? "Связаться с нами". Хотите работать с нами? "Мы нанимаем".

Наши последние новости в вашем почтовом ящике? Зарегистрируйтесь здесь.