Разработка Vue в 2019 году: что вам нужно знать

Если вы новичок в разработке Vue, вы, вероятно, слышали много жаргонных терминов, таких как одностраничные приложения, асинхронные компоненты, рендеринг на стороне сервераи так далее.

Возможно, вы также слышали об инструментах и ​​библиотеках, которые обычно упоминаются вместе с Vue, например Вьюекс, Вебпак, Посмотреть интерфейс командной строкиа также Nuxt.

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

Попытка изучить все сразу была бы непосильной и неэффективной, поэтому здесь я представляю «карту знаний» высокого уровня, которая охватывает ключевые области профессиональной разработки Vue. Вы можете использовать эту карту, чтобы определить области для собственного обучения в 2019 году.

Примечание: эта статья изначально была опубликована здесь, в блоге разработчиков Vue.js 04.12.2018.

Если бы я попросил вас выучить все из книги, написанной на китайском языке, вы бы сначала научились читать по-китайски, верно?

Точно так же Vue — это среда JavaScript для создания пользовательских веб-интерфейсов. Вы должны знать основы JavaScript и веб-разработки, прежде чем браться за сам Vue.

Если вы новичок в разработке Vue, вам следует сосредоточиться на ядре экосистемы Vue.js, которая включает основную библиотеку Vue, Vue Router и Vuex.

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

Основные функции Vue

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

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

Составные части

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

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

Одностраничные приложения

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

После того, как вы создали свои «страницы» как компоненты Vue, вы можете сопоставить каждую с уникальным путем с помощью Просмотр маршрутизатораинструмент для создания SPA, поддерживаемый командой Vue.

Государственное управление

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

Специальный шаблон под названием «Flux» хранит ваши данные в предсказуемом и стабильном центральном хранилище. Вьюекс библиотека, также поддерживаемая командой Vue, помогает реализовать Flux в приложении Vue.js.

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

Если вы хотите поставлять продукты на основе Vue.js реальным пользователям, вам нужно знать еще кое-что!

Леса проекта

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

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

Приложения с полным стеком/аутентифицированные

Приложения Real Vue обычно управляемый данными пользовательские интерфейсы. Данные часто будут получены из безопасного API, созданного с помощью Node, Laravel, Rails, Django или какой-либо другой серверной среды.

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

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

Проверить эта статья если вы пытаетесь решить, какой бэкэнд лучше всего подходит для вашего следующего приложения Vue.

Тестирование

Если вы хотите создавать приложения Vue, которые удобны в сопровождении и стабильны в производственной среде, вам действительно необходимо предоставить тесты.

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

Команда Vue поддерживает инструмент под названием Просмотр тестовых утилит который позволяет создавать и запускать тесты на изолированных компонентах Vue.

Хотя это и не связано конкретно с Vue, E2E-тестирование также может обеспечить надежность вашего проекта. Отличный инструмент E2E, который можно добавить в проект через Vue CLI 3, — это Кипарис.

Оптимизация

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

Чтобы оптимизировать приложение Vue, мы можем использовать различные методы, включая рендеринг на стороне сервера. Именно здесь приложение Vue выполняется на сервере, а результат фиксируется на HTML-странице, которая доставляется пользователю.

Другие методы оптимизации включают использование асинхронных компонентов и функций рендеринга.

Все, что мы рассмотрели до сих пор, относится к ядру Vue.js или к инструментам в экосистеме. Но Vue не существует изолированно; это всего лишь один слой в стеке внешнего интерфейса.

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

Современный JavaScript и Babel

Приложения Vue можно эффективно создавать с помощью ES5стандарт JavaScript, который поддерживает почти каждый существующий браузер.

Чтобы расширить возможности разработки Vue и воспользоваться преимуществами новых возможностей браузера, вы можете создавать свои приложения Vue, используя функции последнего стандарта JavaScript. ЕС2015и предлагаемые функции из ЕС2016 и не только.

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

Инструментом для достижения этого является Вавилон. Его работа заключается в «преобразовании» (переводе и компиляции) ваших современных функций в стандартные до того, как приложение будет отправлено.

Вебпак

Вебпак является сборщиком модулей, что означает, что если ваш код написан в разных модулях (например, в разных файлах JavaScript), Webpack может «встроить» их в один файл, который может быть прочитан браузером.

Webpack также служит конвейером сборки, позволяя вам преобразовывать код до его сборки, например, с помощью Babel, Sass или TypeScript, а также может использоваться для оптимизации вашего приложения с помощью ряда плагинов.

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

В недавно выпущенном Vue CLI 3 было предоставлено решение для абстрагирования и автоматической настройки Webpack в проектах Vue.

Означает ли это, что вам не нужно его изучать? Я говорю нет, так как неизбежно будут времена, когда вам нужно настроить или отладить конфигурацию Webpack.

Машинопись

Машинопись — это надмножество языка JavaScript, включающее типы (String, Boolean, Number и т. д.). Цель этого — помочь вам написать надежный код и выявить ошибки на ранней стадии.

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

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

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

Nuxt.js

Если вы хотите создать высокопроизводительное приложение Vue, вам, конечно же, понадобятся маршрутизация на основе компонентов, рендеринг на стороне сервера, разделение кода и другие передовые функции. Вам также понадобятся удобные производственные функции, такие как теги SEO.

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

Если вы хотите увидеть хороший пример сайта Nuxt.js, вы смотрите его прямо сейчас 😉

Vuetify

Google Материальный дизайн Standard — это широко используемая система рекомендаций по созданию красивых, логических пользовательских интерфейсов, которая используется в продуктах Google, таких как Android, а также в Интернете.

Vuetify framework реализует Material Design в серии компонентов Vue. Это позволяет вам быстро создавать приложения Vue с макетом и стилем Material Design, а также с такими виджетами, как модальные окна, оповещения, панели навигации, нумерация страниц и т. д.

NativeScript-Vue

Vue.js — это библиотека для создания пользовательских веб-интерфейсов. Если вы хотите использовать его для нативных мобильных интерфейсов, вы можете сделать это с помощью NativeScript-Vue рамки.

Родной скрипт — это система для создания приложений с использованием собственных компонентов пользовательского интерфейса на iOS и Android, а NativeScript-Vue — это фреймворк поверх NativeScript, обеспечивающий использование синтаксиса и компонентов Vue.

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

Разработка плагина

Если вы хотите повторно использовать функциональность Vue в своих проектах или внести свой вклад в экосистему Vue, вы можете сделать функцию устанавливаемой как Vue. плагин.

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

Анимация

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

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

Прогрессивные веб-приложения

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

Большинство функций PWA можно легко добавить в приложение Vue с помощью плагина Vue CLI 3 или с помощью фреймворка, такого как Nuxt.js, но вы все равно должны понимать ключевые технологии, включая манифест веб-приложения и сервис-воркер.


Станьте старшим разработчиком Vue в 2020 году.

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

Учить больше


Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *