Download to read offline
![state change server> transformations>
JavaScript Library
>
<<
[ "apply", [ { "total": "4", "active": "2" } ] ] websocket](https://image.slidesharecdn.com/realtime-151120022747-lva1-app6891/75/Building-Reactive-Realtime-Apps-Without-Writing-Javascript-35-2048.jpg)
![state change server> transformations>
JavaScript Library
>
<<
[ "apply", [ { "total": "4", "active": "2" } ] ] websocket](https://crownmelresort.com/image.slidesharecdn.com/realtime-151120022747-lva1-app6891/75/Building-Reactive-Realtime-Apps-Without-Writing-Javascript-35-2048.jpg)
Uploaded byAll Things Open
Building Reactive, Realtime Apps Without Writing Javascript
The document discusses building reactive real-time apps without writing JavaScript. It presents an approach called View Transformation Protocol that keeps business logic on the server and uses server-rendered views with a real-time layer for progressive enhancement. Examples show how views can be declaratively defined and updated in real-time by applying data changes received from the server over websockets.
More Related Content
![BACHELOR_HUB[1]](https://cdn.slidesharecdn.com/ss_thumbnails/21aff5fc-190b-4ec6-9598-0c758c49f0e3-150310032129-conversion-gate01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Building Reactive, Realtime Apps Without Writing Javascript
Building Reactive, Realtime Apps Without Writing Javascript
- 1. Building Reactive, RealtimeApps Without Writing JavaScript Bryan Powell @bryanp All Things Open 2015
- 2. The web shouldnot be single-page. We need a better way to build the web.
- 6.
- 11. Progressive enhancement isnecessary when content has priority.
- 12. Sorry, web standardswill win.
- 13.
- 15. Server Rendered w/Real-Time Layer Keep Business Logic on Server (real-time as progressive enhancement) (write no JavaScript) WAT.
- 16. Example Time!!! Disclaimer: everythingyou’re about to see works and is available now on GitHub.
- 17. <div data-scope="stats"> <span data-prop="active"> 1 </span> <spandata-prop="total"> 2 </span> </div>
- 18. <div data-scope="stats"> <span data-prop="active"> 1 </span> <spandata-prop="total"> 2 </span> </div>
- 19. <div data-scope="stats"> <span data-prop="active"> 1 </span> <spandata-prop="total"> 2 </span> </div>
- 20. <div data-scope="stats"> <span data-prop="active"> 1 </span> <spandata-prop="total"> 2 </span> </div>
- 21. <div data-scope="stats"> <span data-prop="active"> 1 </span> <spandata-prop="total"> 2 </span> </div>
- 22. <div data-scope="stats"> <span data-prop="active"> 1 </span> <spandata-prop="total"> 2 </span> </div> { active: 3, total: 42 } <
- 23. <div data-scope="stats"> <span data-prop="active"> 1 </span> <spandata-prop="total"> 2 </span> </div> { active: 3, total: 42 } view.scope(:stats).apply(data) <
- 24. <div data-scope="stats"> <span data-prop="active"> 1 </span> <spandata-prop="total"> 2 </span> </div> { active: 3, total: 42 } view.scope(:stats).apply(data) <
- 25. <div data-scope="stats"> <span data-prop="active"> 1 </span> <spandata-prop="total"> 2 </span> </div> { active: 3, total: 42 } view.scope(:stats).apply(data) <
- 26. <div data-scope="stats"> <span data-prop="active"> 3 </span> <spandata-prop="total"> 42 </span> </div> { active: 3, total: 42 } view.scope(:stats).apply(data) <
- 27. <div data-scope="stats"> <span data-prop="active"> 3 </span> <spandata-prop="total"> 42 </span> </div> { active: 3, total: 42 } view.scope(:stats).apply(data) < Non-Destructive Rendering
- 28. get '/' do view.scope(:stats).render(:display, with:data(:stats).all ).subscribe end
- 29. get '/' do view.scope(:stats).render(:display, with:data(:stats).all ).subscribe end
- 30. get '/' do view.scope(:stats).render(:display, with:data(:stats).all ).subscribe end
- 31. get '/' do view.scope(:stats).render(:display, with:data(:stats).all ).subscribe end
- 32. get '/' do view.scope(:stats).render(:display, with:data(:stats).all ).subscribe end
- 33. get '/' do view.scope(:stats).render(:display, with:data(:stats).all ).subscribe end
- 34.
- 35. state change server>transformations> JavaScript Library > << [ "apply", [ { "total": "4", "active": "2" } ] ] websocket
- 36.
- 37. View Transformation Protocol Businesslogic is written once, stays on the server.
- 38. View Transformation Protocol Fastersince we render only the changes.
- 39. View Transformation Protocol Thereal-time web as progressive enhancement.
- 40. mutable server> transformations> > << statechange websocket
- 41.
- 42. Simple State Propagation Allchanges in view state come from the server.
- 43. Simple State Propagation Servercontains the ultimate truth, client follows.
- 44. Simple State Propagation Prioritizesuser trust over performance.
- 45.
- 46.