Што адчуваеш - вывучаць JavaScript у 2016 годзе

Падчас напісання гэтага артыкула не было створана фрэймворкаў JavaScript .

Наступнае натхнёна артыкулам «Гэта будучыня» ад Circle CI. Арыгінал можна прачытаць тут . Гэта проста меркаванне, і, як і любы фрэймворк JavaScript, не варта ўспрымаць яго занадта сур'ёзна.

Гэй, у мяне ёсць гэты новы вэб-праект, але, шчыра кажучы, я мала пісаў вэб-кадзір на працягу некалькіх гадоў, і я чуў, што ландшафт крыху змяніўся. Вы самы сучасны вэб-распрацоўшчык тут?

- Фактычны тэрмін - інжынер інтэрфейсу, але так, я правільны хлопец. Я раблю Інтэрнэт у 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-core, і гэта не было б эфектыўным для вытворчасці. Падчас вытворчасці вам трэба выканаць шэраг папярэдніх заданняў, каб падрыхтаваць ваш праект, каб рытуал выкліку сатаны выглядаў як рэцэпт вараных яек. Вам трэба мінімізаваць актывы, упрыгожваць іх, убудоўваць CSS у верхнюю частку згіну, адкладаць скрыпты, а таксама-

Я зразумеў, зразумеў. Такім чынам, калі б вы не ўключалі бібліятэкі непасрэдна ў CDN, як бы вы гэта зрабілі?

-Я б транспіляваў гэта з Typescript з дапамогай камбінацыі Webpack + SystemJS + Babel.

Машынапіс? Я думаў, што мы кадуем на JavaScript!

-Typescript - гэта JavaScript, або, лепш кажучы, надмноства JavaScript, дакладней JavaScript у версіі ES6. Ведаеце, шостая версія, пра якую мы казалі раней?

Я думаў, што ES2016+ ужо быў надмноствам ES6! НАВОШТА нам цяпер патрэбна гэтая рэч пад назвай Typescript?

-О, таму што гэта дазваляе нам выкарыстоўваць JavaScript як тыпізаваную мову і паменшыць колькасць памылак падчас выканання. Зараз 2016 год, вы павінны дадаць некаторыя тыпы ў свой код JavaScript.

І Typescript, відавочна, робіць гэта.

-Flow таксама, хоць ён правярае толькі ўвод, у той час як Typescript з'яўляецца надмноствам JavaScript, які трэба скампіляваць.

Уздых… а Флоў?

-Гэта статычная праверка тыпу, зробленая некаторымі хлопцамі з 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 або выкарыстоўваць Request, Bluebird або Axios.

Колькі бібліятэк мне трэба ведаць, дзеля бога? Колькі іх?

-Гэта JavaScript. Павінны быць тысячы бібліятэк, якія робяць адно і тое ж. Мы ведаем бібліятэкі, насамрэч, у нас лепшыя бібліятэкі. Нашы бібліятэкі велізарныя, і часам мы змяшчаем у іх выявы Гая Фіеры.

Вы толькі што сказалі Гай Фіеры? Давайце скончым з гэтым. Што робяць гэтыя бібліятэкі Bluebird, Request, Axios?

-Яны з'яўляюцца бібліятэкамі для выканання XMLHttpRequests, якія вяртаюць абяцанні.

Ці не пачаў метад AJAX jQuery таксама вяртаць абяцанні?

-У 2016 годзе мы больш не выкарыстоўваем слова "J". Проста выкарыстоўвайце Fetch і выконвайце полізапаўненне, калі яно не знаходзіцца ў браўзеры, або замест гэтага выкарыстоўвайце Bluebird, Request або Axios. Затым кіруйце абяцаннем з дапамогай await у асінхроннай функцыі і бум, у вас ёсць належны паток кіравання.

Вы трэці раз згадваеце чакаць, але я паняцця не маю, што гэта такое.

-Await дазваляе блакаваць асінхронны выклік, дазваляючы лепш кантраляваць, калі даныя выбіраюцца, і ў цэлым павялічваючы чытальнасць кода. Гэта цудоўна, вам проста трэба пераканацца, што вы дадалі ў Babel перадустаноўку stage-3 або выкарысталі syntax-async-functions і ўбудову transform-async-to-generator.

Гэта вар'яцтва.

-Не, вар'яцтвам з'яўляецца той факт, што вам трэба папярэдне скампіляваць код Typescript, а потым транспіляваць яго з дапамогай Babel, каб выкарыстоўваць await.

Што? Гэта не ўключана ў Typescript?

-Гэта адбываецца ў наступнай версіі, але пачынаючы з версіі 1.7, яна нацэлена толькі на ES6, таму, калі вы хочаце выкарыстоўваць await у браўзеры, спачатку вам трэба скампіляваць свой код Typescript, нацэлены на ES6, а потым Babel, гэтае дзярмо, каб нацэліць на ES5.

У гэты момант я не ведаю, што сказаць.

- Глядзі, гэта лёгка. Кадзіруйце ўсё ў Typescript. Усе модулі, якія выкарыстоўваюць Fetch, кампілююць іх для мэтавай ES6, транспілююць іх з дапамогай Babel на перадусталёўцы stage-3 і загружаюць іх з дапамогай SystemJS. Калі ў вас няма Fetch, запоўніце яго поліфілам або выкарыстоўвайце Bluebird, Request або Axios і апрацуйце ўсе свае абяцанні з дапамогай await.

У нас вельмі розныя вызначэнні лёгкага. Такім чынам, з дапамогай гэтага рытуалу я нарэшце атрымаў дадзеныя, і цяпер я магу адлюстраваць іх з дапамогай React, ці не так?

-Ці будзе ваша праграма апрацоўваць змены стану?

Э-э, я так не думаю. Мне проста трэба паказаць дадзеныя.

— Ой, дзякуй богу. Інакш мне прыйшлося б тлумачыць вам Flux і такія рэалізацыі, як Flummox, Alt, Fluxible. Хоць, шчыра кажучы, вы павінны выкарыстоўваць Redux.

Я збіраюся проста праляцець над гэтымі імёнамі. Зноў жа, мне проста трэба адлюстраваць дадзеныя.

-О, калі вы проста паказваеце даныя, вам не патрэбны React з самага пачатку. Вы былі б у парадку з рухавіком шаблонаў.

Вы жартуеце? Вы думаеце, што гэта смешна? Вы так ставіцеся да сваіх блізкіх?

-Я проста тлумачыў, што вы можаце выкарыстоўваць.

Стоп. Проста спыніцеся.

-Я маю на ўвазе, што нават калі гэта проста выкарыстоўваецца механізм шаблонаў, я б усё роўна выкарыстаў камбінацыю Typescript + SystemJS + Babel на вашым месцы.

Мне трэба паказаць даныя на старонцы, а не выканаць арыгінальны MK Fatality Sub Zero. Проста скажыце мне, які механізм шаблонаў выкарыстоўваць, і я вазьму яго далей.

— Іх шмат, з якімі вы знаёмыя?

Цьфу, не памятаю імя. Гэта было вельмі даўно.

-jШаблоны? jQote? ЧЫСТЫ?

Э-э, не звоніць. Яшчэ адзін?

-Празрыстасць? JSRender? MarkupJS? KnockoutJS? Той меў двухбаковую прывязку.

Яшчэ адзін?

-PlateJS? jQuery-tmpl? Руль? Некаторыя людзі ўсё яшчэ выкарыстоўваюць яго.

магчыма. Ці ёсць падобныя да апошняга?

-Вусы, падкрэсліванне? Я думаю, што цяпер нават у lodash ёсць, калі шчыра, але гэта нейкі 2014 год.

Э-э... магчыма, ён быў навейшы.

-Джэйд? DustJS?

няма

-DotJS? EJS?

няма

-Нунджукі? ЭСТ?

няма

-Ма, нікому не падабаецца сінтаксіс 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 .