Още 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
• Компоненти
• Стилове с помощта на 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 за стилизиране
• Nuxt междинни софтуерни модули

Това е наистина страхотен проект, който включва много удивителни възможности на 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