9 проектов,

чтобы стать мастером

front-end'а в 2020 году

Не важно, новичок ли вы в программировании или уже опытный разработчик. Постоянное изучение новых концепций, языков, библиотек и фреймворков – обязательное условие того, чтобы поспевать за стремительно меняющимися технологиями в этой отрасли. Возьмем, к примеру, React - библиотеку с открытым исходным кодом от Facebook, которая всего за каких-то 4 года стала выбором номер один для JS-разработчиков по всему миру. Кроме того, есть еще Vue и Angular, у которых своя честно заслуженная «армия» последователей. Не будем забывать и про Svelte, а также универсальные фреймворки, такие как Next.js или Nuxt.js, Gatsby, Gridsome, Quasar и так далее, далее, далее… Если вы хотите проявить себя как опытный JavaScript-разработчик, вы должны иметь хотя бы некоторый опыт работы с различными фреймворками и библиотеками, не считая вашего основного «домашнего задания» - старого доброго JS. Чтобы помочь вам стать front-end-мастерами в 2020 году, автор собрал 9 проектов, каждый на свою тему, с использованием различных JavaScript-фреймворков или библиотек. Эти проекты вы можете запустить, а также пополнить ими свое портфолио. Помните: ничего не поможет вам так хорошо развиваться в программировании и оттачивать свой ум, как работа с реальным кодом, так что дерзайте!

Первое, с чего автор рекомендует начинать — это создание приложения для поиска фильмов с помощью React. В качестве примера того, как это можно сделать, он приводит следующий туториал, в котором все очень подробно описано. Взгляните на скриншот финальной версии этого приложения: вот таким будет результат работы по данному обучающему материалу. Следуйте инструкциям или сделайте все по своему вкусу!

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

- React with Hooks; - create-react-app; - JSX; - CSS.

В этом проекте не используются классы ( class components - прим. переводчика), что может стать для вас идеальной отправной точкой в использовании функционального React и точно поможет вам в 2020 году.

Еще один отличный проект для вас - разработка приложения для чата с использованием любимой JavaScript-библиотеки автора - VueJS. Руководство по его созданию доступно по ссылке. Давайте посмотрим, что у вас получится, если вы будете следовать инструкциям:

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

- Vue; - Vuex; - Vue Router; - Vue CLI; - Pusher; - CSS.

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

Этот пример поможет вам разработать красочное приложение «Погода» с помощью Angular 8 от Google. Взгляните на скриншот, чтобы оценить дизайн и функционал!

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

- Angular 8; - Firebase; - Server-Side Rendering; - CSS with Grid Layout and Flexbox; - Mobile friendly & responsive; - Dark Mode; - BeautifulUI;

Svelte своего рода «ребенок» по сравнению с такими «монстрами» как React, Vue и Angular, но, тем не менее, это один из самых привлекательных фреймворков в 2020 году. Скажем так, «ToDo»-приложения нельзя назвать «супер-горячей» темой, но разработка такого проекта действительно поможет вам отточить свои навыки разработки на Svelte. Вот ссылка на туториал.

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

- Svelte 3; - Components; - Styling via CSS; - ES 6 syntax.

Существует не так много хороших стартовых проектов на Svelte, но автор подборки считает, что этот можно считать одним из лучших вариантов для начинающих. «Кто знает, может быть, именно вы создадите еще один, более полный, туториал по Svelte, который будет представлен в следующей версии этого поста?», - пишет Саймон.

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

А вот и ссылка на туториал.

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

- Next.js; - Components and Pages; - Data Fetching; - Styling; - Deployment; - SSR and SPA; Здорово, когда перед глазами пример, максимально приближенный к реальности, на котором можно изучить нечто новое.

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

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

- Nuxt.js; - Components and Pages; - Storyblok module; - Mixins; - Vuex for state management; - SCSS for styling; - Nuxt middlewares;

Gatsby - отличный генератор статических сайтов, у которого под капотом React и GraphQL. Вот туториал, с помощью которого нам предлагается разработать блог. А вот и результат:

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

- Gatsby; - React; - GraphQL; - Plugins & Themes; - MDX / Markdown; - Bootstrap CSS; - Templates.

Если вы когда-либо хотели завести блог – ваш час настал. Автор поста отмечает: «Я не говорю, что Wordpress – это всегда плохой выбор, но с помощью Gatsby вы можете создавать высокопроизводительные сайты, используя React. И это всегда потрясающая комбинация!».

Итак, Gridsome для Vue – это… Только что мы приводили подобный пример с Next/Nuxt! То же самое верно для Gridsome и Gatsby. Оба применяют GraphQL как data layer, но Gridsome использует VueJS, а не React. Это также потрясающий статический генератор сайтов, который поможет вам создавать отличные блоги, например, с помощью вот этого туториала. Посмотрите, что должно получиться у вас в итоге:

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

- Gridsome; - Vue; - GraphQL; - Markdown; - Netlify;

Это, конечно, не самый всеобъемлющий туториал, но он охватывает основные концепции Gridsome и Markdown и может стать хорошей отправной точкой.

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

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

- Quasar; - Vue; - Cordova; - Wavesurfer; - UI Components.

Таким образом, у нас есть небольшой проект, демонстрирующий возможности Quasar для создания мобильных приложений.

В этой статье автор показал вам девять проектов, которые вы можете реализовать. Каждый из них предполагает использование разных фреймворков и библиотек JS, так что выбор за вами. Попробуете ли вы создать что-то новое с помощью фреймворка, который ранее не использовали? Или захотите улучшить свои навыки, обратив внимание на проект для технологии, которую уже знаете? Кстати, если вас особенно заинтересовали какие-либо из приведенных здесь туториалов, напишите об этом в комментариях. Мы обратим на него внимание и сделаем отдельный пост с переводом именно этого материала. Желаем успехов!