9 проектов, которые вам нужно сделать, чтобы стать продвинутым Frontend разработчиком
20 лучших советов и приемов JavaScript для повышения скорости и эффективности работы
12.01.2022
Как начать использовать Typescript
13.01.2022
Неважно, вы новичок в программировании или уже опытный разработчик, вам необходимо постоянное изучение новых концепций и языков/фреймворков, чтобы не отставать от быстрых изменений в отрасли IT.
Возьмем, к примеру, React, который имеет открытый исходный код, всего четыре года назад, он уже стал выбором номер один для разработчиков JavaScript по всему миру.
Но и Vue и Angular также имеют положительный отклик от разработчиков. Есть еще Svelte и универсальные фреймворки, такие как Next.js или Nuxt.js, и Gatsby, и Gridsome, и Quasar, и так далее. Если вы хотите стать продвинутым JavaScript-разработчиком, вы должны работать с различными фреймворками и библиотеками.
Чтобы помочь вам расти, как Frontend-разработчик, мы подобрали статью с 9 различными заданиями. Каждый проект имеет отдельную тему, фреймворки и библиотеки. Вы можете их воплотить и добавить в свое портфолио. Помните, ничто не поможет вам больше, чем реальная практика, так что вперед, оттачивайте свое мастерство и воплощайте его в жизнь!
1. Создание приложения для поиска фильмов с помощью React (с хуками)
Это первый проект с которого начнем создавать продукты на React. Ниже приведено изображение того, как будет выглядеть конечное приложение:
Пример проекта React
Чему вы научитесь
Создавая данное приложение, вы улучшите свои навыки работы с React, используя относительно новый API Hooks. В примере проекта используются компоненты React, множество хуков, внешний API и, конечно, некоторые стилизации с помощью CSS.
Технологический стек и возможности
- React with Hooks
- create-react-app
- JSX
- CSS
Не используя никаких классов, этот проект дает вам отличную точку входа в функциональный react. Вы можете найти пример проекта здесь:
Следуйте точно руководству или добавляйте свои фишли!
2. Создание приложения для чата с помощью Vue
Еще один отличный проект для вас - это создание приложения для чата с помощью JavaScript библиотеки VueJS. Приложение будет выглядеть примерно так:
Чему вы научитесь
Следуя этому руководству, вы научитесь создавать приложение Vue с нуля, создавать компоненты, маршруты, подключаться к сторонним сервисам и даже работать с аутентификацией.
Технологический стек и возможности
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Это действительно отличный проект для начала работы с Vue или для улучшения имеющихся навыков. Вы можете прочитать данный учебник:
3. Создайте красивое приложение с погодой с помощью Angular 8
Этот пример поможет вам создать красивое погодное приложение с помощью Angular 8 от Google: Пример проекта Angular
Чему вы научитесь
Этот проект научит вас ценным навыкам, таким как создание приложения с нуля, начиная с проектирования, разработки и заканчивая развертыванием на производстве.
Технологический стек и возможности
- Angular 8
- Firebase
- Server-Side Rendering
- CSS with Grid Layout and Flexbox
- Mobile friendly & responsive
- Dark Mode
- Beautiful UI
Данный проект интересен тем, что вы изучаете не отдельные вещи, а весь процесс разработки от дизайна до окончательного развертывания. Вы должны обязательно попробовать этот проект!
4. Создайте приложение для ведения дел с помощью Svelte
Svelte вроде как новичок по сравнению с React, Vue и Angular, но, тем не менее, один из самых популярных в 2020 году. Приложения To-Do не самые популярные, но они действительно помогут вам отточить навыки работы с Svelte. Пример проекта Svelte
Чему вы научитесь
В этом уроке вы узнаете, как создать приложение с помощью Svelte 3 от начала до конца. В нем используются компоненты, стилизация и обработчики событий.
Технологический стек и возможности
- Svelte 3
- Components
- Styling via CSS
- ES 6 syntax
Существует не так много хороших стартовых проектов Svelte, поэтому данный проект очень неплохой для начала.
5. Построение корзины электронной коммерции с помощью Next.js
Nextjs - самый популярный фреймворк для создания React-приложений, поддерживающих рендеринг на стороне сервера. Этот проект покажет вам, как построить корзину для электронной коммерции, выглядящую следующим образом:
Пример проекта Next
Чему вы научитесь
В этом проекте вы узнаете, как настроить среду разработки Next.js, создать новые страницы и компоненты, получить данные, стилизовать и развернуть приложение Next.
Технологический стек и возможности
- Next.js
- Components and Pages
- Data Fetching
- Styling
- Deployment
- SSR and SPA
6. Создание полноценного мультиязычного сайта-блога Nuxt.js
Nuxt.js для Vue - это то же самое, что Next.js для React. Отличный фреймворк для объединения возможностей рендеринга на стороне сервера и одностраничных приложений. Конечное приложение, которое вы можете создать, будет выглядеть следующим образом:
Пример проекта Nuxt
Чему вы научитесь
Этот пример проекта научит вас, как создать полноценный веб-сайт с использованием Nuxt.js от начальной настройки до окончательного развертывания. В нем используются многие возможности Nuxt, такие как страницы и компоненты, а также стилизация с помощью SCSS.
Технологический стек и возможности
- Nuxt.js
- Components and Pages
- Storyblok module
- Mixins
- Vuex for state management
- SCSS for styling
- Nuxt middlewares
7.Создание блога с помощью Gatsby
Gatsby - это отличный генератор статических сайтов, который использует React и GraphQL под капотом. Вот результат этого проекта:
Пример проекта Gatsby
Чему вы научитесь
В этом руководстве вы узнаете, как использовать Gatsby для создания хорошего блога, который вы вполне можете использовать для написания собственных статей, используя при этом React и GraphQL.
Технологический стек и возможности
- Gatsby
- React
- GraphQL
- Plugins & Themes
- MDX / Markdown
- Bootstrap CSS
- Templates
Если вы когда-либо хотели завести блог, то это отличный пример того, как это можно сделать, используя React и GraphQL. Я не говорю, что WordPress всегда является плохим выбором, но с Gatsby вы можете создавать высокопроизводительные сайты, используя React, что является отличной комбинацией!
8.Создание блога с помощью Gridsome
Gridsome - это Vue. Мы уже говорили о Next/Nuxt, но то же самое верно и для Gridsome и Gatsby. Оба используют GraphQL в качестве слоя данных, но Gridsome использует VueJS. Это также отличный генератор статических сайтов, который поможет вам создавать отличные блоги:
Пример проекта Gridsome
Чему вы научитесь
Этот проект научит вас создавать простой блог для начала работы с Gridsome, GraphQL и Markdown. Он также расскажет о том, как развернуть приложение с помощью Netlify.
Технологический стек и возможности
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Это, конечно, не самое полное руководство, но оно охватывает основные концепции Gridsome и Markdown и может стать хорошей отправной точкой.
8. Создание приложения аудиоплеера, похожего на SoundCloud, с помощью Quasar
Quasar - это еще один фреймворк Vue, который также может быть использован для создания мобильных приложений.В этом проекте вы создадите приложение аудиоплеера, выглядящее следующим образом: Пример проекта Quasar
Чему вы научитесь
В то время как другие проекты в основном посвящены веб-приложениям, этот проект покажет вам, как создать мобильное приложение с использованием Vue на основе фреймворка Quasar. У вас уже должна быть рабочая установка Cordova с настроенным android studio / xcode. Если нет, то в учебнике есть ссылка на сайт Quasar, где показано, как это настроить.
Технологический стек и возможности
- Quasar
- Vue
- Cordova
- Wavesurfer
- UI Components
Небольшой проект, демонстрирующий возможности Quasar для создания мобильных приложений.
В этой статье представлены 9 проектов, которые вы можете сделать, каждый из которых сфокусирован на определенном фреймворке или библиотеке JavaScript. Теперь выбор за вами: Попробуете ли вы что-то новое, используя фреймворк, который вы раньше не использовали? Или вы хотите укрепить свои навыки, выполнив проект для технологии, в которой вы уже немного разбираетесь? Или вы будете полагаться на свой любимый фреймворк/библиотеку и делать все проекты с его помощью?
Выбор за Вами, всем успехов!
