Още 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 с Grid и 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
• Плaгини и теми
• 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