Miradi 9 zaidi ya kuboresha ujuzi wako wa Front-End

Utangulizi

Iwe wewe ni mgeni katika upangaji programu au msanidi aliyebobea, kujifunza dhana mpya na lugha/mfumo ni lazima katika tasnia hii ili kuendana na mitindo.

Chukua React, kwa mfano, ambayo Facebook iliifungua miaka minne iliyopita na tayari imekuwa chaguo nambari moja kwa watengenezaji JavaScript duniani kote.

Vue na Angular, bila shaka, pia wana msingi wao wa shabiki halali. Na kisha kuna Svelte na mifumo mingine ya ulimwengu wote kama vile Next.js au Nuxt.js. Na Gatsby, na Gridsome, na Quasar ... na mengi zaidi.

Ikiwa unataka kujithibitisha kama msanidi programu mwenye uzoefu wa JavaScript, unapaswa kuwa na angalau uzoefu fulani na mifumo na maktaba mbalimbali - pamoja na kufanya kazi na JS nzuri ya zamani.

Ili kukusaidia kuwa bwana wa kina katika 2020, nimeweka pamoja miradi tisa tofauti, kila moja ikilenga mfumo tofauti wa JavaScript na maktaba kama rundo la teknolojia unayoweza kuunda na kuongeza kwenye jalada lako. Kumbuka kuwa hakuna kitu kinachokusaidia zaidi ya kuunda vitu, kwa hivyo songa mbele, tumia akili yako na uifanye

Nakala hiyo ilitafsiriwa kwa usaidizi wa Programu ya EDISON, ambayo hutengeneza vyumba vya kufaa kwa maduka ya bidhaa nyingiNa programu ya majaribio.

Programu ya utaftaji wa sinema kwa kutumia React (na ndoano)

Jambo la kwanza unaweza kuanza nalo ni kuunda programu ya kutafuta filamu kwa kutumia React. Ifuatayo ni picha ya jinsi programu ya mwisho itakavyoonekana:

Utajifunza nini
Kwa kuunda programu hii, utaboresha ujuzi wako wa React kwa kutumia API mpya kiasi ya Hooks. Mradi wa mfano hutumia vipengee vya React, ndoano nyingi, API ya nje, na bila shaka mtindo fulani wa CSS.

Msururu wa teknolojia na vipengele

• Kuitikia kwa kulabu
• tengeneza programu
• JSX
• CSS

Bila kutumia madarasa yoyote, miradi hii inakupa mahali pazuri pa kuingia katika React ya utendaji na hakika itakusaidia katika 2020. unaweza kupata mfano mradi hapa. Fuata maagizo au uifanye yako mwenyewe.

Piga gumzo na Vue

Mradi mwingine mzuri kwako kufanya ni kuunda programu ya gumzo kwa kutumia maktaba ninayopenda ya JavaScript: VueJS. Maombi yataonekana kama hii:

Utajifunza nini
Katika somo hili, utajifunza jinsi ya kutengeneza programu ya Vue kutoka mwanzo - kuunda vipengele, hali ya kushughulikia, kuunda njia, kuunganisha kwa huduma za watu wengine, na hata kushughulikia uthibitishaji.

Msururu wa teknolojia na vipengele

• Vue
• vuex
• Kipanga njia
• Angalia CLI
• Pusher
• CSS

Huu ni mradi mzuri sana wa kuanza na Vue au kuboresha ujuzi wako uliopo ili kujiendeleza mnamo 2020. unaweza kupata mafunzo hapa.

Programu nzuri ya hali ya hewa na Angular 8

Mfano huu utakusaidia kuunda programu nzuri ya hali ya hewa kwa kutumia Angular 8:

Utajifunza nini
Mradi huu utakufundisha ustadi muhimu katika kuunda programu kutoka mwanzo - kutoka kwa muundo hadi usanidi, hadi programu iliyo tayari kutumwa.

Msururu wa teknolojia na vipengele

• Angular 8
• Moto
• Utoaji wa upande wa seva
• CSS na Gridi na Flexbox
• Simu ya kirafiki na kubadilika
• Темный е
• Kiolesura kizuri

Ninachopenda sana kuhusu mradi huu unaojumuisha yote ni kwamba husomi mambo peke yako. Badala yake, unajifunza mchakato mzima wa ukuzaji, kutoka kwa muundo hadi uwekaji wa mwisho.

Programu ya Kufanya kwa kutumia Svelte

Svelte ni kama mtoto mpya kwenye mbinu inayotegemea vipengele - angalau sawa na React, Vue na Angular. Na hii ni moja ya bidhaa mpya moto zaidi kwa 2020.

Programu za Kufanya si lazima ziwe mada motomoto zaidi, lakini zitakusaidia sana kuboresha ujuzi wako wa Svelte. Itakuwa kama hii:

Utajifunza nini
Mafunzo haya yatakuonyesha jinsi ya kuunda programu kwa kutumia Svelte 3, kuanzia mwanzo hadi mwisho. Utatumia vipengele, mitindo, na vidhibiti tukio

Msururu wa teknolojia na vipengele

• Suluhu 3
• Vipengele
• Styling na CSS
• Sintaksia ya ES 6

Hakuna miradi mingi nzuri ya kuanzisha Svelte, kwa hivyo nimepata hii ni chaguo nzuri kuanza na.

Programu ya e-commerce kwa kutumia Next.js

Next.js ndio mfumo maarufu zaidi wa kuunda programu za React ambazo zinaauni utoaji wa upande wa seva nje ya kisanduku.

Mradi huu utakuonyesha jinsi ya kuunda programu ya e-commerce ambayo inaonekana kama hii:

Utajifunza nini
Katika mradi huu, utajifunza jinsi ya kutengeneza Next.js—kuunda kurasa na vipengee vipya, kutoa data, na mtindo na kupeleka programu Inayofuata.

Msururu wa teknolojia na vipengele

• Ijayo
• Vipengele na Kurasa
• Sampuli za data
• Mtindo
• Usambazaji wa Mradi
• SSR na SPA

Daima ni vyema kuwa na mfano wa ulimwengu halisi kama programu ya e-commerce ili kujifunza kitu kipya. Unaweza pata mafunzo hapa.

Blogu kamili ya lugha nyingi na Nuxt.js

Nuxt.js ni ya Vue, Next.js ni nini kwa React: mfumo mzuri wa kuchanganya nguvu ya uwasilishaji wa upande wa seva na programu za ukurasa mmoja.
Programu ya mwisho unayoweza kuunda itaonekana kama hii:

Utajifunza nini

Katika sampuli ya mradi huu, utajifunza jinsi ya kuunda tovuti kamili kwa kutumia Nuxt.js, kuanzia usanidi wa awali hadi utumaji wa mwisho.

Inachukua fursa ya vipengele vingi vya kupendeza ambavyo Nuxt inapeana, kama vile kurasa na vijenzi, na kuweka mitindo kwa SCSS.

Msururu wa teknolojia na vipengele

• Nuxt.js
• Vipengele na Kurasa
• Moduli ya kizuizi cha hadithi
• Hagfish
• Vuex kwa usimamizi wa serikali
• SCSS kwa styling
• Nuxt middlewares

Huu ni mradi mzuri sana, ambayo inajumuisha vipengele vingi muhimu vya Nuxt.js. Binafsi napenda kufanya kazi na Nuxt kwa hivyo unapaswa kuijaribu kwani itakufanya pia kuwa msanidi mzuri wa Vue.

Blogu na Gatsby

Gatsby ni jenereta bora ya tovuti tuli kwa kutumia React na GraphQL. Hii ndio matokeo ya mradi:

Utajifunza nini

Katika somo hili, utajifunza jinsi ya kutumia Gatsby kuunda blogu ambayo utatumia kuandika makala yako mwenyewe kwa kutumia React na GraphQL.

Msururu wa teknolojia na vipengele

• Gatsby
• Tenda
• GraphQL
• Plugins na mandhari
• MDX/Markdown
• Bootstrap CSS
• Mifumo

Ikiwa umewahi kutaka kuanzisha blogi, huu ni mfano mzuri juu ya jinsi ya kuifanya kwa kutumia React na GraphQL.

Sisemi WordPress ni chaguo mbaya, lakini ukiwa na Gatsby unaweza kuunda tovuti zenye utendaji wa juu ukitumia React - ambayo ni mchanganyiko wa kushangaza.

Blogu na Gridsome

Gridsome kwa Vue... Sawa, tayari tulikuwa na hii na Next/Nuxt.
Lakini ndivyo ilivyo kwa Gridsome na Gatsby. Wote hutumia GraphQL kama safu yao ya data, lakini Gridsome hutumia VueJS. Hii pia ni jenereta ya kushangaza ya tovuti tuli ambayo itakusaidia kuunda blogi nzuri:

Utajifunza nini

Mradi huu utakufundisha jinsi ya kuunda blogu rahisi ili kuanza na Gridsome, GraphQL na Markdown. Pia inashughulikia jinsi ya kupeleka programu kupitia Netlify.

Msururu wa teknolojia na vipengele

• Gridsome
• Vue
• GraphQL
• Mchapishaji
• Netify

Hakika haya sio mafunzo ya kina zaidi, lakini inashughulikia dhana za msingi za Gridsome na Markdown inaweza kuwa mahali pazuri pa kuanzia.

Kicheza sauti kama cha SoundCloud kwa kutumia Quasar

Quasar ni mfumo mwingine wa Vue ambao unaweza kutumika kuunda programu za rununu. Katika mradi huu utaunda programu ya kicheza sauti, kwa mfano:

Utajifunza nini

Ingawa miradi mingine inalenga zaidi programu za wavuti, hii itakuonyesha jinsi ya kuunda programu ya simu kwa kutumia Vue na mfumo wa Quasar.
Unapaswa tayari kuwa na Cordova inayoendesha na Android Studio/Xcode iliyosanidiwa. Ikiwa sivyo, mwongozo una kiungo cha tovuti ya Quasar ambapo wanakuonyesha jinsi ya kusanidi kila kitu.

Msururu wa teknolojia na vipengele

• Robo
• Vue
• Cordova
• WaveSurfer
• Vipengele vya UI

Mradi mdogo, inayoonyesha uwezo wa Quasar wa kuunda programu za simu.

Chanzo: mapenzi.com