Paraqitje
Pavarësisht nëse jeni i ri në programim ose një zhvillues me përvojë, mësimi i koncepteve dhe gjuhëve/kornizave të reja është një domosdoshmëri në këtë industri për të vazhduar me trendet.
Merrni React, për shembull, të cilin Facebook e krijoi me burim të hapur vetëm katër vjet më parë dhe tashmë është bërë zgjedhja numër një për zhvilluesit e JavaScript në mbarë botën.
Vue dhe Angular, natyrisht, kanë gjithashtu bazën e tyre legjitime të fansave. Dhe pastaj ka Svelte dhe korniza të tjera universale si Next.js ose Nuxt.js. Dhe Gatsby, dhe Gridsome, dhe Quasar... dhe shumë më tepër.
Nëse dëshironi të provoni veten si një zhvillues me përvojë JavaScript, duhet të keni të paktën një përvojë me korniza dhe biblioteka të ndryshme - përveç punës me JS të mirë të vjetër.
Për t'ju ndihmuar të bëheni një mjeshtër i përparmë në vitin 2020, unë kam bashkuar nëntë projekte të ndryshme, secili duke u fokusuar në një kornizë dhe bibliotekë të ndryshme JavaScript si një grumbull teknologjie që mund të ndërtoni dhe shtoni në portofolin tuaj. Mos harroni se asgjë nuk ju ndihmon më shumë sesa krijimi i gjërave, kështu që ecni përpara, përdorni mendjen tuaj dhe bëjeni atë të ndodhë
Artikulli është përkthyer me mbështetjen e EDISON Software, i cili Dhe .
Aplikacioni i kërkimit të filmit duke përdorur React (me grepa)
Gjëja e parë me të cilën mund të filloni është të krijoni një aplikacion kërkimi filmash duke përdorur React. Më poshtë është një imazh se si do të duket aplikacioni përfundimtar:
Çfarë do të mësoni
Duke ndërtuar këtë aplikacion, ju do të përmirësoni aftësitë tuaja React duke përdorur API-në relativisht të re Hooks. Projekti shembull përdor komponentë React, shumë grepa, një API të jashtëm dhe sigurisht disa stilime CSS.
Rafte dhe veçori teknike
- Reagoni me grepa
- krijoni-reagoni-aplikacionin
- Jsx
- CSS
Pa përdorur asnjë klasë, këto projekte ju japin pikën perfekte të hyrjes në React funksional dhe patjetër do t'ju ndihmojnë në vitin 2020. mund të gjesh . Ndiqni udhëzimet ose bëjeni tuajin.
Aplikacioni i bisedës me Vue
Një tjetër projekt i mrekullueshëm që duhet të bëni është të krijoni një aplikacion bisede duke përdorur bibliotekën time të preferuar JavaScript: VueJS. Aplikacioni do të duket diçka si kjo:
Çfarë do të mësoni
Në këtë tutorial, do të mësoni se si të krijoni një aplikacion Vue nga e para - krijimin e komponentëve, trajtimin e gjendjes, krijimin e rrugëve, lidhjen me shërbimet e palëve të treta dhe madje edhe trajtimin e vërtetimit.
Rafte dhe veçori teknike
- Vue
- vuex
- Ruteri Vue
- Pamja CLI
- Karierist
- CSS
Ky është një projekt vërtet i mrekullueshëm për të filluar me Vue ose për të përmirësuar aftësitë tuaja ekzistuese për të hyrë në zhvillim në 2020. mund të gjesh .
Aplikacion i bukur i motit me Angular 8
Ky shembull do t'ju ndihmojë të krijoni një aplikacion të bukur të motit duke përdorur Angular 8:
Çfarë do të mësoni
Ky projekt do t'ju mësojë aftësi të vlefshme në ndërtimin e aplikacioneve nga e para - nga dizajni në zhvillim, deri te një aplikacion i gatshëm për vendosje.
Rafte dhe veçori teknike
- Këndor 8
- Firebase
- Paraqitja nga ana e serverit
- CSS me Grid dhe Flexbox
- Miqësi në celular dhe përshtatshmëri
- Mënyra e errët
- Ndërfaqe e bukur
Ajo që më pëlqen vërtet në këtë projekt gjithëpërfshirës është se ju nuk i studioni gjërat në izolim. Në vend të kësaj, ju mësoni të gjithë procesin e zhvillimit, nga dizajni deri në vendosjen përfundimtare.
Aplikacioni për të bërë duke përdorur Svelte
Svelte është si fëmija i ri në qasjen e bazuar në komponentë - të paktën i ngjashëm me React, Vue dhe Angular. Dhe ky është një nga produktet e reja më të nxehta për vitin 2020.
Aplikacionet për të bërë nuk janë domosdoshmërisht tema më e nxehtë, por me të vërtetë do t'ju ndihmojë të përmirësoni aftësitë tuaja Svelte. Do të duket kështu:
Çfarë do të mësoni
Ky tutorial do t'ju tregojë se si të krijoni një aplikacion duke përdorur Svelte 3, nga fillimi në fund. Ju do të përdorni komponentë, stilim dhe mbajtës të ngjarjeve
Rafte dhe veçori teknike
- E shkathët 3
- Komponentet
- Stilimi me CSS
- Sintaksa ES 6
Nuk ka shumë projekte të mira fillestare Svelte, kështu që gjeta .
Aplikacioni i tregtisë elektronike duke përdorur Next.js
Next.js është korniza më e njohur për ndërtimin e aplikacioneve React që mbështesin paraqitjen jashtë kutisë nga ana e serverit.
Ky projekt do t'ju tregojë se si të krijoni një aplikacion e-commerce që duket si ky:
Çfarë do të mësoni
Në këtë projekt, do të mësoni se si të zhvilloni me Next.js—krijoni faqe dhe komponentë të rinj, nxirrni të dhëna dhe stiloni dhe vendosni një aplikacion Next.
Rafte dhe veçori teknike
- Tjetra.js
- Komponentët dhe Faqet
- Mostrimi i të dhënave
- Stilizimi
- Vendosja e projektit
- SSR dhe SPA
Është gjithmonë mirë të kesh një shembull të botës reale si një aplikacion e-commerce për të mësuar diçka të re. Ti mundesh .
Blog shumëgjuhësh i plotë me Nuxt.js
Nuxt.js është për Vue, çfarë është Next.js për React: një kornizë e shkëlqyeshme për kombinimin e fuqisë së paraqitjes nga serveri dhe aplikacioneve me një faqe
Aplikacioni përfundimtar që mund të krijoni do të duket kështu:
Çfarë do të mësoni
Në këtë projekt shembull, do të mësoni se si të krijoni një faqe interneti të plotë duke përdorur Nuxt.js, nga konfigurimi fillestar deri në vendosjen përfundimtare.
Ai përfiton nga shumë nga veçoritë interesante që Nuxt ofron, të tilla si faqet dhe komponentët, dhe stilimi me SCSS.
Rafte dhe veçori teknike
- Nuxt.js
- Komponentët dhe Faqet
- Moduli i bllokut të historisë
- Hagfish
- Vuex për menaxhimin e shtetit
- SCSS për stilim
- Nuxt Middlewares
, i cili përfshin shumë veçori të shkëlqyera të Nuxt.js. Unë personalisht më pëlqen të punoj me Nuxt, kështu që duhet ta provoni pasi do t'ju bëjë gjithashtu një zhvillues të shkëlqyeshëm të Vue.
Blog me Gatsby
Gatsby është një gjenerues i shkëlqyer i faqeve statike duke përdorur React dhe GraphQL. Ky është rezultati i projektit:
Çfarë do të mësoni
Në këtë tutorial, do të mësoni se si të përdorni Gatsby për të krijuar një blog që do ta përdorni për të shkruar artikujt tuaj duke përdorur React dhe GraphQL.
Rafte dhe veçori teknike
- gatsby
- Reagoj
- GrafikQL
- Plugins dhe tema
- MDX/Markdown
- Bootstrap CSS
- Shabllone
Nëse keni dashur ndonjëherë të hapni një blog, se si ta bëni atë duke përdorur React dhe GraphQL.
Nuk po them se WordPress është një zgjedhje e keqe, por me Gatsby mund të ndërtoni faqe interneti me performancë të lartë duke përdorur React - që është një kombinim i mahnitshëm.
Blog me Gridsome
Gridsome për Vue... Mirë, ne e kishim tashmë këtë me Next/Nuxt.
Por e njëjta gjë është e vërtetë për Gridsome dhe Gatsby. Të dy përdorin GraphQL si shtresën e tyre të të dhënave, por Gridsome përdor VueJS. Ky është gjithashtu një gjenerues i mahnitshëm i faqeve statike që do t'ju ndihmojë të krijoni blogje të shkëlqyera:
Çfarë do të mësoni
Ky projekt do t'ju mësojë se si të krijoni një blog të thjeshtë për të filluar me Gridsome, GraphQL dhe Markdown. Ai gjithashtu mbulon mënyrën e vendosjes së një aplikacioni përmes Netlify.
Rafte dhe veçori teknike
- E zymtë
- Vue
- GrafikQL
- Markdown
- Netlify
Ky sigurisht nuk është tutoriali më gjithëpërfshirës, por mbulon konceptet themelore të Gridsome dhe .
Riprodhuesi audio i ngjashëm me SoundCloud duke përdorur Quasar
Quasar është një tjetër kornizë Vue që mund të përdoret për të krijuar aplikacione celulare. Në këtë projekt ju do të krijoni një aplikacion audio player, për shembull:
Çfarë do të mësoni
Ndërsa projektet e tjera fokusohen kryesisht në aplikacionet në ueb, ky do t'ju tregojë se si të krijoni një aplikacion celular duke përdorur Vue dhe kornizën Quasar.
Duhet ta keni tashmë të konfiguruar Cordova që funksionon me Android Studio/Xcode. Nëse jo, manuali ka një lidhje me faqen e internetit të Quasar ku ju tregojnë se si të konfiguroni gjithçka.
Rafte dhe veçori teknike
- Quasar
- Vue
- Cordova
- WaveSurfer
- Komponentët UI
, duke demonstruar aftësitë e Quasar për krijimin e aplikacioneve celulare.
Burimi: www.habr.com