angular illumination

Angular Illumination

A Bryan Arbelo experience

Who am I ?

▪ I am just a guy who is 22 years old

▪ I come from a tiny town in Uruguay

▪ I have been living in Tokyo for about 1 month

▪ I have been programming all kinds of things for the past 4 years

▪ And lastly, I grew up watching Pokemon wanting to be the very best

About 2 years ago – var Project = glamst.com

{task : “Migrate from JQuery to AngularJS”}

return Project.wasTooBig() == true

JQuery, I don’t like you anymore

I'm sorry but..

• You cannot scale up• You are giving me too many bugs• I cannot touch my html after coding with you

My code became a monster because of you

AngularJS seemed like alien technology!

Two way binding Modularity

.addRoute({when:"pain"},{takeMeTo:"light"})

▪ DOM Update? Gone

▪ Element querying? Gone

▪ Repeated HTML code? Gone

▪ Event binding? Gone

Code for :▪ ARCHITECTURE! WHO! WHERE!

▪ No two side dependency injection

▪ Dependency loading should be coordinated

▪ Angular constrained us, but it was for our own good

Results?

▪ More comprehensive code

▪ Less bugs

▪ More features much faster

▪ The code can scale forever

Performance?

Salesforce.Makerting.oversoldTo.PG_E

var task = function () {//here we will create a registration wizard in two months, with no

extra water or rations}

scope.$apply(task)

Let's look at the Mockup!

The problems?

• The HTML on each page will be huge

• It will be repetitive

• Hard to read

• Making changes will not be intuitive

.sendRequest(“angular.js”,{reason:“I want more from html!”})

• Directives + $compile = dynamic programmable html

Let’s look at the results

Which one do you like the most?

This one?

Or this one?

results.apply()

▪ Development of the Directive took about 2 weeks.

▪ In another week I had an AngularJS interface ready for all the steps of the registration wizard. So this process made the development very fast.

▪ While developing the client wanted many changes about the look and feel of the application, the fact that all the code for elements was in one place made this very easy.

Why stop here?

Dynamic programmable html!

A client side Jade?