...

воскресенье, 11 августа 2013 г.

Гид по реактивному JS: краткая история web-приложений

image

В последнее время появляется все больше и больше разных библиотек для создания сложных приложений на js. Оценить масштаб бедствия можно по замечательному сайту TodoMVC, на которой создатели библиотек выкладывают реализации одного и того же приложения, по одной и той же спецификации, но каждый с использованием своего детища для того, чтобы библиотеки можно было бы сравнить между собой на «реальном» примере.

В серии статей я постараюсь сравнить AngularJS (by Google), Knockout, React (by Facebook), RxJs (by Microsoft), Elm и reactive.coffee. В процессе этого я сделаю акцент на идею в основе каждой библиотеки, её происхождение, интересные детали реализации и естественные ограничения. Сравнивать их я постараюсь не на прямую, а оценивая каждую библиотеку с точки зрения composability (возможности к композиции), сложности библиотеки и сложности задач, которые можно решать.


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


Краткая история web-приложений


image Всю историю web-приложений можно описать как стремление сохранить простоту инструментов при постоянном росте сложности задач.


Вначале не было никаких приложений, были только статические документы. Но вместе с ними появились задачи, для решения которых необходима была динамика, например, отделять контент от верстки и хранить его в удобном для манипулирования виде (в базе) или генерировать содержание (меню) и другие вычисляемые элементы документов.


Очевидное решение — CGI скрипты. При HTTP-запросе запускалась программа, которой передавались параметры запроса в виде аргументов. На вывод программа выводила документ, который, в свою очередь, отдавался пользователю.


К сожалению, такой подход оказался несостоятельным, так как сложность инструмента (полноценный язык программирования) была сильно больше сложности задачи (заменять плейсхолдеры в документе на контент из базы); в такой ситуации не удивительно, что скоро появился инструмент попроще.


В основе нового инструмента была идея вкраплять в документ вызовы функций, результат выполнения которых вставлялся бы в документ по месту их вызова. Так появился PHP.


Со временем, сложность продолжала расти, появилась потребность в приложениях, и динамические документы не подошли для данной задачи. Для борьбы со сложностью была предложена идея отделить прикладную логику и данные от представления. Так родилась тройка: код, данные и шаблон (язык для описания преобразования данных в представление). Как и в случае с cgi сложность инструмента возросла, но в отличие от него, она не была отвергнута, так как сложность инструмента росла медленнее, чем сложность задачи.


image Теперь отвлечемся немного и заметим, что в истории web-приложений, как, вероятно, и в любой другой истории есть место трагедии. На заре web'а подход к включению разметки в код был заклеймлен (что на тот момент было верно), но затем, когда сложность задач выросла, про него не вспомнили, а придумали кое-что похуже. О чем я? Естественным путем к решению проблем является принцип «разделяй-и-властвуй»: для борьбы со сложной задачей (сложным интерфейсом) мы разбиваем её на независимые маленькие задачи, решаем их и через композицию собираем общее решение. В случае включения разметки в код, за композицию интерфейса отвечали бы привычные средства композиции host языка, такие как композиция функций или композиция объектов, но, следуя стереотипу о том, что разметка в коде это плохо, были придуманы шаблоны. Что такое шаблон? Это нечто, что очень стремится стать ЯП для решения задач композиции (циклы, вычисления выражений есть явно, а также include шаблонов в шаблоны, что есть не что иное, как замаскированный вызов функций), но создатель не может позволить этому случиться ввиду самоцензуры «разметка в коде это плохо». В этом и заключена трагедия: мы не можем использовать разметку в коде, так как это плохо, поэтому мы используем шаблоны, но шаблоны не могут решить нашу задачу достаточно хорошо, потому что тогда они были бы уже ЯП и мы бы от них отказались, так как разметка в коде это плохо:) Следовательно, мы сознательно используем несовершенные инструменты, и, как следствие, держим в голове, помимо целевого языка программирования и языка разметки, еще и язык шаблонов.


Еще замечу, что предубеждение против композиции решения задачи средствами языка (разметки в коде) есть только у web-разработчиков. Производить логическую декомпозицию сложной интерфейсной задачи и композицию решения средствами языка абсолютно естественно для desktop программистов.


Продолжим. В то время, пока шаблоны балансировали на граня ЯП/не ЯП, сложность приложений повысилась еще раз. В 2005 появился AJAX и задача создания приложений легла на плечи javascript. Тогда сложные приложения создавались гигантами вроде Google (gmail), но со временем этим стало заниматься все большее количество людей и компаний. И это приводит нас к ответу на вопрос, почему в последнее время появляется все больше и больше разнообразных библиотек для создания gui.


Очевидно, что применять серверный подход к построению интерфейса на клиенте не верно, так как шаблон на сервере отрабатывает моментально отдавая статический документ, а js приложение живет длительный промежуток времени, следовательно нужно попытаться адаптировать серверный подход для клиента или сменить его. При попытке адаптировать шаблоны (шаблон сам по себе источник трагедии и шизофрении) к продолжительному времени жизни (двухсторонний биндинг) произошел очередной скачек сложности инструментов, который превзошел сложность решаемой задачи, подобно тому, как это ранее случилось с CGI и динамическими документами. Этот скачек сложности создает нишу, которая стремится быть заполненной. Получается, что сейчас мы находимся на пороге появления нового «PHP».


В следующей статье я попытаюсь выделить подходы популярных (или новых) js библиотек и классифицировать их. Препарации будут подвержены AngularJS, Knockout, React, RxJs/Bacon.js, Elm и reactive.coffee.


This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers. Five Filters recommends: 'You Say What You Like, Because They Like What You Say' - http://www.medialens.org/index.php/alerts/alert-archive/alerts-2013/731-you-say-what-you-like-because-they-like-what-you-say.html


Комментариев нет:

Отправить комментарий