Veel 9 projekti oma esiotsa oskuste teritamiseks

Sissejuhatus

Olenemata sellest, kas olete programmeerimises uus või juba kogenud arendaja, on selles valdkonnas uute kontseptsioonide ja keelte/raamistike õppimine kohustuslik, et trendidega sammu pidada.

Võtame näiteks Reacti, mis oli Facebooki avatud lähtekoodiga alles neli aastat tagasi ja mis on juba saanud JavaScripti arendajate jaoks üle maailma valiku number üks.

Vuel ja Angularil on loomulikult ka oma seaduslik fännibaas. Ja siis on veel Svelte ja muud üldotstarbelised raamistikud, nagu Next.js või Nuxt.js. Ja Gatsby, Gridsome ja Quasar ... ja palju muud.

Kui soovid end tõestada kogenud JavaScripti arendajana, peab sul olema vähemalt mõningane kogemus erinevate raamistike ja raamatukogudega – lisaks vana hea JS-töö tegemisele.

Et aidata teil saada 2020. aastal esiotsa meistriks, olen kokku pannud üheksa erinevat projekti, millest igaüks keskendub erinevatele JavaScripti raamistikele ja teekidele kui tehnilistele pinudele, mida saate koostada ja oma portfelli lisada. Pidage meeles, et miski ei aita teid rohkem kui asjade elluviimine, nii et minge edasi, pöörake meelt ja tehke see võimalikuks.

Artikkel on tõlgitud EDISON Tarkvara toel, mis teeb virtuaalseid proovikabiine mitme kaubamärgi kauplustele ning testib tarkvara.

Filmiotsingu rakendus koos Reactiga (konksudega)

Esimene asi, millest võiks alustada, on Reactiga filmiotsingu rakenduse loomine. Allpool on pilt sellest, kuidas lõplik rakendus välja näeb:

Mida õpid
Selle rakenduse loomisega parandate oma Reacti oskusi suhteliselt uue Hooks API abil. Näidisprojektis kasutatakse Reacti komponente, palju konkse, välist API-d ja loomulikult mõningast CSS-stiili.

Tehniline virn ja funktsioonid

• Reageerige konksudega
• loo-reageeri-rakendus
• JSX
• CSS

Ilma klasse kasutamata annavad need projektid teile ideaalse sisenemispunkti funktsionaalsesse Reacti ja aitavad teid kindlasti 2020. aastal. võid leida näidisprojekt siin. Järgige juhiseid või tehke see enda omaks.

Vestlusrakendus Vuega

Teine suurepärane projekt teie jaoks on vestlusrakenduse loomine, kasutades minu lemmik JavaScripti teeki: VueJS. Rakendus näeb välja umbes selline:

Mida õpid
Sellest õpetusest saate teada, kuidas luua Vue rakendust nullist – luua komponente, hallata olekuid, luua marsruute, luua ühenduse kolmandate osapoolte teenustega ja isegi käsitleda autentimist.

Tehniline virn ja funktsioonid

• Vue
• vuex
• Vue ruuter
• CLI vaade
• Tõukaja
• CSS

See on tõesti suurepärane projekt Vue'ga alustamiseks või olemasolevate oskuste täiustamiseks, et 2020. aastal arendustegevusega tegeleda. võid leida õpetus siin.

Ilusa ilmarakendus Angular 8-ga

See näide aitab teil Angular 8 abil luua ilusa ilmarakenduse:

Mida õpid
See projekt õpetab teile väärtuslikke oskusi rakenduste loomisel nullist – alates projekteerimisest kuni arenduseni kuni juurutamisvalmis rakenduseni.

Tehniline virn ja funktsioonid

• Nurga 8
• Firebase
• Serveripoolne renderdamine
• CSS koos ruudustiku ja Flexboxiga
• Mobiilisõbralik ja kohanemisvõime
• Tume režiim
• Ilus liides

Mis mulle selle põhjaliku projekti juures väga meeldib, on see, et asju ei uurita isoleeritult. Selle asemel õpite kogu arendusprotsessi alates kavandamisest kuni lõpliku kasutuselevõtuni.

To-Do rakendus Sveltega

Svelte on komponentide lähenemises nagu uus laps – vähemalt sarnane Reacti, Vue ja Angulariga. Ja see on üks kuumimaid uusi tooteid 2020. aastal.

To-Do rakendused ei pruugi olla kõige kuumem teema, kuid need aitavad teil tõesti oma Svelte oskusi lihvida. See näeb välja selline:

Mida õpid
See õpetus näitab teile, kuidas luua rakendust Svelte 3 abil algusest lõpuni. Kasutate komponente, stiili ja sündmuste käitlejaid

Tehniline virn ja funktsioonid

• Õrn 3
• Komponendid
• Stiilimine CSS-iga
• Süntaks ES6

Häid Svelte stardiprojekte pole palju, seega leidsin see on hea koht alustamiseks.

E-kaubanduse rakendus koos Next.js-iga

Next.js on kõige populaarsem raamistik serveripoolset renderdamist toetavate Reacti rakenduste loomiseks.

See projekt näitab teile, kuidas luua e-kaubanduse rakendust, mis näeb välja järgmine:

Mida õpid
Selles projektis saate teada, kuidas Next.js-iga arendada – luua uusi lehti ja komponente, hankida andmeid ja stiilida ning juurutada rakendust Next.

Tehniline virn ja funktsioonid

• Järgmine.js
• Komponendid ja lehed
• Andmete valim
• Stiil
• Projekti juurutamine
• SSR ja SPA

Alati on tore, kui on olemas näide elust, näiteks e-kaubanduse rakendus, millegi uue õppimiseks. Sa saad leiad õpetuse siit.

Täielik mitmekeelne ajaveeb Nuxt.js-iga

Nuxt.js on mõeldud Vue jaoks, nagu Next.js Reacti jaoks: suurepärane raamistik serveripoolse renderduse ja üheleheliste rakenduste ühendamiseks
Viimane loodud rakendus näeb välja selline:

Mida õpid

Selles näidisprojektis saate teada, kuidas luua Nuxt.js-i abil terviklik veebisait, alates esialgsest seadistamisest kuni lõpliku juurutamiseni.

See kasutab ära paljusid lahedaid funktsioone, mida Nuxt pakub, nagu lehed ja komponendid ning stiil SCSS-iga.

Tehniline virn ja funktsioonid

• Nuxt.js
• Komponendid ja lehed
• looploki moodul
• Segud
• Vuex riigi juhtimiseks
• SCSS stiili kujundamiseks
• Nuxt vahevara

See on tõesti lahe projekt., mis sisaldab paljusid Nuxt.js-i suurepäraseid funktsioone. Mulle isiklikult meeldib Nuxtiga töötada, nii et peaksite seda proovima, kuna see muudab teid ka suurepäraseks Vue arendajaks.

Blogige Gatsbyga

Gatsby on suurepärane staatilise saidi generaator, mis kasutab Reacti ja GraphQL-i. See on projekti tulemus:

Mida õpid

Sellest õpetusest saate teada, kuidas kasutada Gatsbyt ajaveebi loomiseks, mida saate kasutada Reacti ja GraphQL-i abil oma artiklite kirjutamiseks.

Tehniline virn ja funktsioonid

• Gatsby
• Reageerima
• GraphQL
• Pluginad ja teemad
• MDX/Markdown
• Bootstrap CSS
• Mallid

Kui olete kunagi tahtnud blogi pidada, see on suurepärane näide kuidas seda Reacti ja GraphQL-i abil teha.

Ma ei ütle, et WordPress on halb valik, kuid Gatsby abil saate Reacti abil luua suure jõudlusega veebisaite – see on hämmastav kombinatsioon.

Blogi koos Gridsome'iga

Võrratu Vue jaoks… Okei, see oli meil juba Next/Nuxtiga.
Kuid sama kehtib ka Gridsome'i ja Gatsby kohta. Mõlemad kasutavad andmekihina GraphQL-i, kuid Gridsome kasutab VueJS-i. See on ka suurepärane staatiline saidigeneraator, mis aitab teil luua suurepäraseid ajaveebe:

Mida õpid

See projekt õpetab teile, kuidas luua lihtsat ajaveebi, et alustada Gridsome'i, GraphQL-i ja Markdowniga. Samuti selgitatakse, kuidas rakendust Netlify kaudu juurutada.

Tehniline virn ja funktsioonid

• Võrratu
• Vue
• GraphQL
• Hinnaalandus
• võrgustada

See ei ole kindlasti kõige täielikum õpetus, kuid see hõlmab Gridsome'i põhikontseptsioone ja Markdown ja võib olla hea lähtepunkt.

SoundCloudile sarnane helipleier Quasari abil

Quasar on veel üks Vue raamistik, mida saab kasutada mobiilirakenduste loomiseks. Selles projektis loote helipleieri rakenduse, näiteks:

Mida õpid

Kui teised projektid keskenduvad peamiselt veebirakendustele, siis see näitab teile, kuidas luua mobiilirakendust Vue ja Quasari raamistiku abil.
Teil peaks olema juba seadistatud töötav Cordova koos Android Studio/Xcode'iga. Kui ei, siis juhendis on link Quasari veebisaidile, kus näidatakse, kuidas kõike seadistada.

Tehniline virn ja funktsioonid

• Kvasar
• Vue
• Cordova
• lainesurfar
• UI komponendid

väike projekt, mis demonstreerib Quasari võimalusi mobiilirakenduste loomiseks.

Allikas: www.habr.com