Ievads
NeatkarÄ«gi no tÄ, vai esat iesÄcÄjs programmÄÅ”anas jomÄ vai pieredzÄjis izstrÄdÄtÄjs, jaunu koncepciju un valodu/ietvaru apguve Å”ajÄ nozarÄ ir obligÄta, lai sekotu tendencÄm.
Å emiet, piemÄram, React, kas Facebook tika atvÄrts tikai pirms Äetriem gadiem un jau ir kļuvis par JavaScript izstrÄdÄtÄju pirmo izvÄli visÄ pasaulÄ.
Vue un Angular, protams, ir arÄ« sava likumÄ«ga fanu bÄze. Un tad ir Svelte un citi universÄlie ietvari, piemÄram, Next.js vai Nuxt.js. Un Getsbijs, un Gridsome, un Quasar... un vÄl daudz vairÄk.
Ja vÄlaties pierÄdÄ«t sevi kÄ pieredzÄjuÅ”u JavaScript izstrÄdÄtÄju, jums ir jÄbÅ«t vismaz nelielai pieredzei ar dažÄdiem ietvariem un bibliotÄkÄm - papildus darbam ar veco labo JS.
Lai palÄ«dzÄtu jums kļūt par priekÅ”gala meistaru 2020. gadÄ, esmu apkopojis deviÅus dažÄdus projektus, katrs koncentrÄjoties uz citu JavaScript ietvaru un bibliotÄku kÄ tehnoloÄ£iju kopu, ko varat izveidot un pievienot savam portfelim. Atcerieties, ka nekas jums nepalÄ«dz vairÄk kÄ faktiska lietu radÄ«Å”ana, tÄpÄc virzieties uz priekÅ”u, izmantojiet savu prÄtu un Ä«stenojiet to
Raksts tika tulkots ar EDISON Software atbalstu, kas un .
Filmu meklÄÅ”anas lietotne, izmantojot React (ar ÄÄ·iem)
PirmÄ lieta, ar ko jÅ«s varÄtu sÄkt, ir izveidot filmu meklÄÅ”anas lietotni, izmantojot React. TÄlÄk ir parÄdÄ«ts, kÄ izskatÄ«sies galÄ«gÄ lietojumprogramma:
Ko iemÄcÄ«sies
Veidojot Å”o lietotni, jÅ«s uzlabosit savas React prasmes, izmantojot salÄ«dzinoÅ”i jauno Hooks API. PiemÄra projektÄ tiek izmantoti React komponenti, daudz ÄÄ·u, ÄrÄja API un, protams, daži CSS stils.
TehniskÄ kaudze un funkcijas
- ReaÄ£Äjiet ar ÄÄ·iem
- izveidot-reaÄ£Ät-lietotne
- Jsx
- CSS
Neizmantojot nekÄdas nodarbÄ«bas, Å”ie projekti sniedz jums ideÄlu ieejas punktu funkcionÄlajÄ React un noteikti palÄ«dzÄs jums 2020. gadÄ. tu vari atrast . Izpildiet norÄdÄ«jumus vai izveidojiet to savu.
TÄrzÄÅ”anas lietotne ar Vue
VÄl viens lielisks projekts, kas jums jÄdara, ir izveidot tÄrzÄÅ”anas lietotni, izmantojot manu iecienÄ«tÄko JavaScript bibliotÄku: VueJS. Lietojumprogramma izskatÄ«sies apmÄram Å”Ädi:
Ko iemÄcÄ«sies
Å ajÄ apmÄcÄ«bÄ jÅ«s uzzinÄsit, kÄ izveidot Vue lietotni no jauna ā izveidot komponentus, apstrÄdÄt stÄvokli, izveidot marÅ”rutus, izveidot savienojumu ar treÅ”o puÅ”u pakalpojumiem un pat rÄ«koties ar autentifikÄciju.
TehniskÄ kaudze un funkcijas
- Vue
- vuex
- Vue marÅ”rutÄtÄjs
- CLI versija
- StÅ«mÄjs
- CSS
Å is ir patieÅ”Äm lielisks projekts, lai sÄktu darbu ar Vue vai uzlabotu savas esoÅ”Äs prasmes, lai 2020. gadÄ iesaistÄ«tos attÄ«stÄ«bÄ. tu vari atrast .
Skaista laikapstÄkļu lietotne ar Angular 8
Å is piemÄrs palÄ«dzÄs jums izveidot skaistu laikapstÄkļu lietotni, izmantojot Angular 8:
Ko iemÄcÄ«sies
Å is projekts iemÄcÄ«s jums vÄrtÄ«gas prasmes lietojumprogrammu izveidÄ no nulles ā no projektÄÅ”anas lÄ«dz izstrÄdei, lÄ«dz izvietoÅ”anai gatavai lietojumprogrammai.
TehniskÄ kaudze un funkcijas
- LeÅÄ·iskais 8
- Firebase
- Servera puses renderÄÅ”ana
- CSS ar režģi un Flexbox
- MobilajÄm ierÄ«cÄm draudzÄ«gums un pielÄgojamÄ«ba
- TumŔais režīms
- Skaists interfeiss
Tas, kas man ļoti patÄ«k Å”ajÄ visaptveroÅ”ajÄ projektÄ, ir tas, ka jÅ«s nepÄtÄt lietas atseviŔķi. TÄ vietÄ jÅ«s apgÅ«stat visu izstrÄdes procesu, sÄkot no projektÄÅ”anas lÄ«dz galÄ«gajai izvietoÅ”anai.
To-Do aplikÄcija, izmantojot Svelte
Svelte ir kÄ jaunais bÄrns, izmantojot komponentu pieeju ā vismaz lÄ«dzÄ«gs React, Vue un Angular. Un Å”is ir viens no karstÄkajiem jaunumiem 2020. gadÄ.
To-Do lietotnes ne vienmÄr ir karstÄkÄ tÄma, taÄu tÄs patieÅ”Äm palÄ«dzÄs jums uzlabot Svelte prasmes. Tas izskatÄ«sies Å”Ädi:
Ko iemÄcÄ«sies
Å Ä« apmÄcÄ«ba parÄdÄ«s, kÄ izveidot lietojumprogrammu, izmantojot Svelte 3, no sÄkuma lÄ«dz beigÄm. JÅ«s izmantosit komponentus, stilu un notikumu apstrÄdÄtÄjus
TehniskÄ kaudze un funkcijas
- Svelte 3
- Komponenti
- Stils ar CSS
- ES 6 sintakse
Labu Sveltes starteru projektu nav daudz, tÄpÄc atradu .
E-komercijas lietotne, izmantojot Next.js
Next.js ir vispopulÄrÄkÄ sistÄma React lietojumprogrammu izveidei, kas atbalsta servera puses renderÄÅ”anu.
Å is projekts parÄdÄ«s, kÄ izveidot e-komercijas lietojumprogrammu, kas izskatÄs Å”Ädi:
Ko iemÄcÄ«sies
Å ajÄ projektÄ jÅ«s uzzinÄsit, kÄ izstrÄdÄt ar Next.js ā izveidot jaunas lapas un komponentus, iegÅ«t datus un veidot stilu un izvietot Next lietojumprogrammu.
TehniskÄ kaudze un funkcijas
- Next.js
- Komponenti un lapas
- Datu izlase
- Stils
- Projekta izvietoŔana
- PSR un SPA
VienmÄr ir lieliski, ja jums ir reÄls piemÄrs, piemÄram, e-komercijas lietotne, lai uzzinÄtu ko jaunu. JÅ«s varat .
PilnvÄrtÄ«gs daudzvalodu emuÄrs ar Nuxt.js
Nuxt.js ir paredzÄts Vue, tÄpat kÄ Next.js ir paredzÄts React: lielisks ietvars servera puses renderÄÅ”anas un vienas lapas lietojumprogrammu jaudas apvienoÅ”anai.
GalÄ«gÄ lietojumprogramma, ko varat izveidot, izskatÄ«sies Å”Ädi:
Ko iemÄcÄ«sies
Å ajÄ projekta paraugÄ jÅ«s uzzinÄsit, kÄ izveidot pilnÄ«gu vietni, izmantojot Nuxt.js, no sÄkotnÄjÄs iestatÄ«Å”anas lÄ«dz galÄ«gajai izvietoÅ”anai.
Tas izmanto daudzas lieliskas funkcijas, ko piedÄvÄ Nuxt, piemÄram, lapas un komponentus, kÄ arÄ« stilu ar SCSS.
TehniskÄ kaudze un funkcijas
- Nuxt.js
- Komponenti un lapas
- StÄstu bloka modulis
- Hagfish
- Vuex valsts vadībai
- SCSS stila veidoŔanai
- Nuxt starpprogrammatūra
, kas ietver daudzas lieliskas Nuxt.js funkcijas. Man personÄ«gi patÄ«k strÄdÄt ar Nuxt, tÄpÄc jums vajadzÄtu to izmÄÄ£inÄt, jo tas arÄ« padarÄ«s jÅ«s par lielisku Vue izstrÄdÄtÄju.
EmuÄrs ar Getsbiju
Gatsby ir lielisks statisko vietÅu Ä£enerators, izmantojot React un GraphQL. Å is ir projekta rezultÄts:
Ko iemÄcÄ«sies
Å ajÄ apmÄcÄ«bÄ jÅ«s uzzinÄsit, kÄ izmantot Gatsby, lai izveidotu emuÄru, ko izmantosit, lai rakstÄ«tu savus rakstus, izmantojot React un GraphQL.
TehniskÄ kaudze un funkcijas
- Gatsbijs
- ReaÄ£Ät
- GraphQL
- SpraudÅi un motÄ«vi
- MDX/Markdown
- Bootstrap CSS
- veidnes
Ja kÄdreiz esat vÄlÄjies izveidot emuÄru, par to, kÄ to izveidot, izmantojot React un GraphQL.
Es nesaku, ka WordPress ir slikta izvÄle, taÄu ar Gatsby varat izveidot augstas veiktspÄjas vietnes, izmantojot React ā tÄ ir pÄrsteidzoÅ”a kombinÄcija.
EmuÄrs ar Gridsome
Gridsome for Vue... Labi, mums tas jau bija ar Next/Nuxt.
Bet tas pats attiecas uz Gridsome un Gatsby. Abi izmanto GraphQL kÄ datu slÄni, bet Gridsome izmanto VueJS. Å is ir arÄ« pÄrsteidzoÅ”s statisks vietÅu Ä£enerators, kas palÄ«dzÄs jums izveidot lieliskus emuÄrus:
Ko iemÄcÄ«sies
Å is projekts iemÄcÄ«s jums izveidot vienkÄrÅ”u emuÄru, lai sÄktu darbu ar Gridsome, GraphQL un Markdown. TajÄ ir arÄ« aprakstÄ«ts, kÄ izvietot lietojumprogrammu, izmantojot Netlify.
TehniskÄ kaudze un funkcijas
- Režģis
- Vue
- GraphQL
- Markdown
- netlify
Å Ä« noteikti nav visplaÅ”ÄkÄ apmÄcÄ«ba, taÄu tÄ aptver Gridsome un pamatjÄdzienus .
SoundCloud lÄ«dzÄ«gs audio atskaÅotÄjs, izmantojot Quasar
Quasar ir vÄl viens Vue ietvars, ko var izmantot, lai izveidotu mobilÄs lietojumprogrammas. Å ajÄ projektÄ jÅ«s izveidosit audio atskaÅotÄja lietojumprogrammu, piemÄram:
Ko iemÄcÄ«sies
Lai gan citi projekti galvenokÄrt koncentrÄjas uz tÄ«mekļa lietojumprogrammÄm, Å”is jums parÄdÄ«s, kÄ izveidot mobilo lietojumprogrammu, izmantojot Vue un Quasar sistÄmu.
Jums jau vajadzÄtu darboties Cordova ar konfigurÄtu Android Studio/Xcode. Ja nÄ, rokasgrÄmatÄ ir saite uz Quasar vietni, kur parÄdÄ«ts, kÄ visu iestatÄ«t.
TehniskÄ kaudze un funkcijas
- Quasar
- Vue
- Cordova
- WaveSurfer
- UI komponenti
, demonstrÄjot Quasar iespÄjas mobilo aplikÄciju izveidÄ.
Avots: www.habr.com