Ваш начальник когда-нибудь просил вас найти новую интерфейсную платформу для вашего веб-приложения? Получил плохой случай анализа паралича? Не знаете с чего начать, когда заходите на сайт todomvc.com ? Вас так смутили все варианты, что вы решили спрятаться в шкафу? Ну не надо больше!
Мы хотим, чтобы вы знали, что вам на самом деле не нужно принимать решение. Оказывается, современные JS-фреймворки прекрасно работают вместе. Хотите разместить контроллер Angular внутри компонента React ? Нет проблем! Угловая директива внутри вашего взгляда на позвоночник ? Конечно! Компонент React в представлении Backbone? Мы не видим, почему нет. Как насчет контроллера Angular внутри компонента React внутри представления Backbone? Ну, теперь ты немного сумасшедший, но это работает!
Мы объединили гибкость Backbone, простоту React и всю мощь Angular. В одиночку они похожи на Аквамена ; вместе Лига справедливости . Некоторые люди называют это гением, другие — безумием. Мы просто называем это Frankenstein.js .
Магистральный вид + угловые директивы
Для начала мы решили создать Backbone View, который мог бы связать Angular-директиву. Возьмите простой просмотр Backbone и добавьте в Angular:
var BackboneAngularDirectiveView = Backbone.View.extend({
initialize: function(options) {
this.angularModuleName = options.angularModuleName;
},
render: function() {
this._angularModule =
angular.bootstrap(this.$el, [this.angularModuleName]);
_.each(directives, function(directive) {
_.each($('[' + directive.name + ']'), function($el) {
var directiveInstance =
this._angularModule.instantiate(directive.fun);
directiveInstance.link(this, $el, {});
}, this);
}, this);
}
});
Представление Backbone отвечает за загрузку модуля Angular и поиск в его шаблоне любых элементов DOM, которые настроены на использование директивы Angular. Представление знает о любых директивах, определенных для модуля Angular, и просматривает их, пытаясь найти экземпляры элементов DOM, которые соответствуют имени директивы Angular. Когда он находит соответствующий элемент, он вызывает функцию ссылки директивы на элемент.
Видишь, что мы там только что сделали? Мы в основном перестроили систему директив Angular в Backbone за несколько минут. Ешьте свое сердце из Маунтин-Вью!
Backbone View + React Component + Angular Controller
Since the Backbone View is already set up to bootstrap the Angular module, we then decided to add a React Component in the middle:
var ReactAngularControllerComponent = React.createClass({
render: function() {
return React.DOM.span({'data-ng-controller':
this.props.angularControllerName },
'{{angularGreeting}}'
);
}
});
The ReactAngularControllerComponent (a name inspired by the great SimpleBeanFactoryAwareAspectInstanceFactory) is a React component that creates an element that binds an Angular controller and sets up the initial DOM for the controller. The controller sets up a scope and binds to the React-created DOM. Since this is used inside the Backbone view that bootstraps the Angular module, there is no extra work necessary. They work in perfect harmony to provide an easy-to-use, feature-packed, view/component/controller monster.
Conclusion
It’s all about options. Why would you want to limit yourself to just one framework when you could have all of them? Don’t ask “why?”, ask “why not?”
And this is just the beginning. Imagine adding Ember or Knockout to the mix: so much power for the CRUD app you’re building! We’re also looking forward to implementing the Angular parts of the application in Dart and the Backbone parts in Coffeescript, as we’re sure their creators originally intended. And don’t worry designers – the styling can be done in CSS, SASS and Less.
Just show this to your boss and they’ll see the light. They won’t be able to decide whether to give you a bonus, a raise or a promotion. Perhaps they’ll give you all three – or just ask you to cut back on the amount of coffee you’re drinking each day. Either way, everyone’s a winner with Frankenstein.js!
Oh yeah, one more thing: have a happy April fools day!