• What
• Why
• How
• Design

A smaller Angular

Reading copy of Angular

80/20 edit

How big is Angular?

Angular squished into Backbone

BB: Unit of measure

Comparison

With cute

Cute will stay <= 1 BB

Why?

Separate great core idea

For learning

Library?

How

Features to implement

• compiler
• scopes
• directives
• controllers

Compiling

• Identify extensions to DOM
• Apply them within a specific scope

Requirements

• Recursive
• Control recursion - allow ng-repeat style abilities
• Capture DOM: 'transclusion'

Stages

1. For node, find directives
2. Apply directives in priority order, stopping if required
3. Return a function to link directives to a specific scope

Inside link

1. Run each directive's linking function
2. If compilation hasn't stopped, compile and link children

Scope

Allows watchers

scope.$watch(someExpressionOrFunction,function(now,was) {

// fires when the expression gives a different value
})

Watcher requirements

• knows when value changes
• storing values
• can be a string - compile/interpret

Angular features

• deep equality

Equality in JS

• HORRIBLE
• just edge cases, all the way down
• so: shallow equality + .isEqual(to)
• cheap watch, cheap clone, promotes good code

Expressions

<div te-style='{selected: s.item.state == "selected"}'>

<span te-bind="s.title(s.item)"></span>
</div>

var prop = scope.$eval("s.some.property")

Evaluation: 799 lines (0.86 BB)

'Angular script'

• null aware
• doesn't parse all of JS (ù̧͍̪̦̳̟͉̩ṇ̨̘̜͎̺̱͉͞i̛̻̩̠͟c҉̢̤̮̲̭̜̦͔̗͝ǫ̩̥̫̞͢ḏ̸̠̗e̝̖̩͔̺͈̺ͅ)
• not indented to be sandbox

Security vs surprise

• Angular's parser will ignore lots of JS
• How secure? Ish...
• Don't use cute with untrusted Javascript (is it a good idea... ever?)

Cute evaluation

• It's just Javascript: not a new language
• new Function("return (" + src + ")",'s','scope')(this,this)
• So s.foo() or s.foo.bar["baz"] && s.ƒƒƒƒ will work

Directives

• Passed through to a compile
• Not with a global registry like Angular

Directives

• Passed through to a compile
• Not with a global registry like Angular

Cute.compile(someEl,directives)

Controllers

• Passed through to directive
• Store object and add
• Again, can be local rather than global

var controllersA = {}
// ... more controller definitions
var directivesA = []
Cute.registerDirectives(directivesA,controllersA)
var withAControllers = Cute.compile(someEl,directivesA)

var controllersB = {}
// ... more controller definitions
var directivesB = []
Cute.registerDirectives(directivesB,controllersB)
var withBControllers = Cute.compile(someEl,directivesB)

Design

Cutting the magic

• No 'angular script'
• Pass directives + controllers directly
• Scope resolution clear 's.xxx'

Bootstrapping

• No ng-app directive: magic
• Explicit bootstrap:

var directives = []
var controllers = {}
// ... more controller definitions
Cute.registerDirectives(directives,controllers)
var rootAttach = Cute.compile(document.body,directives)

var rootScope = new Cute.Scope
rootAttach(rootScope)
rootScope.$apply()

Cutting the fat

What's the essence of Angular?

HTML compiler

• Angular's big idea

Accidents

Module-system: the superflous

• DI: great for Java
• Unit tests need 1 level mocks
• Functional test: stub the boundaries

Module-system: the bad

• 'It must be modular, I'm using modules'
• The 'controllers' module
• $rootScope as mutable global variable
• Singletons: 'but it said so in the docs'

Module-system

• Just a wrapper
• Put your old class/module definitions in a factory, done

Routing

• Why couple?

app.controller("top",function(scope) {

var someRouter = new SomeRouterLibrary()

// te-view listens for route events, pops in template + compiles

someRouter.on("route",function(route) {


var routeParams = slice(arguments,1)


scope.$broadcast.apply(scope,["route"].concat(routeParams))

})
})

HTTP

• Why couple?

var ajaxForCute = function(opts) {

if(opts.success) opts.success = Cute.wrap(ops.success)

if(opts.error) opts.error = Cute.wrap(ops.error)

return $.ajax(opts)
}

Core can hold back progress

• A bad version in core will be more popular than good module
• Having no core, or asking for replacements would promote development
• $resource, $router both feature poor

Promises

• A good idea
• Not necessary without periphery - $http, $resource etc
• Promises: 214 LOC (0.23 BB)

Things I learned

• AngularJS has a big, great idea in scopes + controllers
• It broke some rules: uses new Function
• It has really, really hairy code
• Big API = complex, hard to grok code

Next for cute

• Become a useable library? IE8+ or similar?
• Unit test vs angular?

Any other questions?

@timruffles, @sidekicksrc