Sissejuhatus
Olenemata sellest, kas olete programmineerimises algaja või juba kogenud arendaja, on sellel alal uute kontseptsioonide ja keelte/raamistike õppimine hädavajalik, et trendidega sammu pidada.
Võtame näiteks Reacti — koodi, mille Facebook avas ainult neli aastat tagasi, on see juba saanud JavaScripti arendajate esimeseks valikuks kogu maailmas.
Vue ja Angularil on loomulikult ka oma seaduslik fännide baas. Lisaks on olemas Svelte ja teised universaalsed raamistikes, nagu Next.js või Nuxt.js. Ja Gatsby, Gridsome, Quasar… ja veel palju muud.
Kui soovite näidata end kui kogenud JavaScripti arendajana, peab teil olema vähemalt natuke kogemusi erinevate raamistike ja teekidega — lisaks sellele, et töötada hea vanas JS-is.
Kuna aitame teil 2020. aastal saada front-end meistriks, olen koostanud üheksa erinevat projekti, millest igaühes kasutatakse erinevaid JavaScripti raamistikke ja teeke tehnilise virnana, mille saate luua ja lisada oma portfelli. Pidage meeles, et miski ei aita teid rohkem kui praktiline loomine, seega liikuge edasi, vabastage oma mõtted ja tehke see teoks.
Artikkel on tõlgitud ettevõtte EDISON Software toetusel, mis , samuti .
Filmiotsingu rakendus Reacti abil (hookidega)
Esimene asi, millega võiks alustada, on luua filmiotsingu rakendus Reacti abil. Allpool on pilt sellest, kuidas lõplik rakendus välja näeb:
Mida te õpite
Seda rakendust luues parandate oma Reacti oskusi, kasutades suhteliselt uut API-d Hooks. Projekti näites kasutatakse Reacti komponente, palju hooke, välist API-d ja muidugi mõned CSS-i stiilid.
Tehniline virn ja funktsioonid
- React koos hook’idega
- create-react-app
- JSX
- CSS
Ilma igasuguste klasside kasutamiseta pakuvad need projektid teile ideaalse sissejuhatuse funktsionaalsesse Reacti ja kindlasti aitavad teid 2020. aastal. Leiate . Järgige juhiseid või tehke kõik oma maitse järgi.
Vestlusrakendus Vue abil
Veel üks suurepärane projekt, mille jaoks saate luua vestlusrakenduse, kasutades minu lemmik JavaScripti teeki: VueJS. Rakendus näeb välja umbes nii:
Mida te õpite
Käesolevast juhendist saate teada, kuidas luua Vue rakendus nullist - luua komponente, hallata olekuid, luua marsruute, ühendada kolmandate osapoolte teenustega ja isegi hallata autentimist.
Tehniline virn ja funktsioonid
- projekt, mis kasutab
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
See on tõeliselt suurepärane projekt, et alustada Vue'ga või täiustada oma olemasolevaid oskusi 2020. aastal. Leiate .
Ilus ilma rakendus Angular 8-ga
See näide aitab teil luua ilusa ilma rakenduse Angular 8 abil:
Mida te õpite
See projekt õpetab teile väärtuslikke oskusi rakenduste loomisel nullist - alates disainist kuni arendamiseni, kuni rakenduse valmimiseni.
Tehniline virn ja funktsioonid
- Angular 8
- Firebase
- Serveripoolne renderdamine
- CSS võrgustiku ja Flexboxiga
- Mobiilisõbralik ja kohanduv
- Tumedat režiimi
- Ilus liides
Mulle meeldib selle põhjaliku projekti juures tõeliselt see, et te ei õpi asju isoleeritult. Selle asemel õpite kogu arendusprotsessi - alates disainist kuni lõpliku deploymiseni.
To-Do rakendus Svelte abil
Svelte on nagu uus laps komponendipõhises lähenemises - vähemalt sarnaneb see Reacti, Vue'i ja Angulariga. Ja see on üks kuumemaid uuendusi 2020. aastaks.
To-Do rakendused pole tingimata kõige kuumem teema, kuid see tõeliselt aitab teil lihvida oma Svelte oskusi. See näeb välja järgmiselt:
Mida te õpite
Käesolevast õpikust õppite, kuidas luua rakendus Svelte 3 abil, alates algusest kuni lõpuni. Kasutate komponente, stiile ja sündmuste käsitlejat.
Tehniline virn ja funktsioonid
- Svelte 3
- Komponendid
- Stiilimine CSS kaudu
- ES 6 süntaks
Heade alustamisprojektide arv Svelte'ile ei ole kuigi suur, seetõttu leidsin .
Приложение для электронной коммерции с помощью Next.js
Next.js on kõige populaarsem raamistik React rakenduste loomiseks, mis toetab serveripoolset renderdamist välja pakkumistega.
See projekt näitab teile, kuidas luua e-kaubanduse rakendus, mis näeb välja järgmiselt:
Mida te õpite
Selles projektis õpite arendama Next.js abil - looma uusi lehti ja komponente, andmeid tooma, samuti rakendust stiilima ja deploymentima.
Tehniline virn ja funktsioonid
- Next.js
- Komponendid ja lehed
- Andmete valimine
- Stiilimine
- Projekti deployimine
- SSR ja SPA
Alati on tore omada reaalset näidet, näiteks e-kaubanduse rakendust, et uusi asju õppida. Sa saad .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js Vue jaoks, sama mis Next.js React jaoks: suurepärane raamistik serveripoolse renderdamise ja ühesuunaliste rakenduste võimaluste ühendamiseks
Viimane rakendus, mille sa lood, näeb välja nii:
Mida te õpite
Selles projekti näites õpid, kuidas luua täielik veebisait, kasutades Nuxt.js — alates algsest seadistamisest kuni lõpliku juurutamiseni.
See kasutab palju huvitavaid funktsioone, mida Nuxt pakub, näiteks lehti ja komponente ning stiliseerimist SCSS abil.
Tehniline virn ja funktsioonid
- Nuxt.js
- Komponendid ja lehed
- Storyblock moodul
- Mixin'id
- Vuex olekuhalduseks
- SCSS stiliseerimiseks
- Nuxt vahendajad
, mis sisaldab palju hämmastavaid Nuxt.js funktsioone. Mulle isiklikult meeldib Nuxtiga töötada, seega peaksid seda proovima, kuna see teeb sinust ka suurepärase Vue arendaja.
Blogi Gatsby'ga
Gatsby on suurepärane staatiliste saidite generaator, mis kasutab Reacti ja GraphQL-i. See on projekti tulemus:
Mida te õpite
Selles juhendis õpid, kuidas kasutada Gatsby't blogi loomiseks, mida kasutad oma artiklite kirjutamiseks, kasutades Reacti ja GraphQL-i.
Tehniline virn ja funktsioonid
- Gatsby
- React
- GraphQL
- Pluginad ja teemad
- MDX/Markdown
- Bootstrap CSS
- Šablonid
Kui oled kunagi tahtnud blogi luua, kuidas seda teha, kasutades Reacti ja GraphQL-i.
Ma ei ütle, et WordPress pole halb valik, kuid Gatsby abil saad luua kõrgtehnoloogilisi saite, kasutades Reacti — mis on hämmastav kombinatsioon.
Blogi Gridsome'iga
Gridsome Vue' jaoks... Noh, meil on seda juba olnud Next/Nuxt'i puhul.
Kuid sama kehtib ka Gridsome ja Gatsby kohta. Mõlemad kasutavad GraphQL-i andmete kihina, kuid Gridsome kasutab VueJS-i. See on samuti hämmastav staatiliste saitide generaator, mis aitab sul luua suurepäraseid blogisid:
Mida te õpite
See projekt õpetab sind, kuidas luua lihtne blogi, et alustada Gridsome'i, GraphQL'i ja Markdown'iga. Samuti räägitakse, kuidas rakendust Netlify kaudu juurutada.
Tehniline virn ja funktsioonid
- Gridsome
- projekt, mis kasutab
- GraphQL
- Markdown
- Netlify
See pole kindlasti kõige põhjalikum juhend, kuid see katab Gridsome'i põhikontseptsioonid ja .
Audio mängija, mis sarnaneb SoundCloudiga, Quasariga
Quasar — see on Vue raamistik, mida saab kasutada mobiilirakenduste loomisel. Selles projektis loote helimängija rakenduse, näiteks:
Mida te õpite
Kui teised projektid keskenduvad peamiselt veebirakendustele, siis see näitab teile, kuidas luua mobiilirakendust Vue ja Quasar raamistikuga.
Teil peab olema juba tööle pandud Cordova koos seadistatud Android Studio/Xcode'iga. Kui ei, siis juhendis on link Quasari veebisaidile, kus nad näitavad, kuidas kõik seadistada.
Tehniline virn ja funktsioonid
- Quasar
- projekt, mis kasutab
- Cordova
- WaveSurfer
- Kasutajaliidese komponendid
, mis tutvustab Quasari võimalusi mobiilirakenduste loomisel.
Allikas: habr.com
