Видеокурс по трендовой Frontend-технологии с полного нуля

Фреймворк Vue.js

Полное руководство для современной веб-разработки


Для кого этот курс

Начинающие
Frontend-разработчики

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

Действующие
Frontend-разработчики

Для вас важно быть в тренде и пользоваться только актуальными и востребованными технологиями веб-разработки для достижения максимальных заработков

Фрилансеры-практики

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

Легкость библиотеки и функционал фреймворка

Vue.js – это прогрессивный JavaScript-фреймворк для создания UI и создания сверхбыстрых, мощных, полностью адаптивных одностраничных веб-приложений (Single Page Application), стремительно набирающий популярность среди разработчиков.

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

Зачем нужно уметь создавать SPA

Single Page Application (SPA) – это web-приложение, размещенное на одной странице, которая для обеспечения работы загружает все JavaScript-файлы (модули, виджеты, контролы), а также файлы CSS вместе с загрузкой самой страницы.

Большой охват пользователей

SPA отлично работают как на стационарных компьютерах и десктопах, так и мобильных устройствах: планшетах и смартфонах

Богатый пользовательский интерфейс

Так как web-страница одна, в SPA проще хранить информацию о сеансе, управлять уровнями представлений (views) и анимацией

Сокращение времени и ресурсов

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

Востребованная высокооплачиваемая профессия

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

Преимущества перед другими
JS-фреймворками

Функции Vue схожи с функциями аналогичных JS-фреймворков от Google (Angular) и Facebook (React), это и компоненты, и директивы, и свойства, и переходы, и анимация, и фильтры. Но есть и существенные принципиальные отличия, которые оставляют конкурентов далеко позади

Доступный

Vue написан на опыте Angular и React, но проще в реализации и понимании. Требует минимальных усилий по настройке и оптимизации

Гибкий

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

Легкий

Vue.js очень мало весит (всего 20 Кбайт) и является самым легким и быстрым JS-фреймворком на рынке по состоянию на 2018 год

Быстрый

Позволяет выбирать только необходимые элементы для проекта. Молниеносная виртуальная объектная модель документа

Функциональный

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

Простой

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

Интегрируемый

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

Реактивный

Специально создан для разработки сверхбыстрых интерактивных веб-интерфейсов с асинхронными потоками данных

Безопасный

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

Масштабируемый

Поэтапно наращиваемая экосистема, которая масштабируется между библиотекой и полнофункциональным фреймворком

Производительный

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

Востребованный

Спрос в России и СНГ на профессионалов, владеющих Vue, значительно превосходит предложение, а заработки одни из самых высоких на рынке

Что профессионалы говорят о Vue*

Простой в интеграции

81% разработчиков отмечают простоту интеграции как основное преимущество фреймворка Vue, в том числе и интеграцию с Backend-фреймворками

Легкий в освоении

Большинство специалистов считает, что освоить Vue намного легче, чем другие популярные JavaScript фреймворки

Понятная документация

Документация — еще одна сильная сторона Vue — так считают 60% опрошенных разработчиков

Производительный

56% респондентов отмечает производительность данного решения как одну из его самых сильных сторон


*Согласно опросу компании Monterail

Профи c GitHub также выбирают Vue

Vue создан значительно позже аналогичных фреймворков от Google (Angular) и Facebook (React), поэтому логичным образом учел все преимущества и недостатки двух последних.

Уже сегодня профи веб-разработки все чаще предпочитают простой, легкий, мощный и расширяемый Vue другим популярным фреймворкам. Количество «звезд» на GitHub – яркое тому доказательство.

По состоянию на апрель 2018 года Vue почти в три раза популярнее Angular. Судя по тенденциям, уже совсем скоро Vue обгонит по востребованности среди профи своего ближайшего конкурента – React от Facebook.

Мировое признание

Vue широко используется среди субъектов крупного и среднего бизнеса по всему миру. Но особую популярность этот фреймворк приобрел среди китайских IT-корпораций: Alibaba (мировой лидер торговли), Baidu (китайский IT-гигант, лидер отрасли), Xiaomi, Sina Weibo и др.

Этот фреймворк также входит в ядро Laravel и PageKit. Недавно свободная система управления репозиториями GitLab тоже перешла на Vue.js.

Vue – новый мировой лидер фреймворков!

Несмотря на свой крошечный размер и молодость, Vue обладает непревзойденной производительностью и уникальными возможностями по сравнению с такими фреймворками как Angular или React

Неудивительно, что он стремительно набирает обороты и уже де-факто стал лидером рынка

По статистике Google Trends Vue является самым популярным фреймворком в мире:

В России и СНГ Vue также активно набирает обороты и становится все более и более популярным

Наблюдается устойчивый и быстрый рост количества запросов по Vue в Яндексе:

WEBFORMYSELF ПРЕДСТАВЛЯЕТ ВИДЕОКУРС

Фреймворк VUE

Руководство для современной веб-разработки

Посмотрите видео и узнайте о курсе подробнее

ЧТО ВНУТРИ

Основной блок курса

Основная часть курса включает 117 уроков общей продолжительностью 18 часов.

И это без учета бонусов, в которых содержится ВСЯ необходимая теоретическая база для овладения Vue.js с полного нуля (включая основы JavaScript)!

Основной блок курса состоит из двух объемных частей:

  • Часть 1. Теория Vue.js (9 блоков, 87 уроков, 12 часов)
  • Часть 2. Практика. Разработка SPA (30 уроков, 6 часов)

Бонусный блок курса

Бонусный блок курса состоит из 6 новейших актуальных видеокурсов:

  • Бонус 1. Премиум-курс по JavaScript (24 урока, 19,5 часов)
  • Бонус 2. Премиум-курс по NodeJS (10 уроков, 2 часа)
  • Бонус 3. Премиум-курс по Webpack (20 уроков, 3,5 часа)
  • Бонус 4. Премиум-курс по EcmaScript 6 (17 уроков, более 3 часов)
  • Бонус 5. Анимации (8 уроков, 1,5 часа)
  • Бонус 6. Деплой Vue приложения (2 урока, 30 минут)

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

Почему вам стоит изучить этот курс

Исчерпывающая теория

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

Море практики

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

Востребованная технология

По итогам курса создается Serverless Single Page Application на material design с Firebase – один из главных трендов 2018 года

Полный охват навыков

Авторизация, загрузка картинок, защита роутов, валидация полей, вывод сообщений об ошибках, разделение прав доступа, полностью адаптивный дизайн под любое устройство

Результат практической части курса

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

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

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

Приложение, разработка которого показана в курсе

  • Скриншот приложения
  • Скриншот приложения
  • Скриншот приложения
  • Скриншот приложения
  • Скриншот приложения

ПОДРОБНОЕ СОДЕРЖАНИЕ КУРСА

(наведите курсор мыши на урок, чтобы смотреть детально)

Блок 1. Знакомство с Vue

Длительность: 0:16:42

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

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

Блок 2. Основы Vue

Длительность: 2:37:48

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

Интерполяция Начиная с данного урока, начинается знакомство с основами Vue. В этом уроке рассмотрена самая основа – способ динамически связывать шаблон и данные Vue.
Динамические атрибуты Рассматривается, каким образом работает фреймворк с HTML-атрибутами, в чем особенность данного взаимодействия. Рассматривается такое понятие, как директивы и показано использование одной из них – v-bind.
Вывод HTML-кода Иногда встречаются ситуации, когда необходимо вывести HTML-код прямо из Javascript в шаблон. Но стандартные методы здесь не сработают, в целях защиты. В уроке показано, как обойти данные методы используя уже другую директиву.
Добавление событий Рассматривается одна из самых главных директив, которая позволяет динамически взаимодействовать с пользователем вашего приложения.
Передача параметров в метод Рассматривается, как передавать любое количество параметров разного типа в методы, которыми вы обрабатываете события вашего приложения.
Модификаторы событий В уроке рассмотрена очень удобная особенность фреймворка Vue – модификаторы. Речь пойдет конкретно про модификаторы, которые упрощают обработку шаблонных решений в Javascript.
Модификаторы событий клавиатуры Урок познакомит вас более подробно с модификаторами, которые изначально есть во фреймворке, которые помогают очень удобно обрабатывать нажатия на кнопки клавиатуры.
Ярлыки для директив Рассказывается про то, как можно упростить синтаксис в шаблоне используя ярлыки для более быстрой разработки.
Модель для работы с формами В этом уроке в общих чертах описывается понятие модели, которая позволяет двусторонне связывать шаблон и функциональный код приложения.
Работа с CSS-классами Фреймворк Vue предоставляет нам 3 очень удобных инструмента для динамической работы с классами, которые как раз рассматриваются в этом уроке.
Динамические стили Аналогично классам, в этом уроке рассматриваются все способы динамического добавления стилей к HTML-элементам.
Управление отображением элементов Рассматриваются способы отображения или сокрытия HTML-элементов в шаблоне по условию, которое можно динамически изменять.
Директива v-show vs v-if В уроке говорится про новую директиву, с помощью которой можно управлять отображением элементов, а также о разнице между двумя подходами.
Работа со списками В уроке рассмотрена очень важная директива, которая позволяет работать с однотипными элементами – вывод списка элементов, отображение объектов в шаблоне и многое другое.
Оптимизация приложения с computed Рассмотрен новый объект конфигурации приложения, с помощью которого можно оптимизировать скорость работы приложения, используя стандартные методы.
Отслеживание изменений с watch Иногда возникают ситуации, когда необходимо вручную отследить изменение определенного элемента и выполнить какое-либо действие. В уроке показано, как это можно реализовать, используя этот фреймворк.
Связывание разных приложений. Инстанс Vue В уроке показано, как связать несколько объектов или приложений между собой. Также поговорится про новые методы и возможности, которые возникают, если происходит инициализация нескольких приложений.
Доступ к DOM-элементам В уроке рассматриваются референции, с помощью которых можно получать доступ с нативным HTML-элементам в любом месте Vue приложения.
Свойство template Этот урок будет полезен тем, кто не любит разделять Javascript и HTML, а предпочитает писать все в одном месте. Показано, как можно задать шаблон прямо в приложении и какие особенности есть у данного подхода.
Жизненный цикл Как и в любом другом фреймворке у Vue есть очень удобная возможность отслеживать в любой важный момент времени ваш компонент и выполнять над ним какие-либо манипуляции. Для этого реализован так называемый жизненный цикл компонента. В уроке показано, как и когда этим можно воспользоваться.

Блок 3. Vue CLI&Webpack

Длительность: 0:44:55

В данном блоке разбирается что такое за инструмент Vue CLI. Показана установка Vue CLI на компьютер и с помощью него сгенерируется новый проект на Vue на основе сборщика webpack. Сразу будет доступно к работе приложение с быстрой перезагрузкой страницы в браузере, технологией Hot Module Replacement и препроцессорами. Рассматриваются файлы с расширением Vue, которые были сделаны специально для данного фреймворка.

Зачем нужен CLI В уроке показано, как использовать целый набор удобных инструментов для быстрого разворачивания Vue приложения.
Установка CLI и создание проекта В этом уроке показывается, как установить cli и создать определенный из списка шаблон приложения.
Обзор структуры проекта В этом уроке подробно рассматриаются все сущности и файлами, которые есть в созданном проекте.
Как запускается приложение В этом уроке показано, как запустить приложение, которое было сгенерировано.

Блок 4. Компоненты

Длительность: 1:39:47

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

Зачем нужны компоненты В данном уроке рассматривается, что такое компоненты во фреймворке Vue и зачем они нужны.
Метод data В уроке говорится, почему теперь нельзя использовать объект data, а вместо него нужно использовать метод с аналогичным названием. Наглядно показано, какие ошибки могут из-за этого возникнуть и как метод их решает.
Локальная и глобальная регистрация В уроке рассматривается, как и зачем нужно регистрировать компоненты, как это сделать локально – внутри компонента, и глобально – используя глобальный объект. Показано, в чем отличие данных подходов.
Названия компонентов В этом уроке говорится про селекторы компонентов, как их нужно выбирать и в дальнейшем использовать.
Регистрация компонентов в .vue В этом уроке еще раз рассматривается подход регистрации компонентов, только уже не в HTML-файле, а в файле с расширением .vue.
Передача параметров компоненту В этом уроке рассмотрено, как связывать компоненты в приложении. Показывается, как передавать параметры от родительского компонента дочернему.
Валидация входящих параметров Для того, чтобы избежать ошибок, можно настроить валидацию входящих параметров в компонент очень гибким способом. Каким именно – рассматривается в данном уроке.
Передача параметров от дочернего компонента В этом уроке рассмотрено противоположное взаимодействие компонентов, от дочернего к родительскому.
Передача функции как параметр В этом уроке показано, как можно передавать функцию как параметр в дочерний компонент, и как это отразится на взаимодействии компонентов.
Связь дочерних компонентов В этом уроке показано, как связать 2 дочерних компонента. Разбирается первый подход – связь компонентов через родительский компонент.
Использование event emitter В этом уроке показано, как связать 2 одноуровневых компонента используя шину событий, которую можно получить, используя Vue.
Изолированные стили Изолированные стили
Передача HTML компоненту В этом уроке рассматривается, как можно передавать HTML-код компоненту как параметр. Показан механизм слотов и вывод кода в определенном месте.

Блок 5. Директивы

Длительность: 0:59:10

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

Создание своей директивы В данном уроке рассматривается, как можно создать свою собственную директиву.
Взаимодействие с элементом В данном уроке показано, как директива взаимодействует с элементом к которому она была применена.
Жизненный цикл директивы Как и в случае с компонентом, в директиве также присутствуют различные важные этапы ее жизни, и в уроке разбирается каждый из них.
Параметры в директивах В данном уроке рассмотрено, как передавать и обрабатывать параметры, которые были переданы внутрь директивы.
Аргументы в директивах В этом уроке говорится про другой вид параметров, которые можно передать в директиву – аргументы.
Модификаторы Как и у встроенных директив, у наших директив также может быть любое количество модификаторов. В уроке показывается, как их можно использовать и обработать.
Локальная регистрация Как и компоненты, директивы можно изолировать и регистрировать локально, или же наоборот – глобально. В уроке рассмотрено, как это сделать.

Блок 6. Фильтры и Миксины

Длительность: 0:31:46

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

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

Блок 7. Работа с формами

Длительность: 1:00:26

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

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

Блок 8. Валидация форм с Vuelidate

Длительность: 0:51:22

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

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

Блок 9. Роутинг с Vue-router

Длительность: 1:35:35

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

Установка Vue-router В данном уроке рассматривается, как установить новый плагин для Vue, который будет отвечать за роутинг и навигацию между страницами.
Настройка роутера В данном уроке показывается, как правильно оформить инициализацию роутера, какой формат поддерживает библиотека и что нужно использовать.
Создание навигации В уроке создается верхняя панель навигации, и рассмотриваюся способы создания ссылок, которые будут перенаправлять на другие страницы без перезагрузки окна браузера.
Обозначение активной ссылки В этом уроке рассматриваются способы и тонкости определения текущего состояния роутинга и стилистического обозначения активной ссылки.
Динамические роуты В этом уроке показано, как сделать роуты динамическими – у них будет изменяемая часть. Также показано, как обрабатывать параметры в компоненте.
Программная навигация В этом уроке рассматривается, как совершать навигацию уже не в шаблоне, а в самом компоненте.
Вложенные роуты В данном уроке показан способ создания роутов любого уровня вложенности.
Передача параметров В данном уроке показан другой вид параметров, которые можно передавать по URL-адресу и обрабатывать в компонентах – гет параметры.
Хэш и скролл В этом уроке показано, как передавать хэш в адресной строке и делать скролл в нужное место страницы.
Редирект В этом уроке рассмотрен способ редиректа с различных страниц на другие, и обработку ошибки ненайденного роута.
Защита роутов В уроке рассматривается способ защиты роутов с помощью такой сущности как guard. Рассматривается несколько мест и способов, где можно реализовать подобный функционал.
Ленивая загрузка В данном уроке рассмотрено, что такое ленивая загрузка и как с помощью данной технологии увеличить производительность вашего приложения.

Блок 10. Работа с сервером с Vue-resource

Длительность: 0:49:48

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

Настройка приложения В этом уроке создается каркас приложения, в котором будем рассматривать функционал работы библиотеки. Настраивается сервер и устанавливается плагин.
Создание объектов POST В данном уроке показывается, как использовать библиотеку и отправлять POST запросы для создания записей в базе данных.
Получение объектов GET В этом уроке показывается, как отправлять GET запросы для того, чтобы получить данные с сервера.
Использование resource В данном уроке рассматривается, что такое resource и как данная технология может облегчить работу с AJAX-запросами.
Глобальная настройка Разбирается способ глобальной настройки приложения для того, чтобы конфигурировать проект было намного проще и быстрее.
Интерсепторы В этом уроке рассматривается такой концепт как интерсепторы, зачем они нужны и как с помощью них вы можете управлять http-запросами.

Блок 11. Работа с данными с Vuex

Длительность: 0:44:33

В данном блоке рассматривается плагин, который позволяет очень гибко и удобно управлять данными, работая с Vue. Рассматривается концепция Vuex, как его регистрировать, как взаимодействовать с данными внутри него: забирать, получать, изменять, и многое другое.

Установка Vuex В этом уроке показано, как можно установить плагин Vuex и начать его использовать.
Использование state Рассматривается, как пользоваться стейтом в библиотеки, зачем он нужен, каким принципам отвечает и почему стоит использовать именно стейт для связи разных элементов.
Использование getters В данном уроке рассматривается, что такое геттеры и почему данная сущность оптимизирует работу со стейтом.
Использование mutations В данном уроке рассматривается, что такое мутации в рамках библиотеки Vuex.
Использование actions В этом уроке поясняется почему для изменения стэйта нужно использовать именно экшены, каким принципам они должны отвечать и как их использовать.
Оптимизация с помощью модулей В этом уроке показывается, как можно оптимизировать структуру стора путем модульной декомпозиции структуры стейта.

Блок 12. Создание SPA приложения на material design и firebase

Длительность: 6:02:45

Данный модуль посвящен практической части курса, где все, что давалось в теоретической части курса, будет применено на практике. В данном блоке создается SPA приложение, которое является Serverless – приложением, которое работает без серверной части. При этом будет полностью рабочая база данных в облаке, на сервисе Firebase от Google. Там будет реализован хостинг, база данных, хранение картинок и регистрация с авторизацией пользователей.

В качестве дизайна будет выбран Material Design от Google. Приложение будет полностью адаптивным, то есть оно будет одинаково хорошо отображаться на любом экране. По смыслу это будет приложение, в котором будет возможность просматривать и создавать объявления о продаже чего-либо и прием заявок. Будет реализован личный кабинет, возможность загружать картинки, редактировать объявления и просматривать заявки.

Создание проекта В данном уроке начинается создание проекта и устанавливается с помощью Vue CLI и Vuetify приложение на Material Design на webpack-сборке.
Обзор приложения В данном уроке рассматриваются все файлы и папки в новом приложении.
Создание тулбара Начиная с данного урока, создается каркас нашего приложения. Создается верхнее навигационное меню и параллельно рассматривается, как работать с библиотекой Vuetify.
Добавление ссылок и адаптация В данном уроке создается левое меню, которое будет заменять верхний тулбар, если не будет места, и выведется в два компонента ссылки всего приложения.
Регистрация роутов В данном уроке зарегистрируются все страницы нашего компонента, а также создаются их шаблоны.
Создание страницы логина Полностью реализуется функционал страницы логина с валидацией полей и отправкой формы. Будут выводиться разные сообщения об ошибках в случае неправильно введенных данных, так что пользователь всегда сможет знать, что он делает не так.
Создание страницы регистрации В этом уроке создается вся функциональная часть для страницы регистрации с валидацией, сообщениями об ошибках и проверкой идентичности паролей.
Создание главной страницы В уроке создается главная домашняя страница нашего приложения. В нее будет входить адаптивный слайдер изображений и карточки разных объявлений, которые также будут выстраиваться в зависимости от ширины экрана.
Создание страницы заказов Создается пока только визуальная часть страницы заказов, где в дальнейшем будет возможность отслеживать заказы, которые пришли от разных людей на ваши объявления.
Создание страницы формы Создается визуальная часть страницы, в которой будут создаваться новые объявления. Будет выполнена валидация каждого из полей, но пока без загрузки изображений.
Создание страницы списка В этом уроке создается макет страницы списка всех созданных объявлений.
Создание страницы объявления Создается страница отдельного объявления. Будут приниматься параметры из адресной строки и в зависимости от их будут выводиться нужные данные об объявлении.
Подключение Vuex В этом уроке подключается библиотека Vuex для работы с данными и перемещается все взаимодействия уже непосредственно в среду общего стора.
Добавление объявлений Реализуется возможность добавлять новых объявлений уже через общую шину Vuex, где добавление будет работать в динамическом режиме. Также полностью переписывается все взаимодействие объявлений на Vuex.
Настройка firebase В данном уроке настраивается firebase в проект и рассматривается, какие функции у нее есть.
Регистрация пользователей В этом уроке создается функционал регистрации пользователей через сервер и базу данных, где уже будут сохраняться наши значения.
Логин пользователей В данном уроке реализуется возможность зарегистрированным пользователям выполнять вход в систему под своими данными.
Вывод ошибок Если будут приходить какие-то ошибки с сервера, например, пароль неправильный, то будет компонент, который будет отвечать за вывод этих данных в красивом формате.
Поддержание сессии пользователя Рассматривается, как, используя firebase, можно узнать, что пользователь уже вошел в систему, и сделать ему авто авторизацию, чтобы он каждый раз не вписывал свои данные.
Защита роутов Реализуется защита приватных страниц приложения таким образом, что пользователи, которые не залогинились в систему, не смогут просматривать некоторые из них, например, создавать новые объявления или видеть список своих объявлений.
Создание объявления в firebase В этом уроке с помощью данных, введенных в форму на сайте, будет заноситься новая запись в базу данных firebase и хранить уже ее на сервере.
Загрузка объявлений по умолчанию В этом уроке будут подгружаться все объявления, что есть в базе данных, и сразу показываться пользователю.
Загрузка изображений в firebase Реализуется возможность загрузки изображений. Будет реализована обработка входящего файла изображения с помощью Vue, далее осуществится показ его превью, а потом загрузится изображение на удаленный сервер firebase storage и привяжется новая картинка к нужному объявлению.
Создание модального окна редактирования В этом уроке создается адаптивное модальное окно, с помощью которого можно редактировать наши объявления.
Редактирование объявления В этом уроке реализуется функционал для редактирования объявления, где будет возможность редактировать его на лету и сразу же в базе данных.
Создание окна покупки В этом уроке создается адаптивное модальное окно, в котором будет осуществляться заказ через интересующее нас объявление.
Создание и обработка заказов В этом уроке создается новая таблица в базе данных для записи заявок по покупке определенных объявлений.
Управление цветами В этом уроке рассматривается, как с помощью простой конфигурации приложения полностью изменить его цветовую гамму за несколько кликов.
Подключение препроцессоров В уроке показано, как можно подключить препроцессор stylus к проекту и начать использовать его возможности глобально и внутри каждого компонента.
Заключение В данном заключительном уроке подводится итог того приложения, которое создавалось.

НЕКОТОРЫЕ СКРИНШОТЫ УРОКОВ

БОНУСНЫЕ КУРСЫ

БОНУС 1

Премиум-курс по JavaScript

  • Количество уроков: 24
  • Продолжительность: 19:20:54
  • Автор: Виктор Гавриленко

Это теоретический курс, в котором от простого к сложному рассматриваются основы языка JavaScript.

В данном курсе рассмотрены: синтаксис языка JavaScript, переменные, типы данных, рассматривается, что такое выражения, инструкции, функции, объекты, массивы.

Показана работа со строками, датой и временем, математическими расчетами.

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

БОНУС 2

Премиум-курс по NodeJS

  • Количество уроков: 10
  • Продолжительность: 01:58:10
  • Автор: Владилен Минин

Данный курс предназначен для тех, кто уже знаком с основами JavaScript, но никогда не работал с такой платформой как NodeJS.

Курс будет полезен тем, кто хочет повторить и научиться работать с серверным JavaScript. В курсе рассмотрен NodeJS с самых основ: от установки данного инструмента на компьютер до создания собственного веб-сервера.

Показано, как работать с пакетным менеджером NPM, модульность JavaScript конструкций, файл package.json, работа с файлами через JavaScript и многое другое. Все темы разобираются на практике и показано, как реализовывать тот или иной функционал.

БОНУС 3

Премиум-курс по Webpack

  • Количество уроков: 20
  • Продолжительность: 03:18:34
  • Автор: Владилен Минин

В курсе рассмотрены основы такого мощного инструмента как Webpack, а точнее его новая версия – Webpack 2. В курсе очень подробно разбирается эта технология: что это такое, где оно применяется, как его установить и использовать.

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

БОНУС 4

Премиум-курс по EcmaScript 6

  • Количество уроков: 17
  • Продолжительность: 03:09:53
  • Автор: Владилен Минин

Данный курс по ES6 предназначен для тех, кто хочет следовать современным трендам веб-разработки. Речь идет о новой спецификации языка JavaScript – ES6 (EcmaScript 6). Данная спецификация привнесла большое количество нововведений в язык, которые подробно рассматрены в этом курсе.

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

Также рассматривается, как преобразуются некоторые фичи ES6 в ES5, и реализуется несколько из них, чтобы понимать, как оно работает.

БОНУС 5

Анимации

  • Количество уроков: 8
  • Продолжительность: 01:13:24
  • Автор: Владилен Минин

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

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

БОНУС 6

Деплой Vue приложения

  • Количество уроков: 2
  • Продолжительность: 00:29:09
  • Автор: Владилен Минин

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

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

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

Автор курса

Автор видеокурса Владилен Минин

  • Высокооплачиваемый профи Frontend-разработки. Подготовил более 100 FrontEnd-разработчиков вживую
  • Занимает должность Senior Frontend Developer крупной международной компании
  • Специализируется на разработке больших корпоративных порталов для международных рынков в формате SPA на современных фреймворках
  • Является Team Lead во многих внутренних проектах компании
  • Участвует в обучении студентов Frontend-разработке
  • Программированием занимается уже более 6 лет, 4 из которых были посвящены Frontend-разработке
  • Ежемесячный доход стабильно находится у отметки в 200 тысяч рублей
  • Автор видеокурса «Препроцессоры Sass и Less. Автоматизация и упрощение Frontend-разработки»
  • Автор видеокурса «Angular 4 c Нуля до Профи. Полное руководство для современной веб-разработки»
  • Автор видеокурса «Telegram-бот мастер. Практический курс создания бота»
  • Автор различных обучающих курсов по препроцессорам, Angular 4, ReactJS и другим тематикам Frontend-разработки

Сколько стоит курс

Мгновенное скачивание

Сразу после успешной оплаты на указанный вами email придет ссылка для мгновенного скачивания курса на ваш жесткий диск


7 870 руб.

Не дорого ли это

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

Эти знания окупаются за 1-2 дня работы на самой обычной средней работе в веб-студии или с одного скромного заказа на фрилансе.

Есть ли альтернативы

По нашему мнению, ни один другой видеокурс на рынке не дает «в одной коробке» настолько исчерпывающие ТЕОРЕТИЧЕСКИЕ и ПРАКТИЧЕСКИЕ знания по технологии Vue.js. 

На момент выхода видеокурса (апрель 2018 года) на рынке Рунета мы не обнаружили ни единого полноценного видеокурса либо тренинга на тему обучения работе с фреймворком Vue.js, поэтому не сможем привести вам цены для сравнения. Типичные цены на тренинги в аналогичных темах начинаются с отметки 15-20 тысяч рублей и доходят до 50 тысяч рублей, и даже намного выше.

Почему видеокурс покупать выгоднее
чем участвовать в тренингах

Наше обучение построено в формате видеокурса.

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

Но при этом – в 3-5, а иногда и 10 раз дешевле!

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

Вы самостоятельно изучаете курс в удобное для Вас время и в любом месте.

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

Сколько зарабатывают разработчики на Vue

Давайте обратимся к сайту https://hh.ru/ и посмотрим, какую оплату труда предлагают разработчикам, владеющим Vue

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

Нам можно доверять

WebForMyself известно высочайшим качеством материалов и профессиональным уровнем нашей команды.

За все это время издательство выпустило более 30 видеокурсов на самые разные темы сайтостроения и веб-дизайна.

Тотальная 3-уровневая гарантия!

Издательство WebForMyself.com предоставляет на все свои продукты уникальную 3-уровневую гарантию вашей удовлетворенности…

Гарантия №1

БЕЗУСЛОВНЫЙ ВОЗВРАТ ДЕНЕЖНЫХ СРЕДСТВ ПО ПЕРВОМУ ТРЕБОВАНИЮ

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

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

Деньги вы сможете получить обратно любым удобным для вас способом по первому вашему требованию.

Срок действия гарантии возврата средств – 90 дней с момента получения вами курса.

Гарантия №2

ВЫСОЧАЙШЕЕ КАЧЕСТВО

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

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

В практической части с нуля создается полноценное web-приложение доски объявлений – полностью рабочее современное приложение, основанное на самых передовых технологиях 2018 года.

Гарантия №3

ПОЛУЧЕНИЕ КУРСА

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

Объем видеокурса составляет 5 Гбайт – скачивание займет от нескольких минут до нескольких десятков минут (в зависимости от скорости вашего Интернет-провайдера).

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

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

ОТЗЫВЫ КЛИЕНТОВ

Сергей Дударев

Сергей Дударев

Что мне запомнилось больше всего из курса? Умение автора разделить материал: о чём необходимо рассказать, возможно даже «разжевать».

Главный результат — перспектива работы и дальнейшего совершенствования для начинающего WEB программиста! Возможность верстать достаточно сложные макеты и создавать сайты без углубленного понимания и знания CSS и JavaScript в современных стандартах HTML5 и CSS3.

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

Прослушав вводные уроки бесплатного курса Bootstrap 3, оценив качество материала, способ представления да и просто лексику автора (Андрей Кудлай) и сравнив с тем материалом, который присутствует в интернете без сомнений решил приобрести курс «Фреймворк Bootstrap: практика адаптивной верстки от А до Я»

Чему я научился, изучив курс? Уверенно ориентироваться в основных разделах фреймворка. Понять, что верстку практически любого макета можно достаточно быстро осуществить средствами Bootstrap.

Ответы на частые вопросы

Кто такой Frontend-разработчик (Frontend Developer)?

Frontend-разработка — это создание клиентской части сайта.

Соответственно, Frontend-разработчик занимается версткой шаблона сайта и созданием пользовательского интерфейса сайта (веб-приложения).

Какие минимальные знания требуются для изучения курса?

Освоить знания из курса сможет даже самый новичок в и JavaScript и фронтэнд-разработке.

Все, что вам необходимо для изучения этого видеокурса – знание HTML и CSS на базовом уровне. Такие знания можно получить из нашего бесплатного мини-курса на странице https://webformyself.com/minikurs/html5/, бесплатных уроков, а также из нашего продвинутого видеокурса: https://webformyself.com/html5/.

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

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

В каком порядке изучать блоки курса

Для более качественного освоения материала мы рекомендуем следующий порядок изучения блоков курса:

  1. Бонус 1. Премиум-курс по JavaScript
  2. Бонус 2. Премиум-курс по NodeJS
  3. Бонус 3. Премиум-курс по Webpack
  4. Бонус 4. Премиум-курс по EcmaScript 6
  5. Основной курс. Часть 1. Теория Vue.js
  6. Основной курс. Часть 2. Практика. Разработка SPA приложения
  7. Бонус 6. Деплой Vue приложения
  8. Бонус 5. Анимации

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

На какой период рассчитывать изучение курса?

Условно, уделяя 2-3 часа в день теории и практике в свободном темпе, всего за 2-3 месяца можно полностью изучить материалы курса с полного нуля.

Если же у вас есть хотя бы базовые знания по HTML, CSS и JavaScript, то изучение курса будет более быстрым, около 1-1,5 месяца.

Какие виды оплаты вы принимаете?

  • JustClick — возможность оплаты следующими способами: Visa, MasterCard, электронные деньги (Вебмани, Киви, Яндекс-деньги), интернет-банкинг, терминалы и салоны связи (Евросеть, Связной, Яндекс-деньги), платежные системы (RBKMoney), денежные переводы (Банковский перевод, Альфа-клик, Промсвязьбанк, Контакт, Лидер).
  • PayPal — международная система оплаты PayPal.

Могу ли я приобрести ваш курс из дальнего зарубежья?

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

Куда можно обратиться, если возникнут вопросы?

По всем техническим, организационным и финансовым вопросам вы можете обращаться в нашу службу поддержки: http://support.webformyself.com

Какие требования к ПК для прохождения видеокурса?

Требования самые минимальные: процессор 800 MHz, оперативная память 512 МБ, звуковая карта (можно встроенную в материнскую плату), видеокарта (можно встроенную в материнскую плату), DVD-дисковод (для физической версии) и операционная система Windows 2000/XP/Vista/7/8.1/10.

Вы принимаете оплату на ваш банковский счет?

Нет, к сожалению, пока что оплату на наш банковский счет мы не принимаем.

Нужна ли доплата за бонусы?

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

На какие гарантии я могу рассчитывать?

1. Гарантия качества

2. Гарантия получения курса

3. Гарантия возврата денег. В данном курсе действует правило возврата средств при обращении в течение 3 месяцев с момента покупки курса.

Для более детальной информации о наших гарантиях читайте в разделе гарантий выше.

Отправляете ли вы видеокурс по почте?

Нет. Этот видеокурс продается только в электронной версии и доступен для скачивания мгновенно после оплаты. Это очень удобно, намного быстрее (мгновенно) и дешевле, если сравнивать с отправкой дисков по почте.

Можно ли смотреть курс на Mac?

Да, можно. Меню курса сверстано в html-формате, таким образом вы сможете смотреть курс через любой браузер.

Требуется ли знание английского для изучения вашего курса?

Нет, знание английского языка не требуется.

Попробуйте без риска

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

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

Ваш успех – в ваших руках!

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

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

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

С верой в ваш успех –
Автор видеокурса Владилен Минин

Действуйте!

По-настоящему хороших разработчиков на Vue пока не так много. Ключевое слово – «пока». Такая ситуация продлится еще очень недолго.

Именно СЕГОДНЯ спрос на специалистов есть, а на рынке труда есть ощутимый дефицит грамотных специалистов!

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