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 here? 6 of 133
Fat Clients 7 of 133
8 of 133
9 of 133
10 of 133
App or Not? 11 of 133
12 of 133
Mapnificent 13 of 133
Twitter 14 of 133
Frantic 15 of 133
A wikipedia app? 16 of 133
17 of 133
18 of 133
19 of 133
Reader Apps - SPA 20 of 133
Geo Apps - SPA 21 of 133
Games - SPA 22 of 133
So, how *did* we get here? 23 of 133
Web 0.0.0.1: Just like a magazine, only 56kbps! 24 of 133
Forms and Hyperlinks 25 of 133
HotMail: A 1997 Web App 26 of 133
The Dancing Bears of Web 1.0 27 of 133
Talk to the cloud? 28 of 133
Work a bit Click on a link Are we there yet? 29 of 133
Interactive? Don't even think about it 30 of 133
No really. 31 of 133
A New Architecture for Web Apps 32 of 133
! Asynchronous ! 33 of 133
34 of 133
Clean architecture 35 of 133
Less data 36 of 133
Mobile: Save bandwidth 37 of 133
38 of 133
Sencha Touch 39 of 133
Offline-friendly 40 of 133
The biggest reason 41 of 133
42 of 133
43 of 133
More SPA! Less Refresh! 44 of 133
45 of 133
G Gr ro ok kk ki in ng g t th he e D DO OM M 46 of 133
B Bu us si in ne es ss s L Lo og gi ic c 47 of 133
R Re ev ve ea al li in ng g c co on nt te en nt t 48 of 133
New UI elements 49 of 133
S St ty yl li in ng g 50 of 133
L La ay ye er ri in ng g 51 of 133
Animation 52 of 133
Drag-Drop File APIs 53 of 133
Better browsers ! less memory leaks 54 of 133
Application Cache 55 of 133
Client Side Storage 56 of 133
57 of 133
Auto-Saving 58 of 133
Server queries 59 of 133
Autocomplete 60 of 133
Auto-Refresh 61 of 133
Lightboxen 62 of 133
iFrame Renaissance 63 of 133
Cross-Domain 64 of 133
h ht tt tp p: :/ // /a ap pi i. .g ge eo on na am me es s. .o or rg g/ /f fi in nd dN Ne J JS SO ea ON ar NP rB By P 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 o& &c ca al ll lb ba ac ck k= =o on nw we ea at th he er r 65 of 133
o on 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 on n" ": : { {" "c cl lo ou ud ds s" ": :" "n n/ /a a" ", ," "w we ea at th he er rC Co on nd di it ti io on n" ": :" "n n/ /a a" ", ," "o ob bs se er rv va at ti io on n" ": :" "E EG GK KK K 0 02 21 13 32 20 0Z Z 0 04 40 01 16 6K KT T 0 02 20 0V V1 11 10 0 6 60 00 00 0 N NS SC C 0 07 7/ /0 01 1 Q Q1 10 03 34 4" ", ," "w wi in nd dD Di ir re ec ct ti io on n" ": :4 40 0, ," "I IC CA AO O" ": :" "E EG GK KK K" ", ," "e el le ev va at ti io on n" ": :6 62 2, ," "c co ou un nt tr ry yC Co od de e / / G Ga at tw wi ic ck k A Ai ir rp po or rt t" ", ," "d da at te et ti im me e" ": :" "2 20 01 11 1- -0 03 3- -0 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 oP Pa as sc cA Al lt ti im me et te er r" ": :1 10 03 34 4} }} }) ); ; 66 of 133
Comet 67 of 133
Easy Reliable Secure Performant 68 of 133
CORS http://enable-cors.org/ 69 of 133
oEmbed 70 of 133
Cross-Document Messaging 71 of 133
OAuth 72 of 133
OAuth 2 73 of 133
SPArchitecture Options 74 of 133
0. Conventional Website: Browser-Server 75 of 133
1. Serverless SPA 76 of 133
2. UI Services 77 of 133
3. Semantic Services 78 of 133
Separation of Concerns 79 of 133
REST 80 of 133
And the REST is History ... 81 of 133
Single Page means Single URL? 82 of 133
Bookmarking, Back Button, Tweeting, etc. 83 of 133
The Magic Hash 84 of 133
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
C Co oo ol 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
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
88 of 133
#HashBangHell 89 of 133
uncool URL can't easily edit URL weird scrolling issues 90 of 133
But the real problem ... 91 of 133
empty 92 of 133
<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
No-JS browsers? Search engines? Other clients? 94 of 133
HTML5: The Future of History 95 of 133
H Hi is st to or ry y A AP PI I history.pushState( {search: "rainbows"}, "Items containing 'rainbows'", "/search/rainbows" ); 96 of 133
A Ab bu us si in ng g t th he e H HT TM ML L5 5 H Hi is st to or ry y A AP PI I f fo or r f fu un n ( (a an nd d c ch ha ao os s) ) 97 of 133
98 of 133
GitHub Source: https://gist.github.com/730603 99 of 133
B Be es st t o of f b bo ot th h w wo or 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
Recommend
More recommend
