Руководство по изучению 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
Angular 2 & Firebase App
