Hyrje
Pavarësisht nëse jeni një fillestar në programim apo një zhvillues me përvojë, eksplorimi i koncepteve dhe gjuhëve të reja/frameworkeve është thelbësor për të qëndruar në hap me tendencat.
Merrni për shembull, React – kodi i të cilit u hap nga Facebook vetëm katër vjet më parë, tani është zgjedhja numër një për zhvilluesit JavaScript në të gjithë botën.
Sigurisht, Vue dhe Angular gjithashtu kanë bazën e tyre të ligjshme të adhuruesve. Ka gjithashtu Svelte dhe frameworke të tjerë universale, si Next.js ose Nuxt.js. Edhe Gatsby, Gridsome, Quasar… dhe shumë të tjera.
Nëse dëshironi të shfaqni veten si një zhvillues të kualifikuar JavaScript, duhet të keni përvojë të paktën me disa frameworke dhe biblioteka – përveç punës me të mirin e vjetër JS.
Për t'ju ndihmuar të bëheni mjeshtër në front-end në vitin 2020, kam mbledhur nëntë projekte të ndryshme, secili i kushtuar framework-eve dhe bibliotekave të ndryshme JavaScript si stack teknik, të cilat mund t'i krijoni dhe t'i shtoni në portofolin tuaj. Mos harroni, asgjë nuk ju ndihmon më shumë se sa të krijoni gjëra praktikisht, prandaj vazhdoni, përfshini mendjen tuaj dhe bëjeni këtë të mundur.
Artikulli është përkthyer me mbështetje nga kompania EDISON Software, e cila , dhe gjithashtu .
Aplikacion për kërkimin e filmave me React (me hooks)
E para, nga ku mund të filloni, është krijimi i një aplikacioni 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 të re relativisht të njohur, Hooks. Në shembullin e projektit janë përdorur komponentë të React, shumë hooks, një API të jashtëm dhe, sigurisht, disa stile CSS.
Stack teknik dhe karakteristikat
- React me hooks
- create-react-app
- JSX
- CSS
Pa përdorimin e klasave, këto projekte ju ofrojnë një pikë ideale hyrëse në React funksional dhe me siguri do t'ju ndihmojnë në vitin 2020. Mund të gjeni . Ndjekni udhëzimet ose bëjeni gjithçka sipas dëshirës tuaj.
Aplikacioni i bisedës me Vue
Një projekt tjetër 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 përafërsisht kështu:
Çfarë do të mësoni
Nga ky udhëzues do të mësoni si të krijoni një aplikacion Vue nga fillimi — duke krijuar komponente, duke menaxhuar gjendjen, duke krijuar rrugë, duke u lidhur me shërbime të jashtme dhe madje duke menaxhuar autentifikimin.
Stack teknik dhe karakteristikat
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
Ky është vërtet një projekt i shkëlqyer për të filluar punën me Vue ose për të përmirësuar aftësitë tuaja ekzistuese për zhvillimin në vitin 2020. Ju mund të gjeni .
Një aplikacion i bukur për shikimin e motit me Angular 8
Ky shembull do t'ju ndihmojë të krijoni një aplikacion të bukur për shikimin e motit duke përdorur Angular 8:
Çfarë do të mësoni
Ky projekt do t'ju mësojë aftësi të vlefshme në krijimin e aplikacioneve nga zero — nga dizajni deri në zhvillimin, deri në një aplikacion të gatshëm për t'u vendosur.
Stack teknik dhe karakteristikat
- Angular 8
- Firebase
- Renderimi në anën e serverit
- CSS me rrjet dhe Flexbox
- I përshtatshëm për celularë dhe reagues
- Modaliteti i errët
- Ndërfaqe e bukur
Ajoja që më pëlqen vërtet shumë në këtë projekt gjithëpërfshirës është se ju nuk studioni gjërat në mënyrë të izoluar. Në vend të kësaj, ju studioni të gjithë procesin e zhvillimit — nga projektimi deri në implementimin përfundimtar.
Aplikacioni To-Do me Svelte
Svelte është si një fëmijë i ri në qasjen komponentale — të paktën i ngjashëm me React, Vue dhe Angular. Dhe është një nga risi më të nxehta të vitit 2020.
Aplikacionet To-Do nuk janë domosdoshmërisht tema më e nxehtë, por në të vërtetë do t'ju ndihmojnë të përmirësoni aftësitë tuaja në Svelte. Ky do të duket si:
Çfarë do të mësoni
Nga ky tutorial do të mësoni se si të krijoni një aplikacion me Svelte 3, nga fillimi deri në fund. Ju do të përdorni komponente, stilizim dhe menaxhues ngjarjesh.
Stack teknik dhe karakteristikat
- Svelte 3
- Komponentët
- Stilizimi me CSS
- Sintaksa ES 6
Nuk ka shumë projekte të mira fillestare për Svelte, prandaj kam gjetur .
Приложение для электронной коммерции с помощью Next.js
Next.js është framework-u më i popullarizuar për krijimin e aplikacioneve React, i cili mbështet renderimin në anën e serverit nga kutia.
Ky projekt do t'ju tregojë se si të krijoni një aplikacion për tregtinë elektronike, i cili do të duket ashtu siç vijon:
Çfarë do të mësoni
Në këtë projekt do të mësoni si të zhvilloni me Next.js — të krijoni faqe dhe komponentë të rinj, të nxjerrni të dhëna, si dhe të stilizoni dhe implementoni aplikacionin Next.
Stack teknik dhe karakteristikat
- Next.js
- Komponentë dhe faqe
- Nxjerrja e të dhënave
- Stilizimi
- Implementimi i projektit
- SSR dhe SPA
Gjithmonë është e shkëlqyer të kesh një shembull real, si një aplikacion për tregti elektronike, për të mësuar diçka të re. Ju mund të .
Полноценный мультиязычный блог с Nuxt.js
Nuxt.js për Vue, ashtu si Next.js për React: një framework i shkëlqyer për të bashkuar mundësitë e renditjes anësore dhe aplikacioneve njëfaqë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ë faqe të plotë në internet duke përdorur Nuxt.js — nga konfigurimi fillestar deri te implementimi përfundimtar.
Ai përdor shumë funksione interesante që Nuxt mund të ofrojë, si faqe dhe komponentë, si dhe stilizim me SCSS.
Stack teknik dhe karakteristikat
- Nuxt.js
- Komponentë dhe faqe
- Moduli Storyblock
- Mixins
- Vuex për menaxhimin e gjendjes
- SCSS për stilizim
- Middleware të Nuxt
, i cili ofron shumë mundësi të mrekullueshme me Nuxt.js. Personalisht, më pëlqen të punoj me Nuxt, prandaj duhet ta provoni, sepse do t'ju bëjë gjithashtu një zhvillues të shkëlqyer të Vue.
Blogu 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 ta përdorni për të shkruar artikujt tuaj, duke përdorur React dhe GraphQL.
Stack teknik dhe karakteristikat
- Gatsby
- React
- GraphQL
- Plugin dhe tema
- MDX/Markdown
- Bootstrap CSS
- Shabllonat
Nëse ndonjëherë keni dashur të krijoni një blog, i mënyrës se si ta bëni këtë, duke përdorur React dhe GraphQL.
Nuk po them se WordPress është një zgjedhje e keqe, por me Gatsby mund të krijoni website me performancë të lartë, duke përdorur React - që është një kombinim mbresëlënës.
Blogu me Gridsome
Gridsome për Vue... Epo, tashmë kemi pasur këtë me Next/Nuxt.
Por e njëjta gjë vlen për Gridsome dhe Gatsby. Të dyja përdorin GraphQL si një shtresë të të dhënave, 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 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 shpjegon se si të implementoni aplikacionin përmes Netlify.
Stack teknik dhe karakteristikat
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
Sigurisht, ky nuk është tutori i plotë, por mbulon konceptet kryesore të Gridsome dhe .
Një lojtar audio, i ngjashëm me SoundCloud, me ndihmën e Quasar.
Quasar është një tjetër framework i Vue, që mund të përdoret për të krijuar aplikacione mobile. Në këtë projekt, do të krijoni një aplikacion lojtar audio, për shembull:
Çfarë do të mësoni
Ndërsa projektet e tjera përqendrohen kryesisht në aplikacione web, ky do t'ju tregojë se si të krijoni një aplikacion mobil duke përdorur Vue dhe frameworkun Quasar.
Duhet të keni një Cordova funksional me Android Studio/Xcode të vendosur. Nëse jo, udhëzimi ka një lidhje me faqen e internetit të Quasar, ku ata tregojnë se si të bëni gjithçka të gatshme.
Stack teknik dhe karakteristikat
- Quasar
- Vue
- Cordova
- WaveSurfer
- Komponentët UI
, që demonstrojnë mundësitë e Quasar për krijimin e aplikacioneve mobile.
Burimi: habr.com
