#Websites
made with vue.js
We all try to debug and test our apps the best we can, but we can’t really prevent errors from happening. As always in life, what matters is how you handle problems that inevitably pop up ��♂️ Here’s an introduction to error & exception handling in y.
11.04.2023 • in #UI Components
Forms are an important ingredient for almost every web app. But they can get complex pretty fast, and you’ll have to work through the repetitive processes of handling, storing and validating your data for every custom form. At some point, you’ll be.
In this article we’re exploring how we can we keep track of our app’s performance over time and what our metrics & goals should be. Including: Tips for automated audits and Vue component performance measuring!
Сравнение с другими фреймворками
Определённо, этот раздел руководства — самый трудный для написания, но он очень важен. Вероятно, вы уже решаете определённые задачи, используя тот или иной фреймворк или библиотеку, а сюда вас привело желание узнать, не позволит ли Vue упростить и улучшить вашу работу. На этот вопрос мы и надеемся ответить.
Мы очень постараемся не быть предвзятыми. Будучи членами основной команды разработки Vue, мы, разумеется, сами его очень любим. На наш взгляд, с некоторыми задачами Vue справляется лучше, чем какой-либо другой существующий фреймворк. Если бы мы не верили в это, мы бы наверное и не работали над этим проектом, верно? И тем не менее, нам бы хотелось быть предельно честными и точными в оценках. В тех случаях, когда альтернативные библиотеки имеют существенные преимущества, как например обширнейшая экосистема альтернативных средств отрисовки React’а или поддержка браузеров вплоть до IE6 Knockout’ом, мы постараемся не забыть о них упомянуть.
Кроме того, мы очень высоко ценим вашу помощь в деле поддержания актуальности этого документа, потому что мир JavaScript развивается стремительно! Если вы заметите какую-либо неточность или ошибку — пожалуйста, дайте нам знать, открыв issue на GitHub.
React
React и Vue во многом похожи. Они оба:
- используют Virtual DOM
- предоставляют реактивность и компонентную структуру
- фокусируются на корневой библиотеке, вынося прочие вопросы, такие как роутинг или управление глобальным состоянием приложения, в дополнительные библиотеки
Из-за столь похожих ниш, мы уделили сравнению этих фреймворков больше всего времени. Нашей целью было не только удостовериться в технической точности, но также и сохранить баланс. Мы указываем, где React превосходит Vue, например — в богатстве экосистемы и изобилии доступных пользовательских средств отрисовки.
Тем не менее, многие рассматриваемые моменты — в известной мере субъективны, и видится неизбежным то, что некоторым пользователям React дальнейшее сравнение всё равно покажется предвзятым. Мы понимаем, что и в технических вопросах существуют элементы вкуса, и в основном ставим своей целью в этом сравнении указать причины, по которым Vue может оказаться вам полезным — на случай если ваши вкусы совпадают с нашими.
Некоторые из приведённых ниже разделов могут быть немного устаревшими из-за недавних обновлений в React 16+, и мы планируем работать с сообществом React для актуализации этого раздела в ближайшем будущем.
Быстродействие выполнения
Как React, так и Vue — исключительно быстрые, поэтому скорость вряд ли будет решающим фактором при выборе между ними. Если вас интересуют цифры, то можете изучить стороннее сравнение производительности, которое фокусируется на сырой производительности отрисовки/обновления дерева очень простых компонентов.
Усилия для оптимизации
В React когда состояние компонента изменяется, оно запускает повторную отрисовку всего поддерева компонента, начиная с себя. Чтобы избежать ненужной повторной отрисовки дочерних компонентов, вам нужно либо использовать PureComponent , либо реализовывать shouldComponentUpdate везде где это возможно. Вам также может потребоваться использовать неизменяемые (immutable) структуры данных, чтобы сделать изменения вашего состояния более удобными к оптимизации. Однако, в некоторых случаях вы не можете рассчитывать на такую оптимизацию, потому что PureComponent/shouldComponentUpdate предполагают, что отображение всего поддерева определяется данными текущего компонента. Если это не так, то такая оптимизация может привести к несогласованному состоянию DOM.
Во Vue зависимости компонента автоматически отслеживаются во время отрисовки, поэтому система точно знает, какие компоненты действительно необходимо повторно отрисовывать при изменении состояния. Каждый компонент можно рассматривать как имеющий shouldComponentUpdate , автоматически реализованный для вас, без ограничений для вложенных компонентов.
В целом, это устраняет необходимость целого класса оптимизаций производительности для разработчика, что позволяет больше сосредоточиться на построении самого приложения по мере его масштабирования.
HTML & CSS
В React абсолютно всё — это JavaScript. Не только структуры HTML, выраженные через JSX, последние тенденции также включают управление CSS внутри JavaScript. Этот подход имеет свои преимущества, но также заставляет идти на компромиссы, которые могут показаться неэффективными для каждого разработчика.
Vue охватывает классические веб-технологии и основывается на них. Чтобы показать вам что это значит, мы рассмотрим несколько примеров.
JSX vs Шаблоны
В React все компоненты реализуют свой UI в render-функциях с использованием JSX, декларативным XML-подобным синтаксисом, который работает в JavaScript.
Render-функции с JSX имеют несколько преимуществ:
- Вы можете использовать все возможности языка программирования (JavaScript) для построения своего представления. Это включает в себя временные переменные, управление ветвлением и прямые ссылки на значения JavaScript в области видимости.
- Поддержка инструментов (например, линтинг, проверка типов, автодополнение в редакторе) для JSX в некоторых отношениях более продвинута, чем то, что доступно в настоящее время для шаблонов Vue.
Во Vue у нас также есть render -функции и даже поддержка JSX, потому что иногда вам требуются эти возможности. Тем не менее, по умолчанию мы предлагаем шаблоны как более простую альтернативу. Любой валидный HTML также будет валидным шаблоном Vue, и это приводит к нескольким преимуществам:
- Для многих разработчиков, которые работают с HTML, шаблоны просто более естественны для чтения и написания. Само это предпочтение может быть несколько субъективным, но если это делает разработчика более продуктивным, то преимущество налицо.
- HTML-шаблоны облегчают постепенную миграцию существующих приложений для использования возможностей реактивности Vue.
- Это также облегчает дизайнерам и менее опытным разработчикам разбираться и вносить доработки в текущую кодовую базу.
- Вы можете даже использовать препроцессоры, такие как Pug (ранее известный как Jade), чтобы создавать ваши шаблоны во Vue.
Некоторые утверждают, что важно изучить дополнительный язык DSL (Domain-Specific Language) для написания шаблонов — мы считаем, что эта разница в лучшем случае поверхностна. Во-первых, JSX не означает, что пользователю не нужно ничего учить — это дополнительный синтаксис на основе простого JavaScript, поэтому он прост в освоении для любого, кто знаком с JavaScript, но говорить, что это просто для всех, было бы заблуждением. Точно также шаблон является просто дополнительным синтаксисом поверх простого HTML и, следовательно, имеет очень низкий порог вхождения для тех, кто уже знаком с HTML. С помощью DSL мы также можем помочь пользователю сделать больше с меньшим количеством кода (например, с v-on модификаторами). Похожая задача может включать в себя намного больше кода при использовании простых функций JSX или render-функций.
На более высоком уровне мы можем разделить компоненты на две категории: презентационные и логические. Мы рекомендуем использовать шаблоны для презентационных компонентов и render -функции / JSX для логических. Процентное соотношение этих компонентов зависит от типа вашего приложения, но обычно презентационные компоненты более распространены.
Модульный (компонентный) CSS
За исключением случаев разделения компонентов на несколько файлов (например, посредством CSS-модулей), для ограничения области видимости CSS в React обычно используется подход CSS-in-JS (например, styled-components и emotion). Это представляет собой новый компонентно-ориентированный подход к стилизации, который отличается от обычного процесса разработки CSS. Кроме того, несмотря на поддержку извлечения CSS в отдельный файл стилей на этапе сборки, по-прежнему может быть необходимо, чтобы во время выполнения были подключены в сборку для корректной работы стилизации. В то время, как вы получаете доступ к динамичности JavaScript при создании ваших стилей, этот компромисс зачастую увеличивает размер сборки и время исполнения.
Если вы поклонник подхода CSS-in-JS — многие популярные библиотеки поддерживают Vue (например, styled-components-vue и vue-emotion). Главным отличием между React и Vue здесь будет то, что по умолчанию стилизация Vue выполняется через знакомые теги style в однофайловых компонентах.
Однофайловые компоненты предоставляют вам полный доступ к CSS в том же файле, что и остальная часть кода вашего компонента.
style scoped>
@media (min-width: 250px) {
.list-container:hover {
background: orange;
}
}
style>
Опциональный атрибут scoped автоматически ограничивает область видимости CSS текущим компонентом, добавляя элементам уникальные атрибуты (такие как data-v-1-21e5b78 ), и компилируя .list-container:hover во что-нибудь вроде .list-container[data-v-1-21e5b78]:hover .
Наконец, стилизация в однофайловых компонентах Vue очень гибка. С помощью vue-loader, вы можете использовать любой препроцессор, постпроцессор и даже глубокую интеграцию с CSS-модулями — всё в элементе .
Масштабирование
Масштабирование вверх
Для крупных приложений, как Vue так и React предоставляют надёжные решения для роутинга. Сообщество React также породило весьма инновационные решения в области управления состоянием приложения (см. Flux/Redux). Эти подходы, и даже сам Redux легко интегрируются в приложения на Vue. В действительности, Vue сделал следующий шаг, создав Vuex — вдохновлённую Elm реализацию паттерна управления состоянием приложения. Vuex глубоко интегрирован с Vue, что, на наш взгляд, изрядно облегчает жизнь разработчикам.
В качестве ещё одного важного различия между React и Vue можно упомянуть тот факт, что все дополнительные библиотеки Vue, включая библиотеки для управления состоянием приложения и для роутинга (среди прочих задач), официально поддерживаются в актуальном соответствии с ядром библиотеки. React, напротив, предпочитает отдать эти вопросы на откуп сообществу, тем самым создавая более фрагментированную экосистему. Впрочем, как уже замечалось ранее, в силу популярности React, его экосистема значительно обширнее, чем у Vue.
Наконец, у Vue есть CLI генератор проектов, который позволяет легко начать новый проект с помощью интерактивного мастера. Его также можно использовать для мгновенного прототипирования компонента. React также делает успехи в этой области с помощью create-react-app, но в настоящее время у него есть несколько ограничений:
- Он не допускает никакой конфигурации во время создания проекта, в то время как Vue CLI работает поверх обновляемой runtime-зависимости, которая легко расширяется с помощью плагинов.
- Существует только один шаблон для одностраничного приложения, в то время как Vue предлагает широкий выбор опций по умолчанию для различных целей и систем сборки.
- Нет возможности создавать проекты из пользовательских пресетов настроек, что может быть особенно полезно для enterprise-окружений с установившимися ранее соглашениями.
Важно заметить, что многие из этих ограничений — следствия сознательно принятых решений команды create-react-app, и в них есть и свои плюсы. Например, коль скоро ваш проект не требует пользовательской настройки процесса сборки, её можно будет обновлять как зависимость. Прочитать больше об этом подходе можно здесь.
Масштабирование вниз
React известен своей довольно крутой кривой изучения. До того момента, когда новичок сможет что-то написать, ему придётся узнать о JSX, а вероятно — и о ES2015+, поскольку многие примеры используют синтаксис ES2015-классов. Кроме того придётся разобраться с системами сборки, поскольку, хотя технически и существует возможность использовать Babel самостоятельно для live-компиляции кода, для production этот подход в любом случае не годится.
Vue масштабируется вверх ничуть не хуже, чем React, и в то же время его можно масштабировать и вниз — вплоть до варианта использования вместе с jQuery. Именно так — для старта в простейшем случае достаточно просто добавить тег скрипта на HTML-страницу.
script src="https://cdn.jsdelivr.net/npm/vue@2"> script>
Начиная с этого момента можно писать код на Vue, и даже использовать production-версию, не мучаясь угрызениями совести и волнениями насчёт производительности.
Поскольку знания JSX, ES2015 и систем сборки не требуется для начала работы с Vue, в среднем у новых разработчиков уходит не больше дня на чтение руководства, позволяющего узнать достаточно для построения нетривиальных приложений.
Нативная отрисовка
React Native позволяет писать нативные приложения для iOS и Android, используя ту же самую модель компонентов React’а. Это — прекрасно, так как позволяет разработчикам применить знание одного и того же фреймворка на различных платформах. В этой области, Vue официально поддерживает проект Weex — кроссплатформенный UI-фреймворк, созданный Alibaba Group и инкубированный Apache Software Foundation (ASF). Weex позволяет использовать тот же синтаксис Vue для создания компонентов, которые не только могут отображаться в браузере, но и также нативными элементами в iOS и Android!
На данный момент Weex всё ещё находится в активной фазе разработки, и ещё не столь матёр и проверен опытом, как React Native. Однако, его разработка мотивируется реальными требованиями крупнейшего бизнеса электронной коммерции в мире. Команда разработки Vue также активно взаимодействует с разработчиками Weex, гарантируя отсутствие неожиданностей для Vue-разработчиков.
Ещё один вариант NativeScript-Vue — плагин для NativeScript для создания по-настоящему нативных приложений с помощью Vue.js.
Сравнение с MobX
MobX стал довольно популярным в сообществе React. Он использует почти идентичную Vue систему реактивности. В некотором смысле, связку React + MobX можно считать несколько более многословным вариантом Vue, так что если вы используете её, и она вам нравится, переход на Vue может оказаться следующим логичным шагом.
Preact и другие React-подобные библиотеки
React-подобные библиотеки обычно пытаются использовать как можно больше своих API и экосистемы React насколько это осуществимо. По этой причине большинство сравнений, приведённых выше, также применимы и к ним. Главным отличием, как правило, будет уменьшение доступной экосистемы (часто значительно) в сравнении с React. Поскольку эти библиотеки не могут быть на 100% совместимы со всем в экосистеме React, некоторые библиотеки инструментов или сопутствующие библиотеки могут не использоваться. Или, даже если похоже что они работают, они могут сломаться в любое время, если ваша конкретная React-подобная библиотека не поддерживается наравне с React.
AngularJS (Angular 1)
Некоторые части синтаксиса Vue выглядят очень похоже на синтаксис AngularJS (например, сравните v-if и ng-if ). Это — не случайность: многие идеи, лежащие в основе AngularJS мы считаем верными, и вдохновлялись ими на ранних этапах разработки Vue. Впрочем, в AngularJS немало и болезненных проблем, и в этих областях мы постарались добиться значительных улучшений.
Сложность
Vue значительно проще AngularJS, как в смысле API, так и в смысле архитектуры. Получение достаточных знаний для написания нетривиальных приложений обычно происходит менее чем за день, чего нельзя сказать об AngularJS.
Гибкость и модульность
AngularJS имеет жёсткое мнение насчёт структуры вашего приложения, в то время как Vue проявляет гибкость и является более модульным решением. Хотя это и делает Vue пригодным для большего разнообразия проектов, мы понимаем и то, что когда решения уже приняты за тебя, можно сразу начать программировать, и в этом есть свои преимущества.
Поэтому мы предоставляем полную систему для быстрой разработки на Vue.js. Vue CLI нацелен стать стандартным базовым инструментом для экосистемы Vue. Это гарантирует, что различные инструменты сборки будут работать вместе с оптимальными настройками по умолчанию, что позволит сосредоточиться на создании приложения, а не тратить часы на конфигурирование. В то же время, он по-прежнему предоставляет гибкую настройку конфигурации каждого инструмента в соответствии с конкретными потребностями.
Связывание данных
AngularJS использует двунаправленное связывание данных между областями видимости, в то время как Vue концентрируется на однонаправленном потоке данных между компонентами. Это позволяет облегчить понимание потока данных в нетривиальных приложениях.
Директивы и компоненты
Vue чётче разделяет директивы и компоненты. Директивы предназначены только для инкапсуляции низкоуровневых манипуляций с DOM, в то время как компоненты являют собой полноценные автономные объекты, со своей собственной логикой данных и представления. В AngularJS директивы делают всю работу, а компоненты всего лишь определённый тип директив.
Быстродействие выполнения
Vue производительнее AngularJS. Кроме того, из-за отсутствия dirty-checking, оптимизировать Vue-приложения намного-намного проще. AngularJS замедляется при увеличении количества наблюдателей, поскольку каждый раз при изменении чего-либо в области видимости все эти наблюдатели должны быть перезапущены. Кроме того, цикл может повториться несколько раз перед стабилизацией, поскольку реакция наблюдателей может спровоцировать следующее обновление. Пользователям AngularJS нередко приходится прибегать к весьма эзотерическим техникам для обхода этих трудностей, а в некоторых случаях оптимизация и вовсе становится невозможной.
Vue не подвержен таким проблемам по причине использования прозрачного механизма учёта зависимостей с асинхронной очередью — все изменения рассматриваются независимо, кроме случаев явного указания наличия связи между ними.
Любопытно, что есть немало общих черт, как Angular и Vue решают эти проблемы AngularJS.
Angular (известный также как Angular 2)
Мы выделяем отдельную секцию для нового Angular, поскольку по сути он полностью отличен от AngularJS. Например, теперь он содержит полноценную компонентную систему; кроме того, многие детали реализации были полностью переписаны, а API очень существенно изменился.
TypeScript
Для Angular требуется использовать TypeScript, поскольку почти вся его документация и учебные ресурсы основаны на TypeScript. TypeScript имеет свои очевидные преимущества — проверка статических типов может быть очень полезна для крупных приложений, и может добавить производительности разработчикам, работающим на Java и C#.
Однако не все хотят использовать TypeScript. Часто для небольших приложений введение системы типов может привести к большему увеличению накладных расходов нежели увеличению производительности разработки. В таких случаях вам лучше воспользоваться Vue, так как использовать Angular без TypeScript может быть сложным.
Наконец, хотя Vue и не так глубоко интегрирован с TypeScript как Angular, но предоставляет официальные декларации типов и официальный декоратор для тех, кто хочет использовать TypeScript с Vue. Мы также активно сотрудничаем с командами TypeScript и VSCode в Microsoft, чтобы улучшить опыт TS/IDE для пользователей Vue + TS.
Быстродействие выполнения
В смысле производительности, оба фреймворка весьма быстры, и пока нет достаточных данных из реального мира чтобы вынести окончательный вердикт. Но если вы всё же хотите цифр, похоже что Vue 2.0 всё-таки обгоняет Angular, по крайней мере, если верить этому стороннему исследованию производительности.
Оба фреймворка исключительно быстрые, с очень похожими метриками в тестах. Вы можете изучить конкретные цифры для более детального сравнения, но скорость вряд ли станет решающим фактором.
Размер
Последние версии Angular, с AOT-компиляцией и tree-shaking, смогли значительно уменьшить размер сборок. Однако полнофункциональный проект Vue 2 с включёнными Vuex + Vue Router (~30КБ gzip) по-прежнему значительно легче из коробки, чем AOT-скомпилированное приложение, созданное с помощью angular-cli (~65КБ gzip).
Гибкость
Vue значительно менее упрям, чем Angular, и поддерживает множество различных систем сборок, не ограничивая разработчиков в том, какую структуру использовать для приложения. Многим программистам эта свобода нравится, хотя есть и те, кто предпочитают иметь единственно-правильный способ построения приложения.
Кривая обучения
Всё что необходимо для начала работы с Vue — это знакомство с HTML и обыкновенным (ES5) JavaScript’ом. С этими базовыми навыками вы уже можете начать строить нетривиальные приложения после менее чем однодневного прочтения руководства.
Кривая обучения у Angular гораздо круче. API фреймворка просто огромное и вам как пользователю нужно будет разобраться с большим количеством концепций, прежде чем стать продуктивным. Очевидно, что сложность Angular во многом обусловлена его направленностью только на большие, комплексные приложения — но это делает платформу намного более трудной для менее опытных разработчиков.
Ember
Ember — это полнофункциональный фреймворк, изначально созданный «имеющим и отстаивающим своё мнение». Он требует соблюдения множества соглашений и конвенций, и когда вы с ними освоитесь — он может сделать вас весьма продуктивными. Однако, это означает ещё и высокую и крутую кривую обучения, не говоря о страдающей гибкости. Выбор между жёстко структурированным фреймворком и библиотекой со слабосвязанными совместно работающими инструментами — это всегда компромисс. Последняя даёт больше свободы, но и требует принятия большего количества самостоятельных архитектурных решений.
Учитывая вышесказанное, вероятно будет разумнее сравнивать ядро Vue и слои шаблонизации и объектной модели Ember:
- Vue предлагает ненавязчивую реактивность для простых JavaScript-объектов и полностью автоматические вычисляемые свойства. В Ember от вас ожидается заворачивание всего в «Объекты Ember» и ручное указание зависимостей для вычисляемых свойств.
- Синтаксис шаблонов Vue позволяет использовать все возможности выражений JavaScript, в то время как возможности выражений Handlebars и синтаксис хелперов в Ember намеренно существенно ограничены.
- В вопросах производительности Vue существенно выигрывает — даже с учётом последнего обновления Glimmer engine в Ember 3.x. Vue автоматически объединяет операции обновления, в то время как в Ember требуется ручное управление циклом выполнения в ситуациях, где производительность критична.
Knockout
Knockout был пионером MVVM-подхода и отслеживания изменений в данных. Его система реактивности очень похожа на используемую Vue. Список поддерживаемых браузеров — впечатляет, особенно с учётом всех немалых возможностей фреймворка, доступных даже в IE6! Vue же поддерживает только IE9+.
Со временем, впрочем, разработка Knockout замедлилась и он понемногу начал показывать признаки своего возраста. Например, компонентной системе недостаёт полного набора хуков жизненного цикла, а интерфейс передачи дочерних компонентов, хоть и используется очень широко, выглядит по сравнению со слотами Vue не очень выигрышно.
Кроме того, похоже что существует разница в философских подходах к API, которая, если вам интересно, может быть продемонстрирована различиями при создании простого списка todo. Конечно же, это — субъективный вопрос, но многим API Vue кажется проще и лучше структурированным.
Polymer
Polymer — это проект, спонсируемый Google. В действительности, он тоже послужил источником вдохновения для Vue. Компоненты Vue можно приблизительно сравнивать с пользовательскими элементами Polymer. Стиль разработки с использованием обоих фреймворков довольно похож. Самая существенная разница состоит в том, что Polymer базируется на последних возможностях Web Components и требует для работы использования весьма нетривиальных полифилов (с потерей быстродействия в браузерах без нативной поддержки этих возможностей). Vue, напротив, без каких-либо зависимостей или полифилов работает во всех браузерах, начиная с IE9.
В Polymer, разработчики существенно ограничили систему связывания данных для улучшения производительности. Например, единственными поддерживаемыми в шаблонах Polymer выражениями являются булево отрицание и одиночные вызовы методов. Реализация вычисляемых свойств — тоже не очень гибкая.
Riot
Riot 3.0 предлагает похожую модель разработки, основывающуюся на компонентах (в Riot называемых «тегами»), с минималистичным и прекрасно организованным API. Вероятно, Riot и Vue во многом основаны на схожих философских подходах. Однако, несмотря на немного больший размер по сравнению с Riot, Vue имеет некоторые существенные преимущества:
- Лучшая производительность. Riot обходит дерево DOM вместо использования Virtual DOM, поэтому страдает от тех же проблем, что и AngularJS.
- Поддержка более зрелого инструментария. Vue официально поддерживает Webpack, Browserify и SystemJS, в то время как Riot полагается в вопросах интеграции с системами сборки на поддержку сообщества.
Обнаружили ошибку или хотите добавить что-то своё в документацию? Измените эту страницу на GitHub! Опубликовано на Netlify .
Vue.js
Vue.js — это прогрессивный фреймворк для разработки пользовательских интерфейсов и одностраничных веб-приложений на языке JavaScript. Он решает задачи уровня представления (view) и упрощает работу с библиотеками. Vue.js можно внедрять постепенно, этим он отличается от других фреймворков.
Освойте профессию «Frontend-разработчик»
Фреймворк применяют Alibaba, Twitter, Facebook, Baidu, EuroNews, Xiaomi, Sina Weibo и т.д. Он входит в ядро фреймворков Laravel и PageKit. Новые версии продукта появляются несколько раз за год. Каждая имеет название, взятое из аниме, манги и научной фантастики. Последняя на данный момент версия 3.2 представлена в 2021 году и названа The Quintessential Quintuplets. На данный момент это один из наиболее перспективных фреймворков: он гибкий, быстро работает и активно развивается.
Где используется Vue.js
Фреймворк Vue.js применяется при разработке:
- быстрых веб-сайтов и приложений, блогов небольшого размера;
- сайтов с высокой нагрузкой — интернет-магазинов, информационных порталов;
- одностраничных (SPA) приложений — социальных сетей, микроблогов-сервисов, CMS и т.д.;
- адаптивных интерфейсов;
- разделов личных кабинетов и пользовательских страниц;
- интерфейсов авторизации, онлайн-чатов, форм заявки и других функциональных блоков.
Профессия / 9 месяцев
Frontend-разработчик
Создавайте интерфейсы сервисов, которыми пользуются все
Особенности Vue.js
Реактивность
Vue.js — это реактивный MVC-фреймворк. Представление (view) изменяется по мере изменения модели.
Прогрессивность
Ядро Vue.js идеально подходит для внедрения в существующий проект. Так, сайт готового продукта может продолжать работать, например на jQuery (ранее используемой библиотеке), но часть модулей постепенно будет переписываться на Vue до полноценного перехода.
Простота
Начать работать с фреймворком можно без базовых знаний в веб-разработке. Низкий порог вхождения — причина популярности у начинающих разработчиков.
Небольшой вес
Фреймворк занимает около 20 кБ, поэтому реализованные на нем проекты быстрее загружаются и лучше ранжируются поисковыми роботами.
Быстрая разработка
Шаблоны, множество документации и инструкций, широкое сообщество энтузиастов позволяют решить любую проблему, возникающую при создании проектов на Vue.js.
Доступность
Vue.js распространяется по лицензии MIT. Его можно свободно использовать и в коммерческих, и в личных целях.
Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все
Как устроен Vue.js
Компоненты. Приложение состоит из частей-компонентов. Это элементы с заданными параметрами и поведением, прикрепленным с помощью компилятора. Они расширяют базовые элементы HTML и позволяют их использовать несколько раз (например множественное нажатие виртуальной кнопки). Один компонент может включать несколько других, то есть используется древовидная иерархия.
Шаблоны. Это валидный HTML-код, привязывающий визуализированную DOM (объектную модель документа) к данным базы Vue.js. Фреймворк отображает компоненты в памяти DOM перед обновлением браузера. Подключая систему реактивности, Vue.js определяет наименьшее число компонентов для повторного отображения и уменьшает количество действий с объектной моделью при изменении состояния приложения.
Переходы. Эти инструменты реализуют анимационные эффекты для отрисованных, обновленных или удаленных из DOM-элементов. Они включают:
- автоматическое применение классов для CSS-переходов и анимации;
- подключение библиотек для CSS-анимации из сторонних источников, таких как Animate.css;
- изменения DOM с помощью JavaScript;
- подключение JS-библиотек из сторонних источников для анимации (например Velocity.js).
Директивы. Это специальные атрибуты, используемые внутри HTML-шаблона компонента Vue для взаимодействия с HTML-тегами и другими компонентами. Как правило, они прописываются с буквой v в начале, после которой через дефис следует название. Примеры основных директив:
- v-show — обеспечивает отрисовку элемента в соответствии с переданным значением (true демонстрирует элемент, false — скрывает);
- v-if — также отображает элемент, но в, отличие от предыдущего случая, он всегда остается в DOM, изменяется лишь значение css свойства display;
- v-bind — привязывает динамические данные к HTML-атрибуту;
- v-model — также отвечает за привязку данных, но делает ее двухсторонней;
- v-on — добавляет событие и его обработчики на элемент.
Фильтры. Это инструменты представления данных для их фильтрации на уровне объектной модели. То есть данные тоже располагаются в хранилищах, но их отображение происходит определенным образом, не обязательно идентичным изначально сохраненному. Фильтры позволяют:
- улучшать представление приложения благодаря контролю слоя, с которым работает Vue;
- настраивать их глобальный доступ, а затем повторно использовать в любом компоненте проекта для повышения эффективности;
- форматировать данные на уровне представления или непосредственно в объектной модели документа.
Экосистема Vue.js
Менять функционал и инструментарий можно с помощью дополнительных библиотек и инструментов. Их создают как официальные разработчики, так и энтузиасты сообщества. Инструменты и библиотеки составляют экосистему Vue.js. Она включает:
- router — пакет, отвечающий за маршрутизацию. Он поддерживает вложенные маршруты к компонентам, упрощает API для навигации, контролирует поведение скрола и переходы;
- vuex — библиотека и паттерн управления состоянием. Служит централизованным хранилищем данных для всех компонентов приложения с правилами, гарантирующими, что состояние может быть изменено только предсказуемым образом;
- devtools — плагин для отладки в браузере, отображающий наличие и состояние компонентов;
- server-renderer — пакет для серверного рендеринга компонентов в HTML-код с отправкой в браузер. Это позволяет быстрее отображать интерфейс;
- CLI — инструмент командной строки, упрощающий и ускоряющий разработку приложений на Vue.js;
- loader — плагин для загрузки веб-пакетов, с помощью которого можно создавать компоненты Vue в однофайловом формате (SFC).
Найти полный список полезных дополнений можно на GitHub.
Примеры сайтов на Vue.js
Chess.com. Сайт, который посвящен игре в шахматы. Посещаемость — около 20 млн пользователей в месяц. На сайте реализована возможность играть в шахматы онлайн.
Codeship.com. Облачная платформа для программистов, где можно сохранять веб-приложения.
Livestorm. Платформа, позволяющая создавать вебинары.
Frontend-разработчик
Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.
Статьи по теме:
Делимся подборкой IT-профессий для креативщиков и математиков, а также лайфхаками, как выбрать подходящую именно вам
Список полезных сайтов по Vue.js
О самом фрейморвке можно более подробней узнать из обзора о Vue.js, где я описывал его плюсы, функционал, то как происходит работа с кодом в нем и т.п. А сейчас, рассмотрим несколько полезных сайтов, связанных с Vue.
Nuxt.js
Nuxt.js — это небольшой фреймворк для Vue.js, который позволяет разрабатывать веб-приложения не только на клиентской стороне, но и на серверной. Он позволяет создать гибкую структуру приложения и, например, использовать ее в каком-то вашем проекте на основе Node.js.
В себя Nuxt.js включает:
Для разделения и минимизации кода используется webpack с vue-loader и babel-loader.
- Автоматическое разделение кода
- Рендиринг на сервере
- Маршрутизация с асинхронными данными
- Статические файлы
- ES6 / ES7 Transpilation
- Минимизация и объединение файлов
- Замена горячего модуля в разработке
- Препроцессор: Sass, Less, Stylus и т. д.
- Модульные архитектура
В целом, отличная вещь, для любителей серверной разработки.
Vue.js Examples
Vue.js Examples — отличный сайт со множеством примеров с описанием, кодом и демо.
Vuetify Material Component Framework
Vuetify — это фреймворк для разработки Vue.js приложений с использованием Material Design. Тоже достаточно полезная вещь для тех, кто использует дизайн гугла. У фреймворка большой набор различных компонентов, хорошая экосистема и активное сообщество на гитхабе.
Quasar Framework
Quasar Framework — это тоже фреймворк для разработка на Vue.js. Он позволяет создавать различные приложения, сайты, в том числе, гибридные мобильные приложения.
AT UI
AT UI — модульная и легкая библиотека для создания простых и красивых интерфесов с Vue.js
Element
Element — компонентная библиотека на основе Vue для разработчиков, дизайнеров и менеджеров продуктов
Bootstrap + Vue
Bootstrap Vue — все в одном, для тех, кто использует Bootstrap
Onsen UI for Vue
Onsen UI for Vue — позволяет разрабатывать гибкие веб-приложения на Vue.js. Содержит в себе набор готовых компонентов для создания интерфейсов iOS и Android UI.
Mint UI
Mint UI — фреймворк, с помощью которого можно быстро разрабатывать интерфейсы для мобильных приложений.
Список в статье далеко не полный и по мере возможности будет пополняться. Если у вас есть полезные сайты, о которых здесь не шла речь, то можете поделиться ими в комментариях.