Innledning
Enten du er ny på programmering eller en erfaren utvikler, er det et must å lære nye konsepter og språk/rammer i denne bransjen for å holde tritt med trender.
Ta for eksempel React, som Facebook åpnet med åpen kildekode for bare fire år siden og allerede har blitt nummer én for JavaScript-utviklere over hele verden.
Vue og Angular har selvfølgelig også sin egen legitime fanbase. Og så er det Svelte og andre universelle rammeverk som Next.js eller Nuxt.js. Og Gatsby, og Gridsome, og Quasar... og mye mer.
Hvis du vil bevise deg selv som en erfaren JavaScript-utvikler, bør du i det minste ha litt erfaring med ulike rammeverk og biblioteker – i tillegg til å jobbe med gode gamle JS.
For å hjelpe deg med å bli en front-end-mester i 2020, har jeg satt sammen ni forskjellige prosjekter, som hver fokuserer på et annet JavaScript-rammeverk og bibliotek som en teknisk stack du kan bygge og legge til i porteføljen din. Husk at ingenting hjelper deg mer enn å faktisk skape ting, så gå videre, bruk tankene dine og få det til
Artikkelen ble oversatt med støtte fra EDISON Software, som Og .
Filmsøk-app med React (med kroker)
Det første du kan begynne med er å lage en filmsøk-app ved hjelp av React. Nedenfor er et bilde av hvordan den endelige søknaden vil se ut:
Hva vil du lære
Ved å bygge denne appen vil du forbedre React-ferdighetene dine ved å bruke den relativt nye Hooks API. Eksempelprosjektet bruker React-komponenter, mange kroker, en ekstern API og selvfølgelig litt CSS-styling.
Teknisk stack og funksjoner
- Reager med kroker
- skape reagere-app
- jsx
- CSS
Uten å bruke noen klasser gir disse prosjektene deg det perfekte inngangspunktet til funksjonelle React og vil definitivt hjelpe deg i 2020. du kan finne . Følg instruksjonene eller gjør den til din egen.
Chat-app med Vue
Et annet flott prosjekt du kan gjøre er å lage en chat-app ved å bruke mitt favoritt JavaScript-bibliotek: VueJS. Applikasjonen vil se omtrent slik ut:
Hva vil du lære
I denne opplæringen lærer du hvordan du lager en Vue-app fra bunnen av – oppretter komponenter, håndterer tilstand, oppretter ruter, kobler til tredjepartstjenester og til og med håndterer autentisering.
Teknisk stack og funksjoner
- Vue
- vuex
- Vue-ruter
- CLI -visning
- Pusher
- CSS
Dette er et virkelig flott prosjekt for å komme i gang med Vue eller forbedre dine eksisterende ferdigheter for å komme i utvikling i 2020. du kan finne .
Vakker værapp med Angular 8
Dette eksemplet vil hjelpe deg med å lage en vakker vær-app ved å bruke Angular 8:
Hva vil du lære
Dette prosjektet vil lære deg verdifulle ferdigheter i å bygge applikasjoner fra bunnen av – fra design til utvikling, hele veien til en distribusjonsklar applikasjon.
Teknisk stack og funksjoner
- Vinkel 8
- Fire
- Gjengivelse på serversiden
- CSS med Grid og Flexbox
- Mobilvennlig og tilpasningsdyktig
- Mørk modus
- Vakkert grensesnitt
Det jeg virkelig elsker med dette altomfattende prosjektet er at man ikke studerer ting isolert. I stedet lærer du hele utviklingsprosessen, fra design til endelig distribusjon.
To-Do-applikasjon med Svelte
Svelte er som den nye gutten på den komponentbaserte tilnærmingen - i det minste lik React, Vue og Angular. Og dette er et av de hotteste nye produktene for 2020.
Gjøremål-apper er ikke nødvendigvis det heteste emnet, men det vil virkelig hjelpe deg å finpusse Svelte-ferdighetene dine. Det vil se slik ut:
Hva vil du lære
Denne opplæringen viser deg hvordan du lager en applikasjon ved hjelp av Svelte 3, fra start til slutt. Du vil bruke komponenter, styling og hendelsesbehandlere
Teknisk stack og funksjoner
- Svelte 3
- Komponenter
- Styling med CSS
- ES 6 syntaks
Det er ikke mange gode Svelte-startprosjekter, så jeg fant .
E-handelsapp som bruker Next.js
Next.js er det mest populære rammeverket for å bygge React-applikasjoner som støtter gjengivelse på serversiden ut av esken.
Dette prosjektet vil vise deg hvordan du lager en e-handelsapplikasjon som ser slik ut:
Hva vil du lære
I dette prosjektet lærer du hvordan du utvikler med Next.js – opprette nye sider og komponenter, trekke ut data og stil og distribuere en Next-applikasjon.
Teknisk stack og funksjoner
- Next.js
- Komponenter og sider
- Datasampling
- stilisering
- Prosjektdistribusjon
- SSR og SPA
Det er alltid flott å ha et eksempel fra den virkelige verden som en e-handelsapp for å lære noe nytt. Du kan .
Fullverdig flerspråklig blogg med Nuxt.js
Nuxt.js er for Vue, hva Next.js er for React: et flott rammeverk for å kombinere kraften til gjengivelse på serversiden og enkeltsideapplikasjoner
Den endelige applikasjonen du kan lage vil se slik ut:
Hva vil du lære
I dette eksempelprosjektet lærer du hvordan du lager et komplett nettsted ved hjelp av Nuxt.js, fra første oppsett til endelig distribusjon.
Den utnytter mange av de kule funksjonene som Nuxt har å tilby, for eksempel sider og komponenter, og styling med SCSS.
Teknisk stack og funksjoner
- Nuxt.js
- Komponenter og sider
- Storyblock-modul
- Hagfish
- Vuex for statlig ledelse
- SCSS for styling
- Nuxt mellomvare
, som inkluderer mange flotte Nuxt.js-funksjoner. Jeg personlig elsker å jobbe med Nuxt, så du bør prøve det, da det også vil gjøre deg til en flott Vue-utvikler.
Blogg med Gatsby
Gatsby er en utmerket statisk nettstedsgenerator som bruker React og GraphQL. Dette er resultatet av prosjektet:
Hva vil du lære
I denne opplæringen lærer du hvordan du bruker Gatsby til å lage en blogg som du vil bruke til å skrive dine egne artikler ved hjelp av React og GraphQL.
Teknisk stack og funksjoner
- Gatsby
- Reager
- GraphQL
- Plugins og temaer
- MDX/Markdown
- Bootstrap CSS
- maler
Hvis du noen gang har ønsket å starte en blogg, om hvordan du lager det ved hjelp av React og GraphQL.
Jeg sier ikke at WordPress er et dårlig valg, men med Gatsby kan du bygge nettsider med høy ytelse ved å bruke React – som er en fantastisk kombinasjon.
Blogg med Gridsome
Gridsome for Vue... Ok, vi hadde allerede dette med Next/Nuxt.
Men det samme gjelder for Gridsome og Gatsby. Begge bruker GraphQL som datalag, men Gridsome bruker VueJS. Dette er også en fantastisk statisk nettstedsgenerator som vil hjelpe deg med å lage flotte blogger:
Hva vil du lære
Dette prosjektet vil lære deg hvordan du lager en enkel blogg for å komme i gang med Gridsome, GraphQL og Markdown. Den dekker også hvordan du distribuerer en applikasjon gjennom Netlify.
Teknisk stack og funksjoner
- Gridsomt
- Vue
- GraphQL
- Markdown
- Netlify
Dette er absolutt ikke den mest omfattende opplæringen, men den dekker de grunnleggende konseptene til Gridsome og .
SoundCloud-lignende lydspiller som bruker Quasar
Quasar er et annet Vue-rammeverk som kan brukes til å lage mobilapplikasjoner. I dette prosjektet skal du lage en lydspillerapplikasjon, for eksempel:
Hva vil du lære
Mens andre prosjekter hovedsakelig fokuserer på nettapplikasjoner, vil dette vise deg hvordan du lager en mobilapplikasjon ved hjelp av Vue og Quasar-rammeverket.
Du bør allerede ha Cordova kjørende med Android Studio/Xcode konfigurert. Hvis ikke, har manualen en lenke til Quasar-nettstedet der de viser deg hvordan du setter opp alt.
Teknisk stack og funksjoner
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI-komponenter
, som demonstrerer Quasars evner for å lage mobilapplikasjoner.
Kilde: www.habr.com