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

По време на писането на тази статия не са създадени JavaScript рамки.

Следното е вдъхновено от статията „Това е бъдещето“ от Circle CI. Можете да прочетете оригинала тук . Тази част е само мнение и като всяка JavaScript рамка, не трябва да се приема твърде сериозно.

Хей, получих този нов уеб проект, но честно казано не съм кодирал много уеб от няколко години и чух, че пейзажът малко се е променил. Вие сте най-актуалният уеб разработчик тук, нали?

- Действителният термин е Front End инженер, но да, аз съм правилният човек. Правя уеб през 2016 г. Визуализации, музикални плейъри, летящи дронове, които играят футбол, каквото и да е. Току-що се върнах от JsConf и ReactConf, така че познавам най-новите технологии за създаване на уеб приложения.

Готино. Трябва да създам страница, която показва най-новата активност от потребителите, така че просто трябва да получа данните от REST крайната точка и да ги покажа в някаква филтрируема таблица и да я актуализирам, ако нещо се промени в сървъра. Мислех си, че може би ще използвам jQuery за извличане и показване на данните?

-О, боже мой, не, никой вече не използва jQuery. Трябва да опитате да научите React, 2016 г. е.

О, добре. Какво е React?

-Това е супер страхотна библиотека, направена от някои хора във 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, но за да използвате страхотни функции като async и await, трябва да използвате 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 г., никой вече не използва Bower.

О, разбирам... значи трябва да изтегля библиотеките от npm тогава?

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

О, като Angular!

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

Нека се придържаме към React, вече научавам твърде много неща. Така че, ако трябва да използвам React, го извличам от този npm и след това използвам това нещо Browserify?

-да

Изглежда прекалено сложно просто да вземете куп зависимости и да ги свържете заедно.

-Така е, затова използвате мениджър на задачи като Grunt или Gulp или Broccoli, за да автоматизирате стартирането на Browserify. По дяволите, можете дори да използвате Mimosa.

грухтене? глътка? Броколи? Мимоза? За какво говорим сега?

- Мениджъри на задачи. Но те вече не са готини. Използвахме ги през 2015 г., след това използвахме Makefiles, но сега обгръщаме всичко с Webpack.

Makefiles? Мислех, че това се използва най-вече в C или C++ проекти.

-Да, но очевидно в мрежата обичаме да усложняваме нещата и след това да се връщаме към основите. Правим това всяка година или така, просто изчакайте, ще направим сглобяване в мрежата след година или две.

Въздишка. Споменахте нещо, наречено Webpack?

-Това е друг мениджър на модули за браузъра, като същевременно е и вид изпълнение на задачи. Това е като по-добра версия на Browserify.

О, добре. Защо е по-добре?

-Е, може би не по-добре, просто е по-убедително как трябва да бъдат обвързани зависимостите ви. Webpack ви позволява да използвате различни мениджъри на модули, а не само тези на CommonJS, така че например собствени модули, поддържани от ES6.

Изключително съм объркан от цялото това нещо с CommonJS/ES6.

-Всички са, но вече не трябва да ви пука за SystemJS.

Исус Христос, друго съществително - js. Добре, и какво е това SystemJS?

-Е, за разлика от Browserify и Webpack 1.x, SystemJS е динамично зареждане на модули, което ви позволява да свържете множество модули в множество файлове, вместо да ги групирате в един голям файл.

Чакай, но си помислих, че искаме да изградим нашите библиотеки в един голям файл и да го заредим!

-Да, но тъй като HTTP/2 идва сега, множеството HTTP заявки всъщност са по-добри.

Чакай, така че не можем ли просто да добавим трите оригинални библиотеки за React??

- Всъщност не. Искам да кажа, че можете да ги добавите като външни скриптове от CDN, но все пак ще трябва да включите Babel тогава.

Въздишка. И това е лошо, нали?

-Да, ще включите цялото babel-ядро и то няма да е ефективно за производство. При производството трябва да изпълните поредица от предварителни задачи, за да подготвите проекта си, които правят ритуала за призоваване на Сатана да изглежда като рецепта за варени яйца. Трябва да минимизирате активите, да ги украсите, да вградите css над прегъвката, да отложите скриптове, както и-

Разбрах, разбрах. Така че, ако не включите библиотеките директно в CDN, как бихте го направили?

-Бих го транспилирал от Typescript с помощта на комбинация Webpack + SystemJS + Babel.

Машинопис? Мислех, че кодираме в JavaScript!

-Typescript Е JavaScript, или по-добре казано, надмножество на JavaScript, по-точно JavaScript във версия ES6. Знаете ли онази шеста версия, за която говорихме преди?

Мислех, че ES2016+ вече е надстройка на ES6! ЗАЩО имаме нужда сега от това нещо, наречено Typescript?

-О, защото ни позволява да използваме JavaScript като въведен език и да намалим грешките по време на изпълнение. 2016 г. е, трябва да добавите някои типове към вашия JavaScript код.

И Typescript очевидно прави това.

-Flow също, въпреки че проверява само за въвеждане, докато Typescript е надмножество на JavaScript, което трябва да се компилира.

Въздишка… и Flow е?

- Това е програма за проверка на статичен тип, направена от някои хора във Facebook. Те го кодираха в OCaml, защото функционалното програмиране е страхотно.

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

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

Нямам представа какво каза току-що.

- Никой не го прави в началото. Вижте, просто трябва да знаете, че функционалното програмиране е по-добро от ООП и това е, което трябва да използваме през 2016 г.

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

- Такава беше и Java, преди да бъде купена от Oracle. Искам да кажа, че ООП беше добър навремето и все още има своите приложения днес, но сега всички осъзнават, че модифицирането на състояния е еквивалентно на ритане на бебета, така че сега всички преминават към неизменни обекти и функционално програмиране. Момчетата от Haskell го наричаха от години - и не ме карайте да започвам с момчетата от Elm - но за щастие в мрежата сега имаме библиотеки като Ramda, които ни позволяват да използваме функционално програмиране в обикновен JavaScript.

Просто изпускате имена заради това? Какво, по дяволите, е Рамнда?

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

Дейвид кой?

- Дейвид Чембърс. Готин човек. Играе лоша игра на Coup. Един от сътрудниците на Ramda. Трябва също така да проверите Erik Meijer, ако сериозно искате да научите функционално програмиране.

А Ерик Мейер е...?

- Функционално програмиране също. Страхотен човек. Той има куп презентации, в които разбива Agile, докато използва тази странна цветна риза. Трябва също да проверите някои от нещата от Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

добре Ще те спра там. Всичко това е добре и добре, но мисля, че всичко това е толкова сложно и ненужно за просто извличане на данни и тяхното показване. Почти съм сигурен, че не е нужно да познавам тези хора или да науча всички тези неща, за да създам таблица с динамични данни. Да се върнем към React. Как мога да извлека данните от сървъра с React?

-Е, вие всъщност не извличате данните с React, вие просто показвате данните с React.

О, проклет да съм. И така, какво използвате, за да извлечете данните?

-Използвате Fetch, за да извлечете данните от сървъра.

съжалявам Използвате Fetch за извличане на данните? Който назовава тези неща, има нужда от тезаурус.

- Знам ли? Fetch това е името на родната реализация за изпълнение на XMLHttpRequests срещу сървър.

О, значи AJAX.

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

Обратно обаждане по дяволите?

- да Всеки път, когато изпълнявате асинхронна заявка към сървъра, трябва да изчакате неговия отговор, който след това ви кара да добавите функция във функция, която се нарича пирамида за обратно извикване от ада.

О, добре. И това обещание го решава?

-Наистина. Като манипулирате своите обратни извиквания чрез обещания, можете да пишете по-лесен за разбиране код, да ги имитирате и тествате, както и да изпълнявате едновременни заявки наведнъж и да изчакате, докато всички те бъдат заредени.

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

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

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

- Това е JavaScript. Трябва да има хиляди библиотеки, които правят едно и също нещо. Ние познаваме библиотеките, всъщност имаме най-добрите библиотеки. Нашите библиотеки са огромни и понякога включваме снимки на Гай Фиери в тях.

Току-що ли каза Гай Фиери? Нека приключим с това. Какво правят тези библиотеки Bluebird, Request, Axios?

-Те са библиотеки за изпълнение на XMLHttpRequests, които връщат обещания.

Методът AJAX на jQuery не започна ли да връща също обещания?

-Ние вече не използваме думата „J“ през 2016 г. Просто използвайте Fetch и го попълнете, когато не е в браузър, или вместо това използвайте Bluebird, Request или Axios. След това управлявайте обещанието с await в рамките на асинхронна функция и бум, имате подходящ контролен поток.

За трети път споменавате чакане, но нямам представа какво е.

-Await ви позволява да блокирате асинхронно повикване, което ви позволява да имате по-добър контрол върху това кога данните се извличат и като цяло повишава четливостта на кода. Страхотно е, просто трябва да се уверите, че сте добавили предварително зададения етап 3 в Babel или да използвате syntax-async-functions и transform-async-to-generator плъгин.

Това е лудост.

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

какво? Не е включено в Typescript?

-Това го прави в следващата версия, но от версия 1.7 е насочен само към ES6, така че ако искате да използвате await в браузъра, първо трябва да компилирате кода на Typescript, насочен към ES6 и след това към Babel, който е лайно, за да се насочи към ES5.

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

- Виж, лесно е. Кодирайте всичко в Typescript. Всички модули, които използват Fetch, ги компилират, за да се насочат към ES6, транспилират ги с Babel на предварително зададен етап 3 и ги зареждат със SystemJS. Ако нямате Fetch, попълнете го или използвайте Bluebird, Request или Axios и управлявайте всичките си обещания с await.

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

- Вашето приложение ще се справи ли с някакви промени в състоянието?

Err, не мисля така. Просто трябва да покажа данните.

- О, слава богу. В противен случай би трябвало да ви обясня Flux и реализации като Flummox, Alt, Fluxible. Въпреки че, честно казано, трябва да използвате Redux.

Просто ще прелетя над тези имена. Отново, просто трябва да покажа данни.

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

шегуваш ли се Смятате ли, че това е смешно? Така ли се отнасяте към близките си?

- Просто обяснявах какво можете да използвате.

Спрете. Просто спри.

-Искам да кажа, че дори и да използва само машина за шаблони, пак бих използвал комбинация Typescript + SystemJS + Babel, ако бях на твое място.

Трябва да покажа данни на страница, а не да изпълнявам оригиналния MK fatality на Sub Zero. Просто ми кажете каква машина за шаблони да използвам и аз ще го взема от там.

-Има много, с кой познавате?

Уф, не мога да си спомня името. Беше много отдавна.

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

Err, не звъни звънец. Друг?

-Прозрачност? JSRender? MarkupJS? KnockoutJS? Този имаше двупосочно свързване.

Друг?

-PlateJS? jQuery-tmpl? Кормило? Някои хора все още го използват.

може би Има ли подобни на последния?

-Мустаци, долна черта? Мисля, че сега дори lodash има такъв, за да бъда честен, но това са нещо като 2014 г.

Err.. може би беше по-ново.

- Джейд? DustJS?

не

-DotJS? EJS?

не

-Нунджуци? ECT?

не

-Ма, така или иначе никой не харесва синтаксиса на Coffeescript. Джейд?

Не, ти вече каза Джейд.

- Имах предвид Пъг. Имах предвид Джейд. Искам да кажа, Джейд сега е Пъг.

Въздишка. Не, не мога да си спомня. Кое бихте използвали?

-Вероятно само ES6 нативни шаблонни низове.

Нека позная. И това изисква ES6.

-Правилно.

Което, в зависимост от браузъра, който използвам, се нуждае от Babel.

-Правилно.

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

-Правилно.

Което изисква Browserify, или Wepback, или най-вероятно другото нещо, наречено SystemJS.

-Правилно.

Което, освен ако не е Webpack, в идеалния случай трябва да се управлява от програма за изпълнение на задачи.

-Правилно.

Но тъй като трябва да използвам функционално програмиране и въведени езици, първо трябва да компилирам предварително Typescript или да добавя това Flow нещо.

-Правилно.

И след това изпратете това на Babel, ако искам да използвам await.

-Правилно.

Така че след това мога да използвам Fetch, обещания и контрол на потока и цялата тази магия.

-Само не забравяйте да попълните Fetch, ако не се поддържа, Safari все още не може да се справи.

Знаеш какво. Мисля, че свършихме тук. Всъщност мисля, че приключих. Приключих с мрежата, приключих напълно с JavaScript.

- Това е добре, след няколко години всички ще кодираме в Elm или WebAssembly.

Просто ще се върна към бекенда. Просто не мога да се справя с тези много промени и версии и издания и компилатори и транспилатори. Общността на JavaScript е луда, ако мисли, че някой може да се справи с това.

-Чувам те. Тогава трябва да опитате общността на Python.

защо

-Чували ли сте някога за Python 3?

Актуализация: Благодаря за посочването на печатни грешки и грешки, ще актуализирам статията, както е отбелязано. Дискусия в HackerNews и Reddit .