Ինչ զգացողություն է սովորել JavaScript-ը 2016 թվականին

Այս հոդվածը գրելու ընթացքում JavaScript-ի շրջանակներ չեն ստեղծվել:

Հետևյալը ոգեշնչված է Circle CI-ի «Դա ապագան է» հոդվածից: Բնօրինակը կարող եք կարդալ այստեղ ։ Այս հատվածը պարզապես կարծիք է, և ինչպես JavaScript-ի ցանկացած շրջանակ, այն չպետք է շատ լուրջ վերաբերվել:

Ողջույն, ես ստացել եմ այս նոր վեբ նախագիծը, բայց ճիշտն ասած, ես մի քանի տարի է, ինչ շատ վեբ չեմ կոդավորել, և ես լսել եմ, որ լանդշաֆտը մի փոքր փոխվել է: Դուք այստեղ ամենաարդի վեբ մշակողն եք, չէ՞:

- Իրական տերմինը Front End-ի ինժեներ է, բայց այո, ես ճիշտ տղան եմ: Ես զբաղվում եմ վեբով 2016թ.-ին: Վիզուալիզացիաներ, երաժշտական նվագարկիչներ, թռչող անօդաչու թռչող սարքեր, որոնք ֆուտբոլ են խաղում: Ես հենց նոր վերադարձա JsConf-ից և ReactConf-ից, ուստի գիտեմ վեբ հավելվածներ ստեղծելու վերջին տեխնոլոգիաները:

Թույն. Ես պետք է ստեղծեմ էջ, որը կցուցադրի օգտատերերի վերջին գործունեությունը, այնպես որ ես պարզապես պետք է ստանամ տվյալները REST վերջնակետից և ցուցադրեմ դրանք ինչ-որ զտվող աղյուսակում և թարմացնեմ այն, եթե ինչ-որ բան փոխվի սերվերում: Մտածում էի, միգուցե jQuery-ն օգտագործե՞լ՝ տվյալները վերցնելու և ցուցադրելու համար:

-Աստված իմ ոչ, ոչ ոք այլևս չի օգտագործում jQuery: Դուք պետք է փորձեք սովորել React-ը, 2016թ.

Օ, լավ: Ի՞նչ է React-ը:

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

Դա կոկիկ է հնչում: Կարո՞ղ եմ օգտագործել React-ը սերվերից տվյալները ցուցադրելու համար:

-Այո, բայց նախ պետք է ավելացնել React-ը և React DOM-ը որպես գրադարան Ձեր վեբ էջում:

Սպասիր, ինչո՞ւ երկու գրադարան։

-Այսպիսով, մեկը իրական գրադարանն է, իսկ երկրորդը DOM-ը շահարկելու համար է, որն այժմ կարող եք նկարագրել JSX-ում:

JSX? Ինչ է JSX-ը:

-JSX-ը պարզապես JavaScript-ի շարահյուսական ընդլայնում է, որը շատ նման է XML-ին: Դա մի տեսակ այլ կերպ է նկարագրելու DOM-ը, մտածեք որպես ավելի լավ HTML:

Ի՞նչն է սխալ HTML-ի հետ:

-Սա 2016 թվականն է: Այլևս ոչ ոք ուղղակիորեն չի կոդավորում HTML-ը:

Ճիշտ է։ Ամեն դեպքում, եթե ավելացնեմ այս երկու գրադարանները, ապա կարող եմ օգտագործել React?

- Ոչ այնքան: Դուք պետք է ավելացնեք Babel-ը, այնուհետև կարող եք օգտագործել React-ը:

Մեկ այլ գրադարան? Ի՞նչ է Բաբելը:

-Oh, Babel-ը տրանսփայլեր է, որը թույլ է տալիս թիրախավորել JavaScript-ի կոնկրետ տարբերակները, մինչդեռ դուք կոդավորում եք JavaScript-ի ցանկացած տարբերակում: Պարտադիր չէ, որ ներառեք Babel-ը ReactJS-ն օգտագործելու համար, բայց եթե չես անում, դուք խրված եք ES5-ի օգտագործման մեջ, և եկեք իրական լինենք, դա 2016 թվականն է, դուք պետք է կոդավորեք ES2016+-ում, ինչպես անում են մնացած հիանալի երեխաները:

ES5? ES2016+? Ես կորչում եմ այստեղ: Ի՞նչ է ES5-ը և ES2016+-ը:

-ES5-ը նշանակում է ECMAScript 5: Դա այն հրատարակությունն է, որը թիրախավորել է մարդկանց մեծամասնությունը, քանի որ այն ներդրվել է մեր օրերում բրաուզերների մեծ մասի կողմից:

ECMAScript?

-Այո, գիտեք, JavaScript-ի սկրիպտավորման ստանդարտը հիմնվել է 1999 թվականին՝ 1995 թվականին դրա սկզբնական թողարկումից հետո, այն ժամանակ, երբ JavaScript-ը կոչվում էր Livescript և աշխատում էր միայն Netscape Navigator-ում: Այն ժամանակ դա շատ խառնաշփոթ էր, բայց բարեբախտաբար հիմա ամեն ինչ շատ պարզ է, և մենք ունենք, օրինակ, այս իրականացման 7 հրատարակություն:

7 հրատարակություն։ Իրականում: Իսկ ES5-ն ու ES2016+-ն են?

-Հինգերորդ և յոթերորդ հրատարակությունները համապատասխանաբար:

Սպասիր, ի՞նչ եղավ վեցերորդի հետ։

- Նկատի ունեք ES6-ը: Այո, ես նկատի ունեմ, որ յուրաքանչյուր հրատարակություն նախորդի սուպերկետ է, այնպես որ, եթե դուք օգտագործում եք ES2016+, դուք օգտագործում եք նախորդ տարբերակների բոլոր հնարավորությունները:

Ճիշտ է։ Եվ ինչու՞ այդ դեպքում օգտագործել ES2016+-ը ES6-ի փոխարեն:

-Դե, դուք ԿԱՐՈՂ ԵՔ օգտագործել ES6-ը, բայց որպեսզի օգտագործեք ոչ համաժամեցման և սպասելու հիանալի հնարավորությունները, դուք պետք է օգտագործեք ES2016+: Հակառակ դեպքում դուք խրված եք ES6 գեներատորների հետ, որոնք ունեն կոորուտիններ՝ պատշաճ հսկողության հոսքի համար ասինխրոն զանգերը արգելափակելու համար:

Ես գաղափար չունեմ, թե ինչ ասացիր, և այս բոլոր անունները շփոթեցնող են: Նայեք, ես պարզապես սերվերից բեռնում եմ մի շարք տվյալներ, ես կարող էի պարզապես ներառել jQuery-ն CDN-ից և պարզապես ստանալ տվյալները AJAX-ի զանգերով, ինչու՞ չեմ կարող դա անել:

-Սա 2016 թվականի մարդ է, ոչ ոք այլևս չի օգտագործում jQuery, այն ավարտվում է սպագետտի կոդով: Դա բոլորը գիտեն։

Ճիշտ է։ Այսպիսով, իմ այլընտրանքն է՝ բեռնել երեք գրադարան՝ տվյալներ բերելու և HTML աղյուսակ ցուցադրելու համար:

-Դե, դուք ներառում եք այդ երեք գրադարանները, բայց դրանք միավորում եք մոդուլի կառավարչի հետ՝ միայն մեկ ֆայլ բեռնելու համար:

տեսնում եմ. Իսկ ի՞նչ է մոդուլի կառավարիչը:

-Սահմանումը կախված է միջավայրից, բայց համացանցում մենք սովորաբար նկատի ունենք այն ամենը, ինչ աջակցում է AMD կամ CommonJS մոդուլներ:

Ռիիայթ. Իսկ AMD-ն ու CommonJS-ը…

-Սահմանումներ. Կան եղանակներ նկարագրելու, թե ինչպես պետք է փոխազդեն JavaScript-ի բազմաթիվ գրադարաններ և դասեր: Գիտե՞ք՝ արտահանում և պահանջում։ Դուք կարող եք գրել բազմաթիվ JavaScript ֆայլեր, որոնք սահմանում են AMD կամ CommonJS API-ն և կարող եք օգտագործել Browserify-ի նման մի բան՝ դրանք փաթեթավորելու համար:

Լավ, դա իմաստ ունի… կարծում եմ: Ինչ է Browserify-ը:

-Սա գործիք է, որը թույլ է տալիս միավորել CommonJS-ի նկարագրված կախվածությունները ֆայլերի հետ, որոնք կարող են գործարկվել բրաուզերում: Այն ստեղծվել է, քանի որ մարդկանց մեծամասնությունը հրապարակում է այդ կախվածությունները npm ռեգիստրում:

npm ռեգիստր:

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

Ինչպես CDN-ն:

-Իսկապես ոչ: Դա ավելի շատ նման է կենտրոնացված տվյալների բազայի, որտեղ յուրաքանչյուրը կարող է հրատարակել և ներբեռնել գրադարաններ, այնպես որ դուք կարող եք դրանք օգտագործել տեղական մշակման համար և այնուհետև վերբեռնել դրանք CDN-ում, եթե ցանկանում եք:

Oh, ինչպես Bower!

-Այո, բայց հիմա 2016 թվականն է, Bower-ն այլևս ոչ ոք չի օգտագործում:

Հա, տեսնում եմ… ուրեմն ես պետք է ներբեռնեմ գրադարանները npm-ից:

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

Oh, ինչպես Angular!

-Angular այնքան 2015. Բայց այո: Angular-ը կլինի այնտեղ՝ VueJS-ի կամ RxJS-ի և 2016-ի այլ հետաքրքիր գրադարանների կողքին: Ցանկանու՞մ եք իմանալ դրանց մասին:

Եկեք մնանք React-ին, ես հիմա արդեն չափից շատ բաներ եմ սովորում: Այսպիսով, եթե ինձ անհրաժեշտ է օգտագործել React-ը, ես այն վերցնում եմ այս npm-ից և այնուհետև օգտագործում եմ այս Browserify բանը:

-Այո:

Դա չափազանց բարդ է թվում պարզապես մի փունջ կախվածություն վերցնելը և դրանք միմյանց կապելը:

-Այդ պատճառով է, որ դուք օգտագործում եք առաջադրանքների կառավարիչ, ինչպիսիք են Grunt-ը կամ Gulp-ը կամ Broccoli-ն՝ Browserify-ի գործարկումն ավտոմատացնելու համար: Դժբախտաբար, դուք նույնիսկ կարող եք օգտագործել Mimosa-ն:

Մռնչալ? Գուլպ? Բրոկոլի՞ Միմոզա? Ինչի՞ մասին ենք հիմա խոսում:

- Առաջադրանքների կառավարիչներ: Բայց նրանք այլեւս զով չեն: Մենք դրանք օգտագործեցինք 2015-ին, հետո օգտագործեցինք Makefiles-ը, բայց հիմա ամեն ինչ փաթաթում ենք Webpack-ով:

Ֆայլեր. Կարծում էի, որ այն հիմնականում օգտագործվում էր C կամ C++ նախագծերում:

-Այո, բայց, ըստ երևույթին, համացանցում մենք սիրում ենք ամեն ինչ բարդացնել և հետո վերադառնալ հիմնականին: Մենք դա անում ենք ամեն տարի կամ այնքան, պարզապես սպասեք դրան, մենք պատրաստվում ենք հավաքել ցանցում մեկ կամ երկու տարի հետո:

Հառաչիր։ Դուք նշե՞լ եք մի բան, որը կոչվում է Webpack:

-Դա զննարկչի ևս մեկ մոդուլի կառավարիչ է, միաժամանակ լինելով առաջադրանքների կատարող: Դա նման է Browserify-ի ավելի լավ տարբերակի:

Օ, լավ: Ինչու է դա ավելի լավ:

-Դե, միգուցե ավելի լավ չէ, պարզապես ավելի շատ կարծիք կա, թե ինչպես պետք է կապված լինեն ձեր կախվածությունները: Webpack-ը թույլ է տալիս օգտագործել տարբեր մոդուլների մենեջերներ, և ոչ միայն CommonJS, օրինակ՝ բնիկ ES6 աջակցվող մոդուլներ:

Ես չափազանց շփոթված եմ այս ամբողջ CommonJS/ES6 բանից:

-Բոլորն էլ կան, բայց SystemJS-ի վրա այլևս պետք չէ հոգ տանել:

Հիսուս Քրիստոս, մեկ այլ գոյական-js. Լավ, և ի՞նչ է այս SystemJS-ը:

-Դե, ի տարբերություն Browserify-ի և Webpack 1.x-ի, SystemJS-ը դինամիկ մոդուլի բեռնիչ է, որը թույլ է տալիս մի քանի մոդուլներ կապել բազմաթիվ ֆայլերի մեջ՝ դրանք մեկ մեծ ֆայլի մեջ միավորելու փոխարեն:

Սպասեք, բայց ես մտածեցի, որ մենք ցանկանում ենք կառուցել մեր գրադարանները մեկ մեծ ֆայլում և բեռնել այն:

-Այո, բայց քանի որ HTTP/2-ը գալիս է այժմ բազմաթիվ HTTP հարցումներն իրականում ավելի լավն են:

Սպասեք, չէ՞ որ մենք պարզապես չենք կարող ավելացնել երեք բնօրինակ գրադարաններ React-ի համար:

-Իսկապես ոչ: Նկատի ունեմ, որ դուք կարող եք դրանք ավելացնել որպես CDN-ի արտաքին սկրիպտներ, բայց դուք դեռ պետք է ներառեք Babel-ը:

Հառաչիր։ Իսկ դա վատ է, ճիշտ է?

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

Ես ստացա, ստացա: Այսպիսով, եթե դուք գրադարանները ուղղակիորեն չներառեք CDN-ում, ինչպե՞ս դա կանեիք:

-Ես այն կփոխադրեի Typescript-ից՝ օգտագործելով Webpack + SystemJS + Babel կոմբինացիա:

Տառատեսակը? Ես կարծում էի, որ մենք կոդավորում ենք JavaScript-ով:

-Typescript-ը JavaScript-ն է, կամ ավելի լավ ասած՝ JavaScript-ի գերկոմպլեկտ, ավելի կոնկրետ՝ JavaScript-ը ES6 տարբերակում: Գիտե՞ք, այդ վեցերորդ տարբերակը, որի մասին նախկինում խոսեցինք։

Ես կարծում էի, որ ES2016+-ն արդեն ES6-ի սուպերսեթ է: ԻՆՉՈՒ՞ մեզ հիմա պետք է այս բանը, որը կոչվում է Typescript:

-Օ՜, քանի որ դա մեզ թույլ է տալիս օգտագործել JavaScript-ը որպես մուտքագրված լեզու և նվազեցնել գործարկման ժամանակի սխալները: 2016 թվականն է, դուք պետք է որոշ տեսակներ ավելացնեք ձեր JavaScript կոդի մեջ:

Իսկ Typescript-ն ակնհայտորեն դա անում է:

-Հոսում է նաև, չնայած այն ստուգում է միայն մուտքագրելու համար, մինչդեռ Typescript-ը JavaScript-ի սուպերբազմություն է, որը պետք է կազմվի:

Հառաչել… իսկ Flow է?

-Սա ստատիկ տիպի ստուգիչ է, որը պատրաստել են Facebook-ի որոշ տղաներ: Նրանք այն կոդավորեցին OCaml-ով, քանի որ ֆունկցիոնալ ծրագրավորումը հիանալի է:

OCaml? Ֆունկցիոնալ ծրագրավորում?

-Դա այն է, ինչ օգտագործում են մեր օրերի զիլ երեխաները, գիտե՞ք, 2016թ. Ֆունկցիոնալ ծրագրավորում? Բարձր կարգի գործառույթներ: Կարրի՞ն: Մաքուր գործառույթներ.

Ես պատկերացում չունեմ, թե ինչ ես հենց նոր ասացիր։

- Սկզբում ոչ ոք չի անում: Տեսեք, դուք պարզապես պետք է իմանաք, որ ֆունկցիոնալ ծրագրավորումն ավելի լավն է, քան OOP-ը, և դա այն է, ինչ մենք պետք է օգտագործենք 2016 թվականին:

Սպասիր, ես սովորեցի OOP-ը քոլեջում, մտածեցի, որ դա լավ է:

-Այնպես էր Java-ն մինչև Oracle-ի կողմից գնելը: Նկատի ունեմ, որ OOP-ը լավն էր նախկինում, և այն դեռևս ունի իր կիրառությունը այսօր, բայց հիմա բոլորը հասկանում են, որ վիճակների փոփոխությունը հավասարազոր է նորածիններին ոտքով հարվածելուն, ուստի այժմ բոլորը շարժվում են դեպի անփոփոխ օբյեկտներ և ֆունկցիոնալ ծրագրավորում: Haskell-ի տղաները այն անվանում էին տարիներ շարունակ, - և ինձ մի՛ սկսեք Elm-ի տղաների հետ, բայց, բարեբախտաբար, համացանցում այժմ մենք ունենք գրադարաններ, ինչպիսին Ramda-ն է, որը թույլ է տալիս մեզ օգտագործել ֆունկցիոնալ ծրագրավորում պարզ JavaScript-ում:

Հանուն դրա՞ պարզապես անուններ եք գցում: Ի՞նչ դժոխք է Ռամդան:

-Ոչ: Ռամդա. Լամբդայի նման: Գիտե՞ք, Դեյվիդ Չեմբերսի գրադարանը:

Դավիթ ով?

-Դեյվիդ Չեմբերս. Թույն տղա: Խաղում է հեղաշրջման վատ խաղ: Ռամդայի համար ներդրողներից մեկը: Դուք նաև պետք է ստուգեք Էրիկ Մեյջերին, եթե լրջորեն ցանկանում եք սովորել ֆունկցիոնալ ծրագրավորում:

Իսկ Էրիկ Մեյջերը…

-Ֆունկցիոնալ ծրագրավորման տղա նույնպես: Հրաշալի տղա: Նա ունի մի փունջ շնորհանդեսներ, որտեղ նա աղբ է նետում Agile-ին՝ օգտագործելով այս տարօրինակ գունավոր վերնաշապիկը: Դուք նաև պետք է ստուգեք որոշ նյութեր Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-ից:

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

-Դե, իրականում դուք չեք վերցնում տվյալները React-ով, դուք պարզապես ցուցադրում եք տվյալները React-ով:

Ահ, անիծյալ ինձ: Այսպիսով, ինչ եք օգտագործում տվյալների բեռնման համար:

-Դուք օգտագործում եք Fetch-ը սերվերից տվյալները ստանալու համար:

կներե՞ս: Դուք օգտագործում եք Fetch-ը տվյալներ ստանալու համար: Ով նշում է այդ բաները, կարիք ունի թեզաուրուսի:

-Ճի՞շտ գիտեմ: Վերցրեք դա սերվերի դեմ XMLHttpRequests կատարելու համար բնիկ ներդրման անունն է:

Oh, այնպես որ AJAX.

-AJAX-ը պարզապես XMLHttpRequests-ի օգտագործումն է: Բայց վստահ. Fetch-ը թույլ է տալիս կատարել AJAX՝ հիմնվելով խոստումների վրա, որոնք այնուհետև կարող եք լուծել՝ խուսափելու հետադարձ կապի դժոխքից:

Զանգահարե՞լ դժոխք:

-Այո: Ամեն անգամ, երբ դուք կատարում եք ասինխրոն հարցում սերվերի դեմ, դուք պետք է սպասեք դրա պատասխանին, որն այնուհետև ստիպում է ձեզ ֆունկցիա ավելացնել ֆունկցիայի մեջ, որը կոչվում է հետադարձ զանգի բուրգ դժոխքից:

Օ, լավ: Եվ այս խոստումը լուծում է այն:

-Իսկապես: Խոստումների միջոցով շահարկելով ձեր հետադարձ զանգերը՝ դուք կարող եք գրել ավելի հասկանալի կոդ, ծաղրել և փորձարկել դրանք, ինչպես նաև կատարել միաժամանակյա հարցումներ և սպասել, մինչև դրանք բոլորը բեռնվեն:

Իսկ դա կարելի՞ է անել Fetch-ով:

-Այո, բայց միայն այն դեպքում, եթե ձեր օգտատերը օգտագործում է մշտադալար բրաուզեր, հակառակ դեպքում դուք պետք է ներառեք Fetch polyfill կամ օգտագործեք Request, Bluebird կամ Axios:

Քանի՞ գրադարան պետք է իմանամ ի սեր Աստծո: Նրանցից քանիսն են:

-Դա JavaScript է: Պետք է լինեն հազարավոր գրադարաններ, որոնք բոլորն էլ նույն բանն են անում: Մենք գիտենք գրադարաններ, իրականում մենք ունենք լավագույն գրադարանները։ Մեր գրադարանները հսկայական են, և երբեմն դրանցում մենք ներառում ենք Գայ Ֆիերիի նկարները:

Դուք հենց նոր ասացիք Գայ Ֆիերի: Եկեք ավարտենք սա: Ի՞նչ են անում այս Bluebird, Request, Axios գրադարանները:

-Դրանք գրադարաններ են XMLHttpRequest-ներ կատարելու համար, որոնք խոստումներ են տալիս:

Չէ՞ որ jQuery-ի AJAX մեթոդը նույնպես սկսեց խոստումներ տալ:

-2016-ին «Ջ» բառն այլևս չենք օգտագործում։ Պարզապես օգտագործեք Fetch-ը և լցրեք այն, երբ այն զննարկիչում չէ, կամ դրա փոխարեն օգտագործեք Bluebird, Request կամ Axios: Այնուհետև կառավարեք խոստումը async ֆունկցիայի և բումի մեջ սպասելով, դուք ունեք պատշաճ հսկողության հոսք:

Երրորդ անգամն է, որ դուք նշում եք սպասել, բայց ես գաղափար չունեմ, թե դա ինչ է:

-Await-ը թույլ է տալիս արգելափակել ասինխրոն զանգը, ինչը թույլ է տալիս ավելի լավ վերահսկել, երբ տվյալները բեռնվում են և ընդհանուր առմամբ մեծացնում է կոդի ընթեռնելիությունը: Հիանալի է, պարզապես պետք է համոզվեք, որ ավելացնեք փուլ-3 նախադրյալը Babel-ում կամ օգտագործեք syntax-async-functions և transform-async-to-generator plugin-ը:

Սա խելագարություն է:

-Ոչ, խելագար է այն փաստը, որ դուք պետք է նախօրոք կազմեք Typescript կոդը, այնուհետև այն փոխարկեք Babel-ի հետ՝ սպասելու համար:

Ի՞նչ Այն ներառված չէ Typescript-ում:

- Դա տեղի է ունենում հաջորդ տարբերակում, բայց 1.7 տարբերակի համար այն ուղղված է միայն ES6-ին, այնպես որ, եթե ցանկանում եք օգտագործել await-ը զննարկիչում, նախ պետք է կազմեք ձեր Typescript կոդը՝ ուղղված ES6-ին, այնուհետև՝ Babel-ը, որը կհասցնի ES5-ին:

Այս պահին չգիտեմ ինչ ասել.

-Տես, հեշտ է: Կոդավորեք ամեն ինչ Typescript-ով: Բոլոր մոդուլները, որոնք օգտագործում են Fetch-ը, դրանք կազմում են ES6-ին թիրախավորելու համար, դրանք փոխակերպում են Babel-ի հետ փուլ-3 նախադրյալի վրա և բեռնում դրանք SystemJS-ով: Եթե չունեք Fetch, լրացրեք այն կամ օգտագործեք Bluebird, Request կամ Axios, և սպասեք ձեր բոլոր խոստումներին:

Մենք ունենք հեշտի շատ տարբեր սահմանումներ: Այսպիսով, այդ ծիսակարգով ես վերջապես վերցրեցի տվյալները և այժմ կարող եմ դրանք ցուցադրել React-ով, ճիշտ է:

-Ձեր դիմումը պետական որեւէ փոփոխությո՞ւն է կարգավորելու:

Սխալ, ես այդպես չեմ կարծում: Ես պարզապես պետք է ցուցադրեմ տվյալները:

-Օ, փառք Աստծո: Հակառակ դեպքում ես ստիպված կլինեի ձեզ բացատրել Flux-ը և իրականացումները, ինչպիսիք են Flummox, Alt, Fluxible: Չնայած անկեղծ ասած, դուք պետք է օգտագործեք Redux-ը:

Ես պարզապես թռչելու եմ այդ անունների վրայով: Կրկին, ես պարզապես պետք է ցուցադրեմ տվյալները:

-Օհ, եթե դուք պարզապես ցուցադրում եք այն տվյալները, որոնցից սկզբում React-ի կարիքը չունեիք: Դուք լավ կլինեիք կաղապարային շարժիչով:

Դուք կատակում եք ինձ: Ի՞նչ եք կարծում, սա ծիծաղելի է: Այդպե՞ս եք վերաբերվում ձեր սիրելիներին:

-Ես պարզապես բացատրում էի, թե ինչ կարող ես օգտագործել:

Դադարեցրեք. Պարզապես կանգ առեք:

-Այսինքն, նույնիսկ եթե դա պարզապես օգտագործում է կաղապարային շարժիչը, ես դեռ կօգտագործեի Typescript + SystemJS + Babel կոմբինատը, եթե ես ձեր փոխարեն:

Ես պետք է տվյալներ ցուցադրեմ էջի վրա, այլ ոչ թե կատարեմ Sub Zero-ի սկզբնական MK fatality-ը: Ուղղակի ասա ինձ, թե ինչ կաղապարային շարժիչ օգտագործեմ, և ես այն այնտեղից կվերցնեմ:

-Շատ կա, որի՞ն եք ծանոթ:

Ուֆ, անունը չեմ հիշում: Դա շատ վաղուց էր։

-jԿաղապարներ? jQote? ՄԱՔՈՒ՞Ր

Սխալ, զանգ չի հնչեցնում: Մեկ ուրիշը?

-Թափանցիկությո՞ւն: JSRender? MarkupJS? KnockoutJS? Այդ մեկն ուներ երկկողմանի կապում:

Մեկ ուրիշը?

-PlatesJS? jQuery-tmpl? Ղեկա՞ն։ Որոշ մարդիկ դեռ օգտագործում են այն:

Միգուցե։ Կա՞ն նման վերջինին:

-Բեղե՞ր, ընդգծո՞ւմ: Կարծում եմ, հիմա նույնիսկ Lodash-ն ունի մեկը, անկեղծ ասած, բայց դրանք մի տեսակ 2014թ.

Սխալ.. գուցե ավելի նոր էր։

-Ջեյդ? DustJS?

Ոչ

-DotJS? EJS?

Ոչ

-Նանջուկե՞ր: ECT?

Ոչ

-Մահ, Coffeescript շարահյուսությունը, այնուամենայնիվ, ոչ մեկին դուր չի գալիս: Jade?

Ոչ, դու արդեն ասացիր Ջեյդը։

-Ես նկատի ունեի Պուգին: Ես նկատի ունեի Ջեյդին: Նկատի ունեմ, որ Ջեյդն այժմ Պուգ է:

Հառաչիր։ Ոչ: Չեմ հիշում: Ո՞ր մեկը կօգտագործեիք:

-Հավանաբար միայն ES6 կաղապարի տողերը:

Թույլ տվեք գուշակել։ Եվ դրա համար անհրաժեշտ է ES6:

-Ճիշտ է:

Որը, կախված նրանից, թե որ բրաուզերից եմ օգտագործում, կարիք ունի Babel-ի:

-Ճիշտ է:

Որը, եթե ես ուզում եմ ներառել առանց ամբողջ հիմնական գրադարանն ավելացնելու, ես պետք է բեռնեմ այն որպես մոդուլ npm-ից:

-Ճիշտ է:

Ինչը պահանջում է Browserify կամ Wepback, կամ, ամենայն հավանականությամբ, մեկ այլ բան, որը կոչվում է SystemJS:

-Ճիշտ է:

Որը, եթե դա Webpack չէ, իդեալականորեն պետք է կառավարվի առաջադրանքների կատարողի կողմից:

-Ճիշտ է:

Բայց քանի որ ես պետք է օգտագործեմ ֆունկցիոնալ ծրագրավորում և մուտքագրված լեզուներ, նախ պետք է նախապես կազմեմ Typescript կամ ավելացնեմ այս Flow բանը:

-Ճիշտ է:

Եվ հետո ուղարկիր այն Բաբելին, եթե ես ուզում եմ օգտագործել սպասել:

-Ճիշտ է:

Այսպիսով, ես կարող եմ օգտագործել Fetch-ը, խոստումները և վերահսկել հոսքը և այդ ողջ մոգությունը:

-Պարզապես մի մոռացեք պոլիլրացնել Fetch-ը, եթե այն չի աջակցվում, Safari-ն դեռ չի կարողանում կարգավորել այն:

Գիտեք ինչ. Կարծում եմ, որ մենք ավարտեցինք այստեղ: Իրականում, կարծում եմ, որ վերջացել եմ: Ես վերջացրել եմ վեբը, վերջացրել եմ JavaScript-ը:

-Դա լավ է, մի քանի տարի հետո մենք բոլորս կոդավորում ենք Elm-ում կամ WebAssembly-ում:

Ես պարզապես պատրաստվում եմ վերադառնալ հետին պլան: Ես պարզապես չեմ կարող կառավարել այս բազմաթիվ փոփոխությունները, տարբերակները, հրատարակությունները, կոմպիլյատորներն ու տրանսփայլերները: JavaScript համայնքը խելագար է, եթե կարծում է, որ որևէ մեկը կարող է հետևել դրան:

-Լսում եմ քեզ: Այնուհետև դուք պետք է փորձեք Python համայնքը:

Ինչո՞ւ։

- Երբևէ լսե՞լ եք Python 3-ի մասին:

Թարմացում. Շնորհակալություն տառասխալների և սխալների համար, ես կթարմացնեմ հոդվածը, ինչպես նշված է: Քննարկում HackerNews-ում և Reddit- ում :