Building Reactive, Realtime Apps Without Writing Javascript
-
Upload
all-things-open -
Category
Technology
-
view
279 -
download
5
Transcript of Building Reactive, Realtime Apps Without Writing Javascript
![Page 1: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/1.jpg)
Building Reactive, Realtime AppsWithout Writing JavaScript
Bryan Powell @bryanp
All Things Open 2015
![Page 2: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/2.jpg)
The web should not be single-page.
We need a better way to build the web.
![Page 3: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/3.jpg)
![Page 4: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/4.jpg)
![Page 5: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/5.jpg)
![Page 6: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/6.jpg)
Collaboration
Content
![Page 7: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/7.jpg)
![Page 8: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/8.jpg)
![Page 9: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/9.jpg)
![Page 10: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/10.jpg)
![Page 11: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/11.jpg)
Progressive enhancement is necessary when content has priority.
![Page 12: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/12.jpg)
Sorry, web standards will win.
![Page 13: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/13.jpg)
But isomorphic JavaScript!
![Page 14: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/14.jpg)
![Page 15: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/15.jpg)
Server Rendered w/ Real-Time Layer
Keep Business Logic on Server
(real-time as progressive enhancement)
(write no JavaScript)
WAT.
![Page 16: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/16.jpg)
Example Time!!!Disclaimer: everything you’re about to see
works and is available now on GitHub.
![Page 17: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/17.jpg)
<div data-scope="stats"> <span data-prop="active"> 1 </span>
<span data-prop="total"> 2 </span> </div>
![Page 18: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/18.jpg)
<div data-scope="stats"> <span data-prop="active"> 1 </span>
<span data-prop="total"> 2 </span> </div>
![Page 19: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/19.jpg)
<div data-scope="stats"> <span data-prop="active"> 1 </span>
<span data-prop="total"> 2 </span> </div>
![Page 20: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/20.jpg)
<div data-scope="stats"> <span data-prop="active"> 1 </span>
<span data-prop="total"> 2 </span> </div>
![Page 21: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/21.jpg)
<div data-scope="stats"> <span data-prop="active"> 1 </span>
<span data-prop="total"> 2 </span> </div>
![Page 22: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/22.jpg)
<div data-scope="stats"> <span data-prop="active"> 1 </span>
<span data-prop="total"> 2 </span> </div>
{ active: 3,
total: 42
}
<
![Page 23: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/23.jpg)
<div data-scope="stats"> <span data-prop="active"> 1 </span>
<span data-prop="total"> 2 </span> </div>
{ active: 3,
total: 42
}
view.scope(:stats).apply(data)
<
![Page 24: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/24.jpg)
<div data-scope="stats"> <span data-prop="active"> 1 </span>
<span data-prop="total"> 2 </span> </div>
{ active: 3,
total: 42
}
view.scope(:stats).apply(data)
<
![Page 25: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/25.jpg)
<div data-scope="stats"> <span data-prop="active"> 1 </span>
<span data-prop="total"> 2 </span> </div>
{ active: 3,
total: 42
}
view.scope(:stats).apply(data)
<
![Page 26: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/26.jpg)
<div data-scope="stats"> <span data-prop="active"> 3 </span>
<span data-prop="total"> 42 </span> </div>
{ active: 3,
total: 42
}
view.scope(:stats).apply(data)
<
![Page 27: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/27.jpg)
<div data-scope="stats"> <span data-prop="active"> 3 </span>
<span data-prop="total"> 42 </span> </div>
{ active: 3,
total: 42
}
view.scope(:stats).apply(data)
<
Non-Destructive Rendering
![Page 28: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/28.jpg)
get '/' do view.scope(:stats).render(:display, with: data(:stats).all ).subscribe end
![Page 29: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/29.jpg)
get '/' do view.scope(:stats).render(:display, with: data(:stats).all ).subscribe end
![Page 30: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/30.jpg)
get '/' do view.scope(:stats).render(:display, with: data(:stats).all ).subscribe end
![Page 31: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/31.jpg)
get '/' do view.scope(:stats).render(:display, with: data(:stats).all ).subscribe end
![Page 32: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/32.jpg)
get '/' do view.scope(:stats).render(:display, with: data(:stats).all ).subscribe end
![Page 33: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/33.jpg)
get '/' do view.scope(:stats).render(:display, with: data(:stats).all ).subscribe end
![Page 34: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/34.jpg)
server
>
<
websocket
JavaScript Library
![Page 35: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/35.jpg)
state change server> transformations>
JavaScript Library
>
<<
[ "apply", [ { "total": "4", "active": "2" } ] ] websocket
![Page 36: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/36.jpg)
View Transformation Protocol
![Page 37: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/37.jpg)
View Transformation ProtocolBusiness logic is written once, stays on the server.
![Page 38: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/38.jpg)
View Transformation ProtocolFaster since we render only the changes.
![Page 39: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/39.jpg)
View Transformation ProtocolThe real-time web as progressive enhancement.
![Page 40: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/40.jpg)
mutable
server> transformations> >
<<
state change
websocket
![Page 41: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/41.jpg)
Simple State Propagation
![Page 42: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/42.jpg)
Simple State PropagationAll changes in view state come from the server.
![Page 43: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/43.jpg)
Simple State PropagationServer contains the ultimate truth, client follows.
![Page 44: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/44.jpg)
Simple State PropagationPrioritizes user trust over performance.
![Page 45: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/45.jpg)
pakyow.org
![Page 46: Building Reactive, Realtime Apps Without Writing Javascript](https://reader031.fdocuments.in/reader031/viewer/2022030402/5883215d1a28abe2758b54fb/html5/thumbnails/46.jpg)
pakyow.org
metabahn.com
@bryanp
bryanp/realtime-talk