1. Angular Illumination
A BryanArbelo experience

2. 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 inTokyo 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

3. About 2 years ago – var Project = glamst.com
{task : “Migrate from JQuery to AngularJS”}

4. return Project.wasTooBig() == true

5. JQuery, I don’t like you anymore

6. I'm sorry but..
• You cannot scale up
• You are giving me too many bugs
• I cannot touch my html after coding with you

7. My code became a monster because of you

8. AngularJS seemed like alien technology!
Two way binding Modularity

9. .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

10. Results?
▪ More comprehensive code
▪ Less bugs
▪ More features much faster
▪ The code can scale forever
Performance?

11. 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)

12. Let's look at the Mockup!

13. The problems?
• The HTML on each page will be huge
• It will be repetitive
• Hard to read
• Making changes will not be intuitive

14. .sendRequest(“angular.js”,{reason:“I want more from html!”})
• Directives + $compile = dynamic programmable html
Let’s look at the results

15. Which one do you like the most?
This one?

16. Or this one?

17. 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.

18. Why stop here?
Dynamic programmable html!
A client side Jade?