Още 9 проекта за усъвършенстване на уменията в Front-End

Въведение

Независимо дали сте начинаещи в програмирането или вече опитен разработчик, изучаването на нови концепции и езици/фреймворкове е задължително, за да успеете да следвате тенденциите.

Нека да вземем, например, React — кодът, който Facebook публикува преди четири години, вече е номер едно избор за разработчиците на JavaScript по целия свят.

Vue и Angular, разбира се, също имат своя легитимна база поклоници. Има и Svelte и други универсални фреймворкове, като Next.js или Nuxt.js. И Gatsby, и Gridsome, и Quasar… и много други.

Ако искате да се представите като опитен разработчик на JavaScript, трябва да имате поне малък опит с различни фреймворкове и библиотеки — освен да работите с добрия стар JS.

За да ви помогна да станете майстор на фронт-енда през 2020 година, събрах девет различни проекта, всеки от които се фокусира върху различни фреймворкове и библиотеки на JavaScript като технически стек, който можете да създадете и добавите към вашето портфолио. Помнете, че нищо не ви помага повече от това да създавате неща на практика, така че продължете напред, активирайте ума си и направете това възможно.

Статья переведена при поддержке компании EDISON Software, которая прави виртуални пробни стаи за мултибрандови магазини, както и тества софтуер.

Приложение за търсене на филми с React (с хукове)

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

Какво ще научите
Като създавате това приложение, ще подобрите уменията си по React, използвайки сравнително новия API Hooks. В примера на проекта се използват компоненти на React, множество хукове, външен API и, разбира се, някои стилове на CSS.

Технически стек и функции

• React с хукове
• create-react-app
• JSX
• CSS

Без използването на каквито и да е класове, тези проекти ви дават идеална точка на вход в функционалния React и определено ще ви помогнат през 2020 година. Можете да намерите пример на проекта тук. Следвайте инструкциите или направете всичко по свой вкус.

Приложение за чат с Vue

Още един отличен проект за вас — създайте приложение за чат, използвайки любимата ми JavaScript библиотека: VueJS. Приложението ще изглежда по следния начин:

Какво ще научите
От това ръководство ще научите как да създадете приложение Vue от нулата — да създавате компоненти, да обработвате състояния, да създавате маршрути, да се свързвате с външни услуги и дори да обработвате удостоверяване.

Технически стек и функции

• Vue
• Vuex
• Vue Router
• Vue CLI
• Pusher
• CSS

Това е наистина страхотен проект, за да започнете работа с Vue или да подобрите съществуващите си умения, за да се ангажирате с програмирането през 2020 година. Можете да намерите урок тук.

Красиво приложение за преглед на времето с Angular 8

Този пример ще ви помогне да създадете красиво приложение за преглед на времето с Angular 8:

Какво ще научите
Този проект ще ви научи на ценни умения при създаването на приложения от нулата — започвайки от проектирането и приключвайки с разработката, до готово за разгръщане приложение.

Технически стек и функции

• Angular 8
• Firebase
• Рендериране на сървъра
• CSS с мрежа и Flexbox
• Мобилна съвместимост и адаптивност
• Тъмен режим
• Красив интерфейс

Това, което наистина много ми харесва в този всеобхватен проект, е, че не изучавате нещата изолирано. Вместо това изучавате целия процес на разработка — от проектирането до окончателното разгръщане.

To-Do приложение с помощта на Svelte

Svelte е като ново попълнение в компонентния подход — поне като подобие на React, Vue и Angular. И това е една от най-горещите новини за 2020 година.

To-Do приложенията не са задължително най-горещата тема, но наистина ще ви помогнат да усъвършенствате вашите умения в Svelte. То ще изглежда така:

Какво ще научите
От този урок ще научите как да създадете приложение чрез Svelte 3, от начало до край. Ще използвате компоненти, стилизиране и обработчици на събития.

Технически стек и функции

• Svelte 3
• FAudio
• Стилизиране с помощта на CSS
• Синтаксис ES 6

Не съществуват много добри стартови проекти с Svelte, затова намерих този добър вариант за начало.

Приложение для электронной коммерции с помощью Next.js

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

Този проект ще ви покаже как да създадете приложение за електронна търговия, което изглежда по следния начин:

Какво ще научите
В този проект ще научите как да разработвате с Next.js — да създавате нови страници и компоненти, да извличате данни, както и да стилизирате и разгъвате приложението Next.

Технически стек и функции

• Next.js
• Компоненти и страници
• Извличане на данни
• Стилизиране
• Разгръщане на проекта
• SSR и SPA

Винаги е хубаво да имаш реален пример, като приложение за електронна търговия, за да научиш нещо ново. Можете да намерите урок тук.

Полноценный мультиязычный блог с Nuxt.js

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

Какво ще научите

В този пример на проект ще научите как да създадете напълно функционален уебсайт с помощта на Nuxt.js — от начална настройка до окончателно разгръщане.

Той използва множество интересни функции, които Nuxt предлага, например страници и компоненти, както и стилизиране с помощта на SCSS.

Технически стек и функции

• Nuxt.js
• Компоненти и страници
• Модул Storyblock
• Миксини
• Vuex за управление на състоянието
• SCSS за стилизиране
• Nuxtmiddlewares

Това е наистина страхотен проект, който включва много отличителни възможности на Nuxt.js. Лично аз обичам да работя с Nuxt, така че си заслужава да го опитате, тъй като това ще ви направи отличен разработчик на Vue.

Блог с Gatsby

Gatsby е отличен генератор на статични сайтове, използващ React и GraphQL. Това е резултатът от проекта:

Какво ще научите

В това ръководство ще научите как да използвате Gatsby, за да създадете блог, който ще използвате за писане на собствени статии, използвайки React и GraphQL.

Технически стек и функции

• Gatsby
• React
• GraphQL
• Плъгини и теми
• MDX/Markdown
• Bootstrap CSS
• Шаблони

Ако някога сте искали да имате блог, това е отличен пример за това как да го направите, използвайки React и GraphQL.

Не казвам, че WordPress е лош избор, но с Gatsby можете да създавате високопроизводителни сайтове, използвайки React — което е удивителна комбинация.

Блог с Gridsome

Gridsome за Vue… Добре, вече имахме това с Next/Nuxt.
Но същото важи и за Gridsome и Gatsby. И двете използват GraphQL като слой данни, но Gridsome използва VueJS. Това също е страхотен генератор на статични сайтове, който ще ви помогне да създавате отлични блогове:

Какво ще научите

Този проект ще ви научи как да създадете прост блог, за да започнете работа с Gridsome, GraphQL и Markdown. В него също се обяснява как да разгръщате приложението чрез Netlify.

Технически стек и функции

• Gridsome
• Vue
• GraphQL
• Markdown
• Netlify

Това, разбира се, не е най-подробният урок, но обхваща основните концепции на Gridsome и Markdown и може да бъде добра отправна точка.

Аудио плеер, подобен на SoundCloud, с помощта на Quasar

Quasar е още един фреймворк на Vue, който може да се използва за създаване на мобилни приложения. В този проект ще създадете приложение за аудио плеър, например:

Какво ще научите

Докато други проекти се фокусират основно върху уеб приложения, този ще ви покаже как да създадете мобилно приложение, използвайки Vue и фреймворка Quasar.
Вие вече трябва да имате работеща Cordova с настроена Android Studio/Xcode. Ако нямате, в ръководството има линк към сайта на Quasar, където показват как да настроите всичко.

Технически стек и функции

• Quasar
• Vue
• Cordova
• WaveSurfer
• UI Компоненти

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

Източник: habr.com