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.

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

Читайте также:

Читайте нас в TelegramVK и Дзен


Перевод статьи Simon Holdorf: 9 Projects You Can Do to Become a Front-End Master in 2023

Предыдущая статьяОтладка API Java Message Service с использованием Lightrun
Следующая статьяДата и время в JavaScript