Ще 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 з hook'ами
• створити-реагувати-додаток
• JSX
• CSS

Без використання будь-яких класів, ці проекти дають вам ідеальну точку входу в функціональний React і допоможуть вам у 2020 році. Ви можете знайти приклад проекту тут. Виконуйте інструкції або зробіть все на власний смак.

Програма чату за допомогою Vue

Ще один чудовий проект для вас – створити програму чату, використовуючи мою улюблену бібліотеку JavaScript: VueJS. Додаток буде виглядати приблизно так:

Що ви дізнаєтеся
З цього посібника ви дізнаєтеся, як зробити програму Vue з нуля — створювати компоненти, обробляти стани, створювати маршрути, підключатися до сторонніх сервісів і навіть обробляти автентифікацію.

Технічний стек та фічі

• Vue
• vuex
• Маршрутизатор Vue
• Вигляд CLI
• Штовхач
• CSS

Це дійсно чудовий проект, щоб почати працювати з Vue або покращити свої існуючі навички, щоб зайнятися розробкою у 2020 році. Ви можете знайти туторіал тут.

Прекрасний додаток для перегляду погоди з Angular 8

Цей приклад допоможе вам створити красиву програму для перегляду погоди за допомогою Angular 8:

Що ви дізнаєтеся
Цей проект навчить вас цінним навичкам при створенні додатків з нуля — починаючи з проектування і до розробки, аж до готового до розгортання програми.

Технічний стек та фічі

• Кутова 8
• Firebase
• Рендеринг на стороні сервера
• CSS з сіткою та Flexbox
• Mobile friendly та адаптивність
• темний режим
• Гарний інтерфейс

Що мені дійсно дуже подобається в цьому всеосяжному проекті, то це те, що ви не вивчаєте речі ізольовано. Натомість ви вивчаєте весь процес розробки — від проектування до остаточного розгортання.

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 middlewares

Це справді крутий проект, який включає безліч чудових можливостей Nuxt.js. Я особисто люблю працювати з Nuxt, так що вам варто спробувати його, тому що це також зробить вас чудовим розробником Vue.

Блог з Gatsby

Gatsby - відмінний генератор статичних сайтів, що використовує React та GraphQL. Це результат проекту:

Що ви дізнаєтеся

У цьому посібнику ви дізнаєтеся, як використовувати Gatsby для створення блогу, який ви будете використовувати для написання своїх власних статей, використовуючи React та GraphQL.

Технічний стек та фічі

• Гетсбі
• Реагувати
• GraphQL
• Плагіни та теми
• MDX/Markdown
• Завантажувальний CSS
• Шаблони

Якщо ви коли-небудь хотіли завести блог, це чудовий приклад як зробити його, використовуючи React і GraphQL.

Я не говорю, що WordPress є поганим вибором, але з Gatsby ви можете створювати високопродуктивні сайти, використовуючи React — що є дивовижною комбінацією.

Блог з Gridsome

Gridsome для Vue… Гаразд, у нас вже це з Next/Nuxt.
Але те саме вірно для Gridsome і Gatsby. Обидва використовують GraphQL як шар даних, але Gridsome використовує VueJS. Це також чудовий генератор статичних сайтів, який допоможе вам створювати чудові блоги:

Що ви дізнаєтеся

Цей проект навчить вас, як створити простий блог, щоб почати роботу з Gridsome, GraphQL та Markdown. У ньому також розповідається, як розгорнути програму через Netlify.

Технічний стек та фічі

• Гридсом
• Vue
• GraphQL
• Markdown
• netlify

Це, звичайно, не найповніший туторіал, але він охоплює основні поняття Gridsome і Markdown і може стати гарною відправною точкою.

Аудіо плеєр, схожий на SoundCloud, за допомогою Quasar

Quasar – це ще один фреймворк Vue, який можна використовувати для створення мобільних програм. У цьому проекті ви створите програму аудіо-плеєра, наприклад:

Що ви дізнаєтеся

У той час як інші проекти зосереджені в основному на веб-додатках, цей покаже вам, як створити мобільний додаток з використанням Vue та фреймворку Quasar.
У вас вже має бути працююча Cordova з налаштованою Android Studio/Xcode. Якщо ні, то в посібнику є посилання на веб-сайт Quasar, де вони показують, як все налаштувати.

Технічний стек та фічі

• Quasar
• Vue
• Кордова
• WaveSurfer
• UI Компоненти

Невеликий проект, демонструючий можливості Quasar для створення мобільних додатків.

Джерело: habr.com