Uvod
Bilo da ste novi u programiranju ili ste već iskusni programer, u ovoj industriji učenje novih koncepata i jezika/okvira je neophodno da biste bili u toku s trendovima.
Uzmimo, na primjer, React, koji je prije četiri godine imao otvoren izvorni kod samo na Facebooku i koji je već postao izbor broj jedan za JavaScript programere širom svijeta.
Vue i Angular, naravno, takođe imaju svoju legitimnu bazu obožavatelja. A tu su i Svelte i drugi okviri opšte namene kao što su Next.js ili Nuxt.js. I Gatsby, i Gridsome, i Quasar... i još mnogo toga.
Ako želite da se pokažete kao iskusan JavaScript programer, morate imati barem malo iskustva sa raznim okvirima i bibliotekama – pored dobrog starog JS posla.
Kako bih vam pomogao da postanete front-end majstor u 2020., sastavio sam devet različitih projekata, od kojih se svaki fokusira na različite JavaScript okvire i biblioteke kao tehnološku grupu koju možete izgraditi i dodati svom portfoliju. Zapamtite da vam ništa ne pomaže više od sprovođenja stvari u praksu, stoga samo naprijed, uključite svoj um i omogućite to.
Članak je preveden uz podršku EDISON softvera, koji I .
Aplikacija za pretraživanje filmova s Reactom (sa kukicama)
Prva stvar s kojom biste mogli početi je pravljenje aplikacije za pretraživanje filmova s Reactom. Ispod je slika kako će izgledati konačna aplikacija:
Šta ćete naučiti
Izgradnjom ove aplikacije poboljšat ćete svoje React vještine koristeći relativno novi Hooks API. Uzorak projekta koristi React komponente, puno kukica, eksterni API i naravno neki CSS stil.
Tehnologija i karakteristike
- Reagirajte kukama
- kreiraj-reagiraj-aplikacija
- JSX
- CSS
Bez upotrebe ikakvih klasa, ovi projekti vam daju savršenu ulaznu tačku u funkcionalni React i sigurno će vam pomoći u 2020. Mozeš naci . Slijedite upute ili ga napravite sami.
Chat aplikacija sa Vue
Još jedan odličan projekat za vas je da napravite aplikaciju za ćaskanje koristeći moju omiljenu JavaScript biblioteku: VueJS. Aplikacija će izgledati otprilike ovako:
Šta ćete naučiti
U ovom vodiču naučit ćete kako napraviti Vue aplikaciju od nule - kreirati komponente, upravljati stanjima, kreirati rute, povezati se s uslugama trećih strana, pa čak i upravljati autentifikacijom.
Tehnologija i karakteristike
- Vue
- vuex
- vue router
- CLI prikaz
- Pusher
- CSS
Ovo je zaista sjajan projekat za početak rada s Vueom ili poboljšanje postojećih vještina kako biste krenuli u razvoj 2020. Mozeš naci .
Prekrasna vremenska aplikacija sa Angular 8
Ovaj primjer će vam pomoći da napravite prekrasnu aplikaciju za vremensku prognozu koristeći Angular 8:
Šta ćete naučiti
Ovaj projekat će vas naučiti vrijednim vještinama u izgradnji aplikacija od nule - od dizajna do razvoja, sve do aplikacije spremne za implementaciju.
Tehnologija i karakteristike
- Ugaoni 8
- Firebase
- Renderiranje na strani servera
- CSS sa Grid i Flexboxom
- Pogodan za mobilne uređaje i prilagodljivost
- Temnyj režim
- Predivan interfejs
Ono što mi se zaista sviđa kod ovog sveobuhvatnog projekta je da stvari ne proučavate izolovano. Umjesto toga, naučite cijeli proces razvoja od dizajna do konačnog postavljanja.
To-Do aplikacija sa Svelteom
Svelte je kao novi klinac u pristupu komponentama - barem sličan Reactu, Vueu i Angularu. A ovo je jedan od najtoplijih novih proizvoda za 2020.
To-Do aplikacije nisu nužno najtoplija tema, ali će vam zaista pomoći da usavršite svoje Svelte vještine. To će izgledati ovako:
Šta ćete naučiti
Ovaj vodič će vam pokazati kako da kreirate aplikaciju koristeći Svelte 3, od početka do kraja. Koristit ćete komponente, stiling i obrađivače događaja
Tehnologija i karakteristike
- Svelte 3
- Komponente
- Stiliziranje sa CSS-om
- Sintaksa ES6
Nema mnogo dobrih Svelte starter projekata, pa sam otkrio .
Aplikacija za e-trgovinu sa Next.js
Next.js je najpopularniji okvir za pravljenje React aplikacija koje podržavaju renderiranje na strani servera iz kutije.
Ovaj projekat će vam pokazati kako da kreirate aplikaciju za e-trgovinu koja izgleda ovako:
Šta ćete naučiti
U ovom projektu naučit ćete kako se razvijati pomoću Next.js—kreirati nove stranice i komponente, preuzimati podatke i stilizirati i implementirati Next aplikaciju.
Tehnologija i karakteristike
- Next.js
- Komponente i stranice
- Uzorkovanje podataka
- Styling
- Postavljanje projekta
- SSR i SPA
Uvijek je sjajno imati primjer iz stvarnog života poput aplikacije za e-trgovinu da naučite nešto novo. Možeš .
Puni višejezični blog sa Nuxt.js
Nuxt.js je za Vue, kao što je Next.js za React: odličan okvir za kombinovanje renderovanja na strani servera i aplikacija na jednoj stranici
Posljednja aplikacija koju možete kreirati će izgledati ovako:
Šta ćete naučiti
U ovom oglednom projektu naučit ćete kako napraviti kompletnu web stranicu koristeći Nuxt.js, od početnog postavljanja do konačnog postavljanja.
Koristi prednosti mnogih odličnih karakteristika koje Nuxt može ponuditi, kao što su stranice i komponente, i stiliziranje pomoću SCSS-a.
Tehnologija i karakteristike
- Nuxt.js
- Komponente i stranice
- storyblock modul
- Mixins
- Vuex za upravljanje državom
- SCSS za stilizovanje
- Nuxt middlewares
, koji uključuje mnoge sjajne karakteristike Nuxt.js. Ja lično volim da radim sa Nuxtom, pa bi trebalo da ga isprobate jer će vas takođe učiniti odličnim Vue programerom.
Blog sa Gatsbijem
Gatsby je sjajan generator statičkih stranica koji koristi React i GraphQL. Ovo je rezultat projekta:
Šta ćete naučiti
U ovom vodiču ćete naučiti kako koristiti Gatsby za kreiranje bloga koji ćete koristiti za pisanje vlastitih članaka koristeći React i GraphQL.
Tehnologija i karakteristike
- Gatsby
- reagovati
- GraphQL
- Dodaci i teme
- MDX/Markdown
- Bootstrap CSS
- Obrasci
Ako ste ikada želeli da pokrenete blog, kako to napraviti koristeći React i GraphQL.
Ne kažem da je WordPress loš izbor, ali uz Gatsby možete napraviti web stranice visokih performansi koristeći React – što je nevjerovatna kombinacija.
Blog sa Gridsomeom
Gridsome za Vue… Ok, već smo to imali sa Next/Nuxt-om.
Ali isto važi i za Gridsomea i Gatsbyja. Oba koriste GraphQL kao svoj sloj podataka, ali Gridsome koristi VueJS. To je također odličan generator statičkih stranica koji će vam pomoći da kreirate sjajne blogove:
Šta ćete naučiti
Ovaj projekat će vas naučiti kako da napravite jednostavan blog da biste započeli sa Gridsome, GraphQL i Markdown. Također objašnjava kako implementirati aplikaciju putem Netlifyja.
Tehnologija i karakteristike
- Gridsome
- Vue
- GraphQL
- Markdown
- netlify
Ovo svakako nije najkompletniji vodič, ali pokriva osnovne koncepte Gridsome i .
Audio plejer sličan SoundCloud-u koristeći Quasar
Quasar je još jedan Vue okvir koji se može koristiti za izradu mobilnih aplikacija. U ovom projektu ćete kreirati aplikaciju za audio plejer kao što su:
Šta ćete naučiti
Dok se drugi projekti uglavnom fokusiraju na web aplikacije, ovaj će vam pokazati kako da napravite mobilnu aplikaciju koristeći Vue i Quasar framework.
Trebali biste već imati radnu Cordovu sa Android Studio/Xcode postavljenom. Ako ne, priručnik ima vezu do Quasar web stranice gdje vam pokazuju kako sve postaviti.
Tehnologija i karakteristike
- Kvazar
- Vue
- Cordova
- wavesurfer
- UI Components
, demonstrirajući Quasarove mogućnosti za izgradnju mobilnih aplikacija.
izvor: www.habr.com