Введение
Независимо от того, являетесь ли вы новичком в программировании или уже опытным разработчиком в этой отрасли, изучение новых концепций и языков/фреймворков является обязательным, чтобы идти в ногу со стремительными изменениями.
Возьмем, к примеру, React – открытый всего четыре года назад Facebook стал выбором номер один для JavaScript-разработчиков по всему миру.
Vue и Angular, конечно, также имеют своих последователей. Есть еще Svelte и универсальные фреймворки, такие как Next.js или Nuxt.js. И Gatsby, и Gridsome, и Quasar и т. д.
Если вы хотите стать опытным JavaScript-разработчиком, то должны уметь работать с различными фреймворками и библиотеками помимо выполнения домашних заданий на старом добром JS.
Чтобы помочь вам стать мастером front-end, я собрал девять проектов, каждый из которых посвящен определенной теме и различным фреймворкам или библиотекам JavaScript в качестве технологического стека, который вы можете создать и добавить в свое портфолио. Помните, ничто не поможет вам больше, чем реальные проекты, так что вперед, отточите свой ум и сделайте это.
Создание приложения для поиска фильмов с помощью React (с крючками)
Первое, с чего вы можете начать, – это создание приложения для поиска фильмов с помощью React. Ниже приведено изображение того, как будет выглядеть конечное приложение:
Чему вы научитесь
Создавая это приложение, вы улучшите свои навыки работы с React при помощи относительно нового API Hooks. В примере проекта используются компоненты React, множество хуков, внешний API и, конечно, некоторые стилизации с помощью CSS.
Технологический стек и возможности
- React с крючками
- Create-react-app
- JSX
- CSS
Не используя никаких классов, этот проект дает вам отличный старт в функциональный React и определенно поможет вам в 2023 году.
Пример проекта вы можете найти здесь. Следуйте этому руководству или сделайте его по своему вкусу.
Создание приложения для чата с помощью Vue
Еще один замечательный проект – это создание приложения для чата с помощью моей любимой библиотеки JavaScript: VueJS.
Приложение будет выглядеть примерно так:
Чему вы научитесь
Следуя этому руководству, вы узнаете, как сделать приложение Vue с нуля. Я расскажу о создании компонентов и маршрутов, работе с состояниями, подключении к стороннему сервису и даже аутентификации.
Технологический стек и возможности
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Это действительно отличный проект для начала работы с Vue или для улучшения уже имеющихся навыков в 2023 году.
Создание красивого погодного приложения с помощью Angular 8
Этот пример поможет вам создать красивое погодное приложение с помощью Angular 8 от Google:
Чему вы научитесь
Этот проект научит вас ценным навыкам при создании приложения с нуля, начиная с проектирования и заканчивая разработкой.
Технологический стек и возможности
- Angular 8
- Firebase
- Рендеринг на стороне сервера
- CSS с Grid Layout и Flexbox
- Удобство для мобильных устройств и отзывчивость
- Темный режим
- Красивый пользовательский интерфейс
Что мне очень нравится в этом комплексном проекте, так это то, что вы не проходите что-то по отдельности. Вместо этого вы изучаете весь процесс разработки от дизайна до конечного развертывания.
Создание приложения для выполнения дел с помощью Svelte
Svelte – новичок на рынке, по крайней мере, по сравнению с React, Vue и Angular. Тем не менее, он является одним из самых популярных в 2023 году.
Приложения для выполнения дел – не самая горячая тема, но они действительно помогут вам отточить свои навыки работы с Svelte. Это будет выглядеть следующим образом:
Что вы узнаете
В этом уроке вы узнаете, как создать приложение с помощью Svelte 3 от начала до конца. В нем используются компоненты, стилизация и обработчики событий.
Технологический стек и особенности
- Svelte 3
- Компоненты
- Стилизация с помощью CSS
- Синтаксис ES 6
Существует не так много хороших стартовых проектов по Svelte, поэтому я считаю этот неплохим для начала.
И, кто знает, может быть, именно вы создадите другой, более полный урок по 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
- Миксины
- Vuex для управления состояниями
- SCSS для стилизации
- Промежуточные модули Nuxt
Это действительно классный пример, который охватывает многие из замечательных возможностей Nuxt.js. Мне лично нравится работать с Nuxt, поэтому вам стоит попробовать этот проект. Он сделает вас лучшим разработчиком Vue.
Создайте блог с помощью Gatsby
Gatsby – это отличный генератор статических сайтов, который использует React и GraphQL. Вот результат этого проекта:
Чему вы научитесь
В этом руководстве вы узнаете, как использовать Gatsby для создания выдающегося блога, который вы будете использовать для написания своих статей, используя при этом React и GraphQL.
Технологический стек и возможности
- Gatsby
- React
- GraphQL
- Плагины и темы
- MDX/Markdown
- Bootstrap CSS
- Шаблоны
Если вы когда-либо хотели завести блог, то это отличный пример того, как это можно сделать, используя React и GraphQL.
Я не говорю, что WordPress – плохой выбор, но с Gatsby вы можете создавать высокопроизводительные сайты, используя React – а это потрясающая комбинация.
Создание блога с помощью Gridsome
Gridsome – это Vue ... Ок, мы уже использовали его в Next/Nuxt.
Но то же самое верно и для 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 для создания мобильных приложений.
Заключение
В этой статье я показал вам девять проектов, которые вы можете создать. Каждый из них сосредоточен на одном фреймворке или библиотеке JavaScript.
Теперь выбор за вами: Попробуете ли вы что-то новое при помощи фреймворка, который вы раньше не использовали? Или вы хотите укрепить свои навыки, выполнив проект, в котором вы уже немного разбираетесь? Или вы будете полагаться на свой любимый фреймворк/библиотеку и делать все проекты в 2023 году с его помощью?
Если вам нравится то, что мы публикуем в блоге, и вы хотите поддержать нашу работу, пожалуйста, подпишитесь на нас, чтобы узнать больше о программировании, создании, написании статей и карьере.
