Այլ 9 նախագիծ Front-End մասնագիտացումների բարդացման համար

Ներածություն

Ազդանշանով՝ անկախ նրանից, թե դուք ծրագրավորման սկսնակ եք, թե արդեն փորձառու մշակող, այս ոլորտում նոր գաղափարների և լեզուների/սարքերի ուսումնասիրությունը պարտադիր է, որպեսզի մնաք ներկայիս միտումների հետևում:

Օրինակ՝ React-ը, որ կուսակցությունը Facebook-ը բացել է ընդամենը չորս տարի առաջ, արդեն դարձել է JavaScript մշակողների համար աշխարհի թիվ մեկ ընտրությունը:

Vue-ն և Angular-ն էլ, իհարկե, ունեն իրենց սեփական երկրպագուների բազան: Կան նաև Svelte և այլ համընդհանուր շրջանակներ, ինչպիսիք են Next.js կամ Nuxt.js: Գatsby-ն և Gridsome-ն, Quasar-ն... և շատ ավելին:

Եթե ցանկանում եք ներկայացնել ինքներդ ձեզ որպես փորձառու JavaScript մշակող, պետք է ունենաք որոշակի փորձ տարբեր շրջանակների և գրադարանների հետ՝ բացի լավ հին JS-ից:

2020 թվականին ձեր առաջատար մասնագետ դառնալու համար ես հավաքել եմ ինը տարբեր նախագծեր, յուրաքանչյուրն իրեն դարձյալ ուսուցման տարբեր շրջանակների և JavaScript գրադարանների տեխնիկական ստեկ է, որը կարող եք ստեղծել և ավելացնել ձեր պորտֆելի մեջ: Թույլ մի տվեք, որ ոչինչ ավելի լավ է լինում, քան գործնականում ստեղծել բաներ, այդպես որ շարժվեք առաջ, անեք ձեր արագության վրա, և հարմարեցրեք դա հնարավորին:

Հոդվածը թարգմանված է EDISON Software ընկերության աջակցությամբ, որը կարողացնում է բազմազան ապրանքանիշերի խանութների համար վիրտուալ փորձարկումներ, ինչպես նաև թեստավորում է ծրագրային ապահովումը.

Ֆիլմեր որոնելու ծրագիր React-ի (հանքերով)

Առաջինը, ինչի մասին կարող եք սկսում անել, դա այն է, որ ստեղծեք ֆիլմեր որոնելու ծրագիր React-ի միջոցով: Ահա, թե ինչպես կլինի վերջնական ծրագիրը:

Ինչ կսովորեք
Այս ծրագիրը ստեղծելով, դուք կլավացրեք ձեր React կարողությունները՝ օգտագործելով համեմատաբար նոր API Hooks: Նախագծի օրինակներում օգտագործվում են React կոմպոնենտներ, բազմաթիվ հանքեր, արտաքին API և, իհարկե, որոշ CSS ոճեր:

Տեխնիկական ստեկ և առանձնահատկություններ

• React հանքերով
• create-react-app
• JSX
• CSS

Ոչ մի դասերի օգտագործմամբ, այս նախագծերը ձեզ տալիս են ֆունկցիոնալ React-ի կատարյալ ներածություն և निश्चितապես կօգնեն ձեզ 2020 թվականին: Դուք կարող եք գտնել նախագծի օրինակ այստեղ. Հետևեք հրահանգներին կամ կատարեք ամեն ինչ սեփական ճաշակի վրա:

Չաթերային ծրագիր Vue-ի միջոցով

Մեկ այլ կուրացնող նախագիծ ձեզ համար՝ ստեղծել չաթերային ծրագիր՝ օգտագործելով իմ սիրած JavaScript գրադարանը՝ VueJS: Ծրագիրը կlooks ապակերտվի մոտավորապես这样:

Ինչ կսովորեք
Այս ուղեցույցից դուք կսովորեք, թե ինչպես ստեղծել Vue ծրագիր՝ սկսած հաճախորդով՝ կոմպոնենտներ ստեղծել, վիճակներ կառավարվելով, երթուղիները ստեղծել, բեռնավորել երրորդ կողմի ծառայություններից և նույնիսկ արտաքին մասնագիտական մշակման միջոցով:

Տեխնիկական ստեկ և առանձնահատկություններ

• -նախագիծ, որն օգտագործում է
• Vuex
• Vue Router
• Vue CLI
• Pusher
• CSS

Այս իսկապես լավ նախագիծ է, որպեսզի սկսեք աշխատել Vue-ով կամ բարելավեք ձեր արդեն գոյություն ունեցող կարողությունները՝ մասնագիտությամբ զբաղվելու համար 2020 թվականին: Դուք կարող եք գտնել հրահանգ այստեղ.

Աքավառ գեղեցիկ ծրագիր տեսնելու համար Angular 8-ի հետ

Այս օրինակով կարող եք ստեղծել գեղեցիկ ծրագիր՝ եղանակը դիտելու համար Angular 8-ի միջոցով:

Ինչ կսովորեք
Այս նախագիծը ձեզ կսովորեցնի արժեքավոր հմտություններ ստեղծելու ծրագրեր нулից՝ սկսած նախագծելուց և ավարտելով开发，从而直到准备部署的应用程序。

Տեխնիկական ստեկ և առանձնահատկություններ

• Angular 8
• Firebase
• Սերվերի կողմի զետեղում
• CSS ցանցով և Flexbox-ով
• Մոբիլ բար友ություն և ադապտիվություն
• Մուգ ռեժիմ
• Գեղեցիկ ինտերֆեյս

Այդ ամբողջ նախագծում ինձ շատ դուր է գալիս, որ դուք բաներ չեք ուսումնասիրում առանձին։ Դրա փոխարեն դուք ուսումնասիրում եք մշակման ամբողջ գործընթացը՝ նախագծելուց մինչև վերջնական զետեղում։

To-Do ծրագիր Svelte-ով

Svelte-ը նման է նոր երեխաների կոմպոնենտային մոտեցմանը՝ առանձին՝ ressemblant-ն այն, ինչ մենք ունենք React, Vue և Angular-ում։ Եվ դա 2020 թվականի ամենաթեժ նորություններից մեկն է։

To-Do ծրագրերը պարտադիր չէ, որ ամենաիմաստուն թեմաներն լինեն, բայց դա իսկապես կօգնի ձեզ կատարելագործել ձեր Svelte հմտությունները։ Այն կունենա այս տեսքը։

Ինչ կսովորեք
Այս 튜տը կսովորեցնի ձեզ, թե ինչպես ստեղծել ծրագիր Svelte 3-ով, սկսած սկզբից մինչև վերջ։ Դուք կօգտագործեք կոմպոնենտներ, ոճավորում և իրադարձությունների մշակում։

Տեխնիկական ստեկ և առանձնահատկություններ

• Svelte 3
• Կոմպոնենտներ
• Ոճավորում CSS-ով
• ES 6`ի սինտաքս

Չկան այնքան լավ սկիզբի նախագծեր Svelte-ի համար, ուստի ես գտա այս լավ տարբերակը սկսելուն.

Приложение для электронной коммерции с помощью Next.js

Next.js-ը React ծրագրեր ստեղծելու ամենատարածված ֆрейմվորքն է, որը աջակցում է սերվերի կողմի զետեղմանը՝ շուկայում հենված։

Այս նախագիծը ձեզ ցույց կտա, թե ինչպես ստեղծել էլեկտրոնային առևտրի ծրագիր, որը կունենա այս տեսքը։

Ինչ կսովորեք
Այս նախագծում դուք կսովորեիք, թե ինչպես մշակել Next.js-ի միջոցով՝ նոր էջեր և կոմպոնենտներ ստեղծելով, տվյալներ հավաքագրելով, ինչպես նաև ոճավորում և զետեղելով Next ծրագիրը։

Տեխնիկական ստեկ և առանձնահատկություններ

• Next.js
• Կոմպոնենտներ և էջեր
• Տվյալների ընտրություն
• Ոճավորում
• Նախագծի զետեղում
• SSR և SPA

Միշտ լավ է ունենալ իրական օրինակ, ինչպիսին էլեկտրոնային առևտրի ծրագիրն է, նոր բան սովորելու համար։ Դուք կարող եք գտնել 튜տը այստեղ.

Полноценный мультиязычный блог с Nuxt.js

Nuxt.js Vue-ի համար, այն հավասար է Next.js-ին React-ի համար՝ հիանալի ֆрейմվորք, որն ուրբաթում է սերվերի կողմի զետեղման և մի էջային ծրագրերի հնարավորությունները
Վերջին ծրագիրը, որը կարող եք ստեղծել, այսպես կհամալինի։

Ինչ կսովորեք

Այս նախագծի օրինակով դուք կսովորեք, թե ինչպես ստեղծել լիարժեք կայք Nuxt.js-ի միջոցով՝ սկզբնական կարգավորումից մինչև վերջնական զետեղում։

Այն օգտագործում է բազմաթիվ հետաքրքրական հատկություններ, որոնք Nuxt-ն ունի առաջարկելու, օրինակ՝ էջեր և կոմպոնենտներ, ինչպես նաև SCSS մարզավարություն։

Տեխնիկական ստեկ և առանձնահատկություններ

• Nuxt.js
• Կոմպոնենտներ և էջեր
• Storyblock մոդուլ
• Միկսիններ
• Vuex պետական կառավարման համար
• SCSS ոճավորելու համար
• Nuxt միջակայքներ

Սա իսկապես հիանալի նախագիծ է, որը ներառում է բազմաթիվ հիանալի հնարավորություններ Nuxt.js-ի համար։ Ես անձամբ սիրում եմ աշխատել Nuxt-ի հետ, ուստի դուք պետք է փորձեք այն, ինչպես նաեւ կդարձնի ձեզ լավ Vue մշակող։

Բլոգ Gatsby-ի հետ

Gatsby — հիանալի կարգավորիչ տասական կայքերի, որը օգտագործում է React և GraphQL: Սա նախագծի արդյունքում է:

Ինչ կսովորեք

Այս ուղեցույցում դուք սովորում եք, թե ինչպես օգտագործել Gatsby՝ ձեր սեփական հոդվածները գրելու համար բլոգ ստեղծելու համար՝ օգտագործելով React և GraphQL:

Տեխնիկական ստեկ և առանձնահատկություններ

• Gatsby
• React
• GraphQL
• Պլգիններ և թեմաներ
• MDX/Markdown
• Bootstrap CSS
• Այլունակություններ

Եթե դուք երբևէ ցանկացել եք ստեղծել բլոգ, սա հրաշալի օրինակ է ինչպես դա անել, օգտագործելով React և GraphQL:

Ես չեմ ասում, որ WordPress-ը վատ տարբերակ է, բայց Gatsby-ի դեպքում դուք կարող եք ստեղծել բարձր կատարողական կայքեր, օգտագործելով React, ինչը կախարդական համադրություն է:

Բլոգ Gridsome-ով

Gridsome Vue-ի համար... Լավ, մենք արդեն ունեցել ենք այսպիսին Next/Nuxt-ով:
Բայց նույնը ճիշտ է Gridsome-ի և Gatsby-ի համար: Երկուսն էլ օգտագործում են GraphQL ի տվյալների շերտ, բայց Gridsome-ը օգտագործում է VueJS: Սա ևս հիանալի տասական կայքերի կառույց է, որը կօգնի ձեզ ստեղծել հրաշալի բլոգներ:

Ինչ կսովորեք

Այս ծրագիրը կսովորեցնի ձեզ, թե ինչպես ստեղծել պարզ բլոգ, որպեսզի սկսեք աշխատել Gridsome-ի, GraphQL-ի և Markdown-ի հետ: Այն նաև մանրամասնում է, թե ինչպես իրականացնել ծրագիրը Netlify-ի միջոցով:

Տեխնիկական ստեկ և առանձնահատկություններ

• Gridsome
• -նախագիծ, որն օգտագործում է
• GraphQL
• Markdown
• Netlify

Իհարկե, սա ամենաբացահայտ ծանոթագրությունը չէ, բայց այն ընդգրկում է Gridsome-ի հիմնական գաղափարները և Markdown-ը և կարող է լինել լավ մեկնարկային կետ:.

Աուդիո իրավիճակ, նման SoundCloud-ի, Quasar-ի միջոցով

Quasar-ը ևս մեկ Vue շրջանակ է, որը կարելի է օգտագործել շարժական ծրագրեր ստեղծելու համար: Այս նախագծում դուք կստեղծեք աուդիո-ծրագրի իրավիճակ, օրինակ՝

Ինչ կսովորեք

Ի տարբերություն մյուս նախագծերի, որոնք հիմնականում կենտրոնանում են վեբ-ծրագրերի վրա, այսը ցուցադրելու է, թե ինչպես ստեղծել շարժական ծրագիր՝ օգտագործելով Vue և Quasar շրջանակը:
Դուք արդեն պետք է ունենաք աշխատող Cordova՝ սահմանված Android Studio/Xcode-ով: Եթե ոչ, ապա ուղեցույցում կա հղում Quasar-ի կայքում, որտեղ ցույց է տրվում, թե ինչպես ամեն ինչ կարգավորել:

Տեխնիկական ստեկ և առանձնահատկություններ

• Quasar
• -նախագիծ, որն օգտագործում է
• Cordova
• WaveSurfer
• UI բաղադրիչներ

Փոքր նախագիծ, որը ցուցադրում է Quasar-ի հնարավորությունները շարժական ծրագրեր ստեղծելու համար:

Ընտանիք: habr.com