Комментарии 98
Тот же самый пример (ну почти, учитывая специфику паттернов), используя knockout:
class MyCustomViewModel {
sayHelloWorld() {
// do something
}
}
///
ko.applyBindings(new MyCustomViewModel, document.querySelector('.example'));
<div class="example" data-bind="click: sayHelloWorld"></div>
Это я ещё не говорю про про заточенные под ES6 либы\фреймы, вроде Аурелии.
Подтверждая слова Synoptic (точнее аргументируя примерами), может стоит уже подумать об апгрейде до Vue\Angular\Aurelia\React\подставить_свой_любимый_фрейм этого, безусловно крутого в прошлые времена фрейма?
На сколько я понимаю JavaScript как язык сам по себе поощряет изменяемость объектов.
Можете раскрыть суть проблемы, с которой столкнулись? Это было бы очень интересно в рамках обмена опытом.
Но правильно ли я понял, что Redux по сути реализует шаблон EventAggregator (http://martinfowler.com/eaaDev/EventAggregator.html)?
Если так, то почему бы не сделать то же самое в Backbone? К тому же в Marionette уже это есть.
Если я все правильно понял, то в чем еще преимущества Redux?
«можно» — это еще не значит, что «будут».
при варианте с Redux Можно прикрутить jQuery и в обработчиках изменять DOM =)
Если возвести Абсурд в абсолют, можно слить абсолютно любую технологию.
А то, что сейчас называют спасением в виде Redux активно использовали еще до появления реакта в «мертвом» Flash =)
ps: а Redux разве еще не устарел?
https://github.com/marionettejs/backbone.radio
Вы получите глобальную шину ивентов. Поверьте, это отличная штука, которая делает ваш код несвязанным.
Backbone на сегодняшний день устаревшее решение, делать его основой мало-мальски серьезных проектов нельзя.
Делая такое веское заявление, можете пояснить почему Вы считаете что прямо-таки нельзя использовать его? Что предложите взамен, чтобы прям и модели поддерживались и роутинг, и приложение было легковесным?
// Базовый класс, наследованный от Marrionette.ItemView var class = Base.View.extend({ // Определяем элементы с которыми будем работать ui: { send: '.css_class_button' }, // Биндим события для определенных элементов events: { 'click @ui.send': 'onClick' }, // Определяем метод клик для кнопки onClick: function() { // Блокируем кнопку перед отправкой данных на сервер this.ui.button.button('loading'); API({...}) .then(function() { // разблокируем кнопку this.ui.button.button('reset'); }); } });
Код примитивный, но показывает, что с домом можно не работать напрямую. При этом все под контролем.
PS подскажите, как правильно оформить код? Тег
не сработал. Обрамил тегом
В ангуляре вы изменили значение и фреймворк пройдется и изменит DOM. Реакт поступает похожим образом.
В бекбоне через проперть ui вы получаете доступ к элементам контекста вьюхи. Подчеркну именно вьюхи. Случайным образом вы не получите список кнопок по классу, если к примеру у вас больше одного инстанса вьюхи в DOM.
Кейс с блокировкой кнопки, скажем так, мелкий и редкий кейс. Решается довольно просто, создается компонент кнопки, который вы будете использовать в других вьюхах. Похожий кейс к примеру вывести инфу из модели при изменении какого нибудь значения.
Пример:
var cls = Base.View.extend({ ui: { text: '.css_class_text' }, initialize: function(options) { this.listenTo(options.model, 'change:name', this.onChangeName.bind(this)); }, onChangeName: function(model, value) { this.ui.text.html(value); } })
Вот простой односторонний биндинг. И не нужен тяжеловесный ангуляр для простого кейса.
Но это мелочи, в основном это рендер сложных шаблонов и форм, как пример списки, графики, сложные формы итд.
И здесь уже выходит бизнес логика и шаблонизация.
Реакт (набросаю код, который больше схематичный, главное суть)
React.createClass({ isFormBlocked: false, metho1: function() { this.isFormBlocked = true; }, metho2: function() { this.isFormBlocked = false; }, render: function() { return ( <button class="btn"{{ isFormBlocked? 'disabled': '' }}> <button class="btn"{{ isFormBlocked? 'disabled': '' }}> <button class="btn"{{ isFormBlocked? 'disabled': '' }}> ); } });
Теперь тоже на BB
Base.View.extend({ ui: { b1: 'btn1', b2: 'btn2', b3: 'btn3' }, toggle: function(value) { this.ui.b1[value ? 'enable' : 'disable'](); this.ui.b2[value ? 'enable' : 'disable'](); this.ui.b3[value ? 'enable' : 'disable'](); }, metho1: function() { this.toggle(true); }, metho2: function() { this.toggle(false); } });
Так вот код практически одинаковый. Только в моем случае логика вынесена из шаблона во вью.
Не ради холивара, но поймите ничем особым ангуляр или реакт или еще что либо не лучше и не хуже бекбона. Главное понимать что, как и почему так работает.
this.ui.b1.prop('disabled', value);
Cути это не меняет. Еще раз подчеркну — ни один фреймворк не спасает от бизнес логики приложения. Если на сайте надо слабать пару форм, вывести пару кнопок и список — это одно. И совсем другое, когда у вас single-page приложение, в котором сотни экранов, десятки компонент итд (CRM+ERP app). Вот тогда вы будете уделать внимание бизнес логике, а не тому — как включить/выключить кнопку — в шаблоне или вьюхе.
Думаю стоит прекращать холивар. К сожалению вы меня ничем не удивили и не привели какого нибудь стоящего примера, что бы я задумался о смене стека технологий.
PS Да реакт клевый, было время я думал на него перевести приложения. Но, стильно/модно/молодежно — оставим для новичков. После глубокого анализа — бенефит был нулевой.
И неважно, пишите вы шаблоне конструкции из условий или в методе обращаетесь к нодам — результат как по затраченному времени и коду — одинаков. На что я вам и указал.
Да, действительно я потратил время, пытаясь вам донести столь очевидный результат.
define([ 'settings', 'core/form' ], function(settings, CoreForm) { var parent = CoreForm.views.Form; return parent.extend({ fields: { title: { type: 'select', req: false, label: gettext('Title') }, firstName: { type: 'input', req: true, label: gettext('First Name') }, lastName: { type: 'input', req: true, label: gettext('Name') }, dateOfBirth: { type: 'date', format: settings.format.date, req: false, label: gettext('Date Of Birth') }, phoneNumber: { type: 'input', req: true, label: gettext('Phone Number') } }, setDisabled: function(value) { this.ui.title.prop('disabled', value); this.ui.dateOfBirth.prop('disabled', value); this.ui.phoneNumber.prop('disabled', value); } }); });
Мне даже шаблоны не нужны. А вот вы нагородили кучу всего.
Повторюсь, вникните в суть фреймворков.
И еще, поменьше желчи и злобы. Вы не любите бекбон? Не любите на здоровье. Ведь на вкус и цвет все фломастеры разные.
Если вы не умеете готовить бекбон — это ваши личные проблемы.
На этом все. Дальше от вас бессмысленные и бестолковые утверждения.
Больше отвечать не буду.
И да, это комменты к статье, к которой вы написали, что бекбон старье и использовать его нельзя. Я категорично с вами не согласен. Так же я привел аргументы, что ни один мифический фреймворк не лучше другого.
На сем разрешите откланяться, более не буду отнимать у вас время.
Так вот. Ваша ветка комментариев мне изрядно помогла в определении.
Увидел шаблон на реакте с этими условиями, либо у вас Bad Practice, либо это так заведено. Но вставка в шаблон условия на классы, условия на атрибуты влечет за собой множество проблем при возвращении к коду через месяц или другим разработчиком.
В данном случае разбиение на триггеры и обращение к ui конкретной view, а так же очеловечивание названий функций куда упрощают восприятие подобных сложных форм.
А избегать перерендеривания вьюхи целиком можно путем дробления ее на дочерние, а не создавая огромные темплейты с такими формами.
Почему у вас эта форма не представлена в коллекции? Почему темплейт этой формы не состоит из одного блока?
но разве метод .button под капотом не работает с DOM напрямую?
))) покажите фреймворк, который под копотом не работает с DOM?
Жаль что этот ваш комментарий я прочитал последним. Не отвечайте пожалуйста на остальные мои комментарии, думаю диалога у нас с вами не сложится. Спасибо.
Мистер профи, любой фреймворк от соседа отличается двумя вещами: предлагаемой архитектурой и слоями абстракции. Конечно вы об этом прекрасно знаете, потому ответьте мне сначала на вопрос, какую архитектуру предлагает React, а какую архитектуру предлагает Backbone? После этого вопроса, ответьте, пожалуйста, на вопрос, какие слои абстракции использует React, а какие Backone?
так как фреймворк поощряет прямые манипуляции с DOM
Разрешать, не есть поощрять. Язык C++ позволяет использовать множественное наследование, что не делает язык C++ устаревшим решением.
Ни ангуляр, ни реакт, ни бекбон, ни что-то другое не избавит от нее.
Как ни крути, а вам надо будет ее реализовывать. По моим прикидкам это около 90% кода.
Мы используем бекбон, так как мы хотели структурировать код, так как нам нравится.
И сейчас планируем начать переноситься часть функционала на ES6.
get tagName() { return 'div'}
.ПС по поводу тостера: я точно также прекрасно могу отвечать на вопросы и про ember.js и про react.js, но как правило на них уже ответили в момент, когда я вопрос читаю.
Он привел пример отвратительного решения задачи, да и сам сказал, что толком с Backbone не работал
Это не имеет значения, видео есть на ютюб, зрители его называют лекцией, на видео серьезный дяденька рассказывает группе серьезных людей об очень серьезных вещах. Зрителю не нужно думать, за него уже подумали, нужно только ложить эту инфу себе в голову, пропуская через фильтр собственных убеждений и продвигать полученную идею в массы. Это нормально, так многие делаю первое время.
Неуч — потому что первым же своим комментарием вы напрочь убили смысл поста.
В новом дивном мире всё равно остаётся как минимум IE10-IE11 в плане пользовательской базы.
Есть корпоративные интранеты, где стандарт это Chrome.
А есть корпоративные интранеты которые ложили на хром и хотят видеть IE
примеры из практики:
Coca-colla — проект был 1,5 года назад основной браузер который они хотели видеть IE9
один американский банк — проект сейчас — вот зимой только отказались от IE8 потому что они наконец сделали апгрейд софта в своем парке
ЗЫ. не всем везет разрабатывать под хром
ЗЫЫ если что, я без наездов (а то тут в коментариях у некоторых кипят эмоции), просто вы как-то слишком категорично сказали что даже в корпоративнов секторе уже все радужно.
А есть вариант реально на практике использовать ES6 без бабела?
Ничоси! Называется перешёл немного на бекенд и целая революция мимо пролетела, а я даже и не заметил.
С другой стороны только что в консольке проверил:
> class A {}
< function class A {}
> new A
< VM382:2 Uncaught ReferenceError: A is not defined(…)(anonymous function)
Последний блинкоподобный браузер. Это нормально?
93%. Я.Браузер, они не очень сильно отстают, по-этому и сказал что последний (ну да, он не последний, но один из последних, но это не столь критично я думаю).
Предлагаю самостоятельно проверить вышеизложенной мною эксперимент в вашем браузере =)
О, ну вот как значит даже. Осталось дождаться ФФ и можно уже начинать думать о нативе без бабела. Спасибо!
Использование стандарта ES2015 в рамках библиотеки Backbone.js