Ƙarin Ayyuka 9 don Ƙirƙirar Ƙwararrun Ƙarshen Gaba

Gabatarwar

Ko kun kasance sababbi ga shirye-shirye ko kuma kun riga kun kasance ƙwararren mai haɓakawa, a cikin wannan masana'antar, koyon sabbin dabaru da yaruka/tsari ya zama dole don ci gaba da tafiya.

Dauki, alal misali, React, wanda Facebook kawai ya buɗe shi shekaru huɗu da suka gabata kuma ya riga ya zama zaɓi na ɗaya don masu haɓaka JavaScript a duniya.

Vue da Angular, ba shakka, suma suna da halaltaccen tushen magoya bayansu. Sannan akwai Svelte da sauran tsare-tsare na gaba ɗaya kamar Next.js ko Nuxt.js. Da Gatsby, da Gridsome, da Quasar ... da ƙari.

Idan kuna son tabbatar da kanku a matsayin ƙwararren mai haɓaka JavaScript, dole ne ku sami aƙalla gogewa tare da tsare-tsare da ɗakunan karatu daban-daban - ban da yin kyakkyawan aikin JS.

Don taimaka muku zama babban jagora na gaba a cikin 2020, Na haɗa ayyuka daban-daban guda tara, kowanne yana mai da hankali kan tsarin JavaScript daban-daban da ɗakunan karatu a matsayin tarin fasaha wanda zaku iya ginawa da ƙarawa cikin fayil ɗinku. Ka tuna cewa babu abin da ke taimaka maka fiye da aiwatar da abubuwa a aikace, don haka ci gaba, juya tunaninka kuma ka sa ya yiwu.

An fassara labarin tare da tallafin EDISON Software, wanda yana yin ɗakuna masu dacewa na kama-da-wane don shagunan iri iri-iriKuma gwada software.

Ka'idar neman fim tare da React (tare da ƙugiya)

Abu na farko da zaku iya farawa dashi shine gina ƙa'idar neman fim tare da React. A ƙasa akwai hoton yadda app ɗin ƙarshe zai yi kama:

Me za ku koya
Ta hanyar gina wannan aikace-aikacen, zaku haɓaka ƙwarewar React ɗinku ta amfani da sabon API na Hooks. Aikin samfurin yana amfani da abubuwan React, ƙugiya da yawa, API na waje, kuma ba shakka wasu salo na CSS.

Tech tari da fasali

• Amsa da ƙugiya
• kirkirar-amsa-app
• jsx
• CSS

Ba tare da amfani da kowane nau'i ba, waɗannan ayyukan suna ba ku cikakkiyar ma'anar shigarwa cikin React mai aiki kuma tabbas za su taimake ku a cikin 2020. za ku iya samu samfurin aikin nan. Bi umarnin ko sanya shi naka.

Taɗi app tare da Vue

Wani babban aiki a gare ku shine gina ƙa'idar taɗi ta amfani da ɗakin karatu na JavaScript da na fi so: VueJS. Aikace-aikacen zai yi kama da wani abu kamar haka:

Me za ku koya
A cikin wannan koyawa, za ku koyi yadda ake yin Vue app daga karce - ƙirƙirar abubuwan haɗin gwiwa, sarrafa jihohi, ƙirƙirar hanyoyi, haɗa zuwa sabis na ɓangare na uku, har ma da sarrafa tantancewa.

Tech tari da fasali

• Vue
• wux
• na'ura mai ba da hanya tsakanin hanyoyin sadarwa
• Farashin CLI
• Pusher
• CSS

Wannan babban aiki ne na gaske don farawa da Vue ko haɓaka ƙwarewar ku don samun ci gaba a cikin 2020. za ku iya samu koyawa a nan.

Kyakkyawan app na yanayi tare da Angular 8

Wannan misalin zai taimaka muku gina ingantaccen app na yanayi ta amfani da Angular 8:

Me za ku koya
Wannan aikin zai koya muku ƙwarewa masu mahimmanci wajen gina aikace-aikace daga karce - daga ƙira zuwa haɓakawa, har zuwa aikace-aikacen da aka shirya don turawa.

Tech tari da fasali

• Alaramma 8
• Firebase
• Side Rendering Server
• CSS tare da Grid da Flexbox
• Mobile sada zumunci da daidaitawa
• Yanayin duhu
• Kyawawan dubawa

Abin da na fi so game da wannan cikakken aikin shi ne cewa ba ku nazarin abubuwa a ware. Madadin haka, kuna koyon tsarin ci gaba gaba ɗaya daga ƙira zuwa ƙaddamar da ƙarshe.

To-Do app tare da Svelte

Svelte yana kama da sabon yaro a tsarin tsarin - aƙalla kama da React, Vue da Angular. Kuma wannan shine ɗayan mafi kyawun sabbin samfuran don 2020.

Aikace-aikacen To-Do ba lallai ba ne mafi kyawun batu, amma da gaske za su taimaka muku haɓaka ƙwarewar ku na Svelte. Zai yi kama da haka:

Me za ku koya
Wannan koyawa zai nuna maka yadda ake ƙirƙirar aikace-aikacen ta amfani da Svelte 3, daga farko zuwa ƙarshe. Za ku yi amfani da abubuwan haɗin gwiwa, salo da masu kula da taron

Tech tari da fasali

• Svelte 3
• Kayan aiki
• Salo tare da CSS
• Bayanin ES6

Babu kyawawan ayyukan farawa na Svelte, don haka na samo wannan wuri ne mai kyau don farawa.

Ecommerce App tare da Next.js

Next.js shine mafi mashahuri tsarin don gina React apps waɗanda ke goyan bayan saɓanin uwar garken daga cikin akwatin.

Wannan aikin zai nuna muku yadda ake ƙirƙirar aikace-aikacen e-commerce mai kama da haka:

Me za ku koya
A cikin wannan aikin, zaku koyi yadda ake haɓakawa tare da Next.js — ƙirƙira sabbin shafuka da abubuwan haɗin gwiwa, dawo da bayanai, da salo da tura aikace-aikace na gaba.

Tech tari da fasali

• Na gaba.js
• Abubuwan da aka gyara da Shafuka
• Samfurin bayanai
• salo
• Aiwatar da Aikin
• SSR da SPA

Yana da kyau koyaushe a sami misalin rayuwa ta gaske kamar app na kasuwancin e-commerce don koyan sabon abu. Za ka iya sami koyawa a nan.

Cikakken bulogi na harsuna da yawa tare da Nuxt.js

Nuxt.js na Vue ne, kamar Next.js shine don React: babban tsari don haɗa ayyukan sabar-gefen sabar da aikace-aikacen shafi ɗaya.
Application na ƙarshe da zaku ƙirƙira zai yi kama da haka:

Me za ku koya

A cikin wannan samfurin aikin, za ku koyi yadda ake gina cikakken gidan yanar gizon ta amfani da Nuxt.js, daga saitin farko zuwa ƙaddamar da ƙarshe.

Yana ɗaukar fa'ida da yawa daga cikin kyawawan abubuwan da Nuxt ya bayar, kamar shafuka da abubuwan haɗin gwiwa, da salo tare da SCSS.

Tech tari da fasali

• Nuxt.js
• Abubuwan da aka gyara da Shafuka
• labarin block
• Mixins
• Vuex don gudanar da jihar
• SCSS don salo
• Nuxt middlewares

Wannan babban aiki ne mai kyau., wanda ya haɗa da yawancin manyan abubuwan Nuxt.js. Ni da kaina ina son yin aiki tare da Nuxt don haka yakamata ku gwada shi kuma zai sa ku zama babban haɓakar Vue.

Blog tare da Gatsby

Gatsby babban janareta ne mai tsayi ta amfani da React da GraphQL. Wannan shi ne sakamakon aikin:

Me za ku koya

A cikin wannan koyawa, za ku koyi yadda ake amfani da Gatsby don ƙirƙirar blog ɗin da za ku yi amfani da shi don rubuta labaran ku ta amfani da React da GraphQL.

Tech tari da fasali

• gatsby
• Sake amsa
• GraphQL
• Plugins da Jigogi
• MDX/Markdown
• Farashin CSS
• Hanyoyi

Idan kuna son fara blog, wannan babban misali ne yadda ake yin shi ta amfani da React da GraphQL.

Ba na cewa WordPress ba shine zaɓi mara kyau ba, amma tare da Gatsby za ku iya gina manyan gidajen yanar gizo ta amfani da React - wanda shine haɗuwa mai ban mamaki.

Blog tare da Gridsome

Gridsome don Vue… Ok, mun riga mun sami hakan tare da Next/Nuxt.
Amma haka yake ga Gridsome da Gatsby. Dukansu suna amfani da GraphQL azaman bayanan bayanan su, amma Gridsome yana amfani da VueJS. Hakanan babban janareta na rukunin yanar gizo ne don taimaka muku ƙirƙirar manyan bulogi:

Me za ku koya

Wannan aikin zai koya muku yadda ake ƙirƙirar bulogi mai sauƙi don farawa tare da Gridsome, GraphQL da Markdown. Hakanan yana bayanin yadda ake tura aikace-aikacen ta hanyar Netlify.

Tech tari da fasali

• Gridsome
• Vue
• GraphQL
• Yankewa
• Sanarwa

Wannan tabbas ba shine mafi cikakken koyawa ba, amma yana rufe ainihin ra'ayoyin Gridsome da Markdown kuma zai iya zama kyakkyawan wurin farawa.

Mai kunna sauti mai kama da SoundCloud ta amfani da Quasar

Quasar wani tsarin Vue ne wanda za'a iya amfani dashi don gina aikace-aikacen hannu. A cikin wannan aikin, zaku ƙirƙiri aikace-aikacen mai kunna sauti kamar:

Me za ku koya

Yayin da sauran ayyukan ke mayar da hankali kan aikace-aikacen yanar gizo, wannan zai nuna muku yadda ake gina manhajar wayar hannu ta amfani da Vue da tsarin Quasar.
Ya kamata ku riga kuna da Cordova mai aiki tare da saita Android Studio/Xcode. Idan ba haka ba, littafin yana da hanyar haɗi zuwa gidan yanar gizon Quasar inda suke nuna maka yadda ake saita komai.

Tech tari da fasali

• Qasar
• Vue
• Cordova
• wavesurfer
• Abubuwan UI

karamin aikin, Nuna iyawar Quasar don gina aikace-aikacen hannu.

source: www.habr.com