Каково это — изучать JavaScript в 2016 году

Во время написания этой статьи не было создано ни одного JavaScript- фреймворка.

Следующий текст вдохновлен статьей «It's the future» из Circle CI. Вы можете прочитать оригинал здесь . Эта статья — всего лишь мнение, и, как и любой фреймворк JavaScript, ее не следует воспринимать слишком серьезно.

Эй, у меня есть этот новый веб-проект, но, честно говоря, я не кодировал много веба в течение нескольких лет, и я слышал, что ландшафт немного изменился. Вы самый современный веб-разработчик здесь, верно?

- Фактический термин - Front End engineer, но да, я тот парень, который нужен. Я занимаюсь вебом в 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, если захочется.

О, как Бауэр!

- Да, но сейчас 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.

Typescript? Я думал, мы пишем код на 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. Также стоит почитать Эрика Мейера, если вы серьезно настроены изучать функциональное программирование.

А Эрик Мейер…?

- Парень функционального программирования тоже. Потрясающий парень. У него есть куча презентаций, где он ругает 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, но я понятия не имею, что это такое.

-Await позволяет блокировать асинхронный вызов, что позволяет лучше контролировать, когда данные извлекаются, и в целом повышает читаемость кода. Это потрясающе, вам просто нужно убедиться, что вы добавили предустановку stage-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 на предустановке stage-3 и загружайте их с помощью SystemJS. Если у вас нет Fetch, сделайте его полифиллом или используйте Bluebird, Request или Axios, и обрабатывайте все свои обещания с помощью await.

У нас очень разные определения простоты. Итак, с помощью этого ритуала я наконец-то получил данные и теперь могу отобразить их с помощью React, верно?

-Будет ли ваше приложение обрабатывать какие-либо изменения состояния?

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

- О, слава богу. Иначе мне пришлось бы объяснять тебе Flux и такие реализации, как Flummox, Alt, Fluxible. Хотя, честно говоря, тебе следовало бы использовать Redux.

Я просто пройдусь по этим именам. Опять же, мне нужно просто отобразить данные.

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

Ты шутишь? Ты думаешь, это смешно? Ты так относишься к своим близким?

-Я просто объяснял, что вам может пригодиться.

Стоп. Просто остановись.

-Я имею в виду, что даже если бы это было просто использование шаблонизатора, я бы на вашем месте все равно использовал комбинацию Typescript + SystemJS + Babel.

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

-Их много. Какие из них вам знакомы?

Фу, не помню названия. Это было давно.

-jTemplates? jQote? PURE?

Э-э, ничего не напоминает. Еще один?

-Прозрачность? JSRender? MarkupJS? KnockoutJS? У этого была двусторонняя привязка.

Еще один?

-PlatesJS? jQuery-tmpl? Handlebars? Некоторые люди все еще используют его.

Может быть. А есть что-то похожее на последнее?

-Усы, подчеркивание? Я думаю, что сейчас даже у 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 .