Angular.js - JS Camp UKraine 2013

2,720 views

Published on

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

0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,720
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
129
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

Angular.js - JS Camp UKraine 2013

  1. 1. AngularJS Superheroic JavaScript FrameworkFriday, February 22, 13
  2. 2. Maksym Klymyshyn CTO at GVMachines Inc. (Zakaz.ua) @maxmaxmaxmaxFriday, February 22, 13
  3. 3. Background • Lead both-end developer @oDesk Inc. • Front-end consultant @Helios • OpenSource contributor • Conferences organizerFriday, February 22, 13
  4. 4. Now • Doesn’t work with front-end 6+ month • Never used AngularJS on production • Understand VALUE of AngularJS for businessFriday, February 22, 13
  5. 5. Friday, February 22, 13
  6. 6. Toc • What is AngularJS • Technical details • Numbers and value for business ownersFriday, February 22, 13
  7. 7. AngularJS?Friday, February 22, 13
  8. 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 logicFriday, February 22, 13
  9. 9. Author • Originally written by Misko Hevery • Created at Google as internal projectFriday, February 22, 13
  10. 10. Key points • 2-way data binding • dependency injection • directives (custom tags and attrs) • Form validation • RESTful • Binders, watches, events etc.Friday, February 22, 13
  11. 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 solutionFriday, February 22, 13
  12. 12. It fits well • CRUD applications • CRMs, Admin-panels • Single-page apps • Push-notification-based apps • Mobile appsFriday, February 22, 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: WikipediaFriday, February 22, 13
  14. 14. Definitely not the first tool to develop a gameFriday, February 22, 13
  15. 15. Technical detailsFriday, February 22, 13
  16. 16. Bootstrap $ yeoman init angular $ ls Gruntfile.js! ! test app testacular.conf.js package.jsonFriday, February 22, 13
  17. 17. Bootstrap Structure app/views app/scripts/vendor app/scripts/controllers/ app/scripts/app.js app/index.html Server $ yeoman serverFriday, February 22, 13
  18. 18. Friday, February 22, 13
  19. 19. ArchitectureFriday, February 22, 13
  20. 20. ArchitectureFriday, February 22, 13
  21. 21. Typical appFriday, February 22, 13
  22. 22. Major parts • Scope • Filters • Model • Module • View • Injector • Controller • Services • DirectiveFriday, February 22, 13
  23. 23. Scope The scope detecting changes to the model section and provides the execution context for expressions. • Provide context for • Isolated scopes (for expressions widgets) • Scopes are hierarchical • Watches nestedFriday, February 22, 13
  24. 24. ScopeFriday, February 22, 13
  25. 25. Model Model is view’s data. No requirements. No restrictionsFriday, February 22, 13
  26. 26. Model Controller: $scope.data = { title: “Test title”, id: 1, content: “Some content” }; View: <div id=”{{ data.id }}”> <h1>{{ data.title }}</h1> <p>{{ data.content }}</p> </div>Friday, February 22, 13
  27. 27. AWESOMEFriday, February 22, 13
  28. 28. View • View looks like template • It’s declarative • Very close to HTML markup • It handle directives • Update DOM partiallyFriday, February 22, 13
  29. 29. View $scope.content = [ “paragraph 1”, “paragraph 2”, “paragraph 3” ]; <div ng-repeat=”p in content”> <p>{{ p }}</p> </div>Friday, February 22, 13
  30. 30. ViewFriday, February 22, 13
  31. 31. Controller JavaScript code behind the view • Manage application behavior • Support of many views, for example desktop and mobile versions with different views but same controllerFriday, February 22, 13
  32. 32. Controller MyModule.controller(MainCtrl, [ "$scope", function($scope) { $scope.name = "Max"; $scope.content = [ "paragraph 1", "paragraph 2", "paragraph 3" ]; }]);Friday, February 22, 13
  33. 33. Directive Directive is a behavior or DOM transformation • Provide ability to extend HTML • Custom tags, attributes or classes • Bi-directional binding of nested scopes • Async directives processingFriday, February 22, 13
  34. 34. 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 }; });Friday, February 22, 13
  35. 35. Filters Perform data transformation • Very useful with locales • Number formatters, text highlighting and so onFriday, February 22, 13
  36. 36. 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; }; });Friday, February 22, 13
  37. 37. 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: / }); }]);Friday, February 22, 13
  38. 38. Injector Service locator, Dependency Injection patternFriday, February 22, 13
  39. 39. Why? Minification $ yeoman build ... # Error: Unknown provider: aProvider <- a Wrong ... MainCtrl, function($scope) { ... Correct ... MainCtrl, ["$scope", function($scope) { ...Friday, February 22, 13
  40. 40. 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/RESTFriday, February 22, 13
  41. 41. Toolchain • End-to-end - e2e testing, similar to Jasmine • Yeoman - dev & build server, projects skeleton • Batarang - plugin for Chrome • Testicular - tests frameworkFriday, February 22, 13
  42. 42. Third-party apps • Angular-UI • Anglebars.js • jQuery mobile + Angular.js • ngGridFriday, February 22, 13
  43. 43. Show me the moneyFriday, February 22, 13
  44. 44. 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.Friday, February 22, 13
  45. 45. 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 startupsFriday, February 22, 13
  46. 46. Community • 7001 followers on • 9371 followers on github twitter • 1158 forks! • 316 videos on YouTube • 1619 closed issues • 127 presentations on SlideShare • 391 open issuesFriday, February 22, 13
  47. 47. AWESOME TextFriday, February 22, 13
  48. 48. Thanks. Questions?Friday, February 22, 13

×