AngularJS for the enterprise

Transcription

1 Jan- Kees van Andel So0ware Architect, 1 1

2 What I always liked about programming 2 2

3 And it keeps getting better

4 Also for the web 4 4

5 Not only games 5 5

6 And not only WebGL 6 6

7 And not only WebGL 6 6

8 And not only WebGL 6 6

9 That s what our customers expect! 7 7

10 And then our answer

11 9 9

12 10 10

13 Web development with Java (EE) 11 11

14 12 12

15 JQuery anyone? 13 13

16 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

17 And then came: Backbone.js Ember.js KnockoutJS Batman.js, Dart, RequireJS, Meteor... Check them out at:

18 AngularJS AngularJS is what HTML would have been, had it been designed for building web- apps

19 MVC/MVVM/MVW framework MVW: Model View Whatever, Whatever works for you Declarative + imperative model Dependency injection Testability 17 17

20 Features 2-way databinding + templating MVC + Dependency Injection + modules Server communication Custom directives Validation, formatting, etc Routing / navigation 18 18

21 First AngularJS AngularJS app Bootstrapping Templates 2-way data binding Controllers Scope 19 19

22 First AngularJS AngularJS app ngrepeat filters HTML validation Routing / ngview $routeparams 20 20

23 More advanced features Dependency Injection Services Server communication Asynchronous processing / $q Events 21 21

24 More advanced features Configuration phase Fixing common issues Fixing flashes with ngbind / ngcloak Debugging routing issues Resolve objects before Controller is invoked 22 22

25 More advanced features Form validation CSS classes Minification 23 23

26 Directives Way to extend HTML ng-controller, ng-repeat, etc. Integration with 3th party libraries Place for imperative coding Reusable components 24 24

27 Common piballs 25 25

28 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

29 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

30 28 28

31 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

32 JavaScript s prototypical inheritance, part 2 Or use AngularJS >= New Controller as syntax <div ng-controller= MyCtrl as my > {{my.name}} </div> 29 29

33 Async is not gone! Angular is mostly async transparent But 3th party direclves don t have to be! 30 30

34 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

35 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

36 Quickstart Lps & tricks 33 33

37 QuesLon: Is IE supported? Answer: Yes, but it may require some work on IE < 9 See

38 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

39 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

40 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

41 QuesLon: How do I keep my app maintainable? Answer: Good architecture, and especially unit tests. JavaScript is not type-safe! 38 38

42 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

43 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

44 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) {

45 QuesLon: How do I use JQuery? Answer: Just make sure that JQuery is loaded before Angular Otherwise strange things may happen 42 42

46 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

47 QuesLon: Can I use animations on elements/navigation? Answer: Since (currently unstable) animations are part of the core 44 44

48 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

49 Where to go from here? 46 46

50 Build environment Yeoman Grunt / Bower +/- 100 generators available Based on Node.JS Karma (Testacular) Angular Batarang (Chrome Dev Plugin) 47 47

51 IntelliJ/PhpStorm/WebStorm JetBrains Chrome Plugin Live reload angularjs-plugin (by John Lindquist) Code completion & live templates 48 48

52 Libraries for Angular Angular UI Bootstrap directives Fancy Grid And others AngularStrap JQuery? Write your own directive! 49 49

53 Resources

54 blog/2439-my-experience- With-AngularJS-The-Super- heroic-javascript-mvw- Framework.htm 51 51

55 QuesLons??? 52 52