Sissejuhatus
Olenemata sellest, kas olete programmeerimise algaja või juba kogenud arendaja, on sellel alal uute kontseptsioonide ja keelte/framework'ide õppimine hädavajalik, et trendidega sammu pidada.
Võtame näiteks React'i — kood, mille Facebook avaldas ainult neli aastat tagasi, on juba saanud number üks valikuks JavaScript arendajate seas üle kogu maailma.
Vue ja Angular, muidugi, omavad samuti oma õigustatud fännibaasi. Ja siis on veel Svelte ja teised universaalsed raamistikud nagu Next.js või Nuxt.js. Ja Gatsby, Gridsome, Quasar… ja palju muud.
Kui soovite end tõestada kui kogenud JavaScript arendaja, peate omama vähemalt mõningast kogemust erinevate raamistikute ja raamatukogudega — peale hea vana JS-i tegemise.
Ettevalmistamiseks, et saada 2020. aastal esmaklassiliseks front-end arendajaks, olen kokku kogunud üheksa erinevat projekti, millest igaüks käsitleb erinevaid JavaScripti raamistikke ja библиотеки, mida saate luua ja oma portfelli lisada. Pea meeles, et ükski asi ei aita sind rohkem kui praktikas asjade loomine, seega liigu edasi, lülita oma mõistus sisse ja tee see võimalikuks.
Artikkel on tõlgitud EDISON Software'i toetusel, kes , samuti .
Filmiotsingu rakendus Reacti abil (hook'idega)
Esimene asi, millega võiks alustada, on luua filmiotsingu rakendus Reacti abil. Allpool on pilt, milline näeb välja lõplik rakendus:
Mida sa õpid
Seda rakendust luues parendad oma Reacti oskusi, kasutades suhteliselt uut API-d Hooks. Projekti näites kasutatakse Reacti komponente, mitmeid hook'e, välist API-t ja loomulikult ka mõningaid CSS-i stiile.
Tehniline stek ja funktsioonid
- React koos hook'idega
- create-react-app
- JSX
- CSS
Ilma klasside kasutamiseta pakuvad need projektid ideaalset sissejuhatust funktsionaalsesse Reacti ning aitavad teid kindlasti 2020. aastal. Leiate . Järgige juhiseid või tehke kõik oma maitse järgi.
Vestlusrakendus Vue abil
Teine suurepärane projekt teile on vestlusrakenduse loomine, kasutades minu lemmik JavaScripti teeki: VueJS. Rakendus näeb välja umbes selline:
Mida sa õpid
Selles juhendis õpite, kuidas luua Vue rakendust nullist — luua komponente, hallata olekuid, luua marsruute, ühendada kolmandate osapoolte teenustega ja isegi hallata autentimist.
Tehniline stek ja funktsioonid
- Vue
- 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 .
Kaunis ilmaprognoosi rakendus Angular 8 abil
See näide aitab teil luua kauni ilmaprognoosi rakenduse Angular 8 abil:
Mida sa õpid
See projekt õpetab teid väärtuslikke oskusi rakenduste loomiseks nullist - alates projekteerimisest kuni arendamise ja lõpuks juurutatava rakenduseni.
Tehniline stek ja funktsioonid
- Angular 8
- Firebase
- Serveripoolne renderdamine
- CSS võrgu ja Flexboxiga
- Mobiilisõbralik ja reageeriv
- Tumedat režiimi
- Kaunis liides
Mis mulle selles kõikehõlmavas projektis tõeliselt meeldib, on see, et te ei õpi asju eraldi. Selle asemel õpite kogu arendusprotsessi - projekteerimisest kuni lõpliku juurutamiseni.
To-Do rakendus Svelte abil
Svelte on nagu uus laps komponentide lähenemises - vähemalt sarnane Reactile, Vue'le ja Angularile. Ja see on üks kuumimaid uuendusi 2020. aastal.
To-Do rakendused ei pruugi olla kõige kuumem teema, kuid see aitab tõeliselt teravdada teie Svelte oskusi. See näeb välja selline:
Mida sa õpid
Selle õpetuse käigus õpite, kuidas luua rakendus Svelte 3 abil, algusest lõpuni. Kasutate komponente, stiliseerimist ja sündmuste käsitlemist.
Tehniline stek ja funktsioonid
- Svelte 3
- Komponendid
- Stiliseerimine CSS abil
- ES 6 süntaks
Heade alustavate projektide osas Svelte’is ei ole palju valikuid, seetõttu leidsin .
Приложение для электронной коммерции с помощью Next.js
Next.js on kõige populaarsem raamistik React-rakenduste loomiseks, mis toetavad serveripoolset renderdust kohe välja kastist.
See projekt näitab teile, kuidas luua e-kaubanduse rakendus, mis näeb välja järgmiselt:
Mida sa õpid
Selles projektis õpite arendama Next.js-i abil — looma uusi lehti ja komponente, andmeid hankima ning rakendust Next stiilima ja juurutama.
Tehniline stek ja funktsioonid
- Next.js
- Komponendid ja lehed
- Andmete hankimine
- Stiilimine
- Projekti juurutamine
- SSR ja SPA
Reaalne näide, näiteks e-kaubanduse rakendus, on alati suurepärane võimalus midagi uut õppida. Saate .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js Vue jaoks on sama mis Next.js React jaoks: suurepärane raamistik, mis ühendab serveripoolse renderdamise ja ühekorraga rakenduste võimalused.
Viimane rakendus, mille saate luua, näeb välja järgmiselt:
Mida sa õpid
Selles projekti näites saate teada, kuidas luua täielik veebisait Nuxt.js abil — alates esialgsest seadistamisest kuni lõpp-juurutamiseni.
See kasutab mitmeid huvitavaid funktsioone, mida Nuxt pakub, näiteks lehed ja komponendid ning ka stiilide tegemine SCSS-i abil.
Tehniline stek ja funktsioonid
- Nuxt.js
- Komponendid ja lehed
- Storyblock moodul
- Mixini
- Vuex oleku haldamiseks
- SCSS stiilimiseks
- Nuxti vahendused
, mis sisaldab palju suurepäraseid võimalusi Nuxt.js-i jaoks. Mulle isiklikult meeldib Nuxtiga töötada, nii et tasub kindlasti proovida, kuna see teeb teid ka suurepäraseks Vue arendajaks.
Blogi Gatsbyga
Gatsby on suurepärane staatiliste veebilehtede generaator, mis kasutab Reacti ja GraphQL-i. See on projekti tulemus:
Mida sa õpid
Selles juhendis õpite, kuidas kasutada Gatsby-d, et luua blogi, mida saate kasutada oma artiklite kirjutamiseks, kasutades Reacti ja GraphQL-i.
Tehniline stek ja funktsioonid
- Gatsby
- React
- GraphQL
- Pluginad ja teemad
- MDX/Markdown
- Bootstrap CSS
- Mallid
Kui olete kunagi soovinud alustada blogi, kuidas seda teha, kasutades Reacti ja GraphQL-i.
Ma ei ütle, et WordPress on halb valik, kuid Gatsby abil saate luua kõrgtasemel veebilehti, kasutades Reacti — mis on hämmastav kombinatsioon.
Blogi Gridsome'iga
Gridsome Vue jaoks... Hästi, meil on see juba olnud Next/Nuxtiga.
Aga sama kehtib ka Gridsome'i ja Gatsby kohta. Mõlemad kasutavad GraphQL-i andmestruktuurina, kuid Gridsome kasutab VueJS-i. See on samuti suurepärane staatiliste veebilehtede genereerija, mis aitab teil luua suurepäraseid blogisid:
Mida sa õpid
See projekt õpetab teid, kuidas luua lihtne blogi, et alustada Gridsome'i, GraphQL-i ja Markdowniga. Samuti selgitatakse, kuidas rakendust Netlify kaudu käivitada.
Tehniline stek ja funktsioonid
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
See ei ole muidugi kõige täielikum juhend, kuid see katab Gridsome'i peamised kontseptsioonid ja .
Audio mängija, mis sarnaneb SoundCloudiga, Quasari abil.
Quasar on veel üks Vue raamistik, mida saab kasutada mobiilirakenduste loomisel. Selles projektis loote audio-mängija rakenduse, näiteks:
Mida sa õpid
Kui teised projektid keskenduvad peamiselt veebirakendustele, siis see näitab teile, kuidas luua mobiilirakendus Vue ja Quasari raamistikuga.
Teil peaks juba olema töötav Cordova koos seadistatud Android Studio/Xcode'iga. Kui ei, siis on juhendis link Quasari veebisaidile, kus nad näitavad, kuidas kõik seadistada.
Tehniline stek ja funktsioonid
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI Komponendid
, tutvustades Quasari võimalusi mobiilirakenduste arendamiseks.
Allikas: habr.com
