Още 9 проекта за изостряне на уменията ви за работа в предния край

въведение

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

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

Vue и Angular, разбира се, също имат своя законна фен база. И тогава има Svelte и други рамки с общо предназначение като Next.js или Nuxt.js. И Гетсби, и Гридсъм, и Куазар ... и много повече.

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

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

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

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

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

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

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

• Реагирайте с куки
• създадете реагира приложенията
• jsx
• CSS

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

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

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

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

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

• Vue
• vuex
• Vue рутер
• CLI изглед
• Pusher
• CSS

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

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

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

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

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

• Ъглова 8
• Firebase
• Изобразяване от страната на сървъра
• CSS с Grid и Flexbox
• Удобство за мобилни устройства и адаптивност
• Тъмен режим
• Красив интерфейс

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

Приложение за задачи със Svelte

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

Приложенията за задачи не са непременно най-горещата тема, но те наистина ще ви помогнат да усъвършенствате уменията си в Selte. Ще изглежда така:

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

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

• Изящен 3
• Елементи
• Оформяне с CSS
• Синтаксис ES6

Няма много добри стартови проекти на 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 е страхотен генератор на статичен сайт, използващ React и GraphQL. Това е резултатът от проекта:

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

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

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

• Гетсби
• Реагират
• GraphQL
• Плъгини и теми
• MDX/Markdown
• Bootstrap CSS
• Templates

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

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

Блог с Gridsome

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

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

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

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

• Страшно
• Vue
• GraphQL
• Markdown
• netlify

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

Аудио плейър, подобен на SoundCloud, използващ Quasar

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

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

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

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

• квазер
• Vue
• Cordova
• вълнов сърфист
• Компоненти на потребителския интерфейс

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

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