[Перевод] Как оно учить JavaScript в 2016

8826b0688cbd4a73b87061d6c3a83919.png

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

— Это теперь называется 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?

Комментарии (2)

  • 7 октября 2016 в 15:19

    0

    Неплохие мысли от Эдди Османи по этому поводу. https://medium.com/@addyosmani/totally-get-your-frustration-ea11adf237e3#.3opyc4gll
  • 7 октября 2016 в 15:27

    +1

    Сначала нужно создать проблему, а потом героически ее побеждать. Странно, что замечая callback hell никто не замечает tools mess.

© Habrahabr.ru