Руководство по изучению front-end фреймворка

Создание проектов

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

Заметки:

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

1. Найти и воспроизвести (клон)

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

Примеры API конечной точки:

Для других примеров API конечных точек проверьте этот репозиторий github.

Чему вы научитесь:

  • Использование HTTP-клиента для запроса API конечной точки.
  • Использование прослушивателя событий клавиатуры, например, как только пользователь нажимает ввести API конечной точки вызова, чтобы получить данные результата.
  • Узнаете, как отображать данные (одни данные или один массив данных).
  • Стилизация вашего вывода данных с интерполяцией.
  • Структурирование вывода.
  • Master-Details: при перечислении результатов, создание ссылки для каждого элемента в результате на страницу сведений о предмете.
  • Узнаете, как передать данные с главной страницы на страницу сведений.

2. Аутентификация в приложении

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

Чему вы научитесь:

  • Защита маршрута (для некоторых страниц требуется только аутентифицированные пользователи).
  • Как отправить и сохранить JWT (JSON web token), чтобы создать запросы, требующие аутентифицированного пользователя.

3. CRUD приложение

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

Примеры проектов:

  • Приложения для хранения закладок.
  • Приложение список задач.

Чему вы научитесь:

  • Проверка ввода пользователя в форме и отображать ошибку, если пользователь вставляет неверные данные.
  • Как сделать put, delete, post и получить HTTP-запрос.
  • Интеграция вашего приложения с любыми фреймворками.
  • Трей для добавления возможностей аутентификации для вашей серверной инфраструктуры.

4. Приложение чат

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

Чему вы научитесь:

  • Научиться использовать управляющие положением решения, такие как redux для react, ngrx для angular 2+ или vuex для vuejs и как интегрировать его с вашим клиентским приложением.
  • Сделайте свое приложение более реактивным (прослушайте состояние сети и сообщите пользователю новое сообщение).

Бесплатные учебные курсы на английском

Laravel 5.4 and VUEjs

Laravel 5.4 and VUEjs

Angular 2 & Firebase App

Angular 2 & Firebase App