Úvod
Či už ste v programovaní nováčik alebo skúsený vývojár, učiť sa nové koncepty a jazyky/rámce je v tomto odvetví nevyhnutnosťou, aby ste držali krok s trendmi.
Vezmite si napríklad React, ktorý Facebook otvoril len pred štyrmi rokmi a už sa stal voľbou číslo jeden pre vývojárov JavaScriptu po celom svete.
Vue a Angular, samozrejme, majú tiež svoju legitímnu fanúšikovskú základňu. A potom je tu Svelte a ďalšie univerzálne frameworky ako Next.js alebo Nuxt.js. A Gatsby, Gridsome a Quasar... a oveľa viac.
Ak sa chcete ukázať ako skúsený vývojár JavaScriptu, mali by ste mať aspoň nejaké skúsenosti s rôznymi frameworkami a knižnicami – okrem práce so starým dobrým JS.
Aby sme vám pomohli stať sa majstrom front-endu v roku 2020, zostavil som deväť rôznych projektov, z ktorých každý sa zameriava na iný rámec JavaScriptu a knižnicu ako technologický balík, ktorý môžete zostaviť a pridať do svojho portfólia. Pamätajte, že nič vám nepomôže viac, ako skutočné vytváranie vecí, takže sa posuňte vpred, použite svoju myseľ a urobte to
Článok bol preložený s podporou EDISON Software, ktorá a .
Aplikácia na vyhľadávanie filmov pomocou React (s háčikmi)
Prvá vec, s ktorou by ste mohli začať, je vytvoriť aplikáciu na vyhľadávanie filmov pomocou React. Nižšie je obrázok, ako bude vyzerať konečná aplikácia:
Čo sa naučíš
Vytvorením tejto aplikácie zlepšíte svoje schopnosti React pomocou relatívne nového rozhrania Hooks API. Ukážkový projekt používa komponenty React, veľa háčikov, externé API a samozrejme nejaký štýl CSS.
Tech stack a funkcie
- Reagujte s háčikmi
- vytvoriť reagujú-app
- JSX
- CSS
Bez použitia akýchkoľvek tried vám tieto projekty poskytujú dokonalý vstupný bod do funkčného Reactu a určite vám pomôžu v roku 2020. môžeš nájsť . Postupujte podľa pokynov alebo si ho vytvorte podľa seba.
Chatová aplikácia s Vue
Ďalším skvelým projektom, ktorý musíte urobiť, je vytvoriť chatovaciu aplikáciu pomocou mojej obľúbenej knižnice JavaScript: VueJS. Aplikácia bude vyzerať asi takto:
Čo sa naučíš
V tomto návode sa naučíte, ako vytvoriť aplikáciu Vue od začiatku – vytvárať komponenty, spracovávať stav, vytvárať trasy, pripájať sa k službám tretích strán a dokonca aj spracovávať autentifikáciu.
Tech stack a funkcie
- Vue
- vuex
- Smerovač Vue
- CLI pohľad
- Pusher
- CSS
Toto je skutočne skvelý projekt, ktorý vám umožní začať s Vue alebo zlepšiť svoje existujúce zručnosti, aby ste sa dostali do vývoja v roku 2020. môžeš nájsť .
Krásna aplikácia na počasie s Angular 8
Tento príklad vám pomôže vytvoriť krásnu aplikáciu počasia pomocou Angular 8:
Čo sa naučíš
Tento projekt vás naučí cenné zručnosti pri vytváraní aplikácií od začiatku – od návrhu cez vývoj až po aplikáciu pripravenú na nasadenie.
Tech stack a funkcie
- Uhlové 8
- Firebase
- Vykresľovanie na strane servera
- CSS s Grid a Flexbox
- Priateľské k mobilom a prispôsobivosť
- Tmavý režim
- Krásne rozhranie
Čo sa mi na tomto všeobsiahlom projekte naozaj páči, je to, že neštudujete veci izolovane. Namiesto toho sa naučíte celý proces vývoja, od návrhu až po konečné nasadenie.
Aplikácia To-Do pomocou Svelte
Svelte je ako nový chlapec v prístupe založenom na komponentoch – prinajmenšom podobný React, Vue a Angular. A toto je jedna z najhorúcejších noviniek pre rok 2020.
Aplikácie s úlohami nie sú nevyhnutne najhorúcejšou témou, ale skutočne vám pomôžu zdokonaliť vaše zručnosti Svelte. Bude to vyzerať takto:
Čo sa naučíš
Tento tutoriál vám ukáže, ako vytvoriť aplikáciu pomocou Svelte 3, od začiatku do konca. Budete používať komponenty, štýly a obslužné programy udalostí
Tech stack a funkcie
- Štíhly 3
- Komponenty
- Styling pomocou CSS
- Syntax ES 6
Nie je veľa dobrých štartovacích projektov Svelte, tak som zistil .
Aplikácia elektronického obchodu pomocou Next.js
Next.js je najpopulárnejší framework na vytváranie aplikácií React, ktoré podporujú vykresľovanie na strane servera hneď po vybalení.
Tento projekt vám ukáže, ako vytvoriť aplikáciu elektronického obchodu, ktorá vyzerá takto:
Čo sa naučíš
V tomto projekte sa naučíte, ako vyvíjať pomocou Next.js – vytvárať nové stránky a komponenty, extrahovať údaje a upravovať a nasadzovať aplikáciu Next.
Tech stack a funkcie
- Next.js
- Komponenty a stránky
- Vzorkovanie údajov
- štylizácia
- Nasadenie projektu
- SSR a SPA
Vždy je skvelé mať príklad zo skutočného sveta, ako je aplikácia elektronického obchodu, aby ste sa naučili niečo nové. Môžeš .
Plnohodnotný viacjazyčný blog s Nuxt.js
Nuxt.js je pre Vue, to, čo Next.js je pre React: skvelý rámec na kombináciu výkonu vykresľovania na strane servera a jednostránkových aplikácií
Konečná aplikácia, ktorú môžete vytvoriť, bude vyzerať takto:
Čo sa naučíš
V tomto vzorovom projekte sa naučíte, ako vytvoriť kompletnú webovú stránku pomocou Nuxt.js, od počiatočného nastavenia až po konečné nasadenie.
Využíva mnoho skvelých funkcií, ktoré Nuxt ponúka, ako sú stránky a komponenty a štýly pomocou SCSS.
Tech stack a funkcie
- Nuxt.js
- Komponenty a stránky
- Modul príbehového bloku
- Hagfish
- Vuex pre riadenie štátu
- SCSS pre styling
- Middleware Nuxt
, ktorý obsahuje mnoho skvelých funkcií Nuxt.js. Osobne milujem prácu s Nuxtom, takže by ste to mali vyskúšať, pretože z vás tiež urobí skvelého vývojára Vue.
Blogujte s Gatsbym
Gatsby je vynikajúci generátor statických stránok využívajúci React a GraphQL. Toto je výsledok projektu:
Čo sa naučíš
V tomto návode sa naučíte, ako použiť Gatsby na vytvorenie blogu, ktorý budete používať na písanie vlastných článkov pomocou React a GraphQL.
Tech stack a funkcie
- Gatsby
- Reagovať
- GraphQL
- Pluginy a témy
- MDX/Markdown
- Bootstrap CSS
- šablóny
Ak ste si niekedy chceli založiť blog, ako to urobiť pomocou React a GraphQL.
Nehovorím, že WordPress je zlá voľba, ale s Gatsbym môžete vytvárať vysokovýkonné weby pomocou Reactu – čo je úžasná kombinácia.
Blogujte s Gridsome
Gridsome for Vue... Dobre, toto sme už mali s Next/Nuxt.
To isté však platí aj pre Gridsome a Gatsbyho. Obaja používajú GraphQL ako svoju dátovú vrstvu, ale Gridsome používa VueJS. Toto je tiež úžasný generátor statických stránok, ktorý vám pomôže vytvoriť skvelé blogy:
Čo sa naučíš
Tento projekt vás naučí, ako vytvoriť jednoduchý blog, aby ste mohli začať s Gridsome, GraphQL a Markdown. Tiež popisuje, ako nasadiť aplikáciu cez Netlify.
Tech stack a funkcie
- Príšerný
- Vue
- GraphQL
- Markdown
- Netlify
Toto určite nie je najkomplexnejší návod, ale pokrýva základné koncepty Gridsome a .
Zvukový prehrávač podobný SoundCloud pomocou Quasar
Quasar je ďalší rámec Vue, ktorý možno použiť na vytváranie mobilných aplikácií. V tomto projekte vytvoríte aplikáciu audio prehrávača, napríklad:
Čo sa naučíš
Zatiaľ čo iné projekty sa zameriavajú najmä na webové aplikácie, tento vám ukáže, ako vytvoriť mobilnú aplikáciu pomocou Vue a Quasar frameworku.
Cordova by ste už mali mať spustenú s nakonfigurovaným Android Studio/Xcode. Ak nie, v príručke je odkaz na webovú stránku Quasar, kde vám ukážu, ako všetko nastaviť.
Tech stack a funkcie
- Quasar
- Vue
- Cordova
- WaveSurfer
- Komponenty používateľského rozhrania
, ktorá demonštruje schopnosti Quasaru na vytváranie mobilných aplikácií.
Zdroj: hab.com