In the new brave world of decoupled and autonomous microservices, there’s a lot of knowledge, best practices and attention given to APIs. But once you start integrating these APIs in a UI, it quickly becomes a monolith of highly coupled components that replicate a lot of the functionality provided in the underlying APIs. As everyone probably knows and agrees to by now, monoliths are not a design goal. By making your UI compositional through hosted views and by moving some of the business logic from the client to the server through the use of hypermedia, you can achieve full vertical integrations that are horizontally decoupled in a microservice fashion all the way from the persistence layer and up to the user interface.

1. GET /presentation HTTP/1.1
HTTP/1.1 200 OK
Content-Type: application/json
{
"what": "Compositional UIs
With Hosted Views And Hypermedia",
"where": "Nordic APIs 2018 Platform Summit",
"when": "2018-10-24T13:20+02:00"
}

2. Asbjørn Ulsberg
Digital Experience Architect

3. <concepts>
<compositional-ui/>
<hosted-views/>
<hypermedia/>
</concepts>

5. <hypermedia>

7. Designing A True REST State Machine

14. Pick up package at post office

15. Pick up package at post office

16. Pick up package at post office

17. Pick up package at post office

18. Pick up package at post office

19. Pick up package at post office

20. Pick up package at post office

21. Pick up package at post office

22. Pick up package at post office

23. Pick up package at post office

24. Pick up package at post office

25. Pick up package at post office

26. Pick up package at post office

27. Pick up package at post office

28. Pick up package at post office

29. Pick up package at post office

30. Package Retrieval Instruction Manual

31. </hypermedia>

32. <hosted-views>

34. <iframe>
<script>

35. </hosted-views>

36. <compositional-ui>

37. Composition
noun
• The act of combining parts or elements to form a whole

38. BA

39. B
postMessage()
A

40. B
postMessage()
A

41. </compositional-ui>

43. <webshop>

44. cat-shop.com
Cat Shop
$99,- $79,- $89,-BuyBuyBuy
Buy
$29,-
Buy $59,- $69,-Buy $79,-Buy
Buy $99,- Buy $99,- $69,-Buy
123
Cat Shop © 2018

45. cat-shop.com
Cat Shop
$99,- $79,- $89,-BuyBuyBuy
Buy
$29,-
Buy $59,- $69,-Buy $79,-Buy
Buy $99,- Buy $99,- $69,-Buy
Buy
Buy
Buy
123
Cat Shop © 2018

46. cat-shop.com
3
$99,-
$89,-
$69,-
$257,-Total
Cat Shop
3
Cat Shop © 2018

47. POST /logins HTTP/1.1
Authorization: Bearer f5739f1…
Host: api.example.com

48. HTTP/1.1 201 Created
Content-Type: application/json
Location: https://api.example.com/logins/842e5d8b955a
{
"id": "https://api.example.com/logins/842e5d8b955a",
"operations": [{
"rel": "login",
"method": "GET",
"href": "https://api.example.com/logins/842e5d8b955a.js",
"contentType": "application/javascript"
}]
}
https://api.example.com/logins/842e5d8b955a.js

49. https://api.example.com/logins/842e5d8b955a.js
<script src="https://api.example.com/logins/842e5d8b955a.js"
data-container="login">
</script>
...
<div id="login"></div>

50. <script src="https://api.example.com/logins/842e5d8b955a.js"
data-container="login">
</script>
...
<div id="login"></div>

51. cat-shop.com
3
$99,-
$89,-
$69,-
$257,-Total
Cat Shop
3
au@px.test
98765432
My House
Oslo Next
E-mail
Phone
au@px.test
98765432
Cat Shop © 2018

52. cat-shop.com
3
$99,-
$89,-
$69,-
$257,-Total
Cat Shop
3
au@px.test
98765432
My House
Oslo
au@px.test
98765432
Next
POST /logins/842e5d8b955a/identifications HTTP/1.1
Authorization: Bearer f5739f1…
Host: api.example.com
Content-Type: application/json
{
"identify": {
"email": "au@px.test",
"phone": "98765432"
}
}
Cat Shop © 2018

53. HTTP/1.1 302 Found
Content-Type: application/json
Location: https://api.example.com/consumers/ea384b7ec
{
"consumer": {
"id": "https://api.example.com/consumers/ea384b7ec",
"email": "au@px.test",
"phone": "98765432"
}
...
}

54. cat-shop.com
3
$99,-
$89,-
$69,-
$257,-Total
Cat Shop © 2018
Cat Shop
3
{
"event": "ConsumerIdentified",
"consumer": {
"id": "https://api.example.com/consumers/ea384b7ec",
"email": "au@px.test",
"phone": "98765432"
}
}
au@px.test
98765432
My House
Oslo
au@px.test
98765432
Next

55. HTTP/1.1 302 Found
Content-Type: application/json
Location: https://api.example.com/consumers/ea384b7ec
{
"consumer": {
"id": "https://api.example.com/consumers/ea384b7ec",
"email": "au@px.test",
"phone": "98765432"
}
...
}

56. HTTP/1.1 302 Found
Content-Type: application/json
Location: https://api.example.com/consumers/ea384b7ec
{
"consumer": {
"id": "https://api.example.com/consumers/ea384b7ec",
"email": "au@px.test",
"phone": "98765432"
}
...
}

57. {
"consumer": {
"id": "https://api.example.com/consumers/ea384b7ec",
"email": "au@px.test",
"phone": "98765432"
}
"operations": [{
"rel": "next acquire-shipping-address",
"method": "POST",
"href": "https://api.example.com/consumers/ea384b7ec/addresses",
"expects": {
"address": "string",
"city": "string",
}
"contentType": "application/json"
}]
}

58. {
"consumer": {
"id": "https://api.example.com/consumers/ea384b7ec",
"email": "au@px.test",
"phone": "98765432"
}
"operations": [{
"rel": "next acquire-shipping-address",
"method": "POST",
"href": "https://api.example.com/consumers/ea384b7ec/addresses",
"expects": {
"address": "string",
"city": "string",
}
"contentType": "application/json"
}]
}
https://api.example.com/consumers/ea384b7ec/addresses
POST
address
city

59. <form method="POST">
<input type="hidden"
name="address-collection"
value="https://api.example.com/consumers/ea384b7ec/addresses">
<input type="text" name="address">
<input type="text" name="city">
</form>
https://api.example.com/consumers/ea384b7ec/addresses
POST
address
city

60. <form method="POST">
<input type="hidden"
name="address-collection"
value="https://api.example.com/consumers/ea384b7ec/addresses">
<input type="text" name="address">
<input type="text" name="city">
</form>

61. cat-shop.com
3
$99,-
$89,-
$69,-
$257,-Total
Cat Shop © 2018
Cat Shop
3
au@px.test
98765432
My House
Oslo Next
Shipping
Address
My House
Oslo

62. cat-shop.com
3
$99,-
$89,-
$69,-
$257,-Total
Cat Shop © 2018
Cat Shop
3
au@px.test
98765432
My House
Oslo Next
My House
Oslo
Next
POST /consumers/ea384b7ec/addresses HTTP/1.1
Authorization: Bearer f5739f1…
Host: api.example.com
Content-Type: application/json
{
"shippingAddress": {
"address": "My House",
"city": "Oslo"
}
}

63. HTTP/1.1 201 Created
Content-Type: application/json
Location: https://api.example.com/consumers/ea384b7ec/addresses/3f9dc
{
"shippingAddress": {
"id": "https://api.example.com/consumers/ea384b7ec/addresses/3f9dc",
"address": "My House",
"city": "Oslo"
}
}

64. cat-shop.com
3
$99,-
$89,-
$69,-
$257,-Total
Cat Shop © 2018
Cat Shop
3
{
"event": "ShippingAddressSubmitted",
"consumer": {
"id": "https://api.example.com/consumers/ea384b7ec",
"address": "My House",
"city": "Oslo"
}
}
au@px.test
98765432
My House
Oslo Next
My House
Oslo
Next

65. au@px.test
98765432
My House
Oslo
cat-shop.com
3
$99,-
$89,-
$69,-
$49,-Shipping
Cat Shop © 2018
Cat Shop
$257,-Total
3
$306,-Total

66. POST /payment-orders HTTP/1.1
Authorization: Bearer f5739f1…
Host: api.example.com
Content-Type: application/json
{
"paymentOrder": {
"amount": 306,
"currency": "USD",
"description": "Cats",
"payer": "https://api.example.com/logins/842e5d8b955a"
}
}

67. HTTP/1.1 201 Created
Content-Type: application/json
Location: https://api.example.com/payment-orders/04a84b9d1061
{
"id": "https://api.example.com/payment-orders/04a84b9d1061",
"operations": [{
"rel": "pay",
"method": "GET",
"href": "https://api.example.com/payment-orders/04a84b9d1061.js",
"contentType": "application/javascript"
}]
}
https://api.example.com/payment-orders/04a84b9d1061.js

68. https://api.example.com/payment-orders/04a84b9d1061.js
<script
src="https://api.example.com/payment-orders/04a84b9d1061.js"
data-container="payment">
</script>
...
<div id="payment"></div>

69. au@px.test
98765432
My House
Oslo
cat-shop.com
3
$99,-
$89,-
$69,-
$49,-Shipping
Cat Shop © 2018
Cat Shop
$306,-Total
Invoice
CardCard
3

70. au@px.test
98765432
My House
Oslo
cat-shop.com
3
$99,-
$89,-
$69,-
$49,-Shipping
Cat Shop © 2018
Cat Shop
$306,-Total
3
{
"event": "PaymentCompleted",
"payment": {
"id": "https://api.example.com/payments/df27e10c96"
}
}
Card
$306,-Cats
4925 **** **** 39184925 **** **** 3918
Pay

71. cat-shop.com
3
Cat Shop © 2018
Cat Shop
Order #84271 completed.
Thank you!

72. </webshop>

73. <takeaways>

74. Use events

75. Use events

76. Describe operations with hypermedia

77. Build UI with hypermedia

78. Universal Resource IdentifiersUniversal Resource Identifiers

79. {
"consumer": {
"id": "ea384b7ec"
}
}
{
"consumer": {
"id": "ea384b7ec"
}
}
{
"consumer": {
"id": "https://api.example.com/consumers/ea384b7ec"
}
}

80. Reorder UI
CBA

81. Reorder UI
CBA

82. </takeaways>

83. But does it work?

84. Checkout

85. Thank You!
- @asbjornu
- asbjorn.ulsberg@payex.com
- slack.httpapis.com
Asbjørn Ulsberg