Բովանդակություն
- 01. Անկյունային
- 02. Արձագանքել
- 03. Vue
- Ինչպե՞ս է համեմատվում շրջանակների շարահյուսությունը:
- Հանրաճանաչություն և շուկա
- Բջջային հավելվածների մշակում
- Այլ շրջանակներ, որոնք պետք է որոնել 2020 թվականին
- Եզրակացություն
2020 թ.-ին մենք օրհնված ենք մի շարք շրջանակներով և գրադարաններով, որոնք կօգնեն մեզ վեբ զարգացման գործում: Բայց միշտ այդքան բազմազանություն չկար: Դեռ 2005-ին սցենարական նոր լեզու, որը կոչվում էր Mocha, ստեղծվեց Բրենդան Այխ անունով մի տղայի կողմից: LiveScript- ի վերանվանվելուց ամիսներ անց անունը կրկին փոխվեց JavaScript: Այդ ժամանակից ի վեր JavaScript- ը երկար ճանապարհ է անցել:
2010 թ.-ին մենք տեսանք Backbone- ի և Angular- ի ներդրումը որպես առաջին JavaScript շրջանակներ, և մինչ 2016 թվականը բոլոր կայքերի 92% -ը օգտագործում էր JavaScript: Այս հոդվածում մենք դիտելու ենք JavaScript- ի երեք հիմնական շրջանակները (Angular, React և Vue) և դրանց կարգավիճակը հաջորդ տասնամյակում: Wantանկանու՞մ եք պատրաստել ձեր սեփական կայքը: Փորձեք վեբ կայքերի այս ցուցակը:
Որոշ փայլուն ռեսուրսների համար կարող եք ծանոթանալ նաև վեբ ձևավորման լավագույն գործիքների ցուցակին, վեբ հոստինգի ծառայությունների մեր հավաքածուին և օգտագործողների փորձարկման հիանալի ծրագրակազմի այս ցուցակին:
01. Անկյունային
AngularJS- ը թողարկվեց 2010-ին, բայց մինչ 2016-ը այն ամբողջությամբ վերաշարադրվեց և թողարկվեց որպես Angular 2. Angular- ը Google- ի կողմից մշակված ամբողջական վեբ-շրջանակ է, որն օգտագործվում է Wix, Upwork, The Guardian, HBO և այլնի կողմից:
Կողմ:
- Բացառիկ աջակցություն TypeScript- ին
- MVVM- ը մշակողներին հնարավորություն է տալիս տարանջատել աշխատանքը նույն հավելվածի հատվածում `օգտագործելով տվյալների նույն հավաքածուն
- Գերազանց փաստաթղթեր
Դեմ.
- Ունի ուսման մի փոքր կոր
- Հին տարբերակից արտագաղթելը կարող է դժվար լինել:
- Թարմացումները ներկայացվում են բավականին պարբերաբար, ինչը նշանակում է, որ մշակողները պետք է հարմարվեն դրանց
Ինչ է հաջորդը
Անկյուն 9-ում Ivy- ն լռելյայն կազմող է: Այն տեղադրվել է կատարման և ֆայլի չափի վերաբերյալ շատ խնդիրներ լուծելու համար: Այն պետք է ավելի փոքր, արագ և պարզ դարձնի ծրագրերը:
Երբ համեմատում եք Angular- ի նախորդ տարբերակները React- ի և Vue- ի հետ, ապա
փաթեթի վերջնական չափերը շատ ավելի մեծ էին, երբ օգտագործում էին անկյունային: Ivy- ն նաև հնարավոր է դարձնում Progressive Hydration- ը, ինչը մի բան է, որ անկյունային թիմը ցույց տվեց I / O 2019- ում: Progressive Hydration- ն օգտագործում է Ivy- ն `աստիճանաբար բեռնելու համար սերվերի և հաճախորդի վրա: Օրինակ ՝ հենց որ օգտվողը սկսի փոխազդել էջի հետ, բաղադրիչների կոդը, ցանկացած գործառույթի հետ միասին, մաս առ մաս բերվում է:
Կարծես թե Ivy- ն Angular- ի համար մեծ ուշադրություն է դարձնում և հույս ունի այն հասանելի դարձնել բոլոր ծրագրերի համար: 9-րդ տարբերակում կլինի opt-out տարբերակը, մինչև անկյունային 10-ը:
02. Արձագանքել
React- ը սկզբում թողարկվել է 2013-ին Facebook- ի կողմից և օգտագործվում է ինտերակտիվ վեբ ինտերֆեյսերի կառուցման համար: Այն օգտագործվում է Netflix- ի, Dropbox- ի, PayPal- ի և Uber- ի կողմից `մի քանի անուն տալու համար:
Կողմ:
- React- ը օգտագործում է վիրտուալ DOM- ը, ինչը դրական ազդեցություն ունի կատարման վրա
- JSX- ը հեշտ է գրել
- Թարմացումները չեն խաթարում կայունությունը
Դեմ.
- Հիմնական հետընթացներից մեկը երրորդ կողմի գրադարանների կարիքն է ՝ ավելի բարդ ծրագրեր ստեղծելու համար
- Մշակողները մնում են մթության մեջ `զարգացման լավագույն ձևով
Ինչ է հաջորդը
React Conf 2019-ին React- ի թիմն անդրադարձավ մի շարք բաների, որոնց վրա աշխատել են: Առաջինը ընտրովի խոնավացումն է, որտեղ React- ը դադար կտա այն ամենը, ինչի վրա աշխատում է, որպեսզի առաջնային համարի այն բաղադրիչները, որոնց հետ օգտվողը համագործակցում է: Քանի որ օգտագործողը գնում է որոշակի հատվածի հետ փոխգործակցություն, այդ տարածքը խոնավացվելու է: Թիմը նաև աշխատել է Suspense- ի վրա, որը React- ի համակարգն է `կոդերի, տվյալների և պատկերների բեռնումը կազմակերպելու համար: Սա հնարավորություն է տալիս բաղադրիչներին սպասել ինչ-որ բանի, նախքան դրանք կտան:
Թե՛ ընտրովի խոնավացումը և թե՛ կախոցը հնարավոր են դառնում զուգահեռ ռեժիմի միջոցով, ինչը հնարավորություն է տալիս հավելվածներին ավելի պատասխանատու լինել ՝ տալով React- ին ավելի ցածր առաջնահերթ աշխատանքի մեծ բլոկներ մուտք գործելու հնարավորություն ՝ կենտրոնանալու ավելի բարձր առաջնահերթության վրա, ինչպիսին է պատասխանել օգտագործողի մուտքին: Թիմը նաև նշել է մատչելիությունը որպես մեկ այլ ոլորտ, որը նրանք դիտարկել են ՝ կենտրոնանալով երկու հատուկ թեմաների վրա ՝ ֆոկուսի կառավարման և ներածման ինտերֆեյսների կառավարում:
03. Vue
Vue- ն մշակվել է 2014 թ.-ին Evan You- ի կողմից, Google- ի նախկին աշխատակից: Այն օգտագործվում է Xiaomi- ի, Alibaba- ի և GitLab- ի կողմից: Vue- ին հաջողվեց ձեռք բերել ժողովրդականություն և աջակցություն մշակողների կողմից կարճ ժամանակահատվածում և առանց խոշոր ապրանքանիշի աջակցության:
Կողմ:
- Չափերի շատ թեթև
- Սկսնակ ընկերական - հեշտ է սովորել
- Մեծ համայնք
Դեմ.
- Չի աջակցվում հսկայական ընկերության կողմից, ինչպիսին է React- ը Facebook- ի հետ և Angular- ը Google- ի հետ
- Ոչ մի իրական կառույց
Ինչ է հաջորդը
Vue- ն իր առջև դրել է նպատակ ՝ ավելի արագ, փոքր, ավելի պահպանելի և հեշտացնելու համար մշակողների համար բնիկների թիրախավորումը (եթե դժվարանում եք պահպանել, հաշվի առեք վեբ հոստինգի ծառայությունը): Հաջորդ թողարկումը (3.0) նախատեսված է 2020 թ. Q1- ում, որը ներառում է վիրտուալ DOM վերաշարադրում ՝ ավելի լավ կատարման համար, ինչպես նաև բարելավված TypeScript աջակցություն: Կա նաև Composition API- ի հավելում, որը մշակողներին հնարավորություն է տալիս գործառույթի փոխարեն բաղադրիչներ ստեղծելու և դրանք առանձնահատկություններով կազմակերպելու նոր եղանակ:
Նրանք, ովքեր զարգացնում են Vue- ն, նույնպես զբաղված էին Suspense- ի վրա աշխատելով, որը կասեցնում է ձեր բաղադրիչի մատուցումը և վերադարձնում է բաղադրիչը մինչև որևէ պայման կատարվի:
Vue- ի թարմացումների մեծ բաներից մեկն այն է, որ դրանք պահպանում են հետամնաց համատեղելիությունը: Նրանք չեն ցանկանում, որ կոտրեք ձեր հին Vue նախագծերը: Մենք դա տեսանք 1.0-ից 2.0-ի միգրացիայի մեջ, որտեղ API- ի 90 տոկոսը նույնն էր:
Ինչպե՞ս է համեմատվում շրջանակների շարահյուսությունը:
Բոլոր երեք շրջանակներն էլ իրենց թողարկումներից հետո փոփոխությունների են ենթարկվել, բայց հասկանալու համար կարևոր է շարահյուսությունը և դրա տարբերությունը: Եկեք նայենք, թե ինչպես է շարադասությունը համեմատվում, երբ խոսքը վերաբերում է պարզ իրադարձությունների պարտադիր կատարմանը.
Vue: Ի v-on դիրեկտիվը օգտագործվում է իրադարձությունների ունկնդիրներին կցելու համար, որոնք մեթոդներ են կանչում Vue- ի ատյանների վրա: Հրահանգները նախածանցվում են v- որպեսզի նշվի, որ դրանք Vue- ի կողմից տրամադրված հատուկ հատկանիշներ են և մատուցվող DOM- ի նկատմամբ կիրառում են հատուկ ռեակտիվ վարք: Իրադարձությունների սպասարկողները կարող են տրամադրվել ինչպես ներքին, այնպես էլ որպես մեթոդի անուն:
ձևանմուշ> կոճակ v-on: կտտացնել = "clickHandler"> կտտացնել ինձ / կոճակ> / template> սկրիպտ> արտահանման լռելյայն {անունը: "HelloWorld", մեթոդներ ՝ {clickHandler: function () {console.log ("Ինձ կտտացրեցին! ”); }}}; / սցենար>
Արձագանքել. React- ը նշում և տրամաբանություն է դնում JS- ում և JSX- ում `շարահյուսական ընդլայնում JavaScript- ին: JSX- ի հետ գործառույթը փոխանցվում է որպես իրադարձությունների կառավարիչ: Իրադարձությունների հետ վարվելը React տարրերով շատ նման է DOM տարրերի վրա իրադարձությունների մշակմանը: Բայց շարահյուսական որոշ տարբերություններ կան. օրինակ, React- ի իրադարձություններն անվանվում են ոչ թե փոքր, այլ camelCase- ի միջոցով:
ֆունկցիայի կոճակ () {ֆունկցիա clickHandler (ե) {console.log («Ինձ կտտացրեցին»); } վերադարձի կոճակը սեղմեք = {clickHandler}> կտտացրեք ինձ! / կոճակ>; }
Անկյունային: Իրադարձությունների կապման շարահյուսությունը բաղկացած է հավասար նշանի ձախ կողմում գտնվող փակագծերում գտնվող նպատակային իրադարձության անվանումից և աջից մեջբերված ձևանմուշի արտահայտությունից: Այլընտրանքորեն, դուք կարող եք օգտագործել այն վրա- նախածանց, որը հայտնի է որպես կանոնական ձև:
@Component ({ընտրող. «Հավելված-կտտացրեք ինձ»), ձևանմուշ ՝ «կոճակ (կտտացրեք) =» onClickMe () »> կտտացրեք ինձ! / Կոճակ>«}) արտահանման դաս ClickMeComponent {onClickMe () {console.log (« Դուք կտտացրեցիք ինձ »: }}
Հանրաճանաչություն և շուկա
Եկեք սկսենք ՝ դիտելով համացանցային մասի վերաբերյալ երեք շրջանակների ընդհանուր պատկերը ՝ ուսումնասիրելով W3Techs– ի վիճակագրությունը: Անկյունայինը ներկայումս օգտագործվում է բոլոր կայքերի 0.4 տոկոսի կողմից, JavaScript գրադարանի շուկայական մասնաբաժինը `0,5 տոկոս: React- ն օգտագործվում է բոլոր կայքերի 0.3% -ի և JavaScript գրադարանի 0.4% շուկայի մասնաբաժնի կողմից, իսկ Vue- ն `0.3% -ը երկուսի համար էլ: Սա կարծես բավականին հավասար է, և դուք ակնկալում եք, որ թվերը կաճեն:
Google միտումները. Վերջին 12 ամիսների ընթացքում React- ը որոնման տերմիններում ամենատարածվածն է, որին հաջորդում է Angular- ը: Vue.js- ը հետ է մնում. այնուամենայնիվ, պետք է հիշել մի բան, որ Vue- ն դեռ երիտասարդ է `համեմատած մյուս երկուսի հետ:
Աշխատանքի որոնումներ. Գրելու պահին React- ը և Angular- ը բավականին սերտորեն համընկնում են աշխատանքների ցուցակների առումով: Իսկապես, Vue- ն շատ հեռու է: LinkedIn- ում, սակայն, կարծես թե ավելի շատ պահանջարկ կա Vue մշակողների համար:
Stack Overflow: Եթե նայեք 2019-ի Stack Overflow- ի մշակողների հարցման արդյունքներին, React- ը և Vue.j- ը երկուսն էլ ամենասիրված և ցանկալի վեբ շրջանակներն են: Անկյունը նստում է իններորդ հորիզոնականում ամենասիրված, բայց երրորդը `ամենից շատ փնտրվողների համար:
GitHub: Vue- ն ունի ամենաշատ աստղերի քանակը 153k- ով, բայց ունի նվազագույն ներդրողների քանակը (283): Մյուս կողմից, React- ն ունի 140 հազար աստղ և 1,341 ներդրում: Angular- ն ունի ընդամենը 59,6 կիլոմետր աստղ, բայց ունի երեք ներդրողներից ամենաբարձր քանակը ՝ 1,579:
NPM միտումները. Վերևում նշված պատկերը ցույց է տալիս վերջին 12 ամիսների վիճակագրությունը, որտեղ կարող եք տեսնել, որ React- ն ամսական ներբեռնումների ավելի մեծ քանակ ունի ՝ համեմատած Angular- ի և Vue- ի հետ:
Բջջային հավելվածների մշակում
Մեծ եռյակի հիմնական ուշադրությունը բջջային հեռախոսների տեղակայումն է: React- ը ունի React Native, որը դարձել է iOS և Android հավելվածներ կառուցելու սիրված ընտրություն ոչ միայն React- ի օգտագործողների, այլ նաև հավելվածների զարգացման ավելի լայն համայնքի համար: Անկյունային մշակողները կարող են օգտագործել NativeScript- ը բնիկ ծրագրերի համար կամ Ionic- ը հիբրիդային բջջային հավելվածների համար, մինչդեռ Vue- ի մշակողները ունեն NativeScript- ի կամ Vue Native- ի ընտրություն: Բջջային հավելվածների ժողովրդականության պատճառով սա մնում է ներդրումների առանցքային ոլորտ:
Այլ շրջանակներ, որոնք պետք է որոնել 2020 թվականին
Եթե ցանկանում եք ինչ-որ նոր բան փորձել 2020 թվականին, տեսեք այս JavaScript շրջանակները:
Էմբեր: Վեբ հավելվածների կառուցման համար բաց կոդով նախատեսված շրջանակ, որն աշխատում է MVVM օրինակի հիման վրա: Այն օգտագործվում է մի քանի խոշոր ընկերությունների կողմից, ինչպիսիք են Microsoft- ը, Netflix- ը և LinkedIn- ը:
Երկնաքար: Webամանակակից վեբ և բջջային ծրագրեր մշակելու համար լիարժեք փաթեթավորված JavaScript հարթակ: Դա հեշտ է սովորել և ունի շատ օժանդակ համայնք:
Եզրակացություն
Բոլոր երեք շրջանակներն անընդհատ բարելավվում են, ինչը հուսադրող նշան է: Յուրաքանչյուր ոք ունի իր սեփական տեսանկյունը և նախընտրելի լուծումը, թե որ մեկը պետք է օգտագործի, բայց դա իրականում վերաբերում է ծրագրի չափսին և ձեզ ավելի հարմարավետ է զգում:
Ամենակարևոր ասպեկտը նրանց համայնքների շարունակական աջակցությունն է, այնպես որ, եթե դուք պլանավորում եք սկսել նոր նախագիծ և նախկինում երբևէ չեք օգտագործել որևէ մեկը, ապա ես հավատում եմ, որ բոլորի հետ ապահով ձեռքերում եք: Եթե դեռ հնարավորություն չեք ունեցել սովորելու երեք շրջանակներից որևէ մեկը, ապա ես առաջարկում եմ այն դարձնել ձեր Ամանորի բանաձևը ՝ սկսելու սովորելը: Ապագան պտտվելու է այս երեքի շուրջ:
Այս բովանդակությունն ի սկզբանե հայտնվել է net ամսագրում:
