Angular.js - JS Camp UKraine 2013

My talk about Angular.js at JS Camp Ukraine Feb 22, 2013, why angular is so awesome.

Transcript

1. AngularJS Superheroic JavaScript Framework odessa js Saturday, April 13, 13
2. Maksym Klymyshyn CTO at GVMachines Inc. (Zakaz.ua) @maxmaxmaxmax Saturday, April 13, 13
3. Background • Lead both-end developer @oDesk Inc. • Front-end consultant @Helios • OpenSource contributor • Conferences organizer Saturday, April 13, 13
4. Now • With AngularJS on production for internal tool • Understand VALUE of AngularJS for business Saturday, April 13, 13
5. Saturday, April 13, 13
6. TOC • What is AngularJS • Technical details • Numbers and value for business owners Saturday, April 13, 13
7. AngularJS? Saturday, April 13, 13
8. What is it? MVC framework by Google built around belief that declarative programming for building UIs, while imperative programming is excellent for expressing business logic Saturday, April 13, 13
9. Author • Originally written by Misko Hevery • Created at Google as internal project Saturday, April 13, 13
10. Key points • 2-way data binding • dependency injection • directives (custom tags and attrs) • Form validation • RESTful • Binders, watches, events etc. Saturday, April 13, 13
11. Difference • Lack of boilerplate code • Easy-to-create reusable components • Dead simple templates, no way to put business logic • Simple support of UI consistency • All-in-one solution Saturday, April 13, 13
12. It fits well • CRUD applications • CRMs, Admin-panels • Single-page apps • Push-notification-based apps • Mobile apps Saturday, April 13, 13
13. That won’t fly On Jun 8, 4:34 am, ganaraj p r <ganara...@gmail.com> wrote: > There should be some generic set of apps > for which angular would be > considered the wrong choice? > > Anyone figured out what set this would be? Good: Gmail Bad: Wikipedia Saturday, April 13, 13
14. Definitely not the first tool to develop a game Saturday, April 13, 13
15. Technical details Saturday, April 13, 13
16. Bootstrap $ yeoman init angular $ ls Gruntfile.js! ! test app testacular.conf.js package.json Saturday, April 13, 13
17. Bootstrap app/views app/scripts/vendor app/scripts/controllers/ app/scripts/app.js app/index.html Structure Server $ yeoman server Saturday, April 13, 13
18. Saturday, April 13, 13
19. Architecture Saturday, April 13, 13
20. Architecture Saturday, April 13, 13
21. Typical app Saturday, April 13, 13
22. Major parts • Scope • Model • View • Controller • Directive • Filters • Module • Injector • Services Saturday, April 13, 13
23. Scope • Provide context for expressions • Scopes are hierarchical nested • Isolated scopes (for widgets) • Watches The scope detecting changes to the model section and provides the execution context for expressions. Saturday, April 13, 13
24. Scope Saturday, April 13, 13
25. Model Model is view’s data. No requirements. No restrictions Saturday, April 13, 13
26. Model $scope.data = { title: “Test title”, id: 1, content: “Some content” }; <div id=”{{ data.id }}”> <h1>{{ data.title }}</h1> <p>{{ data.content }}</p> </div> Controller: View: Saturday, April 13, 13
27. Model booleans, strings, arrays, objects Saturday, April 13, 13
28. A W E S O M E Saturday, April 13, 13
29. View • View looks like HTML template • It’s declarative • Very close to HTML markup • It handle directives • Update DOM partially Saturday, April 13, 13
30. View <div ng-repeat=”p in content”> <p>{{ p }}</p> </div> $scope.content = [ “paragraph 1”, “paragraph 2”, “paragraph 3” ]; Saturday, April 13, 13
31. View Saturday, April 13, 13
32. Controller • Manage application behavior • Support of many views, for example desktop and mobile versions with different views but same controller JavaScript code behind the view Saturday, April 13, 13
33. Controller MyModule.controller('MainCtrl', [ "$scope", function($scope) { $scope.name = "Max"; $scope.content = [ "paragraph 1", "paragraph 2", "paragraph 3" ]; }]); Saturday, April 13, 13
34. Directive • Provide ability to extend HTML • Custom tags, attributes or classes • Bi-directional binding of nested scopes • Async directives processing Directive is a behavior or DOM transformation Saturday, April 13, 13
35. Directive MyApp.directive('message', function factory() { return { template: '<div class="msg" ng-transclude>’ + ‘</div>', replace: true, // replace original tag transclude: true, // put content to template // Element, possible Attr, Class, coMment restrict: 'E' }; }); Saturday, April 13, 13
36. Filters • Very useful with locales • Number formatters, text highlighting and so on Perform data transformation Saturday, April 13, 13
37. Filters MyApp.filter('title', function factory() { return function (input) { var ch = input.substring(0, 1); var rest = input.substring(1, input.length); return ch.toUpperCase () + rest; }; }); Saturday, April 13, 13
38. Module Services, directives, filters, and configuration var MyApp = angular.module('MyApp', []) .config([ '$routeProvider', function($routeProvider) { $routeProvider.when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }).otherwise({ redirectTo: '/' }); }]); Saturday, April 13, 13
39. Injector Service locator, Dependency Injection pattern Saturday, April 13, 13
40. Why? Minification $ yeoman build ... # Error: Unknown provider: aProvider <- a ... 'MainCtrl', ["$scope", function($scope) { ... ... 'MainCtrl', function($scope) { ... Wrong Correct Saturday, April 13, 13
41. Services • $compile - dynamic views compilation from string • $cookies - read/write cookies • $locatoin - work with browser’s location • $resource - factory to work with third- party services/REST Saturday, April 13, 13
42. Toolchain • End-to-end - e2e testing, similar to Jasmine • Yeoman - dev & build server, projects skeleton • Batarang - plugin for Chrome • Testicular - tests framework Saturday, April 13, 13
43. Saturday, April 13, 13
44. Third-party apps • Angular-UI • Anglebars.js • jQuery mobile + Angular.js • ngGrid Saturday, April 13, 13
45. Saturday, April 13, 13
46. Show me the money Saturday, April 13, 13
47. Rapid prototyping • No boilerplate code === less code to maintain • Simple tests suite === more motivation to write more tests • Two-way data binding === easy to develop push-based services, like PBX<->CRM, chats, notifications etc. Saturday, April 13, 13
48. Structured by design • Well structured codebase by design • Easy-to-understand templates • Fast and maintainable prototypes may become fast hypothesis check and robust solution. Recommended for startups Saturday, April 13, 13
49. Localytics refactoring Moved from Backbone to Angular http://www.localytics.com/blog/2013/angularjs-at-localytics/ Saturday, April 13, 13
50. Community • 7001 followers on github • 1158 forks! • 1619 closed issues • 391 open issues • 9371 followers on twitter • 316 videos on YouTube • 127 presentations on SlideShare Saturday, April 13, 13
51. Text AWESOME Saturday, April 13, 13
52. Thanks. Questions? Saturday, April 13, 13