Inleiding
Of jy nuut is met programmering of reeds 'n ervare ontwikkelaar is, in hierdie bedryf is die aanleer van nuwe konsepte en tale/raamwerke 'n moet om tred te hou met neigings.
Neem byvoorbeeld React, wat eers vier jaar gelede deur Facebook deur Facebook verkry is en reeds die nommer een keuse vir JavaScript-ontwikkelaars regoor die wêreld geword het.
Vue en Angular het natuurlik ook hul wettige aanhangersbasis. En dan is daar Svelte en ander algemene doel raamwerke soos Next.js of Nuxt.js. En Gatsby, en Gridsome, en Quasar ... en nog baie meer.
As jy jouself as 'n ervare JavaScript-ontwikkelaar wil bewys, moet jy ten minste 'n bietjie ondervinding met verskeie raamwerke en biblioteke hê - benewens om goeie ou JS-werk te doen.
Om jou te help om 'n front-end-meester in 2020 te word, het ek nege verskillende projekte saamgestel, wat elk op verskillende JavaScript-raamwerke en biblioteke fokus as 'n tegnologiese stapel wat jy kan bou en by jou portefeulje kan voeg. Onthou dat niks jou meer help as om dinge in die praktyk te bring nie, so gaan voort, draai op jou gedagtes en maak dit moontlik.
Die artikel is vertaal met die ondersteuning van EDISON Software, wat En .
Flieksoek-app met React (met hake)
Die eerste ding waarmee jy kan begin, is om 'n flieksoek-app met React te bou. Hieronder is 'n prent van hoe die finale toepassing sal lyk:
Wat sal jy leer
Deur hierdie toepassing te bou, sal u u React-vaardighede verbeter deur die relatief nuwe Hooks API te gebruik. Die voorbeeldprojek gebruik React-komponente, baie hake, 'n eksterne API, en natuurlik 'n paar CSS-stilering.
Tegniese stapel en kenmerke
- Reageer met hake
- skep-reageer-app
- jsx
- CSS
Sonder om enige klasse te gebruik, gee hierdie projekte jou die perfekte toegangspunt tot funksionele React en sal jou beslis in 2020 help. jy kan vind . Volg die instruksies of maak dit jou eie.
Klets-app met Vue
Nog 'n wonderlike projek vir jou is om 'n kletstoepassing te bou deur my gunsteling JavaScript-biblioteek te gebruik: VueJS. Die toepassing sal iets soos volg lyk:
Wat sal jy leer
In hierdie tutoriaal sal jy leer hoe om 'n Vue-toepassing van nuuts af te maak - skep komponente, hanteer state, skep roetes, koppel aan derdeparty-dienste, en hanteer selfs stawing.
Tegniese stapel en kenmerke
- Vue
- vuex
- Vue router
- Kyk CLI
- Pusher
- CSS
Dit is 'n wonderlike projek om met Vue te begin of om jou bestaande vaardighede te verbeter om in 2020 in ontwikkeling te kom. jy kan vind .
Pragtige weer-app met Angular 8
Hierdie voorbeeld sal jou help om 'n pragtige weer-app te bou deur Angular 8 te gebruik:
Wat sal jy leer
Hierdie projek sal jou waardevolle vaardighede leer in die bou van toepassings van nuuts af - van ontwerp tot ontwikkeling, tot by 'n gereed-vir-ontplooiing toepassing.
Tegniese stapel en kenmerke
- Hoek 8
- Firebase
- Bedienerkant-weergawe
- CSS met Grid en Flexbox
- Mobiele vriendelik en aanpasbaarheid
- Donker modus
- Pragtige koppelvlak
Wat ek regtig baie van hierdie omvattende projek hou, is dat jy dinge nie in isolasie bestudeer nie. In plaas daarvan leer jy die hele ontwikkelingsproses van ontwerp tot finale ontplooiing.
To-Do app met Svelte
Svelte is soos die nuwe kind in die komponentbenadering - ten minste soortgelyk aan React, Vue en Angular. En dit is een van die warmste nuwe produkte vir 2020.
Doen-toepassings is nie noodwendig die gewildste onderwerp nie, maar hulle sal jou regtig help om jou Svelte-vaardighede te slyp. Dit sal so lyk:
Wat sal jy leer
Hierdie handleiding sal jou wys hoe om 'n toepassing met Svelte 3 te skep, van begin tot einde. Jy sal komponente, stilering en gebeurtenishanteerders gebruik
Tegniese stapel en kenmerke
- Snel 3
- Komponente
- Stileer met CSS
- Sintaksis ES6
Daar is nie baie goeie Svelte-beginnersprojekte nie, so ek het gevind .
E-handelsprogram met Next.js
Next.js is die gewildste raamwerk vir die bou van React-toepassings wat bedienerkant-weergawe uit die boks ondersteun.
Hierdie projek sal jou wys hoe om 'n e-handelsprogram te skep wat soos volg lyk:
Wat sal jy leer
In hierdie projek sal jy leer hoe om met Next.js te ontwikkel—skep nuwe bladsye en komponente, herwin data, en styl en ontplooi 'n Next-toepassing.
Tegniese stapel en kenmerke
- Volgende.js
- Komponente en bladsye
- Datasteekproefneming
- Stylisering
- Projek-ontplooiing
- SSR en SPA
Dit is altyd wonderlik om 'n werklike voorbeeld soos 'n e-handel-toepassing te hê om iets nuuts te leer. Jy kan .
Volledige veeltalige blog met Nuxt.js
Nuxt.js is vir Vue, soos Next.js is vir React: 'n wonderlike raamwerk vir die kombinasie van bediener-kant-weergawe en enkelbladsy-toepassings
Die laaste toepassing wat jy kan skep, sal soos volg lyk:
Wat sal jy leer
In hierdie voorbeeldprojek sal jy leer hoe om 'n volledige webwerf met Nuxt.js te bou, van aanvanklike opstelling tot finale ontplooiing.
Dit maak gebruik van baie van die oulike kenmerke wat Nuxt bied, soos bladsye en komponente, en stilering met SCSS.
Tegniese stapel en kenmerke
- Nuxt.js
- Komponente en bladsye
- storieblok module
- Mengsels
- Vuex vir staatsbestuur
- SCSS vir stilering
- Nuxt middelware
, wat baie van die wonderlike kenmerke van Nuxt.js insluit. Ek persoonlik hou daarvan om met Nuxt te werk, so jy moet dit probeer, want dit sal jou ook 'n wonderlike Vue-ontwikkelaar maak.
Blog met Gatsby
Gatsby is 'n wonderlike statiese werfgenerator wat React en GraphQL gebruik. Dit is die resultaat van die projek:
Wat sal jy leer
In hierdie tutoriaal sal jy leer hoe om Gatsby te gebruik om 'n blog te skep wat jy sal gebruik om jou eie artikels met React en GraphQL te skryf.
Tegniese stapel en kenmerke
- gatsby
- reageer
- Grafiek
- Inproppe en temas
- MDX/Markdown
- Bootstrap CSS
- templates
As jy ooit 'n blog wou begin, hoe om dit te maak met React en GraphQL.
Ek sê nie WordPress is 'n slegte keuse nie, maar met Gatsby kan jy hoëprestasie-webwerwe bou deur React te gebruik - wat 'n wonderlike kombinasie is.
Blog met Gridsome
Gridsome vir Vue ... Goed, ons het dit reeds gehad met Next/Nuxt.
Maar dieselfde geld vir Gridsome en Gatsby. Albei gebruik GraphQL as hul datalaag, maar Gridsome gebruik VueJS. Dit is ook 'n wonderlike statiese werfgenerator om jou te help om wonderlike blogs te skep:
Wat sal jy leer
Hierdie projek sal jou leer hoe om 'n eenvoudige blog te skep om met Gridsome, GraphQL en Markdown te begin. Dit verduidelik ook hoe om 'n toepassing deur Netlify te ontplooi.
Tegniese stapel en kenmerke
- Grinsom
- Vue
- Grafiek
- Markdown
- netifiseer
Dit is beslis nie die mees volledige tutoriaal nie, maar dit dek die basiese konsepte van Gridsome en .
Oudiospeler soortgelyk aan SoundCloud met Quasar
Quasar is nog 'n Vue-raamwerk wat gebruik kan word om mobiele toepassings te bou. In hierdie projek sal jy 'n klankspeler-toepassing skep, byvoorbeeld:
Wat sal jy leer
Terwyl ander projekte hoofsaaklik op webtoepassings fokus, sal hierdie een jou wys hoe om 'n mobiele toepassing te bou met behulp van Vue en die Quasar-raamwerk.
Jy behoort reeds 'n werkende Cordova met Android Studio/Xcode opgestel te hê. Indien nie, het die handleiding 'n skakel na die Quasar webwerf waar hulle jou wys hoe om alles op te stel.
Tegniese stapel en kenmerke
- Quasar
- Vue
- Cordova
- golfsurfer
- UI-komponente
, wat Quasar se vermoëns demonstreer om mobiele toepassings te bou.
Bron: will.com