Hyrje
Pavarësisht nëse jeni fillestar në programim ose një programues me përvojë, në këtë industri është e domosdoshme të mësoni koncepte të reja dhe gjuhë/framework-e për të qëndruar në trend.
Merrni për shembull React - kodi i të cilit, Facebook e kreu vetëm katër vjet më parë, tashmë është zgjedhja numër një për zhvilluesit e JavaScript në mbarë botën.
Sigurisht, Vue dhe Angular gjithashtu kanë bazën e tyre të merituar të adhuruesve. Dhe ka gjithashtu Svelte dhe frameworke të tjera universale, si Next.js ose Nuxt.js. Edhe Gatsby, Gridsome, dhe Quasar… dhe shumë më tepër.
Nëse dëshironi të shfaqeni si një zhvillues i përvojës në JavaScript, duhet të keni të paktën ndonjë përvojë me frameworke dhe biblioteka të ndryshme - përveç se të punoni me JS të mirë të vjetër.
Për t'ju ndihmuar të bëheni mjeshtër i frontend-it në vitin 2020, kam mbledhur nëntë projekte të ndryshme, secili dedikuar frameworkeve dhe biblioteko JavaScript si një grumbull teknologjik që mund të krijoni dhe shtoni në portofolin tuaj. Mos e harroni, asgjë nuk ju ndihmon më shumë sesa të krijoni gjëra në praktikë, kështu që shkoni përpara, aktivizoni mendjen tuaj dhe bëjeni të mundur.
Artikulli është përkthyer me mbështetje nga kompania EDISON Software, e cila , si dhe .
Aplikacion për kërkimin e filmave me React (me hooks)
E para nga çfarë mund të filloni, është të krijoni një aplikacion për kërkimin e filmave me React. Më poshtë është një imazh se si do të duket aplikacioni përfundimtar:
Çfarë do të mësoni
Duke krijuar këtë aplikacion, do të përmirësoni aftësitë tuaja në React, duke përdorur një API mjaft të ri, Hook. Në shembullin e projektit përdoren komponentë React, shumë hooks, një API jashtë dhe, sigurisht, disa stile CSS.
Grumbulli teknik dhe veçoritë
- React me hooks
- create-react-app
- JSX
- CSS
Pa përdorimin e klasave, këto projekte ju japin një pikë të shkëlqyer hyrëse në React-in funksional dhe me siguri do t'ju ndihmojnë në vitin 2020. Mund të gjeni . Ndiqni udhëzimet ose bëni gjithçka sipas dëshirës tuaj.
Aplikacioni i bisedës me Vue
Një tjetër projekt i shkëlqyer për ju është të krijoni një aplikacion bisedash, duke përdorur bibliotekën time të preferuar JavaScript: VueJS. Aplikacioni do të duket kështu:
Çfarë do të mësoni
Nga nga udhëzimi, do të mësoni se si të krijoni një aplikacion Vue nga zero — për të krijuar komponentë, për të trajtuar gjendjet, për të krijuar ruta, për t'u lidhur me shërbime të jashtme dhe madje për të trajtuar autentifikimin.
Grumbulli teknik dhe veçoritë
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Ky është vërtet një projekt i shkëlqyer për të filluar të punoni me Vue ose për të përmirësuar aftësitë tuaja ekzistuese për zhvillimin në vitin 2020. Mund të gjeni .
Një aplikacion i bukur për parashikimin e motit me Angular 8
Ky shembull do t'ju ndihmojë të krijoni një aplikacion të bukur për parashikimin e motit me Angular 8:
Çfarë do të mësoni
Ky projekt do t'ju mësojë aftësi të vlefshme në krijimin e aplikacioneve nga zero — duke filluar nga dizajni dhe duke përfunduar me zhvillimin, deri në aplikacionin e gatshëm për të u deploy.
Grumbulli teknik dhe veçoritë
- Angular 8
- Firebase
- Renderimi në server
- CSS me grid dhe Flexbox
- Mik për celular dhe responsivitet
- Regjimi i errët
- Interfejs i bukur
Ajo që më pëlqen vërtet shumë në këtë projekt gjithëpërfshirës është se nuk mësoni gjërat në mënyrë izoluese. Në vend të kësaj, ju mësoni të gjithë procesin e zhvillimit — nga dizajni deri te deploy final.
Aplikacion To-Do me Svelte
Svelte është si një fëmijë i ri në qasjen komponent, të paktën e ngjashme me React, Vue dhe Angular. Dhe kjo është një nga risitë më të nxehta për vitin 2020.
Aplikacionet To-Do nuk janë domosdoshmërisht tema më e nxehtë, por kjo do t'ju ndihmojë vërtet të rafinoni aftësitë tuaja në Svelte. Kjo do të duket kështu:
Çfarë do të mësoni
Nga ky udhëzim do të mësoni se si të krijoni një aplikacion me Svelte 3, nga fillimi në fund. Do të përdorni komponentë, stilizim dhe trajtues të ngjarjeve.
Grumbulli teknik dhe veçoritë
- Svelte 3
- Komponentët
- Stilizimi me CSS
- Sintaksa ES 6
Nuk ka shumë projekte të mira fillestare për Svelte, prandaj une gjeta .
Приложение для электронной коммерции с помощью Next.js
Next.js është framework-u më popullor për krijimin e aplikacioneve React, të cilat mbështesin renderimin në server nga kutia.
Ky projekt do t'ju tregojë se si të krijoni një aplikacion për tregtinë elektronike, i cili duket si kjo:
Çfarë do të mësoni
Në këtë projekt do të mësoni si të zhvilloni me Next.js — krijimi i faqeve dhe komponentëve të rinj, nxjerrja e të dhënave, si dhe stilizimi dhe deploy i aplikacionit Next.
Grumbulli teknik dhe veçoritë
- Next.js
- Komponentët dhe faqet
- Përzgjedhja e të dhënave
- Stilizimi
- Deployimi i projektit
- SSR dhe SPA
Është gjithmonë e shkëlqyer të kesh një shembull të vërtetë, siç është një aplikacion për tregtinë elektronike, për të mësuar diçka të re. Ju mund të .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js për Vue, është e njëjta gjë si Next.js për React: një framework i shkëlqyer për të bashkuar mundësitë e renderimit në anën e serverit dhe aplikacioneve njëfaçëshe
Aplikacioni i fundit që mund të krijoni do të duket kështu:
Çfarë do të mësoni
Në këtë shembull projekti do të mësoni si të krijoni një uebfaqe të plotë duke përdorur Nuxt.js — nga konfigurimi fillestar deri te implementimi përfundimtar.
Ai përdor shumë funksione interesante që ofron Nuxt, siç janë faqet dhe komponentët, si dhe stilizimi me SCSS.
Grumbulli teknik dhe veçoritë
- Nuxt.js
- Komponentët dhe faqet
- Moduli Storyblock
- Mikserët
- Vuex për menaxhimin e gjendjes
- SCSS për stilizimin
- Middleware-t e Nuxt
, i cili përfshin shumë mundësi të shkëlqyera të Nuxt.js. Unë personalisht e dua të punoj me Nuxt, kështu që ju duhet ta provoni, sepse gjithashtu do t'ju bëjë një zhvillues të shkëlqyer Vue.
Blog me Gatsby
Gatsby është një gjenerator i shkëlqyer i faqeve statike, që përdor React dhe GraphQL. Ky është rezultati i projektit:
Çfarë do të mësoni
Në këtë udhëzues do të mësoni si të përdorni Gatsby për të krijuar një blog, që do të përdorni për të shkruar artikujt tuaj, duke përdorur React dhe GraphQL.
Grumbulli teknik dhe veçoritë
- Gatsby
- React
- GraphQL
- Plugins dhe tema
- MDX/Markdown
- Bootstrap CSS
- Shabllonat
Nëse ndonjëherë keni dëshiruar të krijoni 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ë krijoni faqe me performancë të lartë, duke përdorur React — që është një kombinim befasues.
Blog me Gridsome
Gridsome për Vue... Mirë, ne e kemi pasur këtë tashmë me Next/Nuxt.
Por e njëjta vlen për Gridsome dhe Gatsby. Të dyja përdorin GraphQL si një shtresë të dhënash, por Gridsome përdor VueJS. Ky është gjithashtu një gjenerator i mrekullueshëm i faqeve statike që do t'ju ndihmojë të krijoni bloge të shkëlqyera:
Çfarë do të mësoni
Ky projekt do t'ju mësojë si të krijoni një blog të thjeshtë për të filluar me Gridsome, GraphQL dhe Markdown. Ai gjithashtu shqyrton si të implementoni aplikacionin përmes Netlify.
Grumbulli teknik dhe veçoritë
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Sigurisht, ky nuk është udhëzuesi më i plotë, por ai mbulon konceptet kryesore të Gridsome dhe .
Një lojtar audio, i ngjashëm me SoundCloud, me Quasar
Quasar — është një tjetër kornizë Vue që mund të përdoret për krijimin e aplikacioneve mobile. Në këtë projekt do të krijoni një aplikacion për player audio, për shembull:
Çfarë do të mësoni
Ndërsa projekte të tjera përqendrohen kryesisht në aplikacionet web, ky do t'ju tregojë se si të krijoni një aplikacion mobil duke përdorur Vue dhe kornizën Quasar.
Të keni tashmë një Cordova funksional me Android Studio/Xcode të konfiguruar. Nëse jo, udhëzimi përmban një lidhje në faqen e internetit të Quasar, ku ata tregojnë si të konfiguroni gjithçka.
Grumbulli teknik dhe veçoritë
- Quasar
- Vue
- Cordova
- WaveSurfer
- Komponentet UI
, që demonstrojnë mundësitë e Quasar për krijimin e aplikacioneve mobile.
Burimi: habr.com
