9 dalších projektů pro zdokonalení vašich předních dovedností
úvod
Ať už jste v programování noví nebo již zkušení vývojáři, v tomto odvětví je učení se novým konceptům a jazykům/rámcům nutností, abyste drželi krok s trendy.
Vezměme si například React, který byl Facebook open source teprve před čtyřmi lety a již se stal volbou číslo jedna pro vývojáře JavaScriptu po celém světě.
Vue a Angular mají samozřejmě také svou legitimní fanouškovskou základnu. A pak jsou tu Svelte a další obecné rámce jako Next.js nebo Nuxt.js. A Gatsby, Gridsome a Quasar ... a mnoho dalšího.
Pokud se chcete ukázat jako zkušený vývojář JavaScriptu, měli byste mít alespoň nějaké zkušenosti s různými frameworky a knihovnami – kromě staré dobré JS práce.
Abych vám pomohl stát se mistrem front-endu v roce 2020, dal jsem dohromady devět různých projektů, z nichž každý se zaměřuje na různé rámce JavaScriptu a knihovny jako technologický stack, který můžete sestavit a přidat do svého portfolia. Pamatujte, že nic vám nepomůže víc, než uvést věci do praxe, takže do toho, zapněte mysl a umožněte to.
Aplikace pro vyhledávání filmů s Reactem (s háčky)
První věcí, kterou byste mohli začít, je vytvoření aplikace pro vyhledávání filmů pomocí React. Níže je obrázek, jak bude finální aplikace vypadat:
Co se naučíš
Vytvořením této aplikace zlepšíte své dovednosti React pomocí relativně nového API Hooks. Ukázkový projekt využívá komponenty React, spoustu háčků, externí API a samozřejmě nějaký styl CSS.
Tech stack a funkce
Reagujte s háčky
create-reagovat-app
JSX
CSS
Bez použití jakýchkoli tříd vám tyto projekty poskytnou perfektní vstupní bod do funkčního Reactu a určitě vám pomohou v roce 2020. můžeš najít ukázkový projekt zde. Postupujte podle pokynů nebo si ji vytvořte vlastní.
Chatovací aplikace s Vue
Dalším skvělým projektem pro vás je vytvoření chatovací aplikace pomocí mé oblíbené JavaScriptové knihovny: VueJS. Aplikace bude vypadat nějak takto:
Co se naučíš
V tomto tutoriálu se naučíte, jak vytvořit aplikaci Vue od začátku – vytvářet komponenty, zpracovávat stavy, vytvářet trasy, připojovat se ke službám třetích stran a dokonce zpracovávat ověřování.
Tech stack a funkce
Vue
vuex
Směrovač Vue
Pohled CLI
Pusher
CSS
Toto je opravdu skvělý projekt, jak začít s Vue nebo zlepšit své stávající dovednosti, abyste se dostali do vývoje v roce 2020. můžeš najít tutoriál zde.
Krásná aplikace pro počasí s Angular 8
Tento příklad vám pomůže vytvořit krásnou aplikaci pro počasí pomocí Angular 8:
Co se naučíš
Tento projekt vás naučí cenné dovednosti při vytváření aplikací od nuly – od návrhu po vývoj, až po aplikaci připravenou k nasazení.
Tech stack a funkce
Úhel 8
Firebase
Vykreslování na straně serveru
CSS s mřížkou a Flexboxem
Mobilní přátelské a přizpůsobivé
Tmavý režim
Krásné rozhraní
Na tomto komplexním projektu se mi opravdu líbí, že nestudujete věci izolovaně. Místo toho se naučíte celý proces vývoje od návrhu až po finální nasazení.
Aplikace To-Do se Svelte
Svelte je jako nové dítě v přístupu ke komponentám – přinejmenším podobný React, Vue a Angular. A toto je jedna z nejžhavějších novinek pro rok 2020.
To-Do aplikace nejsou nutně nejžhavějším tématem, ale opravdu vám pomohou zdokonalit vaše dovednosti Svelte. Bude to vypadat takto:
Co se naučíš
Tento tutoriál vám ukáže, jak vytvořit aplikaci pomocí Svelte 3, od začátku do konce. Budete používat komponenty, styling a handlery událostí
Next.js je nejoblíbenější framework pro vytváření aplikací React, které podporují vykreslování na straně serveru hned po vybalení.
Tento projekt vám ukáže, jak vytvořit aplikaci elektronického obchodu, která vypadá takto:
Co se naučíš
V tomto projektu se naučíte vyvíjet s Next.js – vytvářet nové stránky a komponenty, načítat data a stylovat a nasazovat Next aplikaci.
Tech stack a funkce
Další.js
Komponenty a stránky
Vzorkování dat
Styling
Nasazení projektu
SSR a SPA
Vždy je skvělé mít příklad ze skutečného života, jako je aplikace pro elektronický obchod, abyste se naučili něco nového. Můžeš návod najdete zde.
Plný vícejazyčný blog s Nuxt.js
Nuxt.js je pro Vue, stejně jako Next.js pro React: skvělý rámec pro kombinaci vykreslování na straně serveru a jednostránkových aplikací
Poslední aplikace, kterou můžete vytvořit, bude vypadat takto:
Co se naučíš
V tomto ukázkovém projektu se naučíte, jak vytvořit kompletní web pomocí Nuxt.js, od počátečního nastavení až po konečné nasazení.
Využívá mnoho skvělých funkcí, které Nuxt nabízí, jako jsou stránky a komponenty a stylování pomocí SCSS.
Tech stack a funkce
Nuxt.js
Komponenty a stránky
modul storyblock
Mixins
Vuex pro řízení státu
SCSS pro styling
Middleware Nuxt
Tohle je opravdu skvělý projekt., který obsahuje mnoho skvělých funkcí Nuxt.js. Osobně rád pracuji s Nuxtem, takže byste to měli vyzkoušet, protože z vás také bude skvělý vývojář Vue.
Blogujte s Gatsbym
Gatsby je skvělý generátor statických stránek využívající React a GraphQL. Toto je výsledek projektu:
Co se naučíš
V tomto tutoriálu se naučíte, jak pomocí Gatsbyho vytvořit blog, který budete používat k psaní vlastních článků pomocí React a GraphQL.
Tech stack a funkce
gatsby
REACT
GraphQL
Pluginy a motivy
MDX/Markdown
Bootstrap CSS
šablony
Pokud jste si někdy chtěli založit blog, to je skvělý příklad jak to udělat pomocí React a GraphQL.
Neříkám, že WordPress je špatná volba, ale s Gatsbym můžete vytvářet vysoce výkonné weby pomocí Reactu – což je úžasná kombinace.
Blogujte s Gridsome
Gridsome for Vue... Dobře, to už jsme měli s Next/Nuxt.
Totéž ale platí pro Gridsome a Gatsby. Oba používají GraphQL jako svou datovou vrstvu, ale Gridsome používá VueJS. Je to také úžasný generátor statických stránek, který vám pomůže vytvořit skvělé blogy:
Co se naučíš
Tento projekt vás naučí, jak vytvořit jednoduchý blog, abyste mohli začít s Gridsome, GraphQL a Markdown. Vysvětluje také, jak nasadit aplikaci prostřednictvím Netlify.
Quasar je další rámec 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číš
Zatímco jiné projekty se zaměřují převážně na webové aplikace, tento vám ukáže, jak vytvořit mobilní aplikaci pomocí Vue a frameworku Quasar.
Měli byste již mít funkční Cordova s nastaveným Android Studio/Xcode. Pokud ne, manuál má odkaz na web Quasar, kde vám ukážou, jak vše nastavit.
Tech stack a funkce
Quasar
Vue
Cordova
surfař na vlně
Komponenty uživatelského rozhraní
malý projekt, demonstrující schopnosti Quasaru pro vytváření mobilních aplikací.