9 проектов, которые помогут стать фронтенд-мастером в 2023 году

Введение

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

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

Конечно, Vue и Angular также имеют внушительное количество пользователей. Кроме того, есть Svelte и такие универсальные фреймворки, как Next.js и Nuxt.js. А еще  —  Gatsby, Gridsome, Quasar и многие другие.

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

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

Приложение для поиска фильмов (React)

Первым проектом может стать приложение для поиска фильмов с помощью React. Вот финальная заставка этого приложения.

Что вы изучите

Вы закрепите навыки владения React, используя относительно новый API Hooks. В примере проекта используются компоненты React, много хуков, внешний API и несколько стилей CSS.

Технологии и функции

• Rect с хуками;


• create-react-app;


• JSX;


• CSS.

Без использования каких-либо классов этот проект познакомит вас с функциональностью React и поможет в дальнейшей работе.

Пример проекта. Можно делать все точно по руководству или добавляйте свои детали.

Чат (Vue)

Еще один замечательный проект  —  это чат на основе библиотеки JavaScript VueJS.

Приложение будет выглядеть примерно так.

Что вы изучите

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

Технологии и функции

• Vue;


• Vuex;


• Vue Router;


• Vue CLI;


• Pusher;


• CSS.

Этот отличный проект для изучения и совершенствования навыков разработки c Vue в 2023 году. Руководство к действию находится здесь.

Приложение с прогнозом погоды (Angular 8)

Попробуйте создать с помощью Google Angular 8 красивое приложение с прогнозом погоды.

Что вы изучите

Этот проект позволит приобрести ценные навыки создания приложения с нуля, от дизайна и разработки до развертывания.

Технологии и функции

• Angular 8;


• Firebase;


• серверный рендеринг;


• CSS с Grid Layout и Flexbox;


• адаптируемость к мобильным устройствам;


• темный режим;


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

Особая ценность этого проекта заключается в комплексном подходе. Вы знакомитесь со всем процессом разработки  —  от проектирования до окончательного развертывания.

Воспользуйтесь этим примером.

Приложение для списка задач (Svelte)

Svelte  —  новинка среди фреймворков и одна из наиболее популярных технологий в 2023 году.

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

Что вы изучите

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

Технологии и функции

• Svelte 3;


• компоненты;


• стили CSS;


• синтаксис ES 6.

Хороших проектов на Svelte для быстрого старта пока не так много. Но этот вполне подходит.

Онлайн-магазин (Next.js)

Next.js  —  наиболее популярный фреймворк для создания приложений React, которые поддерживают рендеринг на стороне сервера.

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

Что вы изучите

Узнаете, как настроить среду разработки Next.js: создавать новые страницы и компоненты, извлекать данные, а также стилизовать и развертывать приложение Next.

Технологии и функции

• Next.js;


• компоненты и страницы;


• сбор данных;


• стилевое форматирование;


• развертывание;


• SSR и SPA.

Подробное руководство здесь.

Многоязычный блог (Nuxt.js)

Nuxt.js для Vue  —  то же самое, что Next.js для React. Это отличный фреймворк для объединения возможностей рендеринга на стороне сервера и одностраничных приложений.

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

Что вы изучите

Вы изучите все этапы создания сайта с использованием Nuxt.js, от первоначальной настройки до окончательного развертывания.

Он использует такие интересные функции Nuxt, как страницы и компоненты, а также стилизацию с SCSS.

Технологии и функции

• Nuxt.js;


• компоненты и страницы;


• модуль Storyblok;


• миксины (мixin);


• Vuex для управления состоянием;


• SCSS для стизизации;


• связующее ПО Nuxt.

Этот проект охватывает множество функций Nuxt.js.

Блог (Gatsby)

Gatsby  —  это генератор статических сайтов, использующий возможности React и GraphQL. Вот результат этого проекта.

Что вы изучите

Узнаете, как использовать Gatsby для создания оригинального блога, который пригодится для публикации статей, используя React и GraphQL.

Технологии и функции

• Gatsby;


• React;


• GraphQL;


• плагины и темы;


• MDX/Markdown;


• Bootstrap CSS;


• шаблоны.

Если вы когда-нибудь собирались вести блог, этот пример поможет создать его с помощью React и GraphQL.

WordPress  —  неплохой вариант, но с Gatsby можно создавать производительные сайты, используя React, что является отличной комбинацией.

Блог (Gridsome)

Для Gridsome верно то же самое, что и для Gatsby. Оба используют GraphQL в качестве уровня данных, но Gridsome применяет VueJS. Это также генератор статических сайтов, который помогает создавать отличные блоги.

Что вы изучите

Этот проект научит создавать простой блог с использованием Gridsome, GraphQL и Markdown. Кроме того, продемонстрирована возможность развернуть приложение через Netlify.

Технологии и функции

• Gridsome;


• Vue;


• GraphQL;


• Markdown;


• Netlify.

Конечно, это не самый полный урок, но он охватывает основные понятия Gridsome и Markdown и может стать хорошей отправной точкой.

Аудиоплеер, похожий на SoundCloud (Quasar)

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

Что вы изучите

Если другие проекты ориентированы главным образом на веб-версии, то в этом показан процесс создания мобильного приложения с использованием Vue через фреймфорк Quasar.

Для этого вам понадобится рабочая настройка Cordova со настроенным Android Studio/Xcode. Если ее нет, то в руководстве есть ссылка на сайт Quasar, где дана инструкция по настройке.

Технологии и функции

• Quasar;


• Vue;


• Cordova;


• WaveSurfer;


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

Этот небольшой проект демонстрирует возможности Quasar для создания мобильных приложений.

Заключение

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

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