The SWAC Approach for Sharing a Web Application's Codebase between Server and Client

Transcript

1. Chemnitz University of Technology Ÿ Prof. Dr.-Ing. Martin Gaedke & Team 12.07.13 Markus Ast, Stefan Wild, Martin Gaedke VSR.Informatik.TU-Chemnitz.de The SWAC Approach for Sharing a Web Application's Codebase between Server and Client
2. 2 Motivation Trousers
3. 3 Motivation Dynamic Functionality Efficient Development Progressive Enhancement Frontend Framework (Single-Page App) Two Implementations Backend Framework Develop
4. Goal:
5. Demo 5
6. Server C#, Ruby, PHP, … ? Volatile State Privileged Environment Browser JavaScript Persistent State Vulnerability 6 Server/Client Differences Client/Server Differences Node.js!
7. 1 View 2 Routing 3 Security 4 State Transfer 7 Challenges Challenges
8. View 8
9. 9 View Fragmentation /projects/1/tasks /projects/1/docs
10. 10 View Fragmentation Server-Side Client-Side <p> Hello, @{user.name} </p> html   head   body   ,tle   h1   p   String-based Templates DOM <p> Hello, <!--{1-->Markus<!--1}--> </p>
11. 11 View Fragmentation Changed Event User Fragment id = 1 startNode endNode User name = Markus .name = “Markus Ast” re-render <p> Hello, <!--{1-->Markus<!--1}--> </p> <p> Hello, <!--{1-->Markus Ast<!--1}--> </p>
12. 12 View Fragmentation Project List Layout/ App Container Task List Proj. 1 Proj. 2 Proj. n Task. 1 Task. 2 Task. n
13. Routing
14. 14 Route Hierarchy GET /projects GET /projects/:id GET /projects/:id/tasks Project Projects Project Projects Projects Tasks
15. 15 Route Hierarchy /projects
16. 16 Route Hierarchy /projects /:id
17. 17 Route Hierarchy /projects /:id /tasks
18. 18 Route Hierarchy – Route Tree / /projects /2 /tasks /docs /1 /tasks /docs /n /tasks /docs
19. 19 Route Hierarchy – Server-Side Routing / /projects /2 /tasks /docs /1 /tasks /docs /n /tasks /docs to
20. 20 Route Hierarchy – Client-Side Routing / /projects /2 /tasks /docs /1 /tasks /docs /n /tasks /docs from to Current View:
21. Security
22. 22 Security / Database Access Presentation Tier Business Tier Data Tier Data API Data Logic Authentication Authorization Not
23. Business Layer Presentation Tier Business Layer 23 Security / Database Access Presentation Tier Service Layer Data Tier Database Side?   Data API Authentication Authorization Data Logic server-side client-side RESTful API
24. State
25. •  data •  fragments •  events and their listeners •  templates 25 State consists of State transfer Challenge: Serialization
26. VSR Chemnitz University of Technology Ÿ Prof. Dr.-Ing. Martin Gaedke & Team 12.07.13 Thank You! Questions? myVSR.eu/go/Demo/SWAC