hwdtech blog
9 проектов, которые вы можете создать, чтобы стать мастером front-end'а в 2020 году
Подборка из 9 проектов и туториалов, которые помогут вам развить свои навыки использования различных фреймворков и библиотек JavaScript.
17-02-2020
front-end, JavaScript, ReactJS, Vue, Angular
Время чтения: 7 минут
Сегодня мы перевели для вас очень интересный с практической точки зрения материал. Full-stack разработчик из Германии, Саймон Холдорф, приводит в своей статье ссылки на девять туториалов по созданию различных приложений с помощью фреймворков/библиотек JavaScript и объясняет, почему он считает именно их наиболее полезными и актуальными. Нам понравилась его подборка, и мы с удовольствием делимся ею с вами, но уже на русском языке. Вот ссылка на оригинал.
Вместо предисловия
Не важно, новичок ли вы в программировании или уже опытный разработчик. Постоянное изучение новых концепций, языков, библиотек и фреймворков – обязательное условие того, чтобы поспевать за стремительно меняющимися технологиями в этой отрасли.

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

Чтобы помочь вам стать front-end-мастерами в 2020 году, автор собрал 9 проектов, каждый на свою тему, с использованием различных JavaScript-фреймворков или библиотек. Эти проекты вы можете запустить, а также пополнить ими свое портфолио. Помните: ничего не поможет вам так хорошо развиваться в программировании и оттачивать свой ум, как работа с реальным кодом, так что дерзайте!
Создайте приложение для поиска фильмов с помощью React (с хуками)
Первое, с чего автор рекомендует начинать — это создание приложения для поиска фильмов с помощью React. В качестве примера того, как это можно сделать, он приводит следующий туториал https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/, в котором все очень подробно описано. Взгляните на скриншот финальной версии этого приложения: вот таким будет результат работы по данному обучающему материалу.

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

- React with Hooks;

- create-react-app;

- JSX;

- CSS.

В этом проекте не используются классы ( class components - прим. переводчика), что может стать для вас идеальной отправной точкой в использовании функционального React и точно поможет вам в 2020 году.
Создайте приложение-чат с Vue
Еще один отличный проект для вас - разработка приложения для чата с использованием любимой JavaScript-библиотеки автора - VueJS. Руководство по его созданию доступно по ссылке: https://www.sitepoint.com/pusher-vue-real-time-chat-app/. Давайте посмотрим, что у вас получится, если вы будете следовать инструкциям:
Что вы узнаете
Следуя этому руководству, вы узнаете, как настроить Vue-приложение с нуля, создавать компоненты, управлять состоянием приложения, интегрироваться с историей браузера, подключаться к сторонним сервисам и даже работать с поддержкой аутентификации.
Стек технологий и фичи:

- Vue;

- Vuex;

- Vue Router;

- Vue CLI;

- Pusher;

- CSS.

Это действительно отличный проект, чтобы познакомиться с Vue или улучшить свои навыки, необходимые для развития в 2020 году.
Создайте красивое приложение «Прогноз погоды» с Angular 8
Этот пример поможет вам разработать красочное приложение «Погода» с помощью Angular 8 от Google: https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e. Взгляните на скриншот, чтобы оценить дизайн и функционал!
Что вы узнаете
В процессе работы с этим всеобъемлющим проектом вы приобретете ценные навыки создания приложения с нуля, начиная с дизайна и заканчивая деплоем в продакшн. Вы не будете изучать отдельные технологии, а пройдете весь цикл разработки.
Стек технологий и фичи:

- Angular 8;

- Firebase;

- Server-Side Rendering;

- CSS with Grid Layout and Flexbox;

- Mobile friendly & responsive;

- Dark Mode;

- BeautifulUI;
Создайте «Планировщик дел» с помощью Svelte
Svelte своего рода «ребенок» по сравнению с такими «монстрами» как React, Vue и Angular, но, тем не менее, это один из самых привлекательных фреймворков в 2020 году. Скажем так, «ToDo»-приложения нельзя назвать «супер-горячей» темой, но разработка такого проекта действительно поможет вам отточить свои навыки разработки на Svelte. Вот ссылка на туториал: https://medium.com/codingthesmartway-com-blog/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6. А вот так будет выглядеть результат:
Что вы узнаете
Изучив данное руководство, вы узнаете, как сделать приложение с помощью Svelte 3 от начала до конца, используя компоненты, стили и обработчики событий.
Стек технологий и фичи:

- Svelte 3;

- Components;

- Styling via CSS;

- ES 6 syntax.

Существует не так много хороших стартовых проектов на Svelte, но автор подборки считает, что этот можно считать одним из лучших вариантов для начинающих. «Кто знает, может быть, именно вы создадите еще один, более полный, туториал по Svelte, который будет представлен в следующей версии этого поста?», - пишет Саймон.
Создайте карточку товара для интернет-магазина с помощью Next.js
NextJs — это самый популярный фреймворк для создания React-приложений, которые поддерживают рендеринг на стороне сервера. Этот проект покажет вам, как сделать карточку товара для интернет-магазина, которая выглядит следующим образом:
А вот и ссылка на туториал: https://snipcart.com/blog/next-js-ecommerce-tutorial.
Что вы узнаете
В этом проекте вы узнаете, как настроить среду разработки Next.js, создать новые страницы и компоненты, получить данные, стилизовать и развернуть подобное приложение.
Стек технологий и фичи:

- Next.js;

- Components and Pages;

- Data Fetching;

- Styling;

- Deployment;

- SSR and SPA;

Здорово, когда перед глазами пример, максимально приближенный к реальности, на котором можно изучить нечто новое.
Создайте полноценный многоязычный блог с помощью Nuxt.js
Nuxt.js для Vue - это то же самое, что Next.js для React. Отличный фреймворк, объединяющий возможности рендеринга на стороне сервера и одностраничных приложений (SPA). Попробуйте поработать с ним, воспользовавшись вот этим руководством: https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial. Приложение, которое вы сможете создать, будет выглядеть так:
Что вы узнаете
На примере этого проекта вы узнаете, как создать полноценный веб-сайт с использованием Nuxt.js от начальной настройки до окончательного развертывания. Вы используете множество интересных функций, которые Nuxt может предложить, например, страницы и компоненты, а также стилизацию с помощью SCSS.
Стек технологий и фичи:

- Nuxt.js;

- Components and Pages;

- Storyblok module;

- Mixins;

- Vuex for state management;

- SCSS for styling;

- Nuxt middlewares;

«Это действительно крутой проект, который демонстрирует множество замечательных возможностей Nuxt.js. Лично я очень люблю работать с Nuxt и считаю, что вам тоже стоит попробовать, так как это определенно улучшит ваши навыки разработки на Vue!» - советует автор.
Создайте блог с Gatsby
Gatsby - отличный генератор статических сайтов, у которого под капотом React и GraphQL. Вот туториал, с помощью которого нам предлагается разработать блог: https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc. А вот и результат:
Что вы узнаете
С помощью этого руководства вы узнаете, как использовать Gatsby для создания потрясающего блога, в котором вы сможете писать свои собственные статьи про использование React и GraphQL, например, на этом проекте.
Стек технологий и фичи:

- Gatsby;

- React;

- GraphQL;

- Plugins & Themes;

- MDX / Markdown;

- Bootstrap CSS;

- Templates.

Если вы когда-либо хотели завести блог – ваш час настал. Автор поста отмечает: «Я не говорю, что Wordpress – это всегда плохой выбор, но с помощью Gatsby вы можете создавать высокопроизводительные сайты, используя React. И это всегда потрясающая комбинация!».
Создайте блог с Gridsome
Итак, Gridsome для Vue – это… Только что мы приводили подобный пример с Next/Nuxt! То же самое верно для Gridsome и Gatsby. Оба применяют GraphQL как data layer, но Gridsome использует VueJS, а не React. Это также потрясающий статический генератор сайтов, который поможет вам создавать отличные блоги, например, с помощью вот этого туториала: https://www.telerik.com/blogs/building-a-blog-with-vue-and-markdown-using-gridsome. Посмотрите, что должно получиться у вас в итоге:
Что вы узнаете
Этот проект научит вас, как сделать простой блог, чтобы начать работать с Gridsome, GraphQL и Markdown. В нем также рассказывается, как развернуть приложение через Netlify.
Стек технологий и фичи:

- Gridsome;

- Vue;

- GraphQL;

- Markdown;

- Netlify;

Это, конечно, не самый всеобъемлющий туториал, но он охватывает основные концепции Gridsome и Markdown и может стать хорошей отправной точкой.
Создайте приложение-аудиоплеер в стиле SoundCloud с помощью Quasar
Quasar - это еще один Vue-фреймворк, который также можно использовать для разработки мобильных приложений. В этом проекте вы создадите приложение-аудиоплеер: https://www.learningsomethingnew.com/how-to-build-a-sound-cloud-like-audio-player-app-with-vue-js-quasar-and-wave-surfer. А выглядеть он будет следующим образом:
Что вы узнаете
В то время как другие проекты направлены в основном на разработку веб-приложений, этот покажет вам, как сделать мобильное приложение с использованием Vue при помощи фреймворка Quasar. У вас уже должна быть установлена мобильная среда разработки приложений Cordova с настроенным android studio/xcode. Если этого нет, то в руководстве есть ссылка на сайт Quasar, где хорошо показано, как все это настроить.
Стек технологий и фичи:

- Quasar;

- Vue;

- Cordova;

- Wavesurfer;

- UI Components.

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