Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Grown-up javascript with AngularJS

4,840 views

Published on

Surprisingly many web developers don't realize that Javascript ecosystem is not the same as it was few years ago, when building a single-page web application was considered risky business.

Those times are way behind. Modern javascript MVC frameworks are if not silver, but certainly solid bullets which every person who wants to use benefits of evolution should be aware of.

I'll tell you about challenges that happen when you build a single-page application, about REST interface, and certainly about one of such frameworks: AngularJS, created by hackers from Google keeping in mind best software development principles such as TDD and dependency injections. That's why writing with AngularJS is such a pleasure.

Published in: Technology, Design
  • Sex in your area is here: ♥♥♥ http://bit.ly/369VOVb ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❤❤❤ http://bit.ly/369VOVb ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Grown-up javascript with AngularJS

  1. 1. Grown-up JavaScript. with AngularJS Mykhailo Kotsur @sotomajor_ua
  2. 2. We will talk about• Different ways to build a web-app• Why in Javascript?• AngularJS: things that make it rock• Samples• Code talks
  3. 3. Multi page application
  4. 4. ... Downloading page
  5. 5. ... Downloading page... Rendering page
  6. 6. ... Downloading page... Rendering page ... Loading external resources
  7. 7. ... Downloading page... Rendering page ... Loading external resources ... Executing scripts
  8. 8. We want:
  9. 9. We want:Smooth user experience
  10. 10. We want:Smooth user experience Unload our servers
  11. 11. Single page application
  12. 12. http://www.flickr.com/photos/60988113@N06/5996111491/sizes/z/in/photostream/ http://www.lurvely.com/photo/491666425/Thin_tree_at_Lagoinha_Beach/
  13. 13. Thick server
  14. 14. Thick server- Grab data - Talk to server- Business stuff - Prepare HTML- Prepare HTML
  15. 15. Thick server- Grab data - Talk to server- Business stuff - Prepare HTML- Prepare HTML
  16. 16. We want
  17. 17. We wantSmooth experience!
  18. 18. We want Also for formSmooth experience! s!
  19. 19. We want Also for formSmooth experience! s! Unload servers!
  20. 20. We want Also for formSmooth experience! s! Unload servers!Simplify development!
  21. 21. We want Also for formSmooth experience! s! Unload servers!Simplify development!Make server reusable!
  22. 22. Many clients - one server
  23. 23. Thin server- Grab data - Talk to server- Business stuff - Prepare view
  24. 24. Thin server ?- Grab data - Talk to server- Business stuff - Prepare view
  25. 25. State Transfer REpresentationalhttp://www.flickr.com/photos/film_images/5687432148/
  26. 26. VerbsPOST GET PUTDELETE
  27. 27. VerbsPOST CREATE GET READ PUT UPDATEDELETE DELETE
  28. 28. Nouns people
  29. 29. Nouns peopleContent types text/xml text/html application/json
  30. 30. Responses• 200 - OK• 201 - Created• 204 - No content• 404 - Not found• ... many more
  31. 31. “Sentences”GET me /people in format of application/json
  32. 32. “Sentences”GET me /people in format of application/json200! Here is your application/json
  33. 33. “Sentences”GET me /people in format of application/json200! Here is your application/json[ {id: 1, name: “Mike”}, {id: 2, name: “Tom”}]
  34. 34. “Sentences”POST to /people in format of application/json{name: “Jason”}
  35. 35. “Sentences”POST to /people in format of application/json{name: “Jason”}200! Here is your application/json{id: 3, name: “Jason”}
  36. 36. Our achievements:• Happy users• Less hardware• Fair responsibility separation• To be used by many clients
  37. 37. Our achievements:• Happy users• Less hardware• Fair responsibility separation• To be used by many clients
  38. 38. Any drawbacks?
  39. 39. http://www.flickr.com/photos/chalkbass/2334850242/sizes/z/in/photostream/ SEO
  40. 40. What now?• Data binding• Routing• Template engine• Tests
  41. 41. 2.5 years in development
  42. 42. 2.5 years in developmentVersion 1.0 few weeks ago
  43. 43. 2.5 years in developmentVersion 1.0 few weeks agoUsed in Google’s production projects
  44. 44. 2.5 years in developmentVersion 1.0 few weeks agoUsed in Google’s production projects3 people of core team + hundreds of community
  45. 45. 2.5 years in developmentVersion 1.0 few weeks agoUsed in Google’s production projects3 people of core team + hundreds of communityMakes web development fun again!
  46. 46. Easy data binding
  47. 47. Easy data bindingDeclarative approach
  48. 48. Easy data bindingDeclarative approachRouting and templating
  49. 49. Easy data bindingDeclarative approachRouting and templatingDI and TDD as a design base (15000+ tests)
  50. 50. Easy data binding
  51. 51. Easy data binding
  52. 52.    <h1>Hello, <span id="namePlaceholder"></span></h1>    <input id="name" type="text">    <script type="text/javascript">        $(            $(#name).keydown(function(e) {                $(#namePlaceholder).html(e.target.value);            })        );    </script>
  53. 53. <h1>Hello, {{name}}</h1><input type="text" ng-model="name">
  54. 54. Declarative approach
  55. 55. <div id="base"></div><script type="text/javascript">  $(      $([[Ciao, ‫ ,שלום‬Привіт]]).each( function(k,v) {          $(#base).append($(<h1>Hello, + v + </h1>));      })  );</script>
  56. 56. <h1 ng-repeat="n in [Ciao, ‫ ,שלום‬Привіт]"> Hello, {{n}}</h1>
  57. 57. Routing and templating http://example.com/#!/register
  58. 58. ???
  59. 59. $routeProvider.when(  /example,  {templateUrl: ./js/templates/example.html});
  60. 60. ???
  61. 61. var SomeCtrl = function($scope, $element, $location) {...}
  62. 62. it(should just work, inject(function($controller) {     var location = {path: function() {return /;}}     $controller(        TabsCtrl,        {$scope: scope, $element: base, $location: location}     );    expect(something).toBeTruthy();}));
  63. 63. $httpBackend.whenGET(http://api.com).respond({...});$httpBackend.whenGET(/.*/).passThrough();
  64. 64. Production examples
  65. 65. Hello world example If you read this presentation on your own, checkout theexample from: http://github.com/mkotsur/flatometer and walk thru all steps with http://bit.ly/N2MyVU and read commit messages...
  66. 66. Questions? http://mkotsur.github.com/gitoscop/http://angularjs.org http://github.com/mkotsur/flatometer

×