Uvod
Bez obzira jeste li početnik u programiranju ili već iskusni developer, u ovoj industriji važno je učiti nove koncepte i jezike/frameworke kako biste pratili trendove.
Uzmimo, na primjer, React — čiji je kod Facebook objavio prije četiri godine, a već je postao broj jedan izbor za JavaScript developere širom svijeta.
Naravno, Vue i Angular također imaju svoju legitimu bazu obožavatelja. Tu su još Svelte i drugi svestrani frameworki poput Next.js ili Nuxt.js. I Gatsby, i Gridsome, i Quasar… i još mnogo toga.
Ako želite osvajati kao iskusni JavaScript developer, trebate imati barem poneko iskustvo s raznim frameworkima i bibliotekama — osim radnog iskustva s dobrim starim JS-om.
Kako bih vam pomogao da postanete majstor frontenda u 2020. godini, sakupio sam devet različitih projekata, svaki posvećen različitim frameworkima i JavaScript bibliotekama kao tehničkom skupu koji možete kreirati i dodati u svoje portfelj. Zapamtite, ništa vam ne pomaže više od praktičnog stvaranja stvar, pa naprijed, uključite svoj um i učinite to mogućim.
Članak je preveden uz podršku kompanije EDISON Software, koja , kao i .
Aplikacija za pretraživanje filmova uz pomoć React (s hook-ovima)
Prvo što biste mogli učiniti — je izraditi aplikaciju za pretraživanje filmova uz pomoć Reacta. Ispod je slika kako će izgledati finalna aplikacija:
Što ćete naučiti
Izradom ove aplikacije poboljšat ćete svoje vještine u Reactu, koristeći relativno novi API Hooks. U primjeru projekta koriste se React komponenti, mnogo hook-ova, vanjski API i, naravno, neki CSS stilovi.
Tehnički skup i značajke
- React s hook-ovima
- create-react-app
- JSX
- CSS
Bez korištenja ikakvih klasa, ovi projekti vam daju savršenu ulaznu točku u funkcionalni React i definitivno će vam pomoći u 2020. godini. Možete pronaći . Slijedite upute ili učinite sve po svom ukusu.
Chat aplikacija uz pomoć Vue
Još jedan odličan projekt za vas — izraditi chat aplikaciju, koristeći moju omiljenu JavaScript biblioteku: VueJS. Aplikacija će izgledati otprilike ovako:
Što ćete naučiti
U ovom priručniku ćete naučiti kako napraviti Vue aplikaciju od nule – kreirati komponente, obraditi stanje, napraviti rute, povezati se s vanjskim servisima i čak obraditi autentifikaciju.
Tehnički skup i značajke
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Ovo je zaista sjajan projekt za početak rada s Vue-om ili unapređenje vaših postojećih vještina kako biste se bavili razvojem u 2020. godini. Možete pronaći .
Predivna aplikacija za pregled vremena s Angular 8
Ovaj primjer će vam pomoći da kreirate predivnu aplikaciju za pregled vremena koristeći Angular 8:
Što ćete naučiti
Ovaj projekt će vas naučiti vrijednim vještinama prilikom kreiranja aplikacija od nule – od dizajniranja do razvoja, sve do aplikacije spremne za implementaciju.
Tehnički skup i značajke
- Angular 8
- Firebase
- Renderiranje na strani servera
- CSS s mrežom i Flexboxom
- Prilagođeno za mobilne uređaje i responzivnost
- Tamni način
- Predivno sučelje
Ono što mi se zaista sviđa u ovom sveobuhvatnom projektu je da ne učite stvari izolirano. Umjesto toga, učite cijeli razvojni proces – od dizajniranja do konačne implementacije.
To-Do aplikacija koristeći Svelte
Svelte je kao novi dječak u komponentnom pristupu – barem sličan React-u, Vue-u i Angular-u. I to je jedan od najtoplijih noviteta za 2020. godinu.
To-Do aplikacije nisu nužno najpopularnija tema, ali će vam zaista pomoći da usavršite svoje Svelte vještine. Izgledat će ovako:
Što ćete naučiti
U ovom tutorijalu naučit ćete kako stvoriti aplikaciju koristeći Svelte 3, od početka do kraja. Koristit ćete komponente, stilizaciju i obradu događaja
Tehnički skup i značajke
- Svelte 3
- Komponente
- Stilizacija pomoću CSS-a
- ES 6 sintaksa
Nema mnogo dobrih startnih projekata za Svelte, pa sam našao .
Приложение для электронной коммерции с помощью Next.js
Next.js je najpopularniji okvir za izradu React aplikacija koji podržavaju renderiranje na strani servera iz kutije.
Ovaj projekt će vam pokazati kako stvoriti aplikaciju za e-trgovinu koja izgleda ovako:
Što ćete naučiti
U ovom projektu naučit ćete kako se razvijati pomoću Next.js – kreirati nove stranice i komponente, prikupiti podatke, kao i stilizirati i implementirati Next aplikaciju.
Tehnički skup i značajke
- Next.js
- Komponente i stranice
- Prikupljanje podataka
- Stilizacija
- Implementacija projekta
- SSR i SPA
Uvijek je dobro imati neki stvarni primjer, poput aplikacije za e-trgovinu, kako biste naučili nešto novo. Možete .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js za Vue je kao Next.js za React: izvrstan okvir za kombiniranje mogućnosti renderiranja na strani poslužitelja i aplikacija s jednom stranicom.
Zadnja aplikacija koju možete stvoriti izgledat će ovako:
Što ćete naučiti
U ovom primjeru projekta naučit ćete kako izraditi potpuno funkcionalnu web stranicu koristeći Nuxt.js — od početne konfiguracije do konačnog postavljanja.
Korištenje je puno zanimljivih značajki koje Nuxt može ponuditi, kao što su stranice i komponente, kao i stiliziranje pomoću SCSS-a.
Tehnički skup i značajke
- Nuxt.js
- Komponente i stranice
- Storyblock modul
- Miksevi
- Vuex za upravljanje stanjem
- SCSS za stilizaciju
- Nuxt middleware
, koji uključuje mnogo nevjerojatnih mogućnosti Nuxt.js. Osobno volim raditi s Nuxtom, pa ga svakako isprobajte, jer će vas to učiniti izvrsnim Vue programerom.
Blog s Gatsby
Gatsby je izvrstan generator statičkih stranica koji koristi React i GraphQL. Ovo je rezultat projekta:
Što ćete naučiti
U ovom vodiču naučit ćete kako koristiti Gatsby za izradu bloga koji ćete koristiti za pisanje vlastitih članaka koristeći React i GraphQL.
Tehnički skup i značajke
- Gatsby
- React
- GraphQL
- Dodaci i teme
- MDX/Markdown
- Bootstrap CSS
- Predlošci
Ako ste ikada željeli pokrenuti blog, kako ga napraviti koristeći React i GraphQL.
Ne kažem da je WordPress loš izbor, ali s Gatsbyem možete izraditi visokokvalitetne stranice koristeći React — što je izvanredna kombinacija.
Blog s Gridsome
Gridsome za Vue… Dobro, to već imamo s Next/Nuxt.
Ali isto vrijedi i za Gridsome i Gatsby. Obojica koriste GraphQL kao sloj podataka, no Gridsome koristi VueJS. To je također izvanredan generator statičkih stranica koji će vam pomoći stvoriti sjajne blogove:
Što ćete naučiti
Ovaj projekt naučit će vas kako stvoriti jednostavan blog kako biste započeli rad s Gridsome, GraphQL i Markdown. Također opisuje kako postaviti aplikaciju putem Netlify-a.
Tehnički skup i značajke
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Ovo, naravno, nije najdetaljniji vodič, ali obuhvaća osnovne pojmove Gridsome i .
Audio player sličan SoundCloudu koristeći Quasar.
Quasar — još jedan Vue okvir koji se može koristiti za izradu mobilnih aplikacija. U ovom projektu stvorit ćete aplikaciju za audio plejer, na primjer:
Što ćete naučiti
Dok se drugi projekti prvenstveno fokusiraju na web aplikacije, ovaj će vam pokazati kako stvoriti mobilnu aplikaciju koristeći Vue i Quasar okvir.
Već bi trebali imati postavljen Cordova s Android Studio/Xcode. Ako ne, u vodiču ima poveznica na web stranicu Quasar gdje pokazuju kako sve postaviti.
Tehnički skup i značajke
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI Komponente
, koji demonstrira mogućnosti Quasar za izradu mobilnih aplikacija.
Izvor: habr.com
