Каково оно учить JavaScript в 2016
сурс https://m.habr.com/post/312022/
- Эй, я получил новый веб-проект, но, если честно, я не занимался веб-кодингом в течение нескольких лет, и я слышал, все немного поменялось. Ты же самый современный веб-разработчик, правда?
- Это теперь называется 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?
- О, 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, определяющих API AMD или CommonJS, и использовать что-то вроде Browserify, чтобы связывать их.
- Хорошо, имеет смысл… наверное. А что такое Browserify?
- Это инструмент, который позволяет связать CommonJS описанния зависимостей для файлов, которые могут быть запущены в браузере. Он был создан, потому что большинство людей публикуют эти зависимости в NPM.
- NPM?
- Это очень большое общественное хранилище, где умные люди постят код и зависимости в виде модулей.
- Как CDN?
- На самом деле, нет. Это больше похоже на централизованную базу данных, где каждый желающий может опубликовать и скачать библиотеки, так что ты можешь использовать их локально для разработки, а затем загрузить их на CDN, если захочешь.
- О, как Bower!
- Да, но это 2016, сейчас никто больше не использует Bower.
- Хм, ясно… так мне нужно загрузить библиотеки из NPM?
- Да. Например, если ты хочешь использовать React, то загружаешь модуль React и импортируешь его в коде. Это можно сделать для почти каждой популярной библиотеки JavaScript.
- О, это как в Angular!
- Angular это слишком 2015. Но да. Angular тоже там есть, наряду с VueJS, RxJS и другими интересными библиотеками из 2016. Хочешь узнать о них?
- Давай придерживаться React, я уже узнал слишком много о нем. Так что, если мне нужно использовать React, я вытяну его из этого NPM, а затем использую Browserify?
- Да.
- Это кажется слишком сложным, чтобы просто взять кучу зависимостей и связать их вместе.
- Ага, именно поэтому ты используешь менеджер задач, типа как Grunt или Gulp, или Broccoli для автоматизации запуска Browserify. Ты даже можешь использовать Mimosa.
- Grunt? Gulp? Broccoli? Mimosa? Черт возьми, о чём мы говорим сейчас?
- Task менеджеры. Но они уже не такие крутые. Мы использовали их в стиле 2015 с Makefiles, но теперь мы перешли на Webpack.
- Makefiles? Я думал, что в основном это используется для C или C++ проектов.
- Ага, но, видимо, в вебе мы любим делать вещи сложными, а затем вернуться к основам. Мы делаем это типа каждый год. Ты подожди, через год или два мы еще запилим сборки (assemblies) в вебе.
- Пффф. Ты упомянул что-то под названием Webpack?
- Это другой менеджер модулей для браузера, в то же время он и своего рода Task менеджер. Это как улучшенная версия Browserify.
- ОК. А почему он лучше?
- Ну, может быть не лучше, но более гибкий в плане того, как зависимости связаны. Webpack позволяет использовать различные менеджеры модулей, а не только CommonJS. Например, родные модули ES6.
- Я очень запутался в этих CommonJS/ES6.
- Да все в этом запутались, но можешь больше не париться, потому что есть SystemJS.
- О, Боже, опять что-то-JS. Хорошо, а что это за SystemJS?
- Ну, в отличие от Browserify и WebPack 1.x, SystemJS представляет собой динамический модуль загрузчика, который позволяет связать несколько модулей в нескольких файлах, а не связывая их в один большой файл.
- Подожди, я думал, что мы хотели объединить наши библиотеки в один большой файл и загрузить его!
- Да, но из-за HTTP/2 несколько HTTP запросов на самом деле лучше.
- Стоять! Так чего же мы не можем просто добавить три оригинальные библиотеки для React?
- Ты, конечно, можешь добавить их в качестве внешних скриптов с CDN, но все равно нужно будет добавить Babel.
- Эх. И это плохо, не так ли?
- Да, придется включить полностью Babel-core, а это не будет эффективным для production. На production необходимо выполнить ряд предварительных задач, чтобы проект был полностью готов, а это ритуал, в сравнении с которым вызвать дьявола - это рецепт как сварить яйцо. Надо будет минимизировать файлы, сделать uglify, поиграться со стилями, подумать о загрузке скриптов…
- Понял, понял. Но если не скачивать библиотеки непосредственно с CDN, то как иначе?
- Я бы сделал транспайл из TypeScript с помощью комбо Webpack + SystemJS + Babel.
- TypeScript? Я думал, что мы пишем код на JavaScript!
- Typescript - это и есть JavaScript, или, лучше сказать, надмножество JavaScript. Более конкретно - JavaScript на версии ES6. Ну, та шестая версия, о которой мы говорили.
- Я думал, что ES2016+ - уже надмножество ES6! Почему нам сейчас нужен еще и TypeScript?
- Потому что это позволяет нам использовать JavaScript как типизированный язык и уменьшить количество ошибок во время выполнения. Это 2016, надо добавить некоторые типы в код на JavaScript.
- И TypeScript, очевидно, делает это.
- И Flow, хотя он проверяет только типы, в то время как TypeScript является надстройкой JavaScript, который нужно скомпилировать.
- Эээ… и Flow?
- Это - инструмент для проверки статической типизации, сделанный парнями из Facebook. Они написали его на OCaml, так как функциональное программирование является удивительно крутым.
- OCaml? Функциональное программирование?
- Ну это то, что сегодня юзают крутые пацаны, ну типа, знаешь, 2016. Функциональное программирование. Функции высокого порядка. Currying. Pure функции.
- Я понятия не имею, что это.
- Никто не понимает, в начале. Надо просто знать, что функциональное программирование лучше, чем объектно-ориентированное программирование, и это то, что мы должны использовать в 2016 году.
- Подожди, я учил ООП в универе, я думал, что это круто?
- Ну так было пока Oracle не купил Java. Я имею в виду, что ООП был хорош раньше, и его используют до сих пор, но теперь каждый понимает, что манипулировать состояниями эквивалентно пинанию младенцев, так что теперь все движется к immutable объектам и функциональному программированию. Ребята из Haskell уже 100 лет кричат об этом, и это я еще не упоминал Elm. Но, к счастью, в сети теперь у нас есть такие библиотеки, как Ramda, которые позволяют нам использовать функциональное программирование на простом JavaScript.
- Ты что, просто придумываешь имена? Что еще за Ramnda?
- Нет. Ramda. Как и Lambda. Ну, знаешь, библиотека Дэвида Чембера?
- Дэвида кого?
- Дэвида Чембера. Крутой чел. Один из авторов Ramda. Глянь еще работы Эрика Мейера, если серьезно относишься к изучению функционального программирования.
- А Эрик Мейер это?…
- Тоже функциональщик. Крутой чел. У него есть куча презентаций, где он в странной цветной футболке громит Agile. Еще глянь что делают Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani…
- ОК. Притормози. Все это хорошо и прекрасно, но я думаю, что все это слишком сложно и ненужно для простой выборки данных и их отображения. Я уверен, что я не должен знать этих людей или все эти вещи, чтобы создать таблицу с динамическими данными. Давай вернемся к React. Как я могу извлечь данные с сервера в React?
- Ну, на самом деле для выборки данных не надо React, он отображает данные.
- О, черт. Так а что используется для выборки данных?
- Используй Fetch для получения данных с сервера.
- Использовать Fetch для выборки данных? Тот, кто называет эти вещи, нуждается в тезаурусе.
- О, да. Fetch это имя нативной реализации для выполнения XMLHttpRequests.
- О, AJAX.
- AJAX это просто запросы XMLHttpRequest. А Fetch позволяет делать AJAX на основе промисов, которые затем можно резолвить, чтобы избежать callback hell.
- Callback hell?
- Да. Каждый раз, когда выполняется асинхронный запрос, ты должен ждать его ответа, который заставляет добавить функцию внутри функции, которая называется пирамида callback hell.
- О, хорошо. А промисы решают эту проблему?
- Еще бы! Манипулируя коллбеками через промисы, ты можешь писать более понятный код, тестировать его, а также выполнять несколько одновременных запросов одновременно и ждать, пока все они отработают.
- И это можно сделать с помощью Fetch?
- Да, но только в некоторых браузерах, в противном случае необходимо включить Fetch polyfill или использовать Request, Bluebird или Axios.
- Сколько библиотек мне нужно знать, ради бога? Сколько из них?
- Это JavaScript. Тут тысячи библиотек, которые делают одно и то же. Мы знаем эти библиотеки. Наши библиотеки огрооооомные, а иногда мы добавляем картинки с Guy Fieri в них.
- Guy Fieri? Давай покончим с этим. Что эти Bluebird, Request и Axios делают?
- Это библиотеки для выполнения XMLHttpRequests, которые возвращают промисы.
- А методы AJAX JQuery не возвращают промисы?
- Мы больше не используем «J» в 2016. Просто используйте Fetch polyfill или Bluebird, Request или Axios. Затем управляй промисами с async, await и Бац!, у тебя правильный поток управления.
- Это третий раз, когда ты говоришь о await, но я понятия не имею, что это такое.
- Await позволяет блокировать асинхронный вызов, что позволяет лучше все контролировать во время получения данных и увеличивает читаемость кода. Это потрясающе, просто нужно, чтобы убедиться, что ты добавил stage-3 в Babel, или использовать синтаксис асинхронных функций и плагин transform-async-to-generator.
- Это безумие.
- Нет, безумие - что нужно перекомпилировать код TypeScript, а затем транспайлить его с Babel, чтобы использовать await.
- Шта!? Это не входит в TypeScript?
- Входит в следующей версии, но в версии 1.7 он только ES6, так что если хочешь использовать await в браузере, сначала нужно скомпилировать код TypeScript в ES6, а затем транспайлить с Babel в ES5.
- Я не знаю, что сказать.
- Слушай, это легко. Пиши весь код в TypeScript. Все модули, использующие Fetch компилируй в ES6, транспайль их с Babel с stage-3, и загружай с SystemJS. Если у тебя нет Fetch, используй polyfill, или Bluebird, Request или Axios, и обрабатывай промисы с await.
- У нас очень разные определения «легко». Так, с этим ритуалом я, наконец, получил данные и теперь я могу показать их с помощью React правильно?
- А приложение будет обрабатывать любые изменения состояния?
- Грр, я не думаю. Мне просто нужно отобразить данные.
- О, слава богу. В противном случае мне пришлось бы объяснить Flux и реализации, такие как Flummox, Alt, Fluxible. Хотя, если быть честным ты должен использовать Redux.
- Как же достали эти имена. Опять же, мне просто нужно отобразить данные.
- А, если просто отобразить данные, не надо начинать с React. Можно взять движок шаблонов.
- Ты шутишь, что ли? Думаешь, это смешно?
- Да я просто объяснил, что ты мог бы использовать.
- Стоп. Просто остановись.
- Я имею в виду, даже если просто использовать шаблонизатор, я бы все равно использовал комбо TypeScript + SystemJS + Babel на твоем месте.
- Мне нужно отобразить данные на странице, а не выполнить оригинальный фаталити Sub Zero из Мортал Комбат. Просто скажи мне, какой движок шаблонов использовать.
- Их много, с каким ты знаком?
- Уф, не могу вспомнить название. Это было давно.
- jTemplates? jQote? PURE?
- Не то. Еще один?
- Transparency? JSRender? MarkupJS? KnockoutJS?
- Другой
- PlatesJS? JQuery-tmpl? Handlebars? Некоторые люди до сих пор используют его.
- Может быть. А есть что-то похожее на последний?
- Mustache, underscore? Я думаю, что теперь даже у lodash есть шаблонизатор, но это своего рода 2014.
- Грр… возможно он был поновее.
- Jade? DustJS?
- Нет.
- DotJS? EJS?
- Нет.
- Nunjucks? ЕСТ?
- Нет.
- Чувак, никто не любит синтаксис CoffeeScript в любом случае. Jade?
- Нет, ты уже сказал Jade.
- Ну я имел в виду Pug. Я имел в виду Jade. Я имею в виду, Jade теперь Pug.
- Пф. Нет. Не помню. Какой из них ты бы использовал?
- Наверное, нативный ES6 template strings.
- Дай угадаю. Это требует ES6.
- Да.
- Который, в зависимости от того, какой браузер я использую требует Babel.
- Да.
- Который, если я хочу включить без добавления всей библиотеки, нужно, загрузить в качестве модуля NPM.
- Да.
- Который, требует Browserify или Wepback, или, скорее всего, SystemJS.
- Да.
- Который, если это не Webpack, в идеале должен управляться Task runner-ом.
- Да.
- Но, так как я должен использовать функциональное программирование и типизированные языки, я в первую очередь должен предварительно скомпилировать TypeScript или добавить этот Flow.
- Да.
- А потом отправить это на обработку в Babel, если я хочу использовать await.
- Да.
- Так что я могу затем использовать Fetch, промисы и управление потоком и всю эту магию.
- Только не забудь polyfill Fetch, если он не поддерживается, Safari до сих пор не может справиться с этим.
- Знаешь что. Я думаю, мы закончим здесь. На самом деле, я думаю, я закончил. Я закончил с этим вебом и с JavaScript в целом.
- Хорошо, через несколько лет мы все будем кодить в Elm или WebAssembly.
- Я просто хочу вернуться к бэкэнду. Я не могу справиться со всеми этими изменениями, версиями, изданиями, компиляторами и транспайлерами. Сообщество JavaScript безумно, если оно думает, что кто-то может идти в ногу с этим.
- Понятно. Тебе тогда надо попробовать сообщество Python.
- Почему?
- Слышал о Python 3?
- Эй, я получил новый веб-проект, но, если честно, я не занимался веб-кодингом в течение нескольких лет, и я слышал, все немного поменялось. Ты же самый современный веб-разработчик, правда?
- Это теперь называется 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?
- О, 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, определяющих API AMD или CommonJS, и использовать что-то вроде Browserify, чтобы связывать их.
- Хорошо, имеет смысл… наверное. А что такое Browserify?
- Это инструмент, который позволяет связать CommonJS описанния зависимостей для файлов, которые могут быть запущены в браузере. Он был создан, потому что большинство людей публикуют эти зависимости в NPM.
- NPM?
- Это очень большое общественное хранилище, где умные люди постят код и зависимости в виде модулей.
- Как CDN?
- На самом деле, нет. Это больше похоже на централизованную базу данных, где каждый желающий может опубликовать и скачать библиотеки, так что ты можешь использовать их локально для разработки, а затем загрузить их на CDN, если захочешь.
- О, как Bower!
- Да, но это 2016, сейчас никто больше не использует Bower.
- Хм, ясно… так мне нужно загрузить библиотеки из NPM?
- Да. Например, если ты хочешь использовать React, то загружаешь модуль React и импортируешь его в коде. Это можно сделать для почти каждой популярной библиотеки JavaScript.
- О, это как в Angular!
- Angular это слишком 2015. Но да. Angular тоже там есть, наряду с VueJS, RxJS и другими интересными библиотеками из 2016. Хочешь узнать о них?
- Давай придерживаться React, я уже узнал слишком много о нем. Так что, если мне нужно использовать React, я вытяну его из этого NPM, а затем использую Browserify?
- Да.
- Это кажется слишком сложным, чтобы просто взять кучу зависимостей и связать их вместе.
- Ага, именно поэтому ты используешь менеджер задач, типа как Grunt или Gulp, или Broccoli для автоматизации запуска Browserify. Ты даже можешь использовать Mimosa.
- Grunt? Gulp? Broccoli? Mimosa? Черт возьми, о чём мы говорим сейчас?
- Task менеджеры. Но они уже не такие крутые. Мы использовали их в стиле 2015 с Makefiles, но теперь мы перешли на Webpack.
- Makefiles? Я думал, что в основном это используется для C или C++ проектов.
- Ага, но, видимо, в вебе мы любим делать вещи сложными, а затем вернуться к основам. Мы делаем это типа каждый год. Ты подожди, через год или два мы еще запилим сборки (assemblies) в вебе.
- Пффф. Ты упомянул что-то под названием Webpack?
- Это другой менеджер модулей для браузера, в то же время он и своего рода Task менеджер. Это как улучшенная версия Browserify.
- ОК. А почему он лучше?
- Ну, может быть не лучше, но более гибкий в плане того, как зависимости связаны. Webpack позволяет использовать различные менеджеры модулей, а не только CommonJS. Например, родные модули ES6.
- Я очень запутался в этих CommonJS/ES6.
- Да все в этом запутались, но можешь больше не париться, потому что есть SystemJS.
- О, Боже, опять что-то-JS. Хорошо, а что это за SystemJS?
- Ну, в отличие от Browserify и WebPack 1.x, SystemJS представляет собой динамический модуль загрузчика, который позволяет связать несколько модулей в нескольких файлах, а не связывая их в один большой файл.
- Подожди, я думал, что мы хотели объединить наши библиотеки в один большой файл и загрузить его!
- Да, но из-за HTTP/2 несколько HTTP запросов на самом деле лучше.
- Стоять! Так чего же мы не можем просто добавить три оригинальные библиотеки для React?
- Ты, конечно, можешь добавить их в качестве внешних скриптов с CDN, но все равно нужно будет добавить Babel.
- Эх. И это плохо, не так ли?
- Да, придется включить полностью Babel-core, а это не будет эффективным для production. На production необходимо выполнить ряд предварительных задач, чтобы проект был полностью готов, а это ритуал, в сравнении с которым вызвать дьявола - это рецепт как сварить яйцо. Надо будет минимизировать файлы, сделать uglify, поиграться со стилями, подумать о загрузке скриптов…
- Понял, понял. Но если не скачивать библиотеки непосредственно с CDN, то как иначе?
- Я бы сделал транспайл из TypeScript с помощью комбо Webpack + SystemJS + Babel.
- TypeScript? Я думал, что мы пишем код на JavaScript!
- Typescript - это и есть JavaScript, или, лучше сказать, надмножество JavaScript. Более конкретно - JavaScript на версии ES6. Ну, та шестая версия, о которой мы говорили.
- Я думал, что ES2016+ - уже надмножество ES6! Почему нам сейчас нужен еще и TypeScript?
- Потому что это позволяет нам использовать JavaScript как типизированный язык и уменьшить количество ошибок во время выполнения. Это 2016, надо добавить некоторые типы в код на JavaScript.
- И TypeScript, очевидно, делает это.
- И Flow, хотя он проверяет только типы, в то время как TypeScript является надстройкой JavaScript, который нужно скомпилировать.
- Эээ… и Flow?
- Это - инструмент для проверки статической типизации, сделанный парнями из Facebook. Они написали его на OCaml, так как функциональное программирование является удивительно крутым.
- OCaml? Функциональное программирование?
- Ну это то, что сегодня юзают крутые пацаны, ну типа, знаешь, 2016. Функциональное программирование. Функции высокого порядка. Currying. Pure функции.
- Я понятия не имею, что это.
- Никто не понимает, в начале. Надо просто знать, что функциональное программирование лучше, чем объектно-ориентированное программирование, и это то, что мы должны использовать в 2016 году.
- Подожди, я учил ООП в универе, я думал, что это круто?
- Ну так было пока Oracle не купил Java. Я имею в виду, что ООП был хорош раньше, и его используют до сих пор, но теперь каждый понимает, что манипулировать состояниями эквивалентно пинанию младенцев, так что теперь все движется к immutable объектам и функциональному программированию. Ребята из Haskell уже 100 лет кричат об этом, и это я еще не упоминал Elm. Но, к счастью, в сети теперь у нас есть такие библиотеки, как Ramda, которые позволяют нам использовать функциональное программирование на простом JavaScript.
- Ты что, просто придумываешь имена? Что еще за Ramnda?
- Нет. Ramda. Как и Lambda. Ну, знаешь, библиотека Дэвида Чембера?
- Дэвида кого?
- Дэвида Чембера. Крутой чел. Один из авторов Ramda. Глянь еще работы Эрика Мейера, если серьезно относишься к изучению функционального программирования.
- А Эрик Мейер это?…
- Тоже функциональщик. Крутой чел. У него есть куча презентаций, где он в странной цветной футболке громит Agile. Еще глянь что делают Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani…
- ОК. Притормози. Все это хорошо и прекрасно, но я думаю, что все это слишком сложно и ненужно для простой выборки данных и их отображения. Я уверен, что я не должен знать этих людей или все эти вещи, чтобы создать таблицу с динамическими данными. Давай вернемся к React. Как я могу извлечь данные с сервера в React?
- Ну, на самом деле для выборки данных не надо React, он отображает данные.
- О, черт. Так а что используется для выборки данных?
- Используй Fetch для получения данных с сервера.
- Использовать Fetch для выборки данных? Тот, кто называет эти вещи, нуждается в тезаурусе.
- О, да. Fetch это имя нативной реализации для выполнения XMLHttpRequests.
- О, AJAX.
- AJAX это просто запросы XMLHttpRequest. А Fetch позволяет делать AJAX на основе промисов, которые затем можно резолвить, чтобы избежать callback hell.
- Callback hell?
- Да. Каждый раз, когда выполняется асинхронный запрос, ты должен ждать его ответа, который заставляет добавить функцию внутри функции, которая называется пирамида callback hell.
- О, хорошо. А промисы решают эту проблему?
- Еще бы! Манипулируя коллбеками через промисы, ты можешь писать более понятный код, тестировать его, а также выполнять несколько одновременных запросов одновременно и ждать, пока все они отработают.
- И это можно сделать с помощью Fetch?
- Да, но только в некоторых браузерах, в противном случае необходимо включить Fetch polyfill или использовать Request, Bluebird или Axios.
- Сколько библиотек мне нужно знать, ради бога? Сколько из них?
- Это JavaScript. Тут тысячи библиотек, которые делают одно и то же. Мы знаем эти библиотеки. Наши библиотеки огрооооомные, а иногда мы добавляем картинки с Guy Fieri в них.
- Guy Fieri? Давай покончим с этим. Что эти Bluebird, Request и Axios делают?
- Это библиотеки для выполнения XMLHttpRequests, которые возвращают промисы.
- А методы AJAX JQuery не возвращают промисы?
- Мы больше не используем «J» в 2016. Просто используйте Fetch polyfill или Bluebird, Request или Axios. Затем управляй промисами с async, await и Бац!, у тебя правильный поток управления.
- Это третий раз, когда ты говоришь о await, но я понятия не имею, что это такое.
- Await позволяет блокировать асинхронный вызов, что позволяет лучше все контролировать во время получения данных и увеличивает читаемость кода. Это потрясающе, просто нужно, чтобы убедиться, что ты добавил stage-3 в Babel, или использовать синтаксис асинхронных функций и плагин transform-async-to-generator.
- Это безумие.
- Нет, безумие - что нужно перекомпилировать код TypeScript, а затем транспайлить его с Babel, чтобы использовать await.
- Шта!? Это не входит в TypeScript?
- Входит в следующей версии, но в версии 1.7 он только ES6, так что если хочешь использовать await в браузере, сначала нужно скомпилировать код TypeScript в ES6, а затем транспайлить с Babel в ES5.
- Я не знаю, что сказать.
- Слушай, это легко. Пиши весь код в TypeScript. Все модули, использующие Fetch компилируй в ES6, транспайль их с Babel с stage-3, и загружай с SystemJS. Если у тебя нет Fetch, используй polyfill, или Bluebird, Request или Axios, и обрабатывай промисы с await.
- У нас очень разные определения «легко». Так, с этим ритуалом я, наконец, получил данные и теперь я могу показать их с помощью React правильно?
- А приложение будет обрабатывать любые изменения состояния?
- Грр, я не думаю. Мне просто нужно отобразить данные.
- О, слава богу. В противном случае мне пришлось бы объяснить Flux и реализации, такие как Flummox, Alt, Fluxible. Хотя, если быть честным ты должен использовать Redux.
- Как же достали эти имена. Опять же, мне просто нужно отобразить данные.
- А, если просто отобразить данные, не надо начинать с React. Можно взять движок шаблонов.
- Ты шутишь, что ли? Думаешь, это смешно?
- Да я просто объяснил, что ты мог бы использовать.
- Стоп. Просто остановись.
- Я имею в виду, даже если просто использовать шаблонизатор, я бы все равно использовал комбо TypeScript + SystemJS + Babel на твоем месте.
- Мне нужно отобразить данные на странице, а не выполнить оригинальный фаталити Sub Zero из Мортал Комбат. Просто скажи мне, какой движок шаблонов использовать.
- Их много, с каким ты знаком?
- Уф, не могу вспомнить название. Это было давно.
- jTemplates? jQote? PURE?
- Не то. Еще один?
- Transparency? JSRender? MarkupJS? KnockoutJS?
- Другой
- PlatesJS? JQuery-tmpl? Handlebars? Некоторые люди до сих пор используют его.
- Может быть. А есть что-то похожее на последний?
- Mustache, underscore? Я думаю, что теперь даже у lodash есть шаблонизатор, но это своего рода 2014.
- Грр… возможно он был поновее.
- Jade? DustJS?
- Нет.
- DotJS? EJS?
- Нет.
- Nunjucks? ЕСТ?
- Нет.
- Чувак, никто не любит синтаксис CoffeeScript в любом случае. Jade?
- Нет, ты уже сказал Jade.
- Ну я имел в виду Pug. Я имел в виду Jade. Я имею в виду, Jade теперь Pug.
- Пф. Нет. Не помню. Какой из них ты бы использовал?
- Наверное, нативный ES6 template strings.
- Дай угадаю. Это требует ES6.
- Да.
- Который, в зависимости от того, какой браузер я использую требует Babel.
- Да.
- Который, если я хочу включить без добавления всей библиотеки, нужно, загрузить в качестве модуля NPM.
- Да.
- Который, требует Browserify или Wepback, или, скорее всего, SystemJS.
- Да.
- Который, если это не Webpack, в идеале должен управляться Task runner-ом.
- Да.
- Но, так как я должен использовать функциональное программирование и типизированные языки, я в первую очередь должен предварительно скомпилировать TypeScript или добавить этот Flow.
- Да.
- А потом отправить это на обработку в Babel, если я хочу использовать await.
- Да.
- Так что я могу затем использовать Fetch, промисы и управление потоком и всю эту магию.
- Только не забудь polyfill Fetch, если он не поддерживается, Safari до сих пор не может справиться с этим.
- Знаешь что. Я думаю, мы закончим здесь. На самом деле, я думаю, я закончил. Я закончил с этим вебом и с JavaScript в целом.
- Хорошо, через несколько лет мы все будем кодить в Elm или WebAssembly.
- Я просто хочу вернуться к бэкэнду. Я не могу справиться со всеми этими изменениями, версиями, изданиями, компиляторами и транспайлерами. Сообщество JavaScript безумно, если оно думает, что кто-то может идти в ногу с этим.
- Понятно. Тебе тогда надо попробовать сообщество Python.
- Почему?
- Слышал о Python 3?