|
Сказка — ложь, да в ней намек,
Добрым молодцам урок!
Пушкин
А. С.,
«Сказка о золотом петушке» (1834)
— Я получил новый веб-проект, но не
занимался веб-кодингом уже несколько лет, и слышал,
все немного поменялось. Ты же самый современный веб-разработчик, правда?
— Это теперь называется 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?
kmp рекомендует:
|