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.

1. Grown-up JavaScript.
with AngularJS
Mykhailo Kotsur
@sotomajor_ua

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. Multi page application

5. ... Downloading page

6. ... Downloading page
... Rendering page

7. ... Downloading page
... Rendering page ... Loading external resources

8. ... Downloading page
... Rendering page ... Loading external resources
... Executing scripts

9. We want:

10. We want:
Smooth user experience

11. We want:
Smooth user experience
Unload our servers

12. Single page application

13. http://www.flickr.com/photos/60988113@N06/5996111491/sizes/z/in/photostream/
http://www.lurvely.com/photo/491666425/Thin_tree_at_Lagoinha_Beach/

14. Thick server

15. Thick server
- Grab data
- Talk to server
- Business stuff
- Prepare HTML
- Prepare HTML

16. Thick server
- Grab data
- Talk to server
- Business stuff
- Prepare HTML
- Prepare HTML

17. We want

18. We want
Smooth experience!

19. We want
Also
for
form
Smooth experience! s!

20. We want
Also
for
form
Smooth experience! s!
Unload servers!

21. We want
Also
for
form
Smooth experience! s!
Unload servers!
Simplify development!

22. We want
Also
for
form
Smooth experience! s!
Unload servers!
Simplify development!
Make server reusable!

23. Many clients - one
server

24. Thin server
- Grab data - Talk to server
- Business stuff - Prepare view

25. Thin server
?
- Grab data - Talk to server
- Business stuff - Prepare view

26. State
Transfer
REpresentational
http://www.flickr.com/photos/film_images/5687432148/

27. Verbs
POST
GET
PUT
DELETE

28. Verbs
POST CREATE
GET READ
PUT UPDATE
DELETE DELETE

29. Nouns
people

30. Nouns
people
Content types
text/xml
text/html
application/json

31. Responses
• 200 - OK
• 201 - Created
• 204 - No content
• 404 - Not found
• ... many more

32. “Sentences”
GET me /people in format of application/json

33. “Sentences”
GET me /people in format of application/json
200! Here is your application/json

34. “Sentences”
GET me /people in format of application/json
200! Here is your application/json
[
{id: 1, name: “Mike”},
{id: 2, name: “Tom”}
]

35. “Sentences”
POST to /people in format of application/json
{name: “Jason”}

36. “Sentences”
POST to /people in format of application/json
{name: “Jason”}
200! Here is your application/json
{id: 3, name: “Jason”}

37. Our achievements:
• Happy users
• Less hardware
• Fair responsibility separation
• To be used by many clients

38. Our achievements:
• Happy users
• Less hardware
• Fair responsibility separation
• To be used by many clients

39. Any drawbacks?

44. http://www.flickr.com/photos/chalkbass/2334850242/sizes/z/in/photostream/
SEO

45. What now?
• Data binding
• Routing
• Template engine
• Tests

48. 2.5 years in development

49. 2.5 years in development
Version 1.0 few weeks ago

50. 2.5 years in development
Version 1.0 few weeks ago
Used in Google’s production projects

51. 2.5 years in development
Version 1.0 few weeks ago
Used in Google’s production projects
3 people of core team + hundreds of community

52. 2.5 years in development
Version 1.0 few weeks ago
Used in Google’s production projects
3 people of core team + hundreds of community
Makes web development fun again!

54. Easy data binding

55. Easy data binding
Declarative approach

56. Easy data binding
Declarative approach
Routing and templating

57. Easy data binding
Declarative approach
Routing and templating
DI and TDD as a design base (15000+ tests)

58. Easy data binding

59. Easy data binding

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

61. <h1>Hello, {{name}}</h1>
<input type="text" ng-model="name">

62. Declarative approach

63. <div id="base"></div>
<script type="text/javascript">
$(
$([['Ciao', '‫' ,'שלום‬Привіт']]).each( function(k,v) {
$('#base').append($('<h1>Hello, ' + v + '</h1>'));
})
);
</script>

64. <h1 ng-repeat="n in ['Ciao', '‫' ,'שלום‬Привіт']">
Hello, {{n}}
</h1>

65. Routing and templating
http://example.com/#!/register

66. ???

67. $routeProvider.when(
'/example',
{templateUrl: './js/templates/example.html'}
);

69. ???

70. var SomeCtrl = function($scope, $element, $location) {
...
}

71. it('should just work', inject(function($controller) {
var location = {path: function() {return '/';}}
$controller(
TabsCtrl,
{$scope: scope, $element: base, $location: location}
);
expect(something).toBeTruthy();
}));

73. $httpBackend.whenGET('http://api.com').respond({...});
$httpBackend.whenGET(/.*/).passThrough();

76. Production examples

81. Hello world example
If you read this presentation on your own, checkout the
example from: http://github.com/mkotsur/flatometer and walk thru all
steps with http://bit.ly/N2MyVU
and read commit messages...

82. Questions?
http://mkotsur.github.com/gitoscop/
http://angularjs.org http://github.com/mkotsur/flatometer