Úvod
Ať už jste nováček v programování nebo už zkušený vývojář, v tomto odvětví je nezbytné neustále se učit nové koncepty a jazyky/frameworky, abyste drželi krok s trendy.
Například React — jehož kód Facebook otevřel teprve před čtyřmi lety — se již stal číslem jedna mezi vývojáři JavaScriptu po celém světě.
Vue a Angular mají samozřejmě také své věrné příznivce. Dále tu máme Svelte a další univerzální frameworky, jako jsou Next.js nebo Nuxt.js. A Gatsby, Gridsome, Quasar… a mnohé další.
Pokud chcete vyniknout jako zkušený vývojář JavaScriptu, měli byste mít alespoň nějaké zkušenosti s různými frameworky a knihovnami — kromě práce se starým dobrým JS.
Abych vám pomohl stát se mistrem front-endu v roce 2020, sestavil jsem devět různých projektů, z nichž každý je zaměřen na různé frameworky a knihovny JavaScript jako technologický stack, který si můžete vytvořit a přidat do svého portfolia. Pamatujte, že nic vám nepomůže víc než praktické vytváření věcí, tak se do toho pusťte, zapněte svou mysl a udělejte to možné.
Článek byl přeložen s podporou společnosti EDISON Software, která , a také .
Aplikace pro vyhledávání filmů pomocí Reactu (s hooks)
První, co byste mohli začít, je vytvořit aplikaci pro vyhledávání filmů pomocí Reactu. Níže je obrázek toho, jak bude finální aplikace vypadat:
Co se naučíte
Tvorbou této aplikace zlepšíte své dovednosti v Reactu, využívání relativně nového API Hooks. V projektu jsou použity komponenty Reactu, různé hooky, veřejné API a samozřejmě nějaké styly CSS.
Technologický stack a funkce
- React s hooky
- create-react-app
- JSX
- CSS
Bez použití jakýchkoli tříd vám tyto projekty poskytnou ideální vstupní bod do funkcionálního Reactu a určitě vám pomohou v roce 2020. Můžete najít . Postupujte podle pokynů nebo si to upravte podle vlastního vkusu.
Chatovací aplikace pomocí Vue
Další skvělý projekt pro vás — vytvořit chatovací aplikaci pomocí mé oblíbené JavaScriptové knihovny: VueJS. Aplikace bude vypadat zhruba takto:
Co se naučíte
Z této příručky se dozvíte, jak vytvořit aplikaci Vue od nuly – vytváření komponent, zpracování stavů, vytváření tras, připojování k externím službám a dokonce i zpracování autentizace.
Technologický stack a funkce
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
To je opravdu skvělý projekt, jak začít pracovat s Vue nebo zlepšit své stávající dovednosti pro vývoj v roce 2020. Můžete najít .
Krásná aplikace pro sledování počasí s Angular 8
Tento příklad vám pomůže vytvořit krásnou aplikaci pro sledování počasí pomocí Angular 8:
Co se naučíte
Tento projekt vás naučí cenné dovednosti při vytváření aplikací od nuly – od návrhu až po vývoj, až po aplikaci připravenou k nasazení.
Technologický stack a funkce
- Angular 8
- Firebase
- Serverový rendering
- CSS se sítí a Flexboxem
- Mobilní přívětivost a responzivita
- Tmavý režim
- Krásné rozhraní
Co se mi na tomto komplexním projektu opravdu líbí, je to, že se učíte věci nejen izolovaně. Místo toho se učíte celý proces vývoje – od návrhu po konečné nasazení.
To-Do aplikace pomocí Svelte
Svelte je jako nový dítě v komponentovém přístupu – alespoň podobný jako React, Vue a Angular. A je to jeden z nejžhavějších novinek roku 2020.
To-Do aplikace nemusí být nejžhavější téma, ale skutečně vám pomůže zdokonalit vaše dovednosti Svelte. Bude vypadat takto:
Co se naučíte
Z tohoto tutoriálu se dozvíte, jak vytvořit aplikaci pomocí Svelte 3, od začátku do konce. Budete používat komponenty, stylování a zpracovatele událostí.
Technologický stack a funkce
- Svelte 3
- Komponenty
- Stylování pomocí CSS
- Syntaxe ES 6
Není mnoho dobrých startovních projektů pro Svelte, takže jsem našel .
Приложение для электронной коммерции с помощью Next.js
Next.js je nejpopulárnější rámec pro vytváření aplikací React, které podporují serverový rendering přímo z krabice.
Tento projekt vám ukáže, jak vytvořit aplikaci pro elektronický obchod, která vypadá takto:
Co se naučíte
V tomto projektu se naučíte, jak vyvíjet pomocí Next.js – vytvářet nové stránky a komponenty, získávat data a také stylovat a nasazovat aplikaci Next.
Technologický stack a funkce
- Next.js
- Komponenty a stránky
- Výběr dat
- Stylování
- Nasazení projektu
- SSR a SPA
Vždy je skvělé mít reálný příklad, jako například aplikaci pro elektronický obchod, abyste se něco nového naučili. Můžete .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js pro Vue, což je totéž co Next.js pro React: skvělý framework pro spojení možností serverového renderování a jednopage aplikací
Poslední aplikace, kterou můžete vytvořit, bude vypadat takto:
Co se naučíte
V tomto příkladu projektu se naučíte, jak vytvořit plnohodnotný web pomocí Nuxt.js — od počátečního nastavení po konečné nasazení.
Používá mnoho zajímavých funkcí, které Nuxt může nabídnout, jako jsou stránky a komponenty, a také stylování pomocí SCSS.
Technologický stack a funkce
- Nuxt.js
- Komponenty a stránky
- Storyblock modul
- Mixiny
- Vuex pro správu stavu
- SCSS pro stylování
- Nuxt middlewares
, který zahrnuje spoustu úžasných možností Nuxt.js. Osobně rád pracuji s Nuxt, takže byste to měli vyzkoušet, protože vás to také učiní skvělým vývojářem Vue.
Blog s Gatsby
Gatsby je skvělý generátor statických stránek, který používá React a GraphQL. To je výsledek projektu:
Co se naučíte
V tomto průvodci se naučíte, jak použít Gatsby k vytvoření blogu, který budete používat k psaní vlastních článků pomocí React a GraphQL.
Technologický stack a funkce
- Gatsby
- React
- GraphQL
- Pluginy a témata
- MDX/Markdown
- Bootstrap CSS
- Šablony
Pokud jste někdy chtěli mít blog, jak ho vytvořit pomocí React a GraphQL.
Nemám na mysli, že WordPress je špatná volba, ale s Gatsby můžete vytvářet vysoce výkonné stránky pomocí React — což je úžasná kombinace.
Blog s Gridsome
Gridsome pro Vue… Dobře, to už jsme měli s Next/Nuxt.
Ale to samé platí pro Gridsome a Gatsby. Oba používají GraphQL jako datovou vrstvu, ale Gridsome používá VueJS. Je to také úžasný generátor statických stránek, který vám pomůže vytvářet skvělé blogy:
Co se naučíte
Tento projekt vás naučí, jak vytvořit jednoduchý blog, abyste mohli začít pracovat s Gridsome, GraphQL a Markdown. Také se v něm dozvíte, jak nasadit aplikaci přes Netlify.
Technologický stack a funkce
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Toto samozřejmě není nejkompletnější tutoriál, ale pokrývá základní pojmy Gridsome a .
Audio přehrávač podobný SoundCloudu pomocí Quasar
Quasar — je další framework Vue, který lze použít k vytváření mobilních aplikací. V tomto projektu vytvoříte aplikaci audio přehrávače, například:
Co se naučíte
Zatímco ostatní projekty jsou zaměřeny převážně na webové aplikace, tento vám ukáže, jak vytvořit mobilní aplikaci pomocí Vue a frameworku Quasar.
Měli byste mít již funkční Cordova se zprovozněným Android Studio/Xcode. Pokud ne, v příručce je odkaz na webové stránky Quasar, kde ukazují, jak všechno nastavit.
Technologický stack a funkce
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI komponenty
, který demonstruje možnosti Quasar pro vytváření mobilních aplikací.
Zdroj: habr.com
