JavaScript разработчик (Vue)

Оглавление (нажмите, чтобы открыть):

Vue 2020: дорожная карта начинающего разработчика

Даже если вы новичок в разработке на Vue, вы, вероятно, слышали много относящихся к ней терминов, таких как одностраничные приложения (SPA, single-page apps), асинхронные компоненты (async components), рендеринг на стороне сервера (server-side rendering) и т. д.

Вы, вероятно, также слышали названия инструментов и библиотек, которые обычно упоминаются вместе с Vue: Vuex, Webpack, Vue CLI,Nuxt.

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

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

0. JavaScript и базовые принципы веб-разработки

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

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

1. Основные понятия Vue

Если вы новичок в разработке на Vue, то начать следует с основ – ядра Vue-экосистемы, которое включает в себя библиотеку ядра (Vue core library), маршрутизатор (Vue Router) и Vuex.

Эти инструменты используются в большинстве приложений Vue.

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

Основа Vue – синхронизация веб-страницы и JavaScript. Для этого используются реактивная привязка данных и ряд функций шаблонов: директивы и интерполяция. Именно с изучения этих понятий и следует начать.

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

Компоненты

Компоненты Vue – это изолированными элементами пользовательского интерфейса, которые можно повторно использовать при необходимости. Необходимо понимать, как объявлять компоненты и как наладить взаимодействие между ними с помощью свойств (props) и событий (events).

Компоненты – это основа для создания надежных масштабируемых Vue-приложений.

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

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

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

Управление состоянием

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

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

2. Vue в реальном мире

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

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

Скаффолдинг

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

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

Full-stack / приложения с аутентификацией

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

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

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

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

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

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

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

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

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

Оптимизация

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

Чтобы оптимизировать приложение Vue, можно использовать различные методы, включая рендеринг на стороне сервера (server-side rendering). При этом приложение Vue выполняется на сервере, а пользователь получает конечный HTML-код.

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

3. Ключевые инструменты

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

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

Vue приложения могут эффективно работать с ES5 – JS-стандартом, который поддерживается практически всеми браузерами.

Но для расширения возможностей можно использовать и более новые стандарты (ES2015, ES2020). Однако, если вы решите использовать современный JavaScript, браузеры большей части ваших пользователей с ним не справятся. Чтобы решить эту проблему, нужен Babel. Его задача состоит в том, чтобы «транспилировать» (перевести и скомпилировать) современные функции в стандартные аналоги перед отправкой приложения.

Webpack

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

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

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

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

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

TypeScript

TypeScript – надмножество языка JavaScript, которое поддерживает типы (String, Boolean, Number и т.д.). Это помогает писать надежный код и отлавливать ошибки на ранней стадии

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

4. Vue-фрейморки

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

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

Nuxt.js

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

Nuxt.js предоставляет все это и еще больше (например, PWA) прямо из коробки.

Vuetify

Стандарт Material Design от Google – это широко используемая система рекомендаций по созданию красивых и логичных пользовательских интерфейсов.

Vuetify реализует ряд компонентов Vue (модальные окна, навбары, пагинацию и др.) в соответствии с этим стандартом.

NativeScript-Vue

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

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

5. Разное

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

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

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

Анимация

Если вы любите создавать анимацию, обратите внимание на систему переходов Vue (transition system), которая является частью ядра библиотеки. Она обеспечивает анимацию при добавлении или удалении элементов из DOM.

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

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

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

Мастер Йода рекомендует:  Изучаем Angular видео, подкасты и полезные ссылки

Hooks во Vue.js версии 3.0

Эта статья знакомит с экспериментальной функцией Vue под названием Hooks.

Прежде чем начинать

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

Вам понадобится следующее на вашем компьютере:

  • Node.js версии 10.x или выше. Вы можете проверить это, выполнив следующую команду в терминале/командной строке:
  • Редактор кода: настоятельно рекомендуется Visual Studio Code
  • последняя версия Vue, установлен глобально на вашей машине
  • Vue CLI 3.0 установлен на вашей машине. Если установлена предыдущая версия то нужно сначала удалить старую версию CLI:

затем установить новую:

  • Скачать стартовый проект Vue отсюда
  • Далее распаковать загруженный проект
  • Перейдите в разархивированный каталог и выполнить следующую команду, чтобы обновить все зависимости:

Введение: Hooks

Изначально компоненты React, содержащие логику состояний, должны быть компонентами класса. Несмотря на то, что в React уже были функциональные компоненты без сохранения состояния, необходимо было создать компоненты, которые бы соответствовали логике состояния, не будучи классами. Это было, причиной появления Hooks в React. Hooks – это способ использования логики состояний внутри функциональных компонентов (подробнее о функциональных компонентов можно почитать тут), что устраняет необходимость в написании классов.

Что не так с классами?

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

Но я обычно не использую классы в Vue JS ..

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

Проблема с mixins

В своем блоге несколько месяцев назад Sarah Drasner, очень популярный член основной команды Vue, написала о своей беседе с Evan You, создателем Vue JS. Сара показала, что миксин не может потреблять или использовать состояние из другого миксина, что затрудняет достижение цепочки инкапсулированной логики. Это недостаток mixin, которое решает Vue Hooks.

Введение Vue Hooks

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

Демо A: Vue mixins

Если вы читали этот пост с самого начала, вы, должно быть, скачали файл стартового проекта и открыли его в своем приложении VS Code. Мы собираемся создать миксин, содержащий логику счетчика, а затем импортировать его в любой компонент по выбору. Сначала создайте папку с именем mixins в корневом каталоге и создайте новый файл, назовите его clickMixin.js и скопируйте нижеприведенный блок кода:

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

Здесь вы видите, как миксины импортируются и регистрируются под именем, это свойство экземпляра Vue, как данные, методы или вычисляемые свойства. Вы также видите, что внутри шаблона у вас есть доступ к этому в JavaScript, так как он относится к миксинам (почти так же, как миксин был определен прямо внутри компонента). Если вы запускаете приложение на своем сервере разработки, оно должно выглядеть так:

Когда вы нажимаете кнопку 1, счетчик увеличивается на 1, а нижняя цифра вдвое больше, чем цифра, как предлагает шаблон в вашем коде.

Демо B: Vue Hooks

Вы можете легко воссоздать эту логику с помощью Vue Hooks, цель Hooks – потенциально заменить миксины в будущем. Прежде всего, вы должны установить пакет vue-Hooks с помощью менеджера пакетов. Откройте новый терминал в VS Code и запустите:

Затем откройте ваш файл main.js и инициализируйте Hooks с помощью командной строки перед новым оператором Vue:

Откройте папку компонентов и создайте внутри нее новый файл, назовите его Modal.vue, затем вернитесь в корневой каталог и создайте новую папку с именем Hooks. Внутри папки Hooks создайте новый файл с именем Hooks.js и скопируйте в него следующий блок кода:

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

  • useData : выполняет инициализацию данных внутри вашего хука, поэтому счетчик инициализируется внутри него
  • useComputed : это больше похоже на вычисляемые свойства внутри вашего хука, поэтому двойное вычисление выполняется внутри него
  • useMounted : действует точно так же, как смонтированный Hook жизненного цикла в вашем экземпляре Vue, но для Hooks
  • useUpdated : действует точно так же, как обновленный хук жизненного цикла в вашем экземпляре Vue, но для хуков
  • useEffect : это обрабатывает логику при повторном рендере DOM

Есть и другие свойства, которые вы можете импортировать, весь список можно найти здесь, на GitHub. Вы заметите, что он экспортируется как функция, откройте файл modal.vue, который вы создали ранее, и скопируйте нижеприведенный блок кода внутри него:

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

Важно отметить, что …

  • Вы можете пойти дальше и сразу использовать Vue Hooks (ваша версия Vue должна быть 2.x)
  • Существует предположение, что Vue версии 3.0 будет поставляться с Vue Hooks официально
  • Он экспериментален и поэтому не должен использоваться в продакшине
  • Прочитайте пост в блоге Сары Драснер, который также содержит еще больше примеров

Вы можете использовать npm или просто перейти на GitHub по этой ссылке, чтобы получить репозиторий проекта.

Заключение

Это был краткий обзор Hooks в Vue JS и того, как они отличаться от React Hooks, на базе которых они были созданы. Мы также рассмотрели миксины для читателей, которые не были знакомы с концепцией, и мы рассмотрели иллюстрацию с использованием хуков.

JavaScript разработчик (Vue)

RemoteList — это крупнейший в Рунете агрегатор вакансий с возможностью работать из любой точки мира. Мы собираем в одном месте самые лучшие предложения со всего Интернета об удалённой работе.

Вакансии сайта также транслируются в телеграм-канал @remotelist в виде дайджестов вакансий каждые 2-3 часа.

Помимо телеграм-канала у сайта есть своя RSS-лента.

�� Подписка

Еженедельная рассылка топ-15 самых просматриваемых вакансий сайта. Письмо приходит каждое воскресенье.

Семь причин для изучения Vue.js в 2020 году

Дата публикации: 2020-01-28

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

1. Не требуется шаг сборки

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

Простой старт делает Vue достойным рассмотрением в качестве первого JS-фреймворка для изучения.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

2. Интерфейс командной строки мирового класса

Конечно, многие разработчики ищут расширенные функции разработки, такие как перенос ES или TypeScript, замена модулей и tree-shaking, которые стали возможными благодаря инструментам сборки. Vue также в игре.

В прошлом году основная команда Vue переписала интерфейс командной строки с нуля, в результате чего появился Vue CLI 3. Он разработан таким образом, чтобы продвигать лучшие практики и полнофункциональную конфигурацию Webpack по умолчанию, что упрощает расширение без затруднений для обновления, т. е. «не нужно извлекать». Vue CLI предоставляет массу полезных дополнительных функций, включая интерактивный мастер инициализации проекта (доступный через терминал или веб-интерфейс), систему плагинов для поддержки генераторов и конфигурации для надстроек сообщества, а также возможность указывать альтернативные цели сборки, такие как веб-компоненты или библиотеки.

3. Дружественная кривая обучения

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

Я полагаю, что одной из причин этого является то, что Vue является «прогрессивной средой JavaScript».

Не нужно изучать весь API, чтобы начать работать с Vue, не нужно изучать новый синтаксис, такой как JSX; для начала требуются только базовые знания HTML, CSS и JS.

4. Стабильная экосистема

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

Vue предоставляет официальную поддержку для нескольких важных надстроек, в том числе vue-router для клиентской маршрутизации, vuex для управления состоянием, vue-test-utils для компонентов модульного тестирования, vue-devtools — расширения браузера для отладки, Vue CLI, как описано ранее. Ни один из этих инструментов не необходим, Vue может работать достаточно хорошо с альтернативами для этих библиотек, такими как redux или mobx вместо vuex, или другим маршрутизатором. Критическим моментом является то, что сообщество помогает разработчикам, поддерживая набор рекомендуемых значений по умолчанию, то, что бэкэнд-фреймворк, такой как Ruby on Rails, традиционно делал очень хорошо.

Мастер Йода рекомендует:  Востребованные хаки цикла WordPress

5. Экземпляр Vue

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Инструменты Vue.js разработчика

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

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

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

Теперь перейдем к установке!

Существует три способа установить инструменты разработчика:

  • в Chrome
  • в Firefox
  • в отдельное приложение

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

Установка в Chrome

Переходим по этой ссылке:

и кликаем на клавишу Add to Chrome.

Проходимся по всему процессу установки:

Иконка установленного приложения появляется в панели инструментов. Если на странице на данный момент Vue-приложение не запущено, иконка приобретает серый оттенок.

Если же нужное приложение запущено — поздравляем! Иконка Vue расцветает во всей своей красе.

Сама по себе иконка ничего не делает, разве что показывает, что мы работаем с нужным типом приложения. Чтобы использовать установленное расширение, мы должны открыть панель разработчика «View → Developer → Developer Tools» — или Cmd – Alt – I.

Установка в Firefox

Нажмите «Add to Firefox» и расширение будет установлено. Подобно Chrome, в зависимости от открытого веб-приложения, иконка будет изменять окрас.

И когда вы посещаете Vue-сайт, можно открыть панель разработчика и увидеть панель «Vue».

Установка в отдельное приложение

Ну, это вообще проще простого:

и запустите расширение при помощи

благодаря чему откроется отдельное приложение на базе Electron.

Теперь тег скрипта покажет вам следующее:

внутри файла index.html. Теперь нужно подождать, пока приложение перезагрузится и автоматически свяжется с Vue-программой.

Как использовать инструменты разработчика

Как и было сказано, инструменты разработчика Vue могут быть использованы в панели разработчика в браузере.

Также можно просто кликнуть на любом элементе страницы и выбрать «Inspect Vue component».

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

Вверху вы можете заметить 4 кнопки:

  • Components – показывает все представленные на данной странице элементы. Vue может иметь несколько запущенных экземпляров в одно и то же время. К примеру, вы можете просматривать слайдшоу из небольших, легковесных виджетов.
  • Vuex – здесь вы можете просматривать текущее состояние.
  • Events – как и следует из названия, показывает все порожденные события.
  • Refresh – перезагружает панель разработчика.

Заметили небольшой текст = $vm0 рядом с компонентом? Это весьма полезный способ просмотреть компонент с использованием консоли. Нажмите esc и вы увидите консоль под панелью разработчика. Если вы введете приведенный код, вы сразу же перейдете к указанному компоненту.

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

Фильтр компонентов

Начните вводить имя компонента и дерево компонентов автоматически выведет все совпадения.

Выбор компонента на странице

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

Форматирование имен компонентов

Вы можете отображать имена в camelCase или через символы нижнего подчеркивания (_).

Фильтрация информации о компоненте

В правой панели вы можете ввести любое слово и отсеять те свойства, которые не содержат его.

Отображение DOM

Нажмите на клавишу «Inspect DOM».

Открытие в редакторе

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

Я собираюсь изучать Vue на постоянной основе и через 2 месяца создам ресурс, который также позволит вам изучить Vue максимально быстро — с проектами и туториалами, рабочими примерами и подборками скриншотов. До скорого!

Почему 43% фронтенд-разработчиков хотят изучить Vue.js

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

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

Недавно мною совместно с Эваном Ю (Evan You), Крисом Фрицем (Chris Fritz), Сарой Драснер (Sarah Drasner) и Адамом Яром (Adam Jahr) был создан вступительный видеоролик, который можно посмотреть на главной странице проекта http://vuejs.org. Приведенная ниже статья является текстовой версией данного видео.

Великая миграция JavaScript

Как хорошо известно, за последние 10 лет язык JavaScript стал значительно более зрелым. Большая часть кода, которая до этого выполнялась на стороне сервера, мигрировала на сторону клиента и теперь выполняется в браузерах.

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

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

Цель создания Vue.js — предоставить легкий в изучении, универсальный, мощный, легко поддерживаемый и тестируемый JavaScript-фреймворк.

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

Примечание переводчика: возьму на себя смелость добавить, что на данный момент Vue.js является единственным из современных фреймворков и UI-библиотек, который может применяться таким образом.

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

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

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

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

Погружение в первый проект

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

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

Как в большинстве JavaScript-приложений, перед нами стоит задача отобразить данные на HTML-странице:

Процесс создания приложения на Vue.js весьма прост:

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

Затем в файле скрипта создается новый экземпляр объекта Vue, который подключается к корневому элементу на странице путем указания id этого элемента как значения поля el.

Затем внутрь созданного Vue-объекта помещаются данные как значение поля data.

В HTML-коде меняем значение HTML-элемента h2 с Х на двойные фигурные скобки <<>>, которые возвращают в виде строки значение переменной product.

Как видим, все отлично работает:

Вроде бы ничего особенного, но магия Vue.js начинается тогда, когда происходит изменение данных.

Если открыть консоль браузера и в ней попробовать изменить значение переменной product, то на самой странице незамедлительно произойдет аналогичное изменение:

Это происходит потому, что фреймворк Vue.js является реактивным.

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

Такой подход работает со всеми типами данных — не только со строками. Поэтому вместо единичного значения переменной product мы будем использовать массив значений и изменим элемент h2 на неупорядоченный список ul.

Для генерации новых элементов li в соответствии с каждым элементом массива я воспользуюсь специальным атрибутом (директивой) фреймворка Vue — v-for.

Таким образом, каждому элементу массива будет соответствовать свой элемент li:

Обзор JavaScript фреймворка Vue.js

Были времена, когда веб-приложения разрабатывались на JavaScript таким образом, что как и HTML, так и JavaScript и временами даже CSS, все писалось вместе и вперемешку, не было никакой строгой архитектуры и последовательности, код никак не разбивался на какие-нибудь отдельные части, что конечно же, делало всю разработку невыносимой. Такие времена прошли и сейчас используются различные библиотеки и фреймворки, позволяющий сделать разработку веб-приложений простой и качественной.

Одним из таких фреймворком является JavaScript фреймворк — Vue.js. О нем и поговорим в этой статье.

Vue (произносится как view — вью) — это прогрессивный фреймворк для создания пользовательских интерфейсов. Vue позволяет строить приложения с применением архитектурного паттерна MVVM (Model-View-ViewModel).

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

Создатель фрейморвка Vue.js — Эван Ю (Evan You), бывший сотрудник Google. Его фрейморк используют множество компаний, например, Alibaba, Baidu & Tencent, Xiaomi. Разработка фреймворка ведется Эваном вместе с сообществом разработчиков вне всяких компаний.

Плюсы Vue.js

  • достаточно быстрая разработка
  • небольшой вес фреймворка
  • хороша документация
  • большое сообщество разработчиков
  • быстрое взаимодействие с виртуальным DOM
  • подключение плагинов и создание своих плагинов
  • компонентная разработка приложения
  • реализует современные подходы к разработке
  • поддержка серверного рендинга приложения с помощью Nuxt.js

Концепции фрейморвка

Основными концепциями Vue являются:

  • реактивность
  • экземпляр
  • компоненты
  • директивы
  • анимация и переходы
Мастер Йода рекомендует:  Как сделать меню в Joomla

Реактивность

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

Экземпляр

С создания экземпляра Vue начинается вся разработка. Экземпляр создается через функцию:

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

Все компоненты Vue также являются экземплярами Vue и поэтому также принимают объект параметров.

Компоненты

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

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

Можно представить 3 вида разделения кода приложения:

  • постраничное разделение
  • разделение вне видимости
  • разделение по условию

1. Постраничное разделение кода

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

Простой пример роутинга может выглядеть следующим образом:

2. Разделение кода вне видимости

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

3. Разделение кода по условию

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

Директивы

Директивы — специальные атрибуты с префиксом v-. В качестве значения атрибуты принимают одно выражение JavaScript (кроме v-for). Директива реактивно применяет к DOM изменения при обновлении значения этого выражения.

В примере директива v-if удалит или вставит элемент

в зависимости от истинности значения выражения seen.

Анимация и переходы

Vue позволяет анимировать переходы при добавлении, обновлении и удалении объектов DOM.

  • автоматически использовать CSS-классы для анимаций и переходов
  • интегрировать сторонние библиотеки CSS-анимаций, например, animate.css
  • использовать JavaScript для работы с DOM напрямую в transition-хуках
  • интегрировать сторонние библиотеки JavaScript-анимаций, например, Velocity.js

Система анимирования переходов Vue предоставляет много простых методов для анимации появления и исчезновения элементов и списков, а также анимации самих данных. Например:

  • чисел и арифметических выражений
  • отображаемых цветов
  • позиции SVG-элементов
  • размеров и прочих свойств элементов

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

Анимация состояния при помощи наблюдателей позволяют нам анимировать изменения любых числовых свойств. В такой абстрактной форме это может звучать сложновато, так что давайте просто разберём пример с использованием Tween.js:

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

Frontend разработчик Vue.js

Мы активно ищем фронтенд разработчика для проектов на Vue.js на фуллтайм, удаленно.

Что предстоит делать:

  • Участвовать в разработке крупных проектов;
  • Заниматься поддержкой и развитием крупных проектов;
  • JavaScript (ЕS6);
  • Успешный опыт работы c Vue.js/ReactJS;
  • HTML5/CSS3;
  • SASS/SCSS;
  • REST API;
  • Уверенная работа с Git;
  • Умение работать с webpack;
  • Разработка архитектуры SPA;
  • Опыт в разработке UX (задачи типа админок, панелей управления, где нет четкого дизайна, но надо продумывать UI);
  • Redux, Vuex;
  • NodeJS;
  • Server side rendering;
  • Официальное оформление в штат;
  • Возможность работать удаленно;
  • Оплачиваемый отпуск / Больничный;
  • Возможность работать над крупными проектами известных брендов.

Напишите нам, мы будем рады видеть вас в нашей дружной команде 🙂

Переход с jQuery на Vue.js Зачем, как и что из этого вышло

Меня зовут Сергей, я работаю в Студии Флаг с 2020 года и, когда я пришел, состояние фронтенда оставляло желать лучшего.

Введение

Меня зовут Сергей, я работаю в Студии Флаг с 2020 года и, когда я пришел, состояние фронтенда оставляло желать лучшего. Если CSS хоть как-то собирался, был разбит на модули, то на некоторых проектах весь JavaScript хранился в одном файле длиной несколько тысяч строк, не минифицировался, и периодически встречались комментарии типа «Не лезь, оно тебя сожрет». В другом месте JS-функция иногда возвращала “trulio” вместо true. Большая часть кодовой базы была написана на jQuery, что тоже не упрощало работу.

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

Постепенно, мы занялись созданием сборки фронтенда, начали с минификации (сжатия) и транспиляции (трансформации кода таким образом, чтобы он работал в старых браузерах) JavaScript с помощью популярного сборщика Gulp. Позже стали разбивать код на модули. С 2020 года мы начинали постепенно внедрять php-фреймворк Laravel. Кстати, создатели Laravel (Taylor Otwell) и Vue.js (Evan You) много общаются и выступают на конференциях друг у друга.

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

Почему Vue

Vue.js – это прогрессивный фреймворк для создания пользовательских интерфейсов. Создателем Vue.js является Evan You, бывший сотрудник Google и Meteor Dev Group. Начал он разрабатывать фреймворк в 2013-м, а в феврале 2014-го состоялся первый публичный релиз.

Почему мы выбрали именно его?

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

Во-вторых, Vue довольно легко интегрируется с Laravel, backend-фреймворком, который мы используем.

Требуется «Frontend Javascript developer (Vue.js) ��»

Привет. Мы в Fundraise Up делаем платежные виджеты для встраивания на вебсайты. Через эти виджеты проходят миллионы долларов.

А подробнее?

Виджеты — это небольшие интерактивные iframe, которые мотивируют пользователей сделать платеж, а так же сама платежная форма. Мы постоянно создаем новые виджеты и проводим тесты для оптимизации имеющихся. И это невероятно интересная задача, потому что крошечные изменения влияют на десятки процентов конверсии. Переставил местами две кнопки — клиент получил на $100,000 больше!

Клиенты встраивают виджеты на свои сайты, сделанные на разных платформах, от чистого html до Wix, от WordPress до Drupal. Приходится делать так, чтобы мы работали идеально при любых условиях, а это непросто. На одном сайте изменен прототип массива, на другом кто-то поставил шапке z-index:9999999999!important, на третьем новый сюрприз. К тому же постоянно приходится изобретать трюки, например

  • как устроить A/B тест, который будет делить трафик прямо в браузере без единого запроса на бекенд?
  • как сделать чтобы браузер не ругался на ввод кредитной карты на сайте, открытому по http протоколу?
  • как сделать чтобы владелец сайта со знанием css не полез изменять наши элементы?
  • как записать, что пользователь “увидел” наш элемент, а не просто прокрутил страницу?

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

Ужас? Или нет? Если это звучит для вас как личный вызов — мы нашли друг друга.

Технологический стек

Весь фронт написан на Vue.js, который собирается с помощью webpack. Всего больше десятка SPA приложений. Некоторые из них предстоит переписать на Vanilla.js. С фронта отправляются миллионы событий в собственный трекинг.

Для тестов используем Mocha, CodeceptJS, Sinon и Chai. Пишем юниты и e2e для прогона на живой системе в окружении песочницы. Весь код проходит ревью. У нас нет отдельной позиции QA, за качество фичи отвечает разработчик.

Благодаря всему этому мы имеем очень стабильный продукт.

Кого мы ищем

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

  • не менее 3 лет в IT;
  • умеете в Vue.js, Vanilla.js, Typescript и Webpack;
  • внимательны (отдельным пунктом);
  • умеете системно работать и быстро давать результат;
  • имеете опыт работы в сложных проектах.

Что нужно делать

  • думать над архитектурой и реализацией фич;
  • писать код для фронтенда и иногда что-то править на бекенде;
  • покрывать функциональность тестами.

Что предлагаем

  • легко договоримся о деньгах, в зависимости от ваших навыков;
  • любое железо ( iMac 27″ / macbook pro ) и необходимый софт;
  • молодой коллектив и атмосфера стартапа;
  • работа с командой сильных специалистов;
  • влияние на продукт за пределами зоны ответственности;
  • возможен рост до тимлида продукта;
  • небольшой офис с кофе и фруктами.

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

Напишите пару слов о себе и приложите ссылки на проекты.

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