Какво е чувството да се научи JavaScript во 2016 година

За време на пишувањето на овој напис не беа создадени рамки за JavaScript .

Следното е инспирирано од написот „Тоа е иднината“ од Circle CI. Оригиналот можете да го прочитате овде . Ова парче е само мислење, и како и секоја JavaScript рамка, не треба да се сфаќа премногу сериозно.

Еј, го добив овој нов веб-проект, но да бидам искрен, немам кодиран многу веб неколку години и слушнав дека пејзажот е малку променет. Вие сте најсовремениот веб-директор овде, нели?

-Вистинскиот термин е инженер на Front End, но да, јас сум вистинскиот човек. Правам веб во 2016 година. Визуелизации, музички плеери, летачки дронови што играат фудбал, нели. Само што се вратив од JsConf и ReactConf, така што ги знам најновите технологии за создавање веб-апликации.

Кул. Треба да создадам страница што ја прикажува најновата активност од корисниците, па треба само да ги добијам податоците од крајната точка REST и да ги прикажам во некаква табела што може да се филтрира и да ја ажурирам ако нешто се промени на серверот. Размислував дали користам jQuery за преземање и прикажување на податоците?

-О боже не, никој повеќе не користи jQuery. Треба да се обидете да научите React, 2016 година е.

О, во ред. Што е Реакција?

-Тоа е супер кул библиотека направена од некои момци на Facebook, таа навистина носи контрола и перформанси на вашата апликација, овозможувајќи ви да се справите со какви било промени во погледот многу лесно.

Тоа звучи уредно. Може ли да користам React за прикажување податоци од серверот?

-Да, но прво треба да додадете React и React DOM како библиотека на вашата веб-страница.

Чекај, зошто две библиотеки?

-Значи, едната е вистинската библиотека, а втората е за манипулирање со DOM, што сега можете да го опишете во JSX.

JSX? Што е JSX?

-JSX е само синтаксна екстензија на JavaScript што изгледа прилично како XML. Тоа е уште еден начин да се опише DOM, замислете го како подобар HTML.

Што не е во ред со HTML?

-Тоа е 2016. Никој веќе не го шифрира директно HTML.

Во право. Како и да е, ако ги додадам овие две библиотеки, тогаш можам да користам React?

-Не баш. Треба да го додадете Babel, а потоа можете да го користите React.

Друга библиотека? Што е Бабел?

-О, 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 ако сакате.

О, како Бауер!

-Да, но сега е 2016 година, никој повеќе не го користи Бауер.

О, гледам... па тогаш треба да ги преземам библиотеките од npm?

-Да. Така, на пример, ако сакате да користите React, ќе го преземете модулот React и ќе го внесете во вашиот код. Можете да го направите тоа за речиси секоја популарна библиотека JavaScript.

О, како Angular!

-Angular е толку 2015. Но да. Angular ќе биде таму, заедно со VueJS или RxJS и други кул библиотеки од 2016 година. Сакате да научите за нив?

Ајде да останеме со React, сега веќе учам премногу работи. Значи, ако треба да користам React, го земам од оваа npm и потоа ја користам оваа работа на Browserify?

-Да.

Се чини дека е премногу комплицирано само да се зграпчат еден куп зависности и да се врзат заедно.

-Тоа е причината зошто користите менаџер на задачи како Grunt или Gulp или Broccoli за автоматизирање на извршувањето на Browserify. По ѓаволите, можете дури и да користите Мимоза.

Грофта? Гулп? Брокула? Мимоза? По ѓаволите зборуваме сега?

-Управници со задачи. Но, тие веќе не се кул. Ги користевме како во 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 IS JavaScript, или подобро кажано, суперсет на JavaScript, поконкретно JavaScript на верзијата ES6. Знаете, таа шеста верзија за која зборувавме претходно?

Мислев дека ES2016+ е веќе суперсет на ES6! ЗОШТО ни треба сега ова нешто наречено Typescript?

-О, затоа што ни овозможува да користиме JavaScript како јазик за пишување и да ги намалиме грешките во времето на извршување. 2016 година е, треба да додавате некои типови на вашиот JavaScript код.

А Typescript очигледно го прави тоа.

-Ток исто така, иако проверува само за пишување додека Typescript е супермножество на JavaScript што треба да се компајлира.

Воздишка... а Флоу е?

-Тоа е проверка на статички тип направен од некои момци на Фејсбук. Тие го кодираа во OCaml, бидејќи функционалното програмирање е прекрасно.

OCaml? Функционално програмирање?

-Тоа го користат кул децата во денешно време, човече, знаеш, 2016 година? Функционално програмирање? Функции со висок ред? Кари? Чисти функции?

Немам поим што само кажа.

-Никој не го прави тоа на почетокот. Видете, само треба да знаете дека функционалното програмирање е подобро од OOP и тоа е она што треба да го користиме во 2016 година.

Чекај, научив ООП на факултет, мислев дека е добро?

-Така беше и Java пред да биде купена од Oracle. Мислам, OOP беше добар во минатото, и тој сè уште има своја употреба денес, но сега сите сфаќаат дека менувањето на состојбите е еквивалентно на клоцање на бебиња, па сега сите се движат кон непроменливи објекти и функционално програмирање. Момците од Хаскел го нарекуваа со години, - и немојте да почнам со момците од Elm - но за среќа на интернет сега имаме библиотеки како Ramda кои ни дозволуваат да користиме функционално програмирање во обичен JavaScript.

Дали само испуштате имиња заради тоа? Што е по ѓаволите Рамнда?

-Не. Рамда. Како Ламбда. Знаете, таа библиотека на Дејвид Чемберс?

Дејвид кој?

-Дејвид Чемберс. Кул дечко. Игра лоша игра „Пуч“. Еден од соработниците за Рамда. Исто така, треба да го проверите Ерик Мејер ако сериозно сакате да научите функционално програмирање.

А Ерик Мајер е...?

-Функционален програмерец исто така. Прекрасен човек. Тој има еден куп презентации каде што го фрла Agile додека ја користи оваа чудна кошула во боја. Треба да проверите и некои работи од Тј, Јаш Кенас, Синдре Сорхус, Пол Ирш, Ади Османи-

Во ред. Ќе те застанам таму. Сето тоа е добро и добро, но мислам дека сето тоа е толку комплицирано и непотребно за само преземање податоци и прикажување. Прилично сум сигурен дека нема потреба да ги познавам овие луѓе или да ги научам сите тие работи за да создадам табела со динамични податоци. Да се вратиме на React. Како можам да ги земам податоците од серверот со React?

-Па, вие всушност не ги преземате податоците со React, туку само ги прикажувате податоците со React.

О, проклет да бидам. Значи, што користите за да ги преземете податоците?

-Користете Fetch за преземање на податоците од серверот.

Жал ми е? Дали користите Fetch за преземање на податоците? Кој и да ги именува тие работи, му треба речник.

-Знам нели? Преземете го тоа е името на основната имплементација за извршување на XMLHttpRequests против сервер.

О, значи AJAX.

-AJAX е само употреба на XMLHttpRequests. Но сигурно. Fetch ви овозможува да правите AJAX врз основа на ветувања, кои потоа можете да ги решите за да го избегнете пеколот за повратен повик.

Повратен повик пекол?

-Да. Секој пат кога ќе извршите асинхроно барање против серверот, треба да го почекате неговиот одговор, што потоа ве натера да додадете функција во функција, која се нарекува пирамида за повратен повик од пеколот.

О, во ред. И ова ветување го решава?

- Навистина. Со манипулирање со вашите повратни повици преку ветувања, можете да напишете полесен разбирлив код, да ги исмевате и тестирате, како и да извршувате симултани барања одеднаш и да чекате додека не се вчитаат сите.

И тоа може да се направи со Fetch?

-Да, но само ако вашиот корисник користи зимзелен прелистувач, во спротивно треба да вклучите Fetch polyfill или да користите Request, Bluebird или Axios.

Колку библиотеки треба да знам заради бога? Колку се од нив?

-Тоа е JavaScript. Мора да има илјадници библиотеки кои сите го прават истото. Знаеме библиотеки, всушност, ги имаме најдобрите библиотеки. Нашите библиотеки се огромни, а понекогаш ги вклучуваме и сликите на Гај Фиери во нив.

Само што кажа Гај Фиери? Ајде да го завршиме ова. Што прават овие библиотеки Bluebird, Request, Axios?

-Тие се библиотеки за извршување на XMLHttpRequests кои враќаат ветувања.

Нели AJAX методот на jQuery почна да враќа и ветувања?

-Зборот „Ј“ веќе не го користиме во 2016 година. Само користете го Fetch и полијте го кога не е во прелистувач или наместо тоа користете Bluebird, Request или Axios. Потоа управувајте со ветувањето со чекање во асинхронизирана функција и бум, имате соодветна контрола на протокот.

Тоа е трет пат што го спомнуваш чекај, но не знам што е тоа.

-Await ви овозможува да блокирате асинхрон повик, што ви овозможува да имате подобра контрола кога податоците се преземаат и во целина да ја зголемите читливоста на кодот. Прекрасно е, само треба да се погрижите да ја додадете претходно поставената фаза 3 во Babel, или да користите функции за синтакса-асинтаксација и приклучок за трансформација-асинхронизирање-на-генератор.

Ова е лудост.

-Не, лудо е фактот што треба да го прекомпајлирате кодот Typescript и потоа да го транспилирате со Babel за да го користите чекаат.

Што? Не е вклучено во Typescript?

-Тоа го прави во следната верзија, но од верзијата 1.7 го таргетира само ES6, па ако сакате да го користите чекањето во прелистувачот, прво треба да го компајлирате вашиот Typescript код кој го таргетира ES6, а потоа Babel што се срања за целта ES5.

Во овој момент не знам што да кажам.

-Види, лесно е. Кодирајте сè во Typescript. Сите модули што користат Fetch ги компајлираат за да го таргетираат ES6, ги транспилираат со Babel на претходно поставената фаза-3 и ги вчитуваат со SystemJS. Ако немате Fetch, пополнете го, или користете Bluebird, Request или Axios и постапете со сите ваши ветувања со чекање.

Имаме многу различни дефиниции за лесно. Значи, со тој ритуал конечно ги зедов податоците и сега можам да ги прикажам со React нели?

-Дали вашата апликација ќе се справи со какви било промени во државата?

Ер, не мислам така. Само треба да ги прикажам податоците.

- О, фала богу. Инаку ќе морав да ти објаснам Flux, и имплементации како Flummox, Alt, Fluxible. Иако да бидам искрен, треба да користите Redux.

Само ќе ги прелетам тие имиња. Повторно, само треба да прикажам податоци.

-О, ако само ги прикажувате податоците што не ви требаа React за почеток. Ќе беше во ред со мотор за шаблони.

Дали се шегуваш со мене? Дали мислите дека ова е смешно? Дали така се однесувате со вашите најблиски?

-Само објаснував што можеш да користиш.

Стоп. Само застанете.

-Мислам, дури и ако се користи само мотор за шаблони, јас сепак би користел комбинација на Typescript + SystemJS + Babel да сум на твое место.

Треба да прикажувам податоци на страница, а не да го изведувам оригиналниот MK fatality на Sub Zero. Само кажи ми каков мотор за шаблони да користам и ќе го земам од таму.

-Има многу, кој ви е познат?

Уф, не се сеќавам на името. Тоа беше многу одамна.

-jШаблони? jQote? ЧИСТА?

Ер, не ѕвони. Уште еден?

-Транспарентност? JSRender? MarkupJS? НокаутЈС? Тој имаше двонасочно врзување.

Уште еден?

-Плочи JS? jQuery-tmpl? Рачки? Некои луѓе сè уште го користат.

Можеби. Има ли слични на последното?

- Мустаќи, подвлекување? Мислам дека сега дури и Лодаш има еден да бидам искрен, но тоа се некако 2014 година.

Ер.. можеби беше понов.

- Жад? DustJS?

бр.

-DotJS? EJS?

бр.

-Нунџаки? ЕКТ?

бр.

-Мах, и онака никој не ја сака синтаксата на Coffeescript. Жад?

Не, веќе кажа Џејд.

- Мислев на Мопс. Мислев на Џејд. Мислам, Џејд сега е Мопс.

Воздивнете. Не. Не се сеќавам. Која би ја користеле?

-Веројатно само ES6 оригинални жици на шаблоните.

Дозволете ми да погодам. И за тоа е потребен ES6.

- Точно.

Што, во зависност од тоа кој прелистувач го користам, му треба на Babel.

- Точно.

Која, ако сакам да ја вклучам без да ја додадам целата основна библиотека, треба да ја вчитам како модул од npm.

- Точно.

Што бара Browserify, или Wepback, или најверојатно она другото нешто наречено SystemJS.

- Точно.

Што, освен ако не е Webpack, идеално би требало да биде управувано од носител на задачи.

- Точно.

Но, бидејќи треба да користам функционално програмирање и јазици за пишување, прво треба да го прекомпајлирам Typescript или да го додадам овој Flow thingy.

- Точно.

И потоа испратете го тоа до Бабел ако сакам да го користам чекај.

- Точно.

Така, можам да користам Fetch, ветувања и да го контролирам протокот и целата таа магија.

-Само не заборавајте да го полите Fetch ако не е поддржан, Safari сè уште не може да се справи со тоа.

Знаеш што. Мислам дека тука завршивме. Всушност, мислам дека завршив. Завршив со веб, завршив со JavaScript целосно.

-Добро е, за неколку години сите ќе кодираме во Elm или WebAssembly.

Само ќе се вратам на задниот дел. Едноставно не можам да се справам со овие многу промени и верзии и изданија и компајлери и транспилатори. Заедницата JavaScript е луда ако мисли дека некој може да остане во чекор со ова.

- Те слушам. Тогаш треба да ја пробате заедницата на Python.

Зошто?

- Дали сте слушнале за Python 3?

Ажурирање: Ви благодариме што посочивте печатни грешки и грешки, ќе ја ажурирам статијата како што е наведено. Дискусија во HackerNews и Reddit .