Саймон Холдорф, 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
https://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-2605840841257248&output=html&h=60&slotname=5658181595&adk=1355428316&adf=1614774510&pi=t.ma~as.5658181595&w=468&lmt=1621857090&psa=0&format=468×60&url=https%3A%2F%2Ftechrocks.ru%2F2019%2F10%2F13%2F9-projects-for-front-end-developers%2F%3Ffbclid%3DIwAR0aW-LxytVZHhLBREb0Gwbm3yl9DKj2X8scic4lYsNEauBLn9QQa6UBmhI&flash=0&wgl=1&adsid=ChEI8J2thQYQzuX0pJySqsr6ARJMACsQijhKkvyoLDYW5GveZoB5kJ6xhpInQvhjibKA4DiBJuq-GKtIjumQ5sUHXSAgxKQRtzu0eqkKLT6kFS162a-anvX_lavG51GAdA&uach=WyJXaW5kb3dzIiwiMTAuMCIsIng4NiIsIiIsIjkwLjAuNDQzMC4yMTIiLFtdXQ..&dt=1621857070894&bpp=75&bdt=1825&idt=1007&shv=r20210517&cbv=%2Fr20190131&ptt=9&saldr=aa&abxe=1&cookie=ID%3Df7d52fd69a57cb09-223bfd4e1ec80043%3AT%3D1621857070%3ART%3D1621857070%3AS%3DALNI_MaYdLPghFMiPDjgWKcAVwx25zJtMw&prev_fmts=0x0&nras=1&correlator=6668382523757&frm=20&pv=1&ga_vid=169690370.1621857071&ga_sid=1621857072&ga_hid=1649802023&ga_fc=0&u_tz=180&u_his=1&u_java=0&u_h=768&u_w=1366&u_ah=728&u_aw=1366&u_cd=24&u_nplug=3&u_nmime=4&adx=441&ady=2809&biw=1349&bih=625&scr_x=0&scr_y=345&eid=42530671&oid=3&pvsid=2688393016873369&pem=991&ref=https%3A%2F%2Fl.facebook.com%2F&eae=0&fc=896&brdim=0%2C0%2C0%2C0%2C1366%2C0%2C1366%2C728%2C1366%2C625&vis=1&rsz=o%7C%7CopeEbr%7C&abl=CS&pfx=0&fu=0&bc=31&jar=2021-05-24-11&ifi=1&uci=a!1&btvi=1&fsb=1&xpc=JSOuOgTDIC&p=https%3A//techrocks.ru&dtd=19698
Еще один хороший проект — создание приложения-чата. Попробуйте сделать это при помощи моей любимой библиотеки 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 года, вы можете или попробовать что-нибудь новое, или сосредоточиться на уже известных вам технологиях, чтобы углубить знания. Выбор за вами.