Ожидание vs Реальность

Как я вернулся и сразу ушел от JavaScript

Возвращение и уход от JavaScript

 

Как я вернулся и сразу ушел от JavaScript

Прежде всего следует сказать, что эта статья только ИМХО, не следует воспринимать ее слишком серьезно. Здесь я описал первое впечатление о современном интернет, которое сложилось у меня после нескольких лет работы на бэкенд. При написании (и перевода) не было написано ни одного JavaScript-фреймворка.


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

— Правильно говорить фронтенд-разработчик. Но да, ты обратился в нужной тебе человека. Я делаю интернет в 2016 Визуализация, музыкальные плееры, летающие дроны, играющих в футбол, называй как хочешь. Я только вернулся из JsConf и ReactConf, я знаю что такое последние технологии.

Круто. Мне нужно создать страницу, будет отображать последнюю активность пользователей. Мне просто нужно получать данные от REST API и показывать их в таблице с возможностью фильтрации. Ну и обновлять ее, если на сервере что-то изменилось. Я думаю использовать jQuery для этого.

— Ради Бога, нет, нет, и еще раз нет. Парень, на дворе 2016, никто не использует jQuery, тебе нужен React.

Хорошо, а что такое React?

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

Звучит круто. Я могу использовать React для получения данных от сервера?

— Да, но сначала нужно подключить библиотеки React и React DOM.

А почему библиотеки две?

— Одна главная, а вторая позволяет выполнять манипуляции с DOM, который ты теперь можешь описывать на JSX.

JSX? Что это?

— JSX — это расширение синтаксиса JavaScript, что позволяет добавлять в него XML. Это еще один способ расширить возможности DOM, можешь считать его улучшенным HTML.

А что не так с HTML?

— Это 2016. Никто уже не кодить на HTML напрямую.

Пусть так. После придания этих двух библиотек я смогу использовать React?

— Почти. Нужно еще добавить Babel, тогда ты сможешь использовать React.

Еще одна библиотека?

— Ох, нет. Babel — это транспилятор, что позволяет писать на новом JavaScript, который скомпилируется в старый, хорошо браузеров. Вообще, это не обязательно, но без него тебе придется писать на ES5. А кто в 2016 пишет в ES5? Тебе следует использовать ES2016 или новее.

ES5? ES2016? Подожди, я запутался. Что это?

— ES5 это сокращение от ECMAScript 5. Это версия, которую используют большинство разработчиков, так как она имеет лучшую поддержку в браузерах.

ECMAScript?

— Да. Знаешь, стандарт JavaScript было утверждено только в 1999 году, тогда как сам JS появился в 1995 году. Тогда он назывался Livescript и работал только в Netscape Navigator. Тогда его использовать было больно, но сейчас у нас уже есть семь редакций этого стандарта, делают JS лучшим и удобным.

Хм, то есть ES5 и ES2016 + одни из них?

— Да, пятая и седьмая редакции.

Подожди, а что случилось с шестой?

— Ты имеешь в виду ES6? Каждая редакция это надстройка над прошлой, то есть используя ES2016 + ты имеешь все фичи прошлых версий.

Хорошо, а зачем использовать ES2016 + этаж ES6?

— Ну, ты можешь использовать ES6, но тогда ты не сможешь использовать такие крутые фичи как async & await.

Я не понимаю что ты только что сказал. Столько названий, я запутался. Мне просто нужно подключить jQuery с CDN и получать данные через AJAX. Почему бы мне просто не сделать так?

— Это 2016 парень. Никто не использует jQuery больше. Он остался в эре спагетти-кода, все это знают.

То есть ты предлагаешь загружать 3 библиотеки чтобы просто отобразить данные в таблице?

— Ты можешь использовать менеджер модулей, который соединит их в один файл.

Что такое менеджер модулей?

— Это зависит от окружения. В интернете мы обычно используем то, что поддерживает AMD или CommonJS модули.

Ох, а что такое AMD и CommonJS?

— Это способ описать, с которыми библиотеками взаимодействует твой код. Знаком с exportи require? Ты можешь написать несколько файлов с AMD- или CommonJS-объявлениями, а затем соединить их с помощью Browserify.

Ну, это логично … Наверное. А что такое Browserify?

— Это инструмент, позволяющий упаковать описаны зависимости к файлам, могут запускаться в браузере. Его создали так как многие публикует эти зависимости на реестре npm.

Npm?

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

По CDN?

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

О, прямо как Bower!

— 2 0 1 июня . Забудь это слово.

Ладно ладно. Теперь я должен загружать библиотеки с npm?

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

Похоже Angular.

— Angular остался в 2015, чувак. Но так, с Angular тоже так нельзя. Как и с VueJS, RxJS или другими современными библиотеками. Хочешь послушать о них?

Нет, давай останемся на React, очень многие вещи я узнал за это время. То есть чтобы использовать React мне нужно загрузить его с npm, а затем использовать Browserify?

— Да.

Для простого получения и конкатенации зависимостей это выглядит как-то перегружено.

— Именно поэтому ты должен использовать менеджер задач, как вот Grunt, Gulp или Broccoli. Можешь еще посмотреть в сторону Mimosa.

Grunt? Gulp? Broccoli? Mimosa? О чем мы вообще говорим?

— Менеджеры задач. Но они уже не актуальны. Мы использовали их в 2015, затем были Makefiles, но сейчас мы используем для всего этого Webpack.

Makefiles? Я думал это больше для проектов на C или C ++.

— Да. Знаешь, в интернете мы любим сначала сделать все сложным, а затем возвращаться к основам. Мы делаем так каждый год, можешь подождать немного и в интернете появится и ассемблер.

Достаточно. Ты говорил что-то о Webpack?

— Это еще один менеджер модулей для браузера. Это как Browserify, только лучше.

А чем лучше?

— Ну хорошо, может и не лучше. Он более гибкий и дает выбирать что использовать как менеджер модулей: как CommonJS, так и нативные модули в ES6.

Я уже не понимаю о чем мы говорим.

— Да мало кто понимает. И это я еще не рассказывал о SystemJS.

Святой Иисус, еще один <существительное> -js. Для чего оно?

— В отличие от Browserify и Webpack 1.x, этот инструмент собирает библиотеки не в один большой файл, а во много маленьких.

Я думал нам наоборот нужно собирать все в один файл.

— Да, но теперь, когда появился HTTP / 2, несколько http-запросов лучше.

Тогда почему я не могу просто подключить 3 библиотеки для React?

— Ну, тебе все же надо добавить Babel.

Это плохо?

— Да, ты можешь подключить babel-core, но она не для продакшена. Перед запуском кода на боевом сервере его нужно минификуваты, сжать ресурсы и все такое.

Ладно ладно. А как бы ты добавил библиотеки в проект?

— Я бы собрал их с TypeScript с помощью Webpack + SystemJS + Babel.

Я думал мы пишем на JavaScript.

— TypeScript — это JavaScript. Хотя точнее сказать, что это надстройка над JavaScript. Он базируется на ES6, помнишь, мы о нем говорили?

Я думал что ES2016 + это надстройка над ES6. Почему нам нужно использовать какой-то TypeScript? ПОЧЕМУ?

— Сейчас рулит статическая типизация. Знаешь, тебе нужно немного статической типизации в своем коде.

И TypeScript делает это?

— Да, как и Flow, но он только проверяет типы, а TypeScript нужно компилировать в JavaScript.

Черт. Щ О Т А К Е FLOW?

— Это чекер для типов, сделанный чуваками с Facebook. Он написан на OCaml, ведь функциональное программирование — это прекрасно.

OCaml? Функциональное программирование?

— Это то, что используют крутые разработчики в 2016 Функции высшего порядка, каруваня, чистые функции и все такое.

Я не понемаю.

— Сначала никто не понимает. Тебе просто нужно знать, что функциональное программирование лучше OOП, и именно его будут использовать в 2016.

Хм, я учил ООП в колледже. Мне казалось, это очень даже удобно.

— Так пока Java не выкупила Oracle. Я имею в виду, ООП был удобным раньше, но сейчас все поняли, что изменение состояний это лишнее. Поэтому сейчас все используют неизменяемые объекты и функциональное программирование. Раньше так можно было писать только на Haskell или Elm, но благодаря таким библиотекам как Ramda, ФП можно использовать и в JavaScript.

Ты сейчас просто называешь случайные имена? Что за Аманда?

— Нет, рамбда. Как лямбда, только рамбда. Кстати, это библиотека от Дэвида Чамберса.

Кого?

— Дэвид Чамберс. Крутой чувак. Один из разработчиков Ramda. Тебе также следует почитать об Эрике мейджерами, если ты хочешь познакомиться с функциональным программированием.

А Эрик Мейджера это …?

— Тоже крутой чувак. Очень. У него есть куча выступлений, где он в прикольной футболке смешивает с грязью Agile. Также почитай о Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

Вот тут я тебя перебью. Все это, конечно, классно, но для простого получения и отображения данных это лишнее. Я уверен, что мне для этого не нужно знать этих людей и все эти библиотеки. Давай вернемся к React. Как я могу получить данные от сервера с помощью React?

— Ты не получаешь данные с помощью React. С ним ты их отражаешь.

Черт возьми. Что мне нужно использовать чтобы получить эти проклятые данные?

— Можешь использовать Fetch. Это нативная реализация XMLHttpRequests.

То есть AJAX?

— AJAX — просто использование XMLHttpRequests. Fetch позволяет делать запросы, возвращающие Промис. Это помогает обойти callback hell.

Callback hell?

— Да. При каждом запросе нужно прервать функцию, обработает результат. И вот так, раз за разом, а у тебя в коде 20 функций, вложенных друг в друга. Вот это и есть Пирамида коллбекив прямо из ада.

А Промис позволяют обойти это?

— Да. Они позволяют более элегантно управлять твоими Колбек, легче интегрировать тесты, или групповое управление запросами.

И Fetch позволяет это использовать?

— Да, но только если пользователь использует современный браузер. Иначе следует добавить полифил, или использовать Request, Bluebird или Axios.

Боже, почему так много библиотек для одной и той же задачи?

— Это JavaScript, так было всегда. У нас тысячи и тысячи библиотек для одного и того же.

Достаточно. Разве AJAX-методы jQuery не возвращают Промис?

— Мы не используем j-библиотеки в 2016 Тебе следует использовать нормальные библиотеки. Просто получаешь Промис, и управляешь им с помощью await в async-функции. Вот это я называю контроль исполнения.

Ты поехав.

— Нет, самый сок, это когда тебе нужно транспилюваты TypeScript в JavaScript, а затем использовать Babel, что async & await заработали.

Что? Они не встроены в TypeScript?

— В следующей версии будет. А пока он компилируется в ES6, а затем Babel собирает его в ES5-код.

Даже не знаю что сказать.

— Все просто. Пишешь весь код на TypeScript. Компилирует его в ES6, затем с помощью Babel компилирует в ES5. И загружаешь с помощью SystemJS.

Кажется, ты не понимаешь что такое «просто». После всех этих ритуалов с получением данных, я уже могу их показать?

— Твой приложение должно отслеживать изменения состояния?

Думаю, что нет.

— Слава Богу. А то мне следовало бы рассказать о Flux и его реализации, например Flummox, Alt или Fluxible. Но ты все же должен использовать еще и Redux.

Достаточно. Д О С И Т Ь. Мне просто нужно показывать некоторые данные.

— Ну, если только отображать некоторые данные, то ты можешь обойтись и без React. Хватит шаблонизатором.

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

— Я просто рассказал что ты можешь использовать.

Прекрати.

— Если ты и используешь сам шаблонизатор, то все равно нужен и TypeScript, и SystemJS, и Babel.

Мне нужно просто показывать данные, а не делать фаталити Саб-Зиро на JavaScript.

— TypeScript.

Достаточно. Просто расскажи, что мне следует использовать.

— Здесь много вариантов, ты с чем-то знаком?

Хм, так просто и не вспомню названий.

— jTemplates? jQote? PURE?

Нет, не то. Есть еще варианты?

— Transparency? JSRender? MarkupJS? KnockoutJS? Еще что-то, что имеет двустороннее связывание?

Нет.

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

Возможно, еще что-то похожее на последнее?

— Mustache, underscore?

Нет, не знаю.

— Jade? DustJS?

Нет.

— DotJS? EJS?

Нет.

— Nunjucks? ECT?

Нет.

— Все равно никто не любит синтаксис CoffeeScript. Jade?

Нет, ты называл Jade.

— Я имел в виду Pug. И Jade. Я имел в виду, что Jade теперь Pug.

Не помню. А что бы использовал ты?

— Нативные ES6 шаблоны лент.

Дай догадаюсь, они нуждаются ES6?

— Да.

И для его использования нужен Babel?

— Да.

Который мне нужно загружать с NPM?

— Правильно.

И это все требует Browserify, или Wepback, или SystemJS.

— Абсолютно верно.

И, если это не Webpack, то следует использовать еще и менеджер задач?

— Да.

А еще, мне нужно компилировать TypeScript или добавить Flow, так как я теперь пишу со статической типизацией?

— Да.

А потом все это отправить в Babel, если я хочу использовать await?

— Правильно.

И только теперь я смогу использовать Fetch, Промис и контролировать всю эту магию?

— Не забудь добавить полифил. Safari до сих пор не поддерживает его.

Знаешь, здесь мы и закончим. Хватит с меня фронтенда.

— Это нормально, через несколько лет мы все будем писать на Elm или WebAssembly.

Нет, я возвращаюсь к бэкенд. Я не могу работать в таком бешеном темпе изменений версий, фрейморкив и подходов. Сообщество JavaScript сумасшедшая, если думает, что кто-то может успеть за всем этим.

— Я понял тебя. Сообщество Python 3 как раз для тебя.

Почему?

— Никогда не слышал о Python 3?

1 голосов (5 баллов в среднем)
1+

Пользователи, которым ПОНРАВИЛСЯ этот пост:

  • avatar
Поделиться

One Comment

  • Alex Dugnist

    На самом деле всё проще…
    1) Пишите на BABEL + async await но не используйте Typescript. (потому что бейбел в итоге станет нативным синтаксисом и все лишние библиотеки отпадут, а тайпскрипт всегда будет надстройкой с зависимостями)
    2) Не используйте пре или постпроцессоров. Только нативный css. Причина та же — хорошее знание чистого синтаксиса победит использование десятков лишних библиотек.
    3) Не используйте шаблонизаторов (кроме jsx), берите фреймворк и пишите всё его компонентами. Чем чище html тем лучше. Лучше изучите теги хтмл из новой спецификации.
    4) Используйте один сборщик для проектов (на данный момент webpack). Используйте заготовки для сборки проектов (boilerplate). Вся суть сборщика в экономии времени. Если Вы будете писать свой конфиг для сборщика с ноля — его суть будет утеряна для Вас.
    5) Забейте болт на статическую типизацию, настраивать Вы её будете больше чем она принесёт пользы — лучше покройте код тестами..
    6) Ну и последнее, используйте fetch для запросов на сервер,потому что он чертовски удобный, но не забывайте что для его работы в старых браузерах действительно нужна заглушка (полифил). И прогресс бар на нем сделать сложно)

    0

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *