Learning Client Hypermedia from the Ground Up Mike Amundsen, API - - PowerPoint PPT Presentation

▶
learning client hypermedia from the ground up
SMART_READER_LITE
LIVE PREVIEW

Learning Client Hypermedia from the Ground Up Mike Amundsen, API - - PowerPoint PPT Presentation

Oct 11, 2023 129 likes •1.34k views

Learning Client Hypermedia from the Ground Up Mike Amundsen, API Academy / CA @mamund Introduction Goals Understand Hypermedia for applications Refactor a plain/json app into Hypermedia app Learn how to add features w/o

slide-1
SLIDE 1

Learning Client Hypermedia from the Ground Up

Mike Amundsen, API Academy / CA @mamund

slide-2
SLIDE 2

Introduction

slide-3
SLIDE 3
slide-4
SLIDE 4
slide-5
SLIDE 5

Goals

  • Understand Hypermedia for applications
  • Refactor a “plain/json” app into Hypermedia app
  • Learn how to add features w/o versioning your app
  • Identify the diff. between hypermedia Links and Templates
  • Review two existing Hypermedia formats
  • See how Hypermedia and Microservices work together

Show that you can increase client adaptability w/o increasing the code complexity/size

slide-6
SLIDE 6
slide-7
SLIDE 7

Hypermedia?

slide-8
SLIDE 8

Hypermedia?

slide-9
SLIDE 9

"When I say hypertext, I mean the simultaneous presentation of information and controls such that the information becomes the affordance through which the user (or automaton)

  • btains choices and selects actions."
  • Roy Fielding, 2009
slide-10
SLIDE 10

"When I say hypertext, I mean the simultaneous presentation of information and controls such that the information becomes the affordance through which the user (or automaton)

  • btains choices and selects actions."
  • Roy Fielding, 2009
slide-11
SLIDE 11

"When I say hypertext, I mean the simultaneous presentation of information and controls such that the information becomes the affordance through which the user (or automaton)

  • btains choices and selects actions."
  • Roy Fielding, 2009
slide-12
SLIDE 12
slide-13
SLIDE 13

Can you could just show me some examples?

slide-14
SLIDE 14

Hypermedia Examples

slide-15
SLIDE 15

Hypermedia Examples

slide-16
SLIDE 16

Hypermedia Examples

slide-17
SLIDE 17

Hypermedia Examples

slide-18
SLIDE 18

NOT Hypermedia Examples

slide-19
SLIDE 19

Hypermedia Examples

slide-20
SLIDE 20

Hypermedia Examples

slide-21
SLIDE 21

Hypermedia Examples

slide-22
SLIDE 22

H-Factors and Hypermedia Types http://amundsen.com/hypermedia/

slide-23
SLIDE 23

Hypermedia controls provide inline descriptions

  • f your application's actions.
slide-24
SLIDE 24

Yeah, so why would you do that?

slide-25
SLIDE 25

"Hypermedia as the engine of application state."

slide-26
SLIDE 26
slide-27
SLIDE 27

"Hypermedia as the engine of application state." HATEOAS

slide-28
SLIDE 28

"Hypermedia as the engine of application state." HATEOAS

slide-29
SLIDE 29

"Hypermedia as the engine of application state." Hypermedia Constraint

slide-30
SLIDE 30

Wait, Hypermedia Constraint?

slide-31
SLIDE 31

In software architecture models, constraints are selected to promote system properties.

slide-32
SLIDE 32

As part of the Uniform Interface constraint, Fielding selected the Hypermedia to promote:

slide-33
SLIDE 33

As part of the Uniform Interface constraint, Fielding selected the Hypermedia to promote: Evolvability

slide-34
SLIDE 34

Evolvability

"Evolvability represents the degree to which a component implementation can be changed without negatively impacting other components." Fielding, Section 2.3.4.1

slide-35
SLIDE 35

"Hypermedia as the engine of application state."

slide-36
SLIDE 36

"Use Hypermedia to execute application actions."

slide-37
SLIDE 37

Use Hypermedia

slide-38
SLIDE 38

Use Hypermedia

slide-39
SLIDE 39

Use Hypermedia to execute application actions.

slide-40
SLIDE 40
slide-41
SLIDE 41

A Client w/o Hypermedia

slide-42
SLIDE 42

Disclaimer…

“No frameworks or libraries where harmed in the making of these apps.” These example are NOT:

  • Production-Ready
  • Robust
  • Pretty
slide-43
SLIDE 43

TL;DNR…

“I don’t have time right now, can I just download the code?” https://github.com/apiacademy/ndcoslo2015

slide-44
SLIDE 44

Client w/o Hypermedia

  • Get JSON objects/collections from server
  • Put Read/Write semantics in the client Code
slide-45
SLIDE 45

JSON objects/collections from server

slide-46
SLIDE 46

Put Read/Write Semantics in the Client Code

slide-47
SLIDE 47

Read/Write Semantics in the Client Code

slide-48
SLIDE 48

Live Demo of Client w/o Hypermedia

slide-49
SLIDE 49

Then you want to add some features...

slide-50
SLIDE 50

Let's add a new field ("completed") and some filters

slide-51
SLIDE 51

But the installed app IGNORES the new stuff!

slide-52
SLIDE 52

Oh, right. Now I need a new VERSION!

slide-53
SLIDE 53

NEW Read/Write Semantics in the Client Code

slide-54
SLIDE 54

OK, V2 code/test is done, RE-DEPLOY!

slide-55
SLIDE 55

Live Demo of VERSIONED Client w/o Hypermedia

slide-56
SLIDE 56

Well, that's not too bad in the browser.

slide-57
SLIDE 57

Well, that's not too bad in the browser. But those App Stores will be a pain!

slide-58
SLIDE 58

Client w/o Hypermedia (Review)

  • Get JSON objects/collections from server
  • Put Read/Write semantics in the client Code
  • Changing URLs == new version
  • Adding new URLs == new version
  • Adding new features == new version
slide-59
SLIDE 59

Hey, what would Roy Do?

slide-60
SLIDE 60

Slide #22 from Roy Fielding's talk at Adobe's Evolve 2013

slide-61
SLIDE 61
slide-62
SLIDE 62

Huh, OK. Show me.

slide-63
SLIDE 63

A Client with Hypermedia Links

slide-64
SLIDE 64

Client with Hypermedia Links

  • Get the server to emit URLs
  • Get the client to use the server's URLs
slide-65
SLIDE 65

Get the server to emit URLs

slide-66
SLIDE 66

Client now pulls the URLs from the message.

slide-67
SLIDE 67

Live Demo of Client with Hypermedia Links

slide-68
SLIDE 68

Hold on. I think you skipped something!

slide-69
SLIDE 69

Where did the "Add ToDo" come from?

slide-70
SLIDE 70

We're only sending empty links. We still need to code all the payload operations!

slide-71
SLIDE 71

Then you want to add some features… How about "Remove ToDo"?

slide-72
SLIDE 72

But the installed app IGNORES the new stuff!

slide-73
SLIDE 73

Oh, right. Now I need a new VERSION!

slide-74
SLIDE 74

Changes in payload operations are NOT FREE

slide-75
SLIDE 75

Client with Hypermedia Links (Review)

  • Get the server to emit URLs
  • Get the client to use the server's URLs
  • Changing URLs is "free"
  • Adding new URLs is "free"
  • Adding new payload operations === new version
slide-76
SLIDE 76

SIDEBAR: HAL Media Type

slide-77
SLIDE 77

HAL Media Type

  • Designed by Mike Kelly, 2011
  • Makes sending LINKS easy, standardized
  • Lots of library support
  • Used by Amazon and others
slide-78
SLIDE 78
slide-79
SLIDE 79

ToDo App using HAL

slide-80
SLIDE 80

OK, how can I get all new features for "free"?

slide-81
SLIDE 81

A Client with Hypermedia Templates

slide-82
SLIDE 82

Client with Hypermedia Templates

  • Get the server to emit Templates
  • Get the client to use the server's Templates
slide-83
SLIDE 83

Get Server to emit templates.

slide-84
SLIDE 84

Client pulls all payload operation details from the message

slide-85
SLIDE 85

Live Demo of Client with Hypermedia Templates

slide-86
SLIDE 86

Then you want to add some features… How about "Search ToDo"?

slide-87
SLIDE 87

Get Server to emit the new Search template.

slide-88
SLIDE 88

Bask in the awesomeness of hypermedia.

slide-89
SLIDE 89

No Versions.

slide-90
SLIDE 90

No Versions. No Re-deploy.

slide-91
SLIDE 91

No Versions. No Re-deploy. Just Hypermedia!

slide-92
SLIDE 92

No Versions. No Re-deploy. Just Hypermedia!

slide-93
SLIDE 93

Client with Hypermedia Templates (Review)

  • Get the server to emit Templates
  • Get the client to use the server's Templates
  • Changing Templates are "free"
  • Adding new Templates is "free"
  • Adding new payload operations is "free"
slide-94
SLIDE 94

SIDEBAR: Collection+JSON

slide-95
SLIDE 95

Collection+JSON Media Type

  • Designed by Mike Amundsen, 2011
  • Makes sending TEMPLATES easy, standardized
  • Decent library support
  • Used by NPR and others
slide-96
SLIDE 96
slide-97
SLIDE 97

ToDo App using Collection+JSON

slide-98
SLIDE 98

Microservice Bonus Slides

slide-99
SLIDE 99

Microservices and Hypermedia

  • Relocating Components
  • Refactoring Features
  • Re-Deploying Clients
slide-100
SLIDE 100

Hypermedia with Links Supports Dynamic Relocating

slide-101
SLIDE 101

http://www.slideshare.net/DigitalOceanSlides/mitchell-hashimoto-building-robust-systems-w-service-discovery-configuration Mitchell Hashimoto

slide-102
SLIDE 102

http://www.slideshare.net/DigitalOceanSlides/mitchell-hashimoto-building-robust-systems-w-service-discovery-configuration Mitchell Hashimoto

slide-103
SLIDE 103

http://www.slideshare.net/DigitalOceanSlides/mitchell-hashimoto-building-robust-systems-w-service-discovery-configuration Mitchell Hashimoto

slide-104
SLIDE 104

When Services Relocate…

… URLs can change Using Hypermedia Links in responses makes it easier/safer to relocate services

slide-105
SLIDE 105

Hypermedia with Templates Supports Runtime Refactoring

slide-106
SLIDE 106

http://martinfowler.com/bliki/MonolithFirst.html Martin Fowler

slide-107
SLIDE 107

Refactoring Running Systems...

… Can change functions and arguments Using Hypermedia Templates in responses makes it easier/safer to refactor services

slide-108
SLIDE 108

Hypermedia Clients Reduce Continuous Deployment

slide-109
SLIDE 109

http://www.infoq.com/articles/microservices-intro Chris Richardson

slide-110
SLIDE 110

Changes in workflow...

… Can break clients/consumer apps Using Hypermedia-style apps makes it easier/safer to support new workflows without re-deployment.

slide-111
SLIDE 111

Summary

slide-112
SLIDE 112

Hypermedia controls provide inline descriptions

  • f your application's actions.
slide-113
SLIDE 113

"Hypermedia as the engine of application state." Hypermedia Constraint

slide-114
SLIDE 114

Use Hypermedia to execute application actions.

slide-115
SLIDE 115

Client w/o Hypermedia (Review)

  • Get JSON objects/collections from server
  • Put Read/Write semantics in the client Code
  • Changing URLs == new version
  • Adding new URLs == new version
  • Adding new features == new version
slide-116
SLIDE 116

Client with Hypermedia Links (Review)

  • Get the server to emit URLs
  • Get the client to use the server's URLs
  • Changing URLs is "free"
  • Adding new URLs is "free"
  • Adding new payload operations === new version
  • Relocating services is "free"
slide-117
SLIDE 117

Client with Hypermedia Templates (Review)

  • Get the server to emit Templates
  • Get the client to use the server's Templates
  • Changing Templates are "free"
  • Adding new Templates is "free"
  • Adding new payload operations is "free"
  • Refactoring at Runtime MAY be "free"
slide-118
SLIDE 118

No Versions. No Re-deploy. Just Hypermedia!

slide-119
SLIDE 119

@LCHBook (twitter & github)

slide-120
SLIDE 120

Learning Client Hypermedia from the Ground Up

Mike Amundsen, API Academy / CA @mamund

https://github.com/apiacademy/ndcoslo2015