Grown-up javascript with AngularJS
Upcoming SlideShare
Loading in...5
×
 

Grown-up javascript with AngularJS

on

  • 4,541 views

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....

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.

Statistics

Views

Total Views
4,541
Views on SlideShare
4,506
Embed Views
35

Actions

Likes
17
Downloads
189
Comments
0

3 Embeds 35

https://confluence.my.magora.com 16
https://twitter.com 15
http://www.twylah.com 4

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • What do I mean “Grown-up” Javascript?\nLecture:\n- Different approaches of web app;\n- Key features of AngularJS;\n- An example of angular JS app;\n- Let’s dive into the code and see what it takes to build an app from scratch.\n\nQuestions:\n- Who writes in JS at least once a week?\n- Who tried high-level JS frameworks. Something more fancy then Jquery?\n- Who is familiar with TDD?\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Forms submit breaks SPA.\nUnload servers - same problem, but on different scales.\nSmaller components - more complex development.\nThe last one is important!\n
  • Forms submit breaks SPA.\nUnload servers - same problem, but on different scales.\nSmaller components - more complex development.\nThe last one is important!\n
  • Forms submit breaks SPA.\nUnload servers - same problem, but on different scales.\nSmaller components - more complex development.\nThe last one is important!\n
  • Forms submit breaks SPA.\nUnload servers - same problem, but on different scales.\nSmaller components - more complex development.\nThe last one is important!\n
  • Forms submit breaks SPA.\nUnload servers - same problem, but on different scales.\nSmaller components - more complex development.\nThe last one is important!\n
  • \n
  • \n
  • What is REST? It’s just a style of communication between services in the Internet which employs HTTP as a language.\n\nStateless\nCacheable\nClean\n
  • It has verbs\n
  • It has resources\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • But let’s focus on web usage only. Now we have our server fully prepared to send us loads of data which we need.\n
  • \n
  • Javascript duck typing.\n
  • \n
  • \n
  • \n
  • If you build a really nice app, it will be recognized by the name;\nThere is still a way to do few almost static pages served by some backend, or CMS. But it will be separate app.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Declarative: what the program should accomplish, rather than describing how to go about accomplishing it.\nAnd what is important, you don’t need to torture your brain each time you are going to write something like this. It comes very natural.\n
  • \n
  • \n
  • Declatative: what the program should accomplish, rather than describing how to go about accomplishing it.\nAnd what is important, you don’t need to torture your brain each time you are going to write something like this. It comes very natural.\n
  • \n
  • \n
  • Declatative: what the program should accomplish, rather than describing how to go about accomplishing it.\nAnd what is important, you don’t need to torture your brain each time you are going to write something like this. It comes very natural.\n
  • Declatative: what the program should accomplish, rather than describing how to go about accomplishing it.\nAnd what is important, you don’t need to torture your brain each time you are going to write something like this. It comes very natural.\n
  • Those of you who were into automated testing, know very well about this problem.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Grown-up javascript with AngularJS Grown-up javascript with AngularJS Presentation Transcript

  • Grown-up JavaScript. with AngularJS Mykhailo Kotsur @sotomajor_ua
  • We will talk about• Different ways to build a web-app• Why in Javascript?• AngularJS: things that make it rock• Samples• Code talks
  • Multi page application
  • ... Downloading page
  • ... Downloading page... Rendering page
  • ... Downloading page... Rendering page ... Loading external resources
  • ... Downloading page... Rendering page ... Loading external resources ... Executing scripts
  • We want:
  • We want:Smooth user experience
  • We want:Smooth user experience Unload our servers
  • Single page application
  • http://www.flickr.com/photos/60988113@N06/5996111491/sizes/z/in/photostream/ http://www.lurvely.com/photo/491666425/Thin_tree_at_Lagoinha_Beach/
  • Thick server
  • Thick server- Grab data - Talk to server- Business stuff - Prepare HTML- Prepare HTML
  • Thick server- Grab data - Talk to server- Business stuff - Prepare HTML- Prepare HTML
  • We want
  • We wantSmooth experience!
  • We want Also for formSmooth experience! s!
  • We want Also for formSmooth experience! s! Unload servers!
  • We want Also for formSmooth experience! s! Unload servers!Simplify development!
  • We want Also for formSmooth experience! s! Unload servers!Simplify development!Make server reusable!
  • Many clients - one server
  • Thin server- Grab data - Talk to server- Business stuff - Prepare view
  • Thin server ?- Grab data - Talk to server- Business stuff - Prepare view
  • State Transfer REpresentationalhttp://www.flickr.com/photos/film_images/5687432148/
  • VerbsPOST GET PUTDELETE
  • VerbsPOST CREATE GET READ PUT UPDATEDELETE DELETE
  • Nouns people
  • Nouns peopleContent types text/xml text/html application/json
  • Responses• 200 - OK• 201 - Created• 204 - No content• 404 - Not found• ... many more
  • “Sentences”GET me /people in format of application/json
  • “Sentences”GET me /people in format of application/json200! Here is your application/json
  • “Sentences”GET me /people in format of application/json200! Here is your application/json[ {id: 1, name: “Mike”}, {id: 2, name: “Tom”}]
  • “Sentences”POST to /people in format of application/json{name: “Jason”}
  • “Sentences”POST to /people in format of application/json{name: “Jason”}200! Here is your application/json{id: 3, name: “Jason”}
  • Our achievements:• Happy users• Less hardware• Fair responsibility separation• To be used by many clients
  • Our achievements:• Happy users• Less hardware• Fair responsibility separation• To be used by many clients
  • Any drawbacks?
  • http://www.flickr.com/photos/chalkbass/2334850242/sizes/z/in/photostream/ SEO
  • What now?• Data binding• Routing• Template engine• Tests
  • 2.5 years in development
  • 2.5 years in developmentVersion 1.0 few weeks ago
  • 2.5 years in developmentVersion 1.0 few weeks agoUsed in Google’s production projects
  • 2.5 years in developmentVersion 1.0 few weeks agoUsed in Google’s production projects3 people of core team + hundreds of community
  • 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!
  • Easy data binding
  • Easy data bindingDeclarative approach
  • Easy data bindingDeclarative approachRouting and templating
  • Easy data bindingDeclarative approachRouting and templatingDI and TDD as a design base (15000+ tests)
  • Easy data binding
  • Easy data binding
  •    <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>
  • <h1>Hello, {{name}}</h1><input type="text" ng-model="name">
  • Declarative approach
  • <div id="base"></div><script type="text/javascript">  $(      $([[Ciao, ‫ ,שלום‬Привіт]]).each( function(k,v) {          $(#base).append($(<h1>Hello, + v + </h1>));      })  );</script>
  • <h1 ng-repeat="n in [Ciao, ‫ ,שלום‬Привіт]"> Hello, {{n}}</h1>
  • Routing and templating http://example.com/#!/register
  • ???
  • $routeProvider.when(  /example,  {templateUrl: ./js/templates/example.html});
  • ???
  • var SomeCtrl = function($scope, $element, $location) {...}
  • it(should just work, inject(function($controller) {     var location = {path: function() {return /;}}     $controller(        TabsCtrl,        {$scope: scope, $element: base, $location: location}     );    expect(something).toBeTruthy();}));
  • $httpBackend.whenGET(http://api.com).respond({...});$httpBackend.whenGET(/.*/).passThrough();
  • Production examples
  • 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...
  • Questions? http://mkotsur.github.com/gitoscop/http://angularjs.org http://github.com/mkotsur/flatometer