Этот пост изначально был опубликован на The Smart Coder.

Вступление

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

Возьмем, к примеру, React - открытый исходный код Facebook всего четыре года назад, он уже стал выбором номер один для разработчиков JavaScript по всему миру.

Vue и Angular, конечно же, также имеют свою законную базу подписчиков. А еще есть Svelte и универсальные фреймворки, такие как Next.js или Nuxt.js. И Гэтсби, и Гридсом, и Квазар… и, и, и.

Если вы хотите проявить себя как опытный разработчик JavaScript, у вас должен быть хотя бы некоторый опыт работы с различными фреймворками и библиотеками - помимо домашней работы с помощью старого доброго JS.

Чтобы помочь вам стать мастером внешнего интерфейса, я собрал девять разных проектов, каждый из которых посвящен отдельной теме и разной структуре или библиотеке JavaScript в виде технологического стека, который вы можете создать и добавить в свое портфолио. Помните, ничто не помогает вам больше, чем создание вещей, так что продолжайте, оттачивайте свой ум и добейтесь этого.

Создайте приложение для поиска фильмов с помощью React (с хуками)

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

Что вы узнаете

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

Стек технологий и особенности

  • Реагируйте с помощью крючков
  • создать-реагировать-приложение
  • JSX
  • CSS

Без использования каких-либо классов эти проекты дают вам идеальную точку входа в функциональный React и определенно помогут вам в 2020 году.

Вы можете найти пример проекта здесь. Следуйте инструкциям или придайте им свой вкус.

Создайте приложение для чата с Vue

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

Приложение будет выглядеть примерно так:

Что вы узнаете

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

Стек технологий и особенности

  • Vue
  • Vuex
  • Vue Router
  • Vue CLI
  • Толкатель
  • CSS

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

Вы можете найти руководство прямо здесь.

Создайте приложение с красивой погодой с помощью Angular 8

Этот пример поможет вам создать красивое погодное приложение с помощью Google Angular 8:

Что вы узнаете

Этот проект научит вас ценным навыкам при создании приложения с нуля - начиная с проектирования и заканчивая разработкой и заканчивая развертыванием, готовым к производству.

Стек технологий и особенности

  • Угловой 8
  • Firebase
  • Серверный рендеринг
  • CSS с сеткой и Flexbox
  • Мобильный дружественный и отзывчивый
  • Темный режим
  • Красивый интерфейс

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

Вам действительно стоит сделать это.

Создайте приложение To-Do с Svelte

Стройный, если он в некотором роде новичок в блоке - по крайней мере, по сравнению с React, Vue и Angular. Но, тем не менее, это одна из самых ярких черт 2020 года.

Хорошо, приложения с делами не обязательно являются самой популярной темой, но они действительно помогут вам отточить свои навыки Svelte. Это будет выглядеть так:

Что вы узнаете

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

Стек технологий и особенности

  • Svelte 3
  • Компоненты
  • Стилизация с помощью CSS
  • Синтаксис ES 6

Хороших стартовых проектов Svelte не так уж и много, поэтому Я нашел этот неплохо для начала.

И, кто знает, может быть, именно вы создадите еще один, более подробный учебник по Svelte, который будет представлен в версии этого поста в следующем году?

Создайте корзину электронной коммерции с помощью Next.js

Next.js - самый популярный фреймворк для создания приложений React, которые из коробки поддерживают рендеринг на стороне сервера.

Этот проект покажет вам, как создать тележку для покупок в электронной коммерции, которая выглядит следующим образом:

Что вы узнаете

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

Стек технологий и особенности

  • Next.js
  • Компоненты и страницы
  • Получение данных
  • Укладка
  • Развертывание
  • ССР и СПА

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

Создайте полноценный многоязычный блог-сайт с помощью Nuxt.js

Nuxt.js для Vue - это то же самое, что Next.js для React: отличный фреймворк для объединения возможностей серверного рендеринга и одностраничных приложений.

Окончательное приложение, которое вы могли бы создать, будет выглядеть так:

Что вы узнаете

Этот пример проекта научит вас создавать полноценный веб-сайт с использованием Nuxt.js - от начальной настройки до окончательного развертывания.

Он использует многие интересные функции Nuxt, такие как страницы и компоненты, а также стили с помощью SCSS.

Стек технологий и особенности

  • Nuxt.js
  • Компоненты и страницы
  • Модуль Storyblok
  • Миксины
  • Vuex для управления состоянием
  • SCSS для укладки
  • Промежуточное ПО Nuxt

Это действительно крутой проект для вас, он охватывает многие замечательные функции Nuxt.js. Мне лично нравится работать с Nuxt, так что вам действительно стоит попробовать это, так как это также сделает вас лучшим разработчиком Vue.

Создайте блог с Гэтсби

Gatsby - отличный генератор статических сайтов, который использует React и GraphQL под капотом. Это результат этого проекта:

Что вы узнаете

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

Технологический стек и особенности

  • Гэтсби
  • Реагировать
  • GraphQL
  • Плагины и темы
  • Многомерные выражения / уценка
  • Загрузочный CSS
  • Шаблоны

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

Я не говорю, что WordPress всегда является плохим выбором, но с Gatsby вы можете создавать высокопроизводительные сайты, используя React - что является отличной комбинацией.

Создайте блог с помощью Gridsome

Gridsome - это Vue… Хорошо, у нас это уже было с Next / Nuxt.

Но то же самое и с Гридсомом и Гэтсби. Оба используют GraphQL в качестве уровня данных, но Gridsome использует VueJS. Это также отличный генератор статических сайтов, который поможет вам создавать отличные блоги:

Что вы узнаете

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

В нем также рассказывается, как развернуть приложение через Netlify.

Стек технологий и особенности

  • Gridsome
  • Vue
  • GraphQL
  • Уценка
  • Netlify

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

Создайте приложение для аудиоплеера, подобное SoundCloud, с помощью Quasar

Quasar - еще один фреймворк Vue, который также можно использовать для создания мобильных приложений.

В этом проекте вы создадите такое приложение для аудиоплеера:

Что вы узнаете

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

У вас уже должна быть рабочая установка Cordova с настроенным Android Studio / Xcode. В противном случае в руководстве есть ссылка на веб-сайт Quasar, где они показывают вам, как это настроить.

Стек технологий и особенности

  • Квазар
  • Vue
  • Кордова
  • WaveSurfer
  • Компоненты пользовательского интерфейса

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

Заключение

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

Теперь выбор за вами: попробуете ли вы что-то новое, используя фреймворк, который раньше не использовали? Или вы хотите укрепить свои навыки, выполнив проект для технологии, о которой вы уже кое-что знаете? Или вы будете полагаться на свой любимый фреймворк / библиотеку и будете делать с ним все проекты в 2020 году?

Недавно я запустил новую платформу, где я создаю бесплатный контент для сообщества. Если вас интересуют другие javascript-проекты, посмотрите их!

Если вам нравится то, что я пишу, и вы хотите поддержать меня и мою работу, подпишитесь на меня в Twitter, чтобы узнать больше о программировании, создании, писательстве и карьере🥰