Введение
Независимо от того, делаете ли вы первые шаги к изучению программирования или уже опытный разработчик в этой отрасли, изучение новых концепций и языков/фреймворков является обязательным, чтобы идти в ногу с быстрыми изменениями.
Возьмем, к примеру, React - открытый Facebook всего четыре года назад, он уже стал выбором номер один для JavaScript-разработчиков по всему миру.
Vue и Angular, конечно, также имеют свою законную базу последователей. Есть еще Svelte и универсальные фреймворки, такие как Next.js или Nuxt.js. И Gatsby, и Gridsome, и Quasar.
Если вы хотите блистать как опытный JavaScript-разработчик, вы должны иметь хотя бы небольшой опыт работы с различными фреймворками и библиотеками - помимо выполнения домашних заданий на старом добром JS.
Чтобы помочь вам стать мастером front-end, мы собрали девять сервисов, каждый из которых посвящен определенной теме и различным фреймворкам или библиотекам JavaScript в качестве технологического стека, который вы можете создать и добавить в свое портфолио. Помните, что ничто не поможет вам больше, чем реальное создание вещей, так что вперед, оттачивайте свой ум, и сделайте это.
Создание приложения для поиска фильмов с помощью React (с крючками)
Первое, с чего вы можете начать, - это создание приложения для поиска фильмов с помощью React. Ниже приведено изображение того, как будет выглядеть конечное приложение:
Чему вы научитесь
Создавая это приложение, вы сможете улучшить навыки программирования с React, используя относительно новый API Hooks. В примере проекта используются компоненты React, множество хуков, внешний API и, конечно, некоторые стилизации с помощью CSS.
Технологический стек и возможности
- React с крючками
- create-react-app
- JSX
- CSS
Не используя никаких классов, этот проект дает вам отличную точку входа в функциональный React и определенно поможет вам в 2020 году.
Создание приложения для чата с помощью Vue
Еще один замечательный проект для вас — это создание приложения для чата с помощью моей любимой библиотеки JavaScript: VueJS.
Приложение будет выглядеть примерно так:
Чему вы научитесь
Следуя этому руководству, вы узнаете, как создать приложение Vue с нуля - создание компонентов, работа с состояниями, создание маршрутов, подключение к стороннему сервису и даже работа с аутентификацией.
Технологический стек и возможности
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Создание красивого приложения для прогноза погоды с помощью Angular 8
Этот пример поможет вам создать красивое погодное приложение с помощью Angular 8 от Google:
Чему вы научитесь
Этот проект научит вас ценным навыкам и программированию приложения с нуля - начиная с проектирования и заканчивая разработкой и развертыванием на производстве.
Технологический стек и особенности
- Angular 8
- Firebase
- Рендеринг на стороне сервера
- CSS с Grid Layout и Flexbox
- Дружественный к мобильным устройствам и отзывчивый
- Темный режим
- Красивый пользовательский интерфейс
Что мне очень, очень нравится в этом комплексном проекте, так это то, что вы не изучаете что-то по отдельности. Вместо этого вы изучаете весь процесс разработки - от дизайна до конечного развертывания.
Создание приложения To-Do с помощью Svelte
Svelte - новичок на рынке, по крайней мере, по сравнению с React, Vue и Angular. Тем не менее, он является одним из самых популярных в 2023 году.
Окей, приложения для выполнения дел не обязательно являются самой горячей темой, но это действительно поможет вам отточить свои навыки работы с Svelte. Это будет выглядеть следующим образом:
Что вы узнаете
В этом уроке вы узнаете, как создать приложение с помощью Svelte 3 от начала до конца. В нем используются компоненты, стилизация и обработчики событий.
Технологический стек и особенности
- Svelte 3
- Компоненты
- Стилизация с помощью CSS
- Синтаксис ES 6
Построение корзины электронной коммерции с помощью Next.js
Next.js - это самый популярный фреймворк для создания React-приложений, которые поддерживают рендеринг на стороне сервера из коробки.
Этот проект покажет вам, как построить корзину для электронной коммерции, которая выглядит следующим образом:
Что вы узнаете
В этом проекте вы узнаете, как настроить среду разработки Next.js - создание новых страниц и компонентов, получение данных, стилизация и развертывание приложения Next.
Технологический стек и возможности
- js
- Компоненты и страницы
- Сбор данных
- Стилизация
- Развертывание
- SSR и SPA
Создание полноценного мультиязычного сайта-блога с помощью Nuxt.js
Nuxt.js для Vue - то же самое, что Next.js для React: отличный фреймворк для объединения возможностей рендеринга на стороне сервера и одностраничных приложений.
Конечное приложение, которое вы можете создать, будет выглядеть следующим образом:
Чему вы научитесь
Этот пример проекта научит вас создавать полноценный веб-сайт с помощью Nuxt.js - от начальной настройки до окончательного развертывания.
В нем используются многие возможности Nuxt, такие как страницы и компоненты, а также стилизация с помощью SCSS.
Технологический стек и возможности
- js
- Компоненты и страницы
- Модуль Storyblok
- Миксины
- Vuex для управления состояниями
- SCSS для стилизации
- Промежуточные модули Nuxt
Создание популярного блога с помощью Gatsby
Gatsby - это отличный генератор статических сайтов, который использует React и GraphQL под капотом. Вот результат этого проекта:
Чему вы научитесь
В этом руководстве вы узнаете, как использовать Gatsby для создания выдающегося блога, который вы будете использовать для написания своих статей, используя при этом React и GraphQL.
Технологический стек и возможности
- Gatsby
- React
- GraphQL
- Плагины и темы
- MDX/Markdown
- Bootstrap CSS
- Шаблоны
Создайте блог с помощью Gridsome
Gridsome - это Vue... Ладно, у нас уже было такое с Next/Nuxt.
Но то же самое верно и для Gridsome и Gatsby. Оба используют GraphQL в качестве слоя данных, но Gridsome использует VueJS. Это также потрясающий генератор статических сайтов, который поможет вам создавать отличные блоги:
Чему вы научитесь
Этот проект научит вас создавать простой блог для начала работы с Gridsome, GraphQL и Markdown
В нем также рассказывается о том, как развернуть приложение с помощью Netlify.
Технологический стек и возможности
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Создание SoundCloud-подобного приложения аудиоплеера с помощью Quasar
Quasar - это еще один фреймворк Vue, который также можно использовать для создания мобильных приложений.
В этом проекте вы создадите аудиоплеер, подобный этому:
Чему вы научитесь
В то время как другие проекты в основном посвящены веб-приложениям, этот проект покажет вам, как создать мобильное приложение, используя Vue с помощью фреймворка Quasar.
У вас уже должна быть рабочая установка Cordova с настроенным Android Studio/Xcode. Если нет, то в учебнике есть ссылка на сайт Quasar, где показано, как это настроить.
Технологический стек и возможности
- Quasar
- Vue
- Cordova
- WaveSurfer
- Компоненты пользовательского интерфейса
Заключение
В этой статье я показал вам девять проектов, которые помогут вам улучшить навыки программирования, каждый из которых сфокусирован на другом фреймворке или библиотеке JavaScript.
Теперь выбор за вами: Попробуете ли вы что-то новое, используя фреймворк, который вы раньше не использовали? Или вы хотите укрепить свои навыки, выполнив проект для технологии, в которой вы уже немного разбираетесь? Или вы будете полагаться на свой любимый фреймворк/библиотеку и делать все проекты в 2023 году с его помощью?
