Single Page Apps and the Future of History Michael Mahemoff 1 of - - PowerPoint PPT Presentation

▶
single page apps and the future of history michael
SMART_READER_LITE
LIVE PREVIEW

Single Page Apps and the Future of History Michael Mahemoff 1 of - - PowerPoint PPT Presentation

Aug 19, 2022 184 likes •1.53k views

Single Page Apps and the Future of History Michael Mahemoff 1 of 133 The App-fication of everything 2 of 133 The SPA-fication of everything 3 of 133 The SPA-fication of everything 4 of 133 How did we get here? 5 of 133 How did we get

slide-1
SLIDE 1

Single Page Apps and the Future of History Michael Mahemoff

1 of 133

slide-2
SLIDE 2

The App-fication of everything

2 of 133

slide-3
SLIDE 3

The SPA-fication of everything

3 of 133

slide-4
SLIDE 4

The SPA-fication of everything

4 of 133

slide-5
SLIDE 5

How did we get here?

5 of 133

slide-6
SLIDE 6

How did we get here?

6 of 133

slide-7
SLIDE 7

Fat Clients

7 of 133

slide-8
SLIDE 8

8 of 133

slide-9
SLIDE 9

9 of 133

slide-10
SLIDE 10

10 of 133

slide-11
SLIDE 11

App or Not?

11 of 133

slide-12
SLIDE 12

12 of 133

slide-13
SLIDE 13

Mapnificent

13 of 133

slide-14
SLIDE 14

Twitter

14 of 133

slide-15
SLIDE 15

Frantic

15 of 133

slide-16
SLIDE 16

A wikipedia app?

16 of 133

slide-17
SLIDE 17

17 of 133

slide-18
SLIDE 18

18 of 133

slide-19
SLIDE 19

19 of 133

slide-20
SLIDE 20

Reader Apps - SPA

20 of 133

slide-21
SLIDE 21

Geo Apps - SPA

21 of 133

slide-22
SLIDE 22

Games - SPA

22 of 133

slide-23
SLIDE 23

So, how *did* we get here?

23 of 133

slide-24
SLIDE 24

Web 0.0.0.1: Just like a magazine, only 56kbps!

24 of 133

slide-25
SLIDE 25

Forms and Hyperlinks

25 of 133

slide-26
SLIDE 26

HotMail: A 1997 Web App

26 of 133

slide-27
SLIDE 27

The Dancing Bears of Web 1.0

27 of 133

slide-28
SLIDE 28

Talk to the cloud?

28 of 133

slide-29
SLIDE 29

Work a bit Click on a link Are we there yet?

29 of 133

slide-30
SLIDE 30

Interactive? Don't even think about it

30 of 133

slide-31
SLIDE 31

No really.

31 of 133

slide-32
SLIDE 32

A New Architecture for Web Apps

32 of 133

slide-33
SLIDE 33

! Asynchronous !

33 of 133

slide-34
SLIDE 34

34 of 133

slide-35
SLIDE 35

Clean architecture

35 of 133

slide-36
SLIDE 36

Less data

36 of 133

slide-37
SLIDE 37

Mobile: Save bandwidth

37 of 133

slide-38
SLIDE 38

38 of 133

slide-39
SLIDE 39

Sencha Touch

39 of 133

slide-40
SLIDE 40

Offline-friendly

40 of 133

slide-41
SLIDE 41

The biggest reason

41 of 133

slide-42
SLIDE 42

42 of 133

slide-43
SLIDE 43

43 of 133

slide-44
SLIDE 44

More SPA! Less Refresh!

44 of 133

slide-45
SLIDE 45

45 of 133

slide-46
SLIDE 46

G Gr ro

  • k

kk ki in ng g t th he e D DO OM M

46 of 133

slide-47
SLIDE 47

B Bu us si in ne es ss s L Lo

  • g

gi ic c

47 of 133

slide-48
SLIDE 48

R Re ev ve ea al li in ng g c co

  • n

nt te en nt t

48 of 133

slide-49
SLIDE 49

New UI elements

49 of 133

slide-50
SLIDE 50

S St ty yl li in ng g

50 of 133

slide-51
SLIDE 51

L La ay ye er ri in ng g

51 of 133

slide-52
SLIDE 52

Animation

52 of 133

slide-53
SLIDE 53

Drag-Drop File APIs

53 of 133

slide-54
SLIDE 54

Better browsers ! less memory leaks

54 of 133

slide-55
SLIDE 55

Application Cache

55 of 133

slide-56
SLIDE 56

Client Side Storage

56 of 133

slide-57
SLIDE 57

57 of 133

slide-58
SLIDE 58

Auto-Saving

58 of 133

slide-59
SLIDE 59

Server queries

59 of 133

slide-60
SLIDE 60

Autocomplete

60 of 133

slide-61
SLIDE 61

Auto-Refresh

61 of 133

slide-62
SLIDE 62

Lightboxen

62 of 133

slide-63
SLIDE 63

iFrame Renaissance

63 of 133

slide-64
SLIDE 64

Cross-Domain

64 of 133

slide-65
SLIDE 65

J JS SO ON NP P h ht tt tp p: :/ // /a ap pi i. .g ge eo

  • n

na am me es s. .o

  • r

rg g/ /f fi in nd dN Ne ea ar rB By yW We ea at th he er rJ JS SO ON N? ?l la at t= =5 51 1& &l ln ng g= =0 0& & u us se er rn na am me e= =d de em mo

  • &

&c ca al ll lb ba ac ck k= =o

  • n

nw we ea at th he er r

65 of 133

slide-66
SLIDE 66
  • n

nw we ea at th he er r( ({ {" "w we ea at th he er rO Ob bs se er rv va at ti io

  • n

n" ": : { {" "c cl lo

  • u

ud ds s" ": :" "n n/ /a a" ", ," "w we ea at th he er rC Co

  • n

nd di it ti io

  • n

n" ": :" "n n/ /a a" ", ," "o

  • b

bs se er rv va at ti io

  • n

n" ": :" "E EG GK KK K 02 21 13 32 20 0Z Z 04 40 01 16 6K KT T 02 20 0V V1 11 10 6 60 00 00 N NS SC C 07 7/ /0 01 1 Q Q1 10 03 34 4" ", ," "w wi in nd dD Di ir re ec ct ti io

  • n

n" ": :4 40 0, ," "I IC CA AO O" ": :" "E EG GK KK K" ", ," "e el le ev va at ti io

  • n

n" ": :6 62 2, ," "c co

  • u

un nt tr ry yC Co

  • d

de e / / G Ga at tw wi ic ck k A Ai ir rp po

  • r

rt t" ", ," "d da at te et ti im me e" ": :" "2 20 01 11 1-

03 3-

02 2 1 13 3: :2 20 0: :0 00 0" ", ," "l la at t" ": :5 51 1. .1 13 33 33 33 33 33 33 33 33 33 33 33 33 3, ," "h he ec ct to

  • P

Pa as sc cA Al lt ti im me et te er r" ": :1 10 03 34 4} }} }) ); ;

66 of 133

slide-67
SLIDE 67

Comet

67 of 133

slide-68
SLIDE 68

Easy Reliable Secure Performant

68 of 133

slide-69
SLIDE 69

CORS http://enable-cors.org/

69 of 133

slide-70
SLIDE 70
  • Embed

70 of 133

slide-71
SLIDE 71

Cross-Document Messaging

71 of 133

slide-72
SLIDE 72

OAuth

72 of 133

slide-73
SLIDE 73

OAuth 2

73 of 133

slide-74
SLIDE 74

SPArchitecture Options

74 of 133

slide-75
SLIDE 75
  • 0. Conventional Website:

Browser-Server

75 of 133

slide-76
SLIDE 76
  • 1. Serverless SPA

76 of 133

slide-77
SLIDE 77
  • 2. UI Services

77 of 133

slide-78
SLIDE 78
  • 3. Semantic Services

78 of 133

slide-79
SLIDE 79

Separation of Concerns

79 of 133

slide-80
SLIDE 80

REST

80 of 133

slide-81
SLIDE 81

And the REST is History ...

81 of 133

slide-82
SLIDE 82

Single Page means Single URL?

82 of 133

slide-83
SLIDE 83

Bookmarking, Back Button, Tweeting, etc.

83 of 133

slide-84
SLIDE 84

The Magic Hash

84 of 133

slide-85
SLIDE 85

T Th he e M Ma ag gi ic c H Ha as sh h: : S Sw wi it tc ch hi in ng g U UR RL Ls s document.location="http://example.com/#movies"; document.location.hash = "#movies"; // same thing" http://example.com/#movies http://example.com/#books http://example.com/#music

85 of 133

slide-86
SLIDE 86

C Co

  • l

le er r U UR RL Ls s? ? http://example.com/#/books http://example.com/#/search/gladwell http://example.com/#/books/gladwell-genius

86 of 133

slide-87
SLIDE 87

H Ha as sh hB Ba an ng g U UR RL Ls s http://example.com/#!books http://example.com/#!search/gladwell http://example.com/#!books/gladwell-genius

87 of 133

slide-88
SLIDE 88

88 of 133

slide-89
SLIDE 89

#HashBangHell

89 of 133

slide-90
SLIDE 90

uncool URL can't easily edit URL weird scrolling issues

90 of 133

slide-91
SLIDE 91

But the real problem ...

91 of 133

slide-92
SLIDE 92

empty

92 of 133

slide-93
SLIDE 93

<html> <head> <title>My amazing app</title> <script> window.onload = function() { if (document.location.pathname.match(/^\/search/(.+)$)) { // show the search } }; </script> </head> <body> <!-- Empty body --> </body> </html>

93 of 133

slide-94
SLIDE 94

No-JS browsers? Search engines? Other clients?

94 of 133

slide-95
SLIDE 95

HTML5: The Future of History

95 of 133

slide-96
SLIDE 96

H Hi is st to

  • r

ry y A AP PI I history.pushState( {search: "rainbows"}, "Items containing 'rainbows'", "/search/rainbows" );

96 of 133

slide-97
SLIDE 97

A Ab bu us si in ng g t th he e H HT TM ML L5 5 H Hi is st to

  • r

ry y A AP PI I f fo

  • r

r f fu un n ( (a an nd d c ch ha ao

  • s

s) )

97 of 133

slide-98
SLIDE 98

98 of 133

slide-99
SLIDE 99

GitHub Source: https://gist.github.com/730603

99 of 133

slide-100
SLIDE 100

B Be es st t

  • f

f b bo

  • t

th h w wo

  • r

rl ld ds s: : S SP PA A U UX X + + T Tr ru ue e U UR RL Ls s http://example.com/#!/search/rainbows

http://example.com/search/rainbows

100 of 133

slide-101
SLIDE 101

URL represents State Resource

101 of 133

slide-102
SLIDE 102

Sync resource and URL

102 of 133

slide-103
SLIDE 103

W Wh he en n r re es so

  • u

ur rc ce e c ch ha an ng ge es s, , u up pd da at te e U UR RL L search.onclick = function() { var query = searchEl.value; // Perform the search, change UI history.pushState({search: query}, "Search", "/search/"+query }

103 of 133

slide-104
SLIDE 104

W Wh he en n U UR RL L c ch ha an ng ge es s, , u up pd da at te e r re es so

  • u

ur rc ce e window.onpopstate = function(ev) { // transform based on document.location and/or ev.state }

104 of 133

slide-105
SLIDE 105

When does URL change? Initial Load Back button, Forward button User changes URL

105 of 133

slide-106
SLIDE 106

106 of 133

slide-107
SLIDE 107

H Hi is st to

  • r

ry y A AP PI I history.length history.back(); history.forward(); history.go(5); window.onpopstate() { ... } history.pushState({...}, "title", "/the/url"); history.replaceState({...}, "title", "/the/url");

107 of 133

slide-108
SLIDE 108

SPA Antipattern

108 of 133

slide-109
SLIDE 109

SPA Pattern

109 of 133

slide-110
SLIDE 110

Demo: http://rampage.mahemoff.com Source: https://github.com/mahemoff/rampage

110 of 133

slide-111
SLIDE 111

T Th he e C Cu ur rl l T Te es st t curl http://rampage.mahemoff.com/monsters/george ... <body> <h1><a href="/">Know Your Rampage</a></h1> <div id="main"> <h2><a href="/monsters">monsters</a> > George</h2> <img src="/images/george.jpg" /> <div>Eats men</div> <div>Born 1986</div> </div> ...

111 of 133

slide-112
SLIDE 112

The Search Engine Test

112 of 133

slide-113
SLIDE 113

P Pa at th hs s / /monsters /monsters/lizzie /monsters/george /monsters/ralph

113 of 133

slide-114
SLIDE 114

Unique State R Re es so

  • u

ur rc ce e Identifiers!

114 of 133

slide-115
SLIDE 115

P Po

  • p

pS St ta at te e window.onpopstate = function() { var matches; if (document.location.pathname=="/monsters") { ... } else if (matches = document.location.pathname.match(/^\/monster var monster = matches[1]; ... } else { // can't handle it? Then we need to refresh. ... } }

115 of 133

slide-116
SLIDE 116

Hijax

116 of 133

slide-117
SLIDE 117

H Hi ij ja ax x <h2><a href="/monsters">monsters</a> > {{name}}</h2> <img src="/images/{{id}}.jpg" /> <div>Eats {{food}}</div> <div>Born {{born}}</div>

117 of 133

slide-118
SLIDE 118

H Hi ij ja ax x $("a").live("click", function(ev) { history.pushState({}, title, this.href);

  • nURLUpdate();

ev.preventDefault(); });

118 of 133

slide-119
SLIDE 119

Dual Side Templating: Mustache library

119 of 133

slide-120
SLIDE 120

D Du ua al l S Si id de e T Te em mp pl la at ti in ng g {{#monster}} <h2><a href="/monsters">monsters</a> > {{name}}</h2> <img src="/images/{{id}}.jpg" /> <div>Eats {{food}}</div> <div>Born {{born}}</div> {{/monster}}

120 of 133

slide-121
SLIDE 121

D Du ua al l S Si id de e T Te em mp pl la at ti in ng g SERVER [RUBY] get '/monsters/:monster' do mustache :monster, :monster=>get_monster(params[:monster]), :layout=>true end BROWSER [JAVASCRIPT] $(this).html( Mustache.to_html($("#monster_template").html(), {monster:monster}) ).show();

121 of 133

slide-122
SLIDE 122

S Se em ma an nt ti ic c S Se er rv vi ic ce es s http://rampage.mahemoff.com/monsters.json [ {"born":1986,"food":"men","name":"Lizzie","id":"lizzie"}, {"born":1986,"food":"women","name":"George","id":"george"}, {"born":1986,"food":"businessmen","name":"Ralph","id":"ralph"} ]

122 of 133

slide-123
SLIDE 123

S Se em ma an nt ti ic c S Se er rv vi ic ce es s // popState handler if (document.location.pathname=="/monsters") { $.getJSON("/monsters.json", function(monsters) { $("#main").fadeOut(function() { $(this).html( Mustache.to_html($("#monsters_template").html(),{ ).show(); }); });

123 of 133

slide-124
SLIDE 124

Embracing the SPA

124 of 133

slide-125
SLIDE 125
  • 1. Client: HTML5 History

125 of 133

slide-126
SLIDE 126
  • 2. Server: RESTful Web Services

126 of 133

slide-127
SLIDE 127
  • 3. Server: Full Page for every URL

127 of 133

slide-128
SLIDE 128
  • 4. Dual-Side Templating

128 of 133

slide-129
SLIDE 129
  • 5. Hijax: Standard links, augmented

129 of 133

slide-130
SLIDE 130
  • 6. Leverage libraries - history.js,

jquery.history.js, sammy.js

130 of 133

slide-131
SLIDE 131
  • 7. Consider HashBang for Older Browsers

131 of 133

slide-132
SLIDE 132

Thankyou More HTML5 at http://html5rocks.com Mail: mahemoff@google.com Twitter: mahemoff

132 of 133

slide-133
SLIDE 133

I Im ma ag ge e C Cr re ed di it ts s

http://flickr.com/photos/brandnewbrain/3611730813/ http://flickr.com/photos/37184970@N00/5043136648/ http://flickr.com/photos/37184970@N00 /5503525147/ http://flickr.com/photos/37184970@N00/5504135200/ http://flickr.com/photos/37184970@N00/5514514134/ http://flickr.com/photos /37184970@N00/5043136648/ http://flickr.com/photos/37184970@N00/5504135200/ http://flickr.com/photos/drewott/2311794862/ http://flickr.com /photos/37184970@N00/5504174342/ http://flickr.com/photos/37184970@N00/5505787997/ http://flickr.com/photos/37184970@N00/5506813794/ http://flickr.com/photos/37184970@N00/5505787997/ http://www.flickr.com/photos/odalaigh/2625502285/sizes/l/in/photostream/ http://flickr.com /photos/mag3737/5197180801/ http://flickr.com/photos/29873327@N04/4184580747/ http://flickr.com/photos/37184970@N00/5506238451/ http://www.flickr.com/photos/odalaigh/2625502285/sizes/l/in/photostream/ http://www.flickr.com/photos/odalaigh/2625502285/sizes/l/in/photostream/ http://flickr.com/photos/37184970@N00/5506239183/ http://flickr.com/photos/37184970@N00/5508764561/ http://flickr.com/photos/37184970@N00 /5516140656/ http://flickr.com/photos/37184970@N00/5508810743/ http://flickr.com/photos/37184970@N00/5508817597/ http://flickr.com/photos /37184970@N00/5509437044/ http://flickr.com/photos/37184970@N00/5508840927/ http://dt.deviantart.com/blog/35616831/ http://flickr.com/photos /37184970@N00/5508846747/ http://flickr.com/photos/37184970@N00/5509469478/ http://flickr.com/photos/psd/421186578/ http://flickr.com/photos /37184970@N00/5496488385/ http://flickr.com/photos/37184970@N00/5496488385/ http://flickr.com/photos/37184970@N00/5503926734/ http://flickr.com/photos/37184970@N00/5503741172/ http://flickr.com/photos/37184970@N00/5503738914/ http://irafi.com/wp-content/rafi_top43_sod /2010/12/github_tree_slider_small1.jpg http://flickr.com/photos/37184970@N00/5515045879 http://flickr.com/photos/37184970@N00/5503391293 http://flickr.com/photos/37184970@N00/5503381497 http://flickr.com/photos/37184970@N00/5515831794/ http://flickr.com/photos/psd/421186578/ http://flickr.com/photos/37184970@N00/5515763510 http://flickr.com/photos/paulmutant/4479138333/

133 of 133