Եվս 9 նախագիծ՝ բարելավելու ձեր Front-End հմտությունները

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

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

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

Vue-ն և Angular-ը, իհարկե, նույնպես ունեն իրենց օրինական երկրպագուների բազան: Եվ հետո կա Svelte և այլ ունիվերսալ շրջանակներ, ինչպիսիք են Next.js կամ Nuxt.js: Եվ Գեթսբի, և Գրիդսոմ, և Քվազար... և շատ ավելին:

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

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

Հոդվածը թարգմանվել է EDISON Software-ի աջակցությամբ, որը պատրաստում է վիրտուալ կցամասեր բազմաբրենդային խանութների համարԻսկ թեստերի ծրագրային ապահովում.

Ֆիլմերի որոնման հավելված՝ օգտագործելով React (կեռիկներ)

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

Ի՞նչ կսովորես
Ստեղծելով այս հավելվածը՝ դուք կբարելավեք ձեր React հմտությունները՝ օգտագործելով համեմատաբար նոր Hooks API-ը: Օրինակ նախագիծը օգտագործում է React բաղադրիչներ, բազմաթիվ կեռիկներ, արտաքին API և, իհարկե, որոշ CSS ոճավորում:

Tech stack և առանձնահատկություններ

• Արձագանքեք կեռիկներով
• ստեղծել-արձագանքել-ծրագիր
• JSX
• CSS

Առանց որևէ դասի օգտագործման՝ այս նախագծերը ձեզ տալիս են կատարյալ մուտքի կետ ֆունկցիոնալ React-ում և անպայման կօգնեն ձեզ 2020 թվականին։ դու կարող ես գտնել նախագծի օրինակ այստեղ. Հետևեք հրահանգներին կամ դարձրեք այն ձեր սեփականը:

Զրույցի հավելված Vue-ի հետ

Մեկ այլ հիանալի նախագիծ, որը կարող եք անել, դա զրույցի հավելված ստեղծելն է՝ օգտագործելով իմ սիրելի JavaScript գրադարանը՝ VueJS: Հավելվածը կունենա հետևյալ տեսքը.

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

Tech stack և առանձնահատկություններ

• Vue
• vuex
• Vue երթուղիչ
• Vue CLI
• Pusher
• CSS

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

Գեղեցիկ եղանակային հավելված Angular 8-ով

Այս օրինակը կօգնի ձեզ ստեղծել եղանակի գեղեցիկ հավելված՝ օգտագործելով Angular 8:

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

Tech stack և առանձնահատկություններ

• Անկյուն 8
• Firebase- ը
• Սերվերի կողմից մատուցում
• CSS Grid-ով և Flexbox-ով
• Բջջային բարեկամական և հարմարվողականություն
• Մութ ռեժիմ
• Գեղեցիկ ինտերֆեյս

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

To-Do հավելված՝ օգտագործելով Svelte

Svelte-ը նման է բաղադրիչի վրա հիմնված մոտեցման նոր երեխային. առնվազն նման է React-ին, Vue-ին և Angular-ին: Եվ սա 2020 թվականի ամենաթեժ նոր ապրանքներից մեկն է:

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

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

Tech stack և առանձնահատկություններ

• Սվալ 3
• Բաղադրիչներ
• Styling CSS-ով
• ES 6 շարահյուսություն

Շատ լավ Svelte մեկնարկային նախագծեր չկան, այնպես որ ես գտա սա լավ տարբերակ է սկսելու համար.

Էլեկտրոնային առևտրի հավելված՝ օգտագործելով Next.js-ը

Next.js-ը React հավելվածներ ստեղծելու ամենահայտնի շրջանակն է, որոնք աջակցում են սերվերի կողմից արտապատկերում:

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

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

Tech stack և առանձնահատկություններ

• Հաջորդ. Js
• Բաղադրիչներ և էջեր
• Տվյալների նմուշառում
• Ստիլիզացիա
• Ծրագրի տեղակայում
• ԽՍՀ և ԲՀՊՏ

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

Լիարժեք բազմալեզու բլոգ Nuxt.js-ի հետ

Nuxt.js-ը Vue-ի համար է, ինչն է Next.js-ը React-ի համար. հիանալի շրջանակ սերվերի կողմից մատուցման և մեկ էջանոց հավելվածների հզորությունը համատեղելու համար:
Վերջնական հավելվածը, որը կարող եք ստեղծել, կունենա հետևյալ տեսքը.

Ի՞նչ կսովորես

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

Այն օգտվում է Nuxt-ի առաջարկած շատ հիանալի հնարավորություններից, ինչպիսիք են էջերը և բաղադրիչները, ինչպես նաև ոճավորումը SCSS-ով:

Tech stack և առանձնահատկություններ

• Nuxt.js
• Բաղադրիչներ և էջեր
• Storyblock մոդուլ
• Հագաձուկ
• Vuex պետական ​​կառավարման համար
• SCSS ոճավորման համար
• Nuxt Middlewares

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

Բլոգ Գեթսբիի հետ

Գեթսբին հիանալի ստատիկ կայքի գեներատոր է՝ օգտագործելով React և GraphQL: Սա նախագծի արդյունքն է.

Ի՞նչ կսովորես

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

Tech stack և առանձնահատկություններ

• Գեթսբին
• Արձագանքել
• GraphQL
• Փլագիններ և թեմաներ
• MDX / Markdown
• Bootstrap CSS
• Templates

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

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

Բլոգ Gridsome-ի հետ

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

Ի՞նչ կսովորես

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

Tech stack և առանձնահատկություններ

• Մռայլ
• Vue
• GraphQL
• Markdown
• Netlify

Սա, իհարկե, ամենաընդգրկուն ձեռնարկը չէ, բայց այն ներառում է Gridsome և Markdown-ը կարող է լավ մեկնարկային կետ լինել.

SoundCloud-ի նման աուդիո նվագարկիչ՝ օգտագործելով Quasar

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

Ի՞նչ կսովորես

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

Tech stack և առանձնահատկություններ

• Quasar
• Vue
• Կորդովա
• WaveSurfer
• UI բաղադրիչներ

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

Source: www.habr.com