Uvod
Ne glede na to, ali ste začetnik v programiranju ali že izkušen razvijalec, je v tej industriji nujno, da se učite novih konceptov ter jezikov/okvirov, da boste lahko sledili trendom.
Vzemimo za primer React – koda, ki jo je Facebook odprl pred štirimi leti, je že postala prva izbira za razvijalce JavaScript po vsem svetu.
Vue in Angular imata seveda tudi svojo zakonito bazo oboževalcev. Poleg tega so tu še Svelte in drugi univerzalni okviri, kot sta Next.js ali Nuxt.js. Gatsby, Gridsome, Quasar ... in še mnogo več.
Če želite pokazati svoje sposobnosti kot izkušen razvijalec JavaScript, morate imeti vsaj nekaj izkušenj z različnimi okviri in knjižnicami – poleg dela s starim dobrim JS.
Da vam pomagam postati mojster frontenda v letu 2020, sem zbral devet različnih projektov, od katerih je vsak namenjen različnim okvirem in knjižnicam JavaScript kot tehničnem kupu, ki ga lahko ustvarite in dodate v svoje portfelj. Ne pozabite, da vam nič ne more bolj pomagati kot praksa, zato naprej, odklopite svoj um in to uresničite.
Članek je bil preveden s podporo podjetja EDISON Software, ki , kao i .
Aplikacija za iskanje filmov z Reactom (s hooki)
Prvo, kar bi lahko naredili, je ustvariti aplikacijo za iskanje filmov z Reactom. Spodaj je slika, kako bo končna aplikacija izgledala:
Kaj se boste naučili
Pri ustvarjanju te aplikacije boste izboljšali svoje veščine React, saj boste uporabljali razmeroma nov API Hooks. V vzorčnem projektu so uporabljene komponente React, številni hooki, zunanji API in seveda nekatere CSS sloge.
Tehnični kup in funkcije
- React s hooki
- create-react-app
- JSX
- CSS
Brez uporabe razredov vam ti projekti nudijo idealen vstop v funkcionalni React in vam zagotovo pomagajo v letu 2020. Najdete lahko . Sledite navodilom ali pa vse naredite po svojem okusu.
Aplikacija za klepet z Vue
Še en odličen projekt za vas je ustvariti aplikacijo za klepet, ki uporablja moju najljubšo JavaScript knjižnico: VueJS. Aplikacija bo izgledala približno takole:
Kaj se boste naučili
V temle vodiču se boste naučili, kako zgraditi aplikacijo Vue od začetka — ustvarjati komponente, obvladovati stanja, razvijati rute, povezovati se s storitvami tretjih oseb in celo obvladovati avtentifikacijo.
Tehnični kup in funkcije
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
To je res odličen projekt, s katerim lahko začnete delati z Vue ali izboljšate svoje obstoječe sposobnosti za razvoj v letu 2020. Lahko najdete .
Lepo aplikacijo za pregledovanje vremena z Angular 8
Ta primer vam bo pomagal ustvariti lepo aplikacijo za pregledovanje vremena z Angular 8:
Kaj se boste naučili
Ta projekt vas bo naučil dragocenih veščin pri ustvarjanju aplikacij od začetka do konca — od načrtovanja do razvoja, vse do končne aplikacije pripravljene za postavitev.
Tehnični kup in funkcije
- Angular 8
- Firebase
- Renderiranje na strani strežnika
- CSS s mrežo in Flexbox
- Prijazen do mobilnih naprav in odzivnost
- Temen način
- Lep vmesnik
Kar mi je resnično všeč pri tem celovitem projektu, je to, da se stvari ne učite izolirano. Namesto tega se učite celoten proces razvoja — od načrtovanja do končne postavitve.
To-Do aplikacija s pomočjo Svelte
Svelte je kot nov otrok v komponentnem pristopu — vsaj podoben Reactu, Vue in Angular. In to je ena izmed najbolj vročih novosti leta 2020.
To-Do aplikacije niso nujno najbolj priljubljena tema, vendar vam resnično pomagajo izpopolniti vaše veščine Svelte. Tako bo to izgledalo:
Kaj se boste naučili
Iz tega tutoriala se boste naučili, kako zgraditi aplikacijo s Svelte 3, od začetka do konca. Uporabili boste komponente, stilizacijo in obravnavo dogodkov
Tehnični kup in funkcije
- Svelte 3
- Komponente
- Stilizacija s CSS
- ES 6 sintaksa
Ni veliko dobrih začetnih projektov za Svelte, zato sem našel .
Приложение для электронной коммерции с помощью Next.js
Next.js je najbolj priljubljen okvir za ustvarjanje aplikacij React, ki iz škatle podpirajo renderiranje na strani strežnika.
Ta projekt vam bo pokazal, kako zgraditi aplikacijo za e-trgovino, ki izgleda takole:
Kaj se boste naučili
V tem projektu boste spoznali, kako razvijati z Next.js — ustvarjati nove strani in komponente, pridobivati podatke ter stilizirati in postavljati aplikacijo Next.
Tehnični kup in funkcije
- Next.js
- Komponente in strani
- Vzorkovanje podatkov
- Stilizacija
- Postavitev projekta
- SSR in SPA
Vedno je dobro imeti pravi primer, kot je aplikacija za e-trgovino, da se naučite kaj novega. Lahko .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js za Vue, tako kot je Next.js za React: odličen okvir za združevanje možnosti strežnikovega upodabljanja in enostranskih aplikacij
Končna aplikacija, ki jo lahko ustvarite, bo videti tako:
Kaj se boste naučili
V tem projektu se boste naučili, kako ustvariti celovito spletno mesto z uporabo Nuxt.js — od začetne nastavitve do končne distribucije.
Uporablja številne zanimive funkcije, ki jih Nuxt lahko ponudi, na primer strani in komponente ter stilizacijo s SCSS.
Tehnični kup in funkcije
- Nuxt.js
- Komponente in strani
- Storyblock modul
- Mixini
- Vuex za upravljanje stanja
- SCSS za stilizacijo
- Nuxt vmesniki
, ki vključuje številne odlične funkcije Nuxt.js. Osebno imam rad delo z Nuxt, zato ga morate preizkusiti, saj vas bo to tudi naredilo odličnega Vue razvijalca.
Blog z Gatsbyjem
Gatsby je odličen generator statičnih spletnih strani, ki uporablja React in GraphQL. To je rezultat projekta:
Kaj se boste naučili
V tem priročniku se boste naučili, kako uporabiti Gatsby za ustvarjanje bloga, ki ga boste uporabljali za pisanje lastnih člankov, z uporabo React in GraphQL.
Tehnični kup in funkcije
- Gatsby
- React
- GraphQL
- Vtičniki in teme
- MDX/Markdown
- Bootstrap CSS
- Predloge
Če ste kdaj želeli imeti blog, kako ga ustvariti z uporabo React in GraphQL.
Ne pravim, da je WordPress slaba izbira, vendar lahko z Gatsbyjem ustvarite visoko zmogljive strani z uporabo Reacta — kar je neverjetna kombinacija.
Blog z Gridsome
Gridsome za Vue… No, to smo že imeli z Next/Nuxt.
Toda enako velja za Gridsome in Gatsby. Obe uporabljata GraphQL kot podatkovno plast, vendar Gridsome uporablja VueJS. To je tudi neverjeten generator statičnih spletnih strani, ki vam bo pomagal ustvariti odlične bloge:
Kaj se boste naučili
Ta projekt vas bo naučil, kako ustvariti preprost blog, da začnete z Gridsome, GraphQL in Markdown. Prav tako se v njem obravnava, kako razporediti aplikacijo prek Netlifysta.
Tehnični kup in funkcije
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
To seveda ni najbolj popoln tutorial, vendar pokriva osnovne koncepte Gridsome in .
Avdio predvajalnik, podoben SoundCloudu, s pomočjo Quasar
Quasar je še en Vue framework, ki ga lahko uporabite za ustvarjanje mobilnih aplikacij. V tem projektu boste ustvarili aplikacijo predvajalnika avdio, na primer:
Kaj se boste naučili
Medtem ko se drugi projekti osredotočajo predvsem na spletne aplikacije, vam ta pokaže, kako ustvariti mobilno aplikacijo z uporabo Vue in frameworka Quasar.
Že bi morali imeti delujočo Cordovo z nastavljenim Android Studio/Xcode. Če tega še nimate, je v priročniku povezava na spletno mesto Quasar, kjer prikažejo, kako vse nastaviti.
Tehnični kup in funkcije
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI Komponente
, ki prikazuje zmožnosti Quasarja za ustvarjanje mobilnih aplikacij.
Izvor: habr.com
