9 проектов для фронтенд-разработчика на 2020 год

0
7033
views

Саймон Холдорф, full-stack разработчик, пишущий на JavaScript, составил список проектов, которыми может заняться любой специалист по фронтенду, желающий прокачать свои навыки.

Проекты для фронтендеров
Photo by CJ Dayrit on Unsplash

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

Возьмем, к примеру, React — детище Facebook с открытым исходным кодом. Четыре года назад это был весьма скромный проект, а сегодня это выбор №1 для JavaScript-разработчиков во всем мире. Хотя, конечно, Vue и Angular тоже имеют достаточно поклонников. А еще есть Svelte и универсальные фреймворки вроде Next.js или Nuxt.js, и Gatsby, и Gridsome, и Quasar — список можно продолжать еще долго. Если вы хотите быть хорошим JavaScript-разработчиком, экспертом в этой области, вам нужно иметь какой-то опыт работы с разными фреймворками и библиотеками (это кроме умения работать со старым добрым JS).

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

1. Постройте приложение для поиска фильмов, используя React (с хуками)

Первое, с чего можно начать, это создание приложения для поиска фильмов. Иллюстрация ниже показывает, как может выглядеть такое приложение в итоге:

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

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

Создание этого приложения позволит вам улучшить навыки работы с React с использованием относительно нового Hooks API. В проекте, описанном в руководстве, используются компоненты React, много хуков, внешний api и, естественно, стилизация при помощи CSS.

Технический стек и функционал

  • React и Hooks
  • create-react-app
  • JSX
  • CSS

Отказ от использования классов в этих проектах будет прекрасным введением в функциональный React и определенно поможет вам в 2020 году. Пример проекта можно посмотреть здесь. Вы можете как следовать руководству, так и делать все по своему усмотрению!

2. Постройте приложение-чат, используя Vue

Еще один хороший проект — создание приложения-чата. Попробуйте сделать это при помощи моей любимой библиотеки JavaScript — VueJS. Приложение должно выглядеть примерно так:

Проект приложения-чата

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

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

Технический стек и функционал

  • Vue
  • Vuex
  • Vue Router
  • Vue CLI
  • Pusher
  • CSS

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

3. Постройте красивое приложение для показа прогноза погоды, используя Angular 8

Вот пример приложения, созданного при помощи Angular 8 от Google:

Проект погодного приложения

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

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

Технический стек и функционал

  • Angular 8
  • Firebase
  • Рендеринг на сервере
  • CSS с Grid Layout и Flexbox
  • Приложение должно быть отзывчивым и mobile friendly
  • Темный режим
  • Красивый пользовательский интерфейс

Что мне особенно нравится в этом проекте, что все эти вещи изучаешь не изолированно, а в ходе процесса разработки и деплоймента. За этот проект определенно стоит взяться! Руководство смотрите здесь.

4. Постройте To-Do приложение, используя Svelte

Svelte еще совсем ребенок по сравнению с такими маститыми игроками как React, Vue и Angular, но, тем не менее, в 2020 году он будет одним из самых привлекательных новых фреймворков. Допустим, To-Do приложения не самая горячая тема, но разработка такой программы позволит вам отточить свои навыки использования Svelte. Выглядеть ваше приложение может примерно так:

Приложение - список задач

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

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

Технический стек и функционал

  • Svelte 3
  • Компоненты
  • Стилизация при помощи CSS
  • Синтаксис ES6

Хороших проектов на базе Svelte для начинающих не так уж много, а данный проект я считаю вполне подходящим. Возможно, вы создадите свой, более понятный туториал по Svelte (я тогда включу ссылку на него в аналогичный пост в следующем году).

5. Постройте корзину для e-commerce, используя Next.js

NextJs это самый популярный фреймворк для создания React-приложений, из коробки поддерживающий рендеринг на сервере. Закончив этот проект, вы научитесь создавать корзину для e-commerce, например, такую:

Корзина для онлайн-магазина

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

Занимаясь этим проектом, вы научитесь настраивать среду разработки Next.js, создавать новые страницы и компоненты, делать выборку данных, работать со стилями и выпускать готовое приложение.

Технический стек и функционал

  • Next.js
  • Компоненты и страницы
  • Выборка данных
  • Стилизация
  • Деплоймент
  • SSR и SPA

«Жизненный» проект e-commerce это всегда хорошая возможность изучить что-то новое. Руководство можно найти здесь.

6. Создайте полноценный многоязычный сайт-блог, используя Nuxt.js

Nuxt.js для Vue это то же, что Next.js для React. Отличный фреймворк, комбинирующий мощь рендеринга на сервере и одностраничные приложения. Сайт, который вы создадите, будет выглядеть примерно так:

Проект многоязычного сайта-блога

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

Этот проект научит вас создавать полноценный сайт при помощи Nuxt.js. Вы пройдете весь путь, от настройки до выпуска. В проекте используются многие классные фичи Nuxt, такие как страницы и компоненты, а также стилизация при помощи SCSS. Руководство можно посмотреть здесь.

Технический стек и функционал

  • Nuxt.js
  • Компоненты и страницы
  • Модуль Storyblok
  • Mixins
  • Vuex для управления состоянием
  • SCSS для стилизации
  • Связующее ПО Nuxt

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

7. Создайте блог, используя Gatsby

Gatsby это отличный генератор статических сайтов, в основе работы которого лежат React и GraphQL. Вот результат выполнения проекта:

Проект блог

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

Следуя руководству и используя преимущества Gatsby, вы создадите выдающийся блог, который сможете применить для публикации собственных статей. При этом в ходе работы вы будете использовать React и GraphQL.

Технический стек и функционал

  • Gatsby
  • React
  • GraphQL
  • Плагины и темы
  • MDX / Markdown
  • Bootstrap CSS
  • Шаблоны

Если у вас мелькала мысль начать вести блог, это прекрасный шанс создать его с нуля, используя React и GraphQL. Я не говорю, что WordPress это плохой выбор, но при помощи Gatsby можно создавать высокопроизводительные сайты, используя при этом React.

8. Создайте блог, используяи Gridsome

Gridsome для Vue… Хотя это у нас уже было про Next/Nuxt, но все сказанное справедливо и для Gridsome с Gatsby. Gridsome это тоже отличный генератор статических сайтов, который поможет вам в создании прекрасных блогов:

Проект сайта-блога

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

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

Технический стек и функционал

  • Gridsome
  • Vue
  • GraphQL
  • Markdown
  • Netlify

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

9. Постройте приложение-аудиоплеер, аналогичное SoundCloud, используя Quasar

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

Проект мобильного приложения

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

Остальные проекты фокусируются, главным образом, на веб-приложениях, а здесь вы будете создавать мобильное приложение. При этом вы будете использовать Vue через фреймворк Quasar. Для работы вам понадобится готовый к работе Cordova с уже сконфигурированным android studio / xcode. Если у вас ничего подобного нет, в руководстве вы найдете ссылку на сайт Quasar, где поясняется настройка.

Технический стек и функционал

  • Quasar
  • Vue
  • Cordova
  • Wavesurfer
  • UI-компоненты

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

Заключение

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

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here