Polymer and Angular – A new adventure

For sometime now I have been building out a web app using AngularJS, It’s a great framework and you can build out web applications in no time at all once you overcome the initial and quite steep learning curve. However with all the chat around drastically different Angular v2, the web communities endorsements of Facebook’s react.js and my interest in the Material Design movement pioneered by Polymer, I decided to take a look at these in comparison to Angular.

Facebooks React was a complete departure from Angular and has its own XML like markup which in all honesty I couldn’t really buy into although many praise this feature. Long story short I decided to move on after creating some simple applications.

Polymer was next, as a framework to build entire applications it’s not quite as complete as Angular. Angular does things like routing, application structure, dependency injection very well. Polymer on the other hand is great at creating reusable components, Angular also has directives for this but in my option Polymer components are a lot easier to build/read and test. Over the next couple of weeks I am going to continue experimenting with using Angular for the application structure and business logic, and migrate directive to polymer components.

Hopefully I can get the chance to be a lot more active on this blog during this transition and provide some helpful insights to anyone else who might be partaking on this journey.

Advertisements

Angular with JQuery

JQuery Plugins with AngularAngular is a powerful framework for creating single page applications, it boasts bi-directional data-binding and use of directives (ala web components). Angular comes with an initial learning curve with its own syntax and custom elements. In the past I have used Angular when starting out new projects, usually simple web apps and was always impressed with how quickly it allows you to develop new features, and keeps the structure of the code clean and straight forward. A problem often faced when writing plain JS or JQuery apps.

Having said that I recently tried to convert a site to Angular, this site included many JQuery plugins for various UI components, all of which seemed to get initialised on document ready several times. I started the conversion and everything went smoothly. I hit the first problem trying to initialize a JQuery UI plugin on a template view. What I mean by template view is a partial view that is replaced at runtime by angular and the data is bound to the view from the $scope. The problem was that the plugin init code was being called before angular had finished the DOM manipulation. A Quick search online confirms this is a common problem, there is also plenty of suggestions. All of them less than ideal. I wont discuss each solution as a Google search will return them in more detail.Here are the two solutions I found to be the best, its very much the best of a bad bunch

 scope.$watch(
 function () { return element.html()},
 function (newValue, oldValue) {
     if (newValue !== oldValue) {
        element.<insertPluginInitHere>({
            autoPlay: 3000, //Set AutoPlay to 3 seconds
            items : 4,
            navigation: false
        });
     }
   });

The watch method takes the directive element and watches for any changes within it, this is especially useful if you have data-binding within the directive that you need to initialise after angular has finished binding. This is my preferred method as its fairly self explanatory, my only concern is the performance implications of having many directives that have this watch function, but I have yet to notice anything substantial.

The other method is to use a timeout to initialise the plugin, similar to watch however you use $timeout and regardless of data change you say execute the init after 300ms for example, my issue with this is that you have to guess how long its going to take get/bind the data.

As I encounter more JQuery plugins and attempt to initialise them sometimes in partials/templates or the controller it gets harder to keep the code clean and the structure simple. My advice would be if facing a project that uses many JQuery plugins on the UI then maybe think twice about Angular, or the plugins that you are using on the site, if you can. Mixing JQuery and Angular isn’t nice.