This document discusses how to build rich web applications by following REST principles and leveraging HTTP. It outlines the history of SOAP and XML-RPC and their limitations compared to REST. It then discusses how AngularJS embraces REST constraints like statelessness, caching, and hypermedia controls. The document argues that AngularJS simplifies building RESTful applications through features like data binding, iteration, organization, and testability compared to alternatives like jQuery. It also shows how to build RESTful resources and APIs in AngularJS using $resource and discusses implementing other HTTP features like caching, authentication, and content negotiation.

1. HTTP ALL THE THINGS
Simplifying Rich Applications by
Respecting the Rules of the Web

2. Me
Nate Abele
Former lead developer, CakePHP
Founder & current lead developer, Lithium
Member, AngularUI
@nateabele

3. History

4. 1998: SOAP & XMLRPC

5. SOAP
<?xml version="1.0"?>
<soap:Envelope xmlns:soap="http://www.w3.org/2003/05/soap-envelope">
<soap:Header></soap:Header>
<soap:Body>
<m:SomeCommand xmlns:m="...">
<m:BodyOfMessage>...</m:BodyOfMessage>
</m:SomeCommand>
</soap:Body>
</soap:Envelope>

6. Or...

7. XML-RPC
<?xml version="1.0"?>
<methodCall>
<methodName>examples.getStateName</methodName>
<params>
<param>
<value><i4>40</i4></value>
</param>
</params>
</methodCall>

8. :-(
POST *
Invocaction details in body
Format lock-in
No relationships
No discoverability

9. 2000: REST

10. REST Constraints
Client-Server
Stateless
Cacheable
Uniform Interface
Opaque Layering
Code-on-Demand

11. The 4 Levels
RPC over HTTP (i.e. SOAP)
Resources
Verbs
Hypermedia Controls

12. Now: Hypermedia /
HATEOAS

13. ¿Hypermedia?
Content negotiation
State traversal

14. Content negotiation
application/json ...?

15. Content negotiation
application/json
FALE

16. Content negotiation
Better:
application/rss+xml

17. Content negotiation
application/vnd.twitter.stream+json
// I can decode this!
json_decode()
/**
* I can understand this
!
*/
class Tweet {
protected $username;
protected $text;
// ...
}

18. State traversal

20. Client: “What's next?”

21. We already do this!

22. Browsers
<link rel="stylesheet" href="/css/app.css" />
<link rel="next" href="/next" />
<link
rel="alternate"
type="application/rss+xml"
href="/posts.rss"
/>

23. Users
(with the help of browsers)
<a href="/next" />Next</a>
<form></form>

24. Atom?
<link
rel="foo"
type="text/foo"
href="http://foo"
/>

25. JSON!
[{
title: "Finish the demo",
completed: false,
$links: {
self: { href: "http://my.app/tasks/1138" },
owner: { href: "http://my.app/users/nate" },
subtasks: { href: "http://my.app/tasks/1138/subtasks"}
}
}]

26. Why?

27. AngularJS

28. Valid alternatives
EmberJS
KnockoutJS
Backbone (kind of, not really)

29. AngularJS
Higher level of abstraction
Simple, well-designed architecture
Ridiculously simple unit testing

30. Event binding

31. Event binding
jQuery
<input type="text" id="name" />
<h1>Hello!</h1>
<script type="text/javascript">
$(document).ready(function() {
$('#name').keydown(function(e) {
$('h1').html("Hello " + e.target.value + "!")
});
});
</script>

32. Event binding
AngularJS
<input type="text" ng-model="name" />
<h1>Hello {{ name }}!</h1>
Hello !

33. Iteration
jQuery
<ul class="greetings"></ul>
<script type="text/javascript">
$(["Hello", "Hola", "Ciao"]).each(function(k, v) {
$(".greeting").append("<li>" + v + " World</li>"
});
</script>

34. Iteration
AngularJS
<ul>
<li ng-repeat="greet in ['Hello', 'Hola', 'Ciao']">
{{ greet }} World
</li>
</ul>
Hello World
Hola World
Ciao World

35. <ul>
<li ng-repeat="greet in ['Hello', 'Hola', 'Ciao']">
{{ greet }} World
</li>
</ul>
Hello World
Hola World
Ciao World

36. Organization
AngularJS
Item:
Qty: 0
Price: 0
Total: $0.00
Total: $0.00

37. Organization
AngularJS
<div ng-controller="CheckoutController">
<div ng-repeat="item in items">
Item: <input type="text" ng-model="item.name">
Qty: <input type="number" ng-model="item.qty">
Price: <input type="number" ng-model="item.price">
Total: <div class="total">
{{ item.qty * item.price | currency: "$" }}
</div>
</div>
<hr>
<div>Total: {{ total() | currency: "$" }}</div>
</div>

38. Organization
AngularJS
function CheckoutController($scope) {
$scope.items = $scope.items || [{ price: 0, qty: 0 }];
$scope.total = function() {
if ($scope.items[$scope.items.length - 1].qty) {
$scope.items.push({ price: 0, qty: 0 });
}
return $scope.items.map(function(item) {
return item.qty * item.price;
}).reduce(function(a, b) {
return a + b;
});
};
}

39. Organization
jQuery
¿Ummm...?

40. Organization
jQuery
*shrug*

41. Testability
AngularJS
describe("Shopping cart", function() {
describe("Checkout widget", function() {
it("should create a default element", function() {
var scope = {},
controller = new CheckoutController(scope);
expect(scope.items.length).toBe(1);
expect(scope.items[0].qty).toBe(0);
expect(scope.items[0].price).toBe(0);
});
});
});

42. Testability
AngularJS
describe("Shopping cart", function() {
describe("Checkout widget", function() {
// ...
it("should calculate order total", function() {
var scope = { items: [
{ price: 2, qty: 4 }, { price: 10, qty: 1 }
]};
var controller = new CheckoutController(scope);
expect(scope.total()).toBe(18);
});
});
});

43. ¿jQuery...?

44. AngularJS + HTTP
Resources

45. $resource()

46. var Task = $resource("http://my.api/tasks/:id", {
id: "@id"
});
var newTask = new Task({
title: "New Task",
description: "..."
});
/* POST /tasks { "title": "New Task", ... } */
newPost.$save();

47. /* GET /tasks/5 */
var oneTask = Task.get({ id: 5 });
/* GET /tasks?completed=false&due=1381158984 */
var current = Task.query({
completed: false,
description: "..."
});

48. ¡Muy mal!
¡No me gusta!
¡Eso es shinaniganos!

49. Tight coupling
Client-side URL templates
Excessive parameters
No links!

50. Intent

51. /tasks?
completed=false
&due=1381158984

52. No meaning

53. /tasks/current

54. /tasks/:id

55. $resource("/posts/:id", {id:
"@id"});
{
id: 5,
title: "Something New",
slug: "something-new"
}

56. /posts/something-new
...?

57. What to do?

58. uor/angular-model
(on GitHub) *
* Current code is old and broken, new release coming tomorrow

59. modelProvider.model("Tasks", {
$instance: {
finish: function() {
this.completed = true;
return this.$save();
},
isCompleted: function() {
return !!this.completed;
}
}
});

60. Where's the URL?

61. 3 options

62. Automatic: /tasks

63. <link
rel="resource"
name="Tasks"
href="<?=$this->url('Tasks'); ?>"
/>

64. GET /
Accept:
application/vnd.resource-def+json

65. {
"Tasks": "http://my.app/tasks",
"Users": "http://my.app/users"
}

66. OPTIONS /tasks
Accept:
application/vnd.resourceschema+json

67. {
"title": "string",
"completed": "boolean",
...
}

68. More HTTP goodies
...that you don't need to
reinvent

69. HTTP Range
GET /rickroll.mp4
Range: bytes=10099999

70. HEAD /posts HTTP/1.1
...
HTTP 200 OK
Accept-Ranges: posts

71. GET /posts HTTP/1.1
Range: posts=1-20

72. HTTP Auth
Always use protection!

73. Caching
Implement any invalidation
strategy you can imagine

74. PHP?

75. nateabele/li3_resour
ces
(on GitHub)

76. Automatic CRUD manipulation with verbs
Parameter mapping
Links from model relationships
Schemas with OPTIONS
Proxies for mapping database values

77. Coming soon...
Range pagination
Smart search with ?q=...
...Tests (runs away)

78. Thanks!