Jan- Kees van Andel So0ware Architect, JPoint, @jankeesvanandel 1 1
What I always liked about programming 2 2
And it keeps getting better... 3 3
Also for the web 4 4
Not only games 5 5
And not only WebGL 6 6
And not only WebGL 6 6
And not only WebGL 6 6
That s what our customers expect! 7 7
And then our answer... 8 8
9 9
10 10
Web development with Java (EE) 11 11
12 12
JQuery anyone? 13 13
Did you ever build a large scale application using JQuery? Was it maintainable? Was it flexible? Did you have unit tests? Did the codebase feel safe? app.saveobj = function(obj) { obj.rowstosave = obj.rows.length; $.post(someurl,obj,function(data) { $.each(obj.rows,function() { var row = this; row.parentid = data.id; obj.imgstosave += row.imgs.length; $.post(otherurl,row,function(data2) { $.each(row.imgs,function() { this.rowid = data2.id; $.post(uplourl,this,function() { obj.imgstosave--; if (obj.imgstosave == 0) { app.renderobj(obj); } }); }); }); }); }); }; 14 14
And then came: Backbone.js Ember.js KnockoutJS Batman.js, Dart, RequireJS, Meteor... Check them out at: http://todomvc.com/ 15 15
AngularJS AngularJS is what HTML would have been, had it been designed for building web- apps. 16 16
MVC/MVVM/MVW framework MVW: Model View Whatever, Whatever works for you Declarative + imperative model Dependency injection Testability 17 17
Features 2-way databinding + templating MVC + Dependency Injection + modules Server communication Custom directives Validation, formatting, etc Routing / navigation 18 18
First AngularJS AngularJS app Bootstrapping Templates 2-way data binding Controllers Scope 19 19
First AngularJS AngularJS app ngrepeat filters HTML validation Routing / ngview $routeparams 20 20
More advanced features Dependency Injection Services Server communication Asynchronous processing / $q Events 21 21
More advanced features Configuration phase Fixing common issues Fixing flashes with ngbind / ngcloak Debugging routing issues Resolve objects before Controller is invoked 22 22
More advanced features Form validation CSS classes Minification 23 23
Directives Way to extend HTML ng-controller, ng-repeat, etc. Integration with 3th party libraries Place for imperative coding Reusable components 24 24
Common piballs 25 25
Re- implement the wheel AngularJS provides $hip, $route, $q modules, etc And direclves ng- show, ng- hide, ng- repeat, etc Almost no need for other libraries! <div ng-hide=!somerequiredcheck > </div> 26 26
JavaScript s prototypical inheritance <div ng-controller= ParentCtrl > Parent <input ng-model= name > <div ng-controller= ChildCtrl > Hello <input ng-model= name > </div> </div> Rename name to myobject.name 27 27
28 28
JavaScript s prototypical inheritance <div ng-controller= ParentCtrl > Parent <input ng-model= name > <div ng-controller= ChildCtrl > Hello <input ng-model= myobject.name > </div> </div> Always include such a wrapper object in your $scope 28 28
JavaScript s prototypical inheritance, part 2 Or use AngularJS >= 1.1.5 New Controller as syntax <div ng-controller= MyCtrl as my > {{my.name}} </div> 29 29
Async is not gone! Angular is mostly async transparent But 3th party direclves don t have to be! 30 30
Bad separalon of concerns Model- manipulalon/event handling goes in Controllers Generic logic/singleton stuff goes into Services and Factories DOM manipulalon goes in direclves Please keep direclves small, generic and modular 31 31
Hand- craming CSS in HTML ngclass to the rescue <ul> <li ng-repeat= item in items ng-class= { active : item.active, open :!item.isclosed} > {{item.name}} </li> </ul> 32 32
Quickstart Lps & tricks 33 33
QuesLon: Is IE supported? Answer: Yes, but it may require some work on IE < 9 See http://docs.angularjs.org/guide/ie 34 34
QuesLon: Is AngularJS slow? Answer: Despite continuous dirty checking, Angular is really quick Make sure your scope.$watch functions perform. AngularJS is used on large systems with 100k+ bindings 35 35
QuesLon: Is AngularJS used in the real world? Answer: Yes it is used on both Google and non-google projects, including money-making Google projects 36 36
QuesLon: How do I architect a big AngularJS application? Answer: Please don t! Separate your application in small, independent modules. Angular provides the features for this. PS. Angular apps typically have much less LOC s than other apps 37 37
QuesLon: How do I keep my app maintainable? Answer: Good architecture, and especially unit tests. JavaScript is not type-safe! 38 38
QuesLon: How do I start an Angular project? Answer #1: Use Angular Seed (official AngularJS skeleton) Answer #2: Go full stack with Yeoman and Grunt 39 39
QuesLon: Where do I put my DOM manipulation code? Answer #1: You don t need any Answer #2: DOM manipulation goes into directives 40 40
QuesLon: What about minification/obfuscation? app.controller( MyCtrl, function($scope, MySvc) {... Answer: Manually instructing Angular which parameters are needed app.controller( MyCtrl, [ $scope, MySvc, function(a, b) {... 41 41
QuesLon: How do I use JQuery? Answer: Just make sure that JQuery is loaded before Angular Otherwise strange things may happen 42 42
QuesLon: How do I use my cool XYZ JQuery plugin? Answer: Wrap it inside a directive and use scope.$apply() to notify the Angular digest cycle of any updates 43 43
QuesLon: Can I use animations on elements/navigation? Answer: Since 1.1.5 (currently unstable) animations are part of the core 44 44
QuesLon: Why the prefix $? Answer: $ is used as a prefix for Angular-managed dependencies, like $scope, $http, or parse. In a directive, scope is typically written without $, because it s not really injected 45 45
Where to go from here? 46 46
Build environment Yeoman Grunt / Bower +/- 100 generators available Based on Node.JS Karma (Testacular) Angular Batarang (Chrome Dev Plugin) 47 47
IntelliJ/PhpStorm/WebStorm JetBrains Chrome Plugin Live reload angularjs-plugin (by John Lindquist) Code completion & live templates 48 48
Libraries for Angular Angular UI Bootstrap directives Fancy Grid And others AngularStrap JQuery? Write your own directive! 49 49
Resources http://yeoman.io/ http://angularjs.org/ http://angular-ui.github.io/ http://www.egghead.io/ http://parleys.com/play/5148922b0364bc17fc56c91b 50 50
http://www.bennadel.com/ blog/2439-my-experience- With-AngularJS-The-Super- heroic-javascript-mvw- Framework.htm 51 51
QuesLons??? 52 52