Этот пост изначально был опубликован на 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, чтобы узнать больше о программировании, создании, писательстве и карьере🥰