Goodbye

Angular

..

Hello

Polymer

TunJS - February 2015

By Nader Toukabri

Program

  • Polymer Intro
    • WebComponents
    • Polymer

Program

  • AngularJS vs. Polymer
    • Template is different
    • Controller .. no thanks!
    • Service .. no thanks!
    • Filter is Filter
    • Directive vs Custom Element
    • Routing .. you're on your own!
    • Application / Module

WebComponents

Standards for the new web.
  • Custom Elements
  • HTML Imports
  • Shadow DOM
  • Template

Polymer

Everything is an element!
  • a lib, not a framework on top of WebComponents
  • a different syntax to define reusable element .. declarative!
  • a set of ready-to-use elements (core-elements et paper-elements)
  • implements Material design

AngularJS Template





 

   
   
   
    
    
  • {{item.label}}
    •

Polymer Template

Template

AngularJS Polymer
powerful simple
reliable not as much
mature not yet

AngularJS Controller

a Controller is a JavaScript constructor function that is used to augment the Angular Scope.

Definition (JS)



myApp.controller('MyController', function MyController($scope) {
  $scope.message = 'Hello!';
});

Usage (HTML)





  {{message}}

Polymer

Nothing!*

* your own

AngularJS Service

Angular services are substitutable objects that are wired together using dependency injection.
A service is lazily instantiated singleton.

Definition (JS)



myApp.factory('myService', function myService(dep1, dep2, ...) {
  // initialize service
  return ..; // object or function
});

Usage (JS)



myApp.factory('myOtherService', function (myOtherService) {
  // ...
});

myApp.controller('MyController', function ($scope, $http, myOtherService) {
  $scope.message = 'Hello!';
});

Polymer

Nothing!

AngularJS Filter

Definition (JS)



myApp.filter('myFilter', function() {
  return function( input, arg1, arg2, ...) {
    // Transformation ...
    return output;
  };
});

Usage (HTML)



{{ expression | myFilter }}
{{ expression | myFilter:arg1:arg2:... }}

Polymer Filter

Definition (global)



PolymerExpressions.prototype.myFilter = function( input, arg1, arg2, ...) {
    // Transformation ...
    return output;
  }

Definition (in element)

Polymer({ // ... myFilter: function( input, arg1, arg2, ...) { // Transformation ... return output; } // ... })

Usage



{{ expression | myFilter }}
{{ expression | myFilter:arg1:arg2:... }}

AngularJS - Directive

Directives are markers on a DOM element that transforms it or attaches a specified behavior to it.

Definition (JS)



myApp.directive('myDirective', function() {
  return {
    restrict: 'E', // restrict to element (E), attribute (A) or class name (C)
    template: 'Template string with {{markup}} ...',
    // ...
  };
});

Usage (HTML)

Polymer - Custom Element

Custom element area just HTML elements!

Definition

Usage

Directive vs Custom Element

AngularJS Polymer
Definition complicated simplified
Usage flexible favors familiarity
Maturity mature not yet

Routing

Bad news!

There is no routing in Polymer.

Routing

Wait! That's not a bad news!

app-router ...

Routing

AngularJS Polymer
Routing sucks! 1 missing 2

1. ui-router

2. not really

Application / Module

You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.

Definition (JS)



  var myApp = angular.module('myApp', ['dep1', 'dep2', ...]);

Retrieval (JS)



  var myApp = angular.module('myApp');

Usage (HTML)





  ...

Element

DOM is the module system.
  • A module is an element*.
  • A view is an element*.
  • An application is an element*.

* either Polymer or plain native WebComponent

References

THE END