Lightweight AngularJS

Lightweight AngularJS Minko Gechev

About me Freelancer, passionate about the web! github.com/mgechev twitter.com/mgechev {
"name": "Minko Gechev", "job": "Software Engineer", "responsibilities": ["development", "oo design", "trainings", “consultancy”], "interests": ["javascript", "webrtc", "algorithms", "data structures", "design patterns", "karate"] }

Table of Contents • Introduction to AngularJS • Light AngularJS
• DOM compiler • Provider • Scope • Services • Directives

Purpose of the presentation • Learn how AngularJS works by
building a simpliﬁed version of it • Understand design decisions behind the implementation of AngularJS

Introduction to AngularJS

AngularJS AngularJS is a JavaScript framework developed by Google. It
intends to provide a solid base for the development of CRUD Single-Page Applications (SPA). • two-way data binding • dependency injection • separation of concerns • testability • abstraction

Partials The partials are HTML strings. They may contain AngularJS
expressions inside the elements or their attributes. One of the distinctions between AngularJS and the others frameworks is the fact that AngularJS' templates are not in an intermediate format which needs to be turned into HTML.

<html ng-app> 
<body ng-controller="MyController"> <input ng-model="foo" value="bar">  <button ng-click="changeFoo()">{{buttonText}}</button> <script src="angular.js"></script> </body> </html>

Controllers The AngularJS controllers are JavaScript functions which help handling
the user interactions with the web application (for example mouse events, keyboard events, etc.) by attaching methods to the scope. All required external components, for the controllers are provided through the Dependency Injection mechanism of AngularJS.

function MyController($scope) { $scope.buttonText = 'Click me to change foo!';
$scope.foo = 42; $scope.changeFoo = function () { $scope.foo += 1; alert('Foo changed'); }; }

Scope In AngularJS the scope is a JavaScript object which
is exposed to the partials. The scope could contains different properties - primitives, objects or methods. All methods attached to the scope could be invoked by evaluation of AngularJS expression inside the partials associated with the given scope, or direct call of the method by any component which keeps reference to the scope.

<div ng-controller="BaseCtrl"> <div id="child" ng-controller="ChildCtrl"> <button id=“parent-method" ng-click="foo()">Parent method</button> <button
ng-click="bar()">Child method</button> </div> </div> <script> function BaseCtrl($scope) { $scope.foo = function () { alert('Base foo'); }; } function ChildCtrl($scope) { $scope.bar = function () { alert('Child bar'); }; } </script>

Directives In AngularJS the directives are the place where all
DOM manipulations should be placed.

Filters The filters in AngularJS are responsible for encapsulating logic
required for formatting data. Usually filters are used inside the partials but they are also accessible in the controllers, directives, services and other filters through Dependency Injection.

Services Every piece of logic which doesn't belong to the
components described above should be placed inside a service. Usually services encapsulate the domain speciﬁc logic, persistence logic, XHR, WebSockets, etc.

myModule.factory('Developer', function () { return function Developer() { this.name =
'Foo'; this.motherLanguage = 'JavaScript'; this.code = function () {}; this.live = function () { while (true) { this.code(); } }; }; }); function MyCtrl(Developer) { var developer = new Developer(); developer.live(); }

Light AngularJS implementation

Restrictions • Our light AngularJS provides basic support of only:
• Controllers • Directives • Services • Scope

And is on only ~200 SLOC

DOMCompiler Provider Scope

Provider Responsibilities: • Register components (directives, services, controllers) • Resolves
dependencies of the components • Initialize the components

Provider interface • get(name, locals) - returns given service
• invoke(fn, locals) - initialize given service • directive(name, fn) - registers a directive • controller(name, fn) - registers a controller • service(name, fn) - registers a service • annotate(fn) - returns an array of the dependencies of given service

DOMCompiler Responsibilities: • Compiles the DOM • Traverse the whole
DOM tree • Finds registered directives • Invokes the logic associated with them • Manages the current scope

DOMCompiler interface • bootstrap() - bootstraps the app •
callDirectives(el, scope) - invokes directive associated to given element • compile(el, scope) - compiles the subtree with root given element

Scope • Watches expressions • Evaluates all watched expressions on
each $digest loop • Invokes the associated logic on change of the expression result, compared to the previous call of $digest

Scope interface • $watch(exp, fn) - associates given function to
an expression • $eval(exp) - evaluates given expression • $new() - creates new scope, child of the current • $destroy() - destroys given scope • $digest() - performs dirty checking

Lets start one by one

Provider

Register Components //... directive: function (name, fn) { this._register(name +
Provider.DIRECTIVES_SUFFIX, fn); }, controller: function (name, fn) { this._register(name + Provider.CONTROLLERS_SUFFIX, function () { return fn; }); }, service: function (name, fn) { this._register(name, fn); }, _register: function (name, factory) { this._providers[name] = factory; } //...

Sample calls Provider.directive('ng-bind', function () { return { link: function
(scope) { //... } }; }); Provider.directive('ng-repeat', function () { return { scope: true, link: function (scope) { //... } }; });

Creating components…

But before that…a little theory…

Graph theory

Says: “Formalize all the things!!” FTW!

Graph is… Ordered pair of two sets: G = {
V, E }, E ⊆ VxV

Or simply… A B E D C

Why the f#%& we need math here?

HTML <html> <head> </head> <body> <p></p> <div></div> </body> </html>

DOM Tree html head body p div

Dependency graph $resource $q $http $httpBackend $browser

A typical problems in graph theory • Check whether given
vertex has speciﬁc property • Visit a subset of the the vertices of given graph • …

How to ﬁnd all elements with associated directive in given
DOM tree?

DOM Tree === Acyclic undirected graph

Traverse the DOM tree Two basic algorithms: • Breath-First Search
(BFS) • Finds the shortest path between nods • Depth-First Search (DFS) • Finds any path

We can represent graphs by… • A matrix A, where
A[i][j] will be equals to 1 if and only if there is a path between i and j, otherwise it’ll be equals to 0.

Example… 0 3 4 1 2 0 1 1 1
0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0

DFS JavaScript implementation function dfs(graph, current, visited) { 'use strict';
visited = visited || []; if (visited[current]) { return; } visited[current] = true; for (var k = 0; k < graph.length; k += 1) { if (graph[current][k] && !visited[k]) { dfs(graph, k, visited); } } }

Lets go back to our implementation

Provider…get a service

directive: function (name, fn) { … }, controller: function (name,
fn) { … }, service: function (name, fn) { … }, _register: function (name, factory) { … }, get: function (name, locals) { if (this._cache[name]) { return this._cache[name]; } var provider = this._providers[name]; if (!provider || typeof provider !== 'function') { return null; } return (this._cache[name] = this.invoke(provider, locals)); }, _cache: {}

annotate: function (fn) { var res = fn.toString() .replace(/((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg, '')
.match(/$(.*?)$/); if (res && res[1]) { return res[1].split(',').map(function (d) { return d.trim(); }); } return []; }, invoke: function (fn, locals) { locals = locals || {}; var deps = this.annotate(fn).map(function (s) { return locals[s] || this.get(s, locals); // Indirect recursion }, this); return fn.apply(null, deps); }

Before miniﬁcation this.annotate(function ($http, $q, $browser) { //... }); //
[“$http”, “$q”, “$browser”]

After miniﬁcation… this.annotate(function (a, b, c) { //... }); //
[“a”, “b”, “c”]

one more problem…

A E C B D

a cycle…

upsss….

DOMCompiler

//... compile: function (el, scope) { scope = this.callDirectives(el, scope);
[].forEach.call(el.children || [], function (d) { this.compile(d, scope); // Recursive call }.bind(this)); } //...

//... callDirectives: function (el, $scope) { var isCreated = false;
[].map.call(el.attributes || [], function (attr) { var directive = Provider.get(attr.name + Provider.DIRECTIVES_SUFFIX); return directive && { expr: attr.value, provision: directive }; }) // takes all expressions with value evaluated to true // i.e. if such directive exists the literal will // be returned .filter(Boolean) .forEach(function (d) { if (d.provision.scope && !isCreated) { isCreated = true; $scope = $scope.$new(); } d.provision.link(el, $scope, d.expr); }); return $scope; } //...

$rootScope $scope0 $scope1 $scope3 $scope4 $scope2

function Scope(parent, id) { 'use strict'; this.$$watchers = []; this.$$children
= []; this.$parent = parent; this.$id = id || 0; }

Scope.prototype.$new = function () { 'use strict'; Scope.counter += 1;
var obj = new Scope(this, Scope.counter); Object.setPrototypeOf(obj, this); this.$$children.push(obj); return obj; }; Scope.prototype.$destroy = function () { 'use strict'; var pc = this.$parent.$$children; pc.splice(pc.indexOf(this), 1); };

Dirty Checking

Scope.prototype.$watch = function (exp, fn) { 'use strict'; this.$$watchers.push({ exp:
exp, fn: fn, last: Utils.clone(this.$eval(exp)) }); };

Scope.prototype.$digest = function () { 'use strict'; var dirty, watcher,
current, i; do { dirty = false; for (i = 0; i < this.$$watchers.length; i += 1) { watcher = this.$$watchers[i]; current = this.$eval(watcher.exp); if (!Utils.equals(watcher.last, current)) { watcher.last = Utils.clone(current); dirty = true; watcher.fn(current); } } } while (dirty); for (i = 0; i < this.$$children.length; i += 1) { this.$$children[i].$digest(); // Recursive call } };

and a few directives…

Provider.directive('ngl-click', function () { 'use strict'; return { scope: false,
link: function (el, scope, exp) { el.onclick = function () { scope.$eval(exp); scope.$digest(); }; } }; });

one-way binding…

Provider.directive('ngl-bind', function () { 'use strict'; return { scope: false,
link: function (el, scope, exp) { el.innerHTML = scope.$eval(exp); scope.$watch(exp, function (val) { el.innerHTML = val; }); } }; });

two-way binding

Provider.directive('ngl-model', function () { 'use strict'; return { link: function
(el, scope, exp) { el.onkeyup = function () { scope[exp] = el.value; scope.$digest(); }; scope.$watch(exp, function (val) { el.value = val; }); } }; });

lets take a look at the following snippet…

setTimeout & setInterval <script> function Ctrl($scope) { $scope.counter = 0;
setTimeout(function () { $scope.counter += 1; }, 1000); } </script> <div ng-controller="Ctrl"> <span ng-bind="counter"></span> </div>

how AngularJS knows count has been changed?

…it doesn’t

setTimeout & setInterval <script> function Ctrl($scope) { $scope.counter = 0;
setTimeout(function () { $scope.counter += 1; $scope.$digest(); //Note that in AngularJS you should use $apply }, 1000); } </script> <div ng-controller="Ctrl"> <span ng-bind="counter"></span> </div>

$timeout Provider.service('timeout', function ($rootScope) { 'use strict’; return function (fn,
timeout) { setTimeout(function () { fn(); $rootScope.$digest(); }, timeout); }; });

how about 2k-3k bindings?

then dirty checking is not reliable…

Object.observe Already in Chrome

Thank you! github.com/mgechev twitter.com/mgechev

Resources • Source code of AngularJS • AngularJS tutorial •
AngularJS Dev Guide • Source code from the slides • AngularJS in Patterns • AngularJS style guide

Lightweight AngularJS

Lightweight AngularJS

More Decks by Minko Gechev

Other Decks in Programming

Featured

Transcript