Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Introducing Frankenstein.js: Backbone + Angular + React

DZone's Guide to

Introducing Frankenstein.js: Backbone + Angular + React

· Java Zone
Free Resource

Just released, a free O’Reilly book on Reactive Microsystems: The Evolution of Microservices at Scale. Brought to you in partnership with Lightbend.

Frankenstein's_monster_(Boris_Karloff)

­Have you ever been asked by your boss to find a new front-end framework for your web app? Got a bad case of analysis paralysis? Don’t know where to start when you go to todomvc.com? Were you so confused by all the options that you decided to hide in a closet? Well no more!

We want you to know that you don’t actually have to make a decision. It turns out that the modern JS frameworks work perfectly well together. Want to put an Angular controller inside a React component? No problem! An Angular directive inside your Backbone view? Sure! A React component inside a Backbone view? We don’t see why not. How about an Angular controller inside a React component inside a Backbone view? Well now you’re getting a little crazy, but it works!

We’ve brought together the flexibility of Backbone, the simplicity of React and the raw power of Angular. Alone, they are like Aquaman; together, the Justice League. Some people call it genius, others insanity. We just call it Frankenstein.js.

Backbone View + Angular Directives

To start off, we decided to build a Backbone View that could link-in an Angular directive. Take your a plain Backbone View, and add a dash of 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);
  }
});

The Backbone view is responsible for bootstrapping an Angular module and finding any DOM elements in its template that are configured to use an Angular directive. The view knows about any directives that are defined for the Angular module and loops through to try to find instances of DOM elements that match the name of the Angular directive. When it finds a matching element, it calls the directive’s link function on the element.

See what we just did there? We’ve basically re-implemented Angular’s directive system in Backbone in a few minutes. Eat your heart out Mountain View!

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!

Strategies and techniques for building scalable and resilient microservices to refactor a monolithic application step-by-step, a free O'Reilly book. Brought to you in partnership with Lightbend.

Topics:

Published at DZone with permission of Gregory Gross, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}