Саймон Холдорф, full-stack разработчик, пишущий на JavaScript, составил список проектов, которыми может заняться любой специалист по фронтенду, желающий прокачать свои навыки.
Не важно, начинающий вы программист или уже достаточно опытный — в этой сфере деятельности в любом случае приходится постоянно учиться и осваивать новые концепции (языки, фреймворки и т. д.), просто потому что все очень быстро меняется.
Возьмем, к примеру, 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 года, вы можете или попробовать что-нибудь новое, или сосредоточиться на уже известных вам технологиях, чтобы углубить знания. Выбор за вами.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]