Architecture of a Modern Web App - SpringOne India

5,109 views
4,796 views

Published on

Architecture of a Modern Web App - SpringOne India

  1. 1. Architecture of a Modern Web App Jeremy Grelle, SpringSource Staff Engineer Github / Twitter: @jeremyg484 1Thursday, December 13, 12
  2. 2. Overview • Where we’ve been • Where we’re going • How we’ll get there • Questions 2Thursday, December 13, 12
  3. 3. In the beginning... • Sites were static HTML Pros: • low computational overhead • highly cacheable • highly indexable Cons: • hard (easy?) to update • no personalization • usually poor UI 3Thursday, December 13, 12
  4. 4. Let there be CGI • Introduced dynamic generated Pros: pages • dynamic! • selectively cacheable • highly indexable • personalizable Cons: • “high” computational overhead • hard to create • usually poor UI 4Thursday, December 13, 12
  5. 5. LiveScript JavaScript • Dynamic pages Pros: • Lightweight alternative to applets • enhanced usability, maybe • Mostly used for simple scripting • reduced trips to the server – basic form validation – popup ads Cons: – comet cursor trails • abuses annoyed users • business logic often implemented twice: client and server http://en.wikipedia.org/wiki/File:Pop-up_ads.jpg 5Thursday, December 13, 12
  6. 6. AJAX - Web 2.0 • Google Maps sparked Web 2.0 Pros: • GMail • killer UI – required JavaScript • more responsive apps Cons: • difficult to cache • impossible to index • required JavaScript 6Thursday, December 13, 12
  7. 7. Unobtrusive JavaScript • No JavaScript, no problem Pros: • Provide features for user agents • wider compatibility that support them • just as rich UI – fall back to basic HTML • just as responsive Cons: • higher development costs • requires thoughtful engineering 7Thursday, December 13, 12
  8. 8. Client Side Applications • Business logic lives on the client Pros: • Resources and permanent state • reduce server workloads stored on the server • application is highly cacheable • Application state stored on client • extremely rich UI Cons: • content not indexable • requires JavaScript • often requires a ‘modern’ browser 8Thursday, December 13, 12
  9. 9. Overview • Where we’ve been • Where we’re going • How we’ll get there • Questions 9Thursday, December 13, 12
  10. 10. From: server-side apps To: smart clients and services 10Thursday, December 13, 12
  11. 11. Client Browser-based HTML Rendering (progressive Browser enhancement) HTML HTTP View Application Controllers Server Generation Service Layer Channels Repositories RDBMS CRUD ServerThursday, December 13, 12
  12. 12. HTML5 & JS Engine Browser app or Client embedded in native DOM Controllers Client-side model web stg Service Layer Channels Repositories RDBMS CRUD ServerThursday, December 13, 12
  13. 13. HTML5 & JS Engine Browser app or Client embedded in native DOM Controllers Client-side model web stg JSON HTTP & websockets Service Layer Channels Repositories RDBMS CRUD ServerThursday, December 13, 12
  14. 14. HTML5 & JS Engine Browser app or Client embedded in native DOM Controllers Client-side model web stg JSON events HTTP & websockets & notifications Service Layer Channels Repositories RDBMS CRUD ServerThursday, December 13, 12
  15. 15. HTML5 & JS Engine Browser app or Client embedded in native DOM Controllers Client-side model web stg JSON events HTTP & websockets & notifications Service Layer Cloud/ Channels Repositories RDBMS PaaS CRUDThursday, December 13, 12
  16. 16. HTML5 & JS Engine Browser app or Client embedded in native DOM Controllers Client-side model web stg JSON events HTTP & websockets & notifications business / Service Service Service domain services Cloud/ Channels Repositories RDBMS PaaS CRUDThursday, December 13, 12
  17. 17. HTML5 & JS Engine Browser app or Client embedded in native DOM Controllers Client-side model web stg JSON events HTTP & websockets & notifications business / Service Service Service domain services Channels Repositories RDBMS CRUD PaaSThursday, December 13, 12
  18. 18. HTML5 & JS Engine Browser app or Client embedded in native DOM Controllers Client-side model web stg JSON events HTTP & websockets & notifications business / Service Service Service domain services PaaSThursday, December 13, 12
  19. 19. HTML5 & JS Engine Browser app or Client embedded in native DOM Controllers Client-side model web stg JSON events HTTP & websockets & notifications business / Service Service Service domain services Service Service Service platform services, web APIs SQL NoSQL Other PaaSThursday, December 13, 12
  20. 20. HTML5 & JS Engine Applications HTML5 (& native) JSON events HTTP & websockets & notifications Services PaaSThursday, December 13, 12
  21. 21. Overview • Where we’ve been • Where we’re going • How we’ll get there • Questions 17Thursday, December 13, 12
  22. 22. Simplify Views • Simple template can render on the client or server – JSP, et al will never render client side • Avoid imperative logic • Lot of conditions may indicate the model is poorly structured • Can the model be cleanly serialized? 18Thursday, December 13, 12
  23. 23. Client side code as a first class citizen • Apply design patterns • Modularize • Unit test • Enforce code quality • See “IoC + JavaScript” coming up next. 19Thursday, December 13, 12
  24. 24. Demo Monty Hall 20Thursday, December 13, 12
  25. 25. Think Messaging • Web Sockets are message based • Web Workers are message based • DOM Events are message based • Web vs Integration is a false dichotomy • See “Going Async - Practical Patterns for Push-Enabled Applications” coming soon to SpringSource YouTube channel. 21Thursday, December 13, 12
  26. 26. Demo Client Server Messaging 22Thursday, December 13, 12
  27. 27. Client vs Server • The definitions of “back-end” and “front-end” are shifting – front-end != client, back-end != server • Embrace both sides • Specialize in client/server integration 23Thursday, December 13, 12
  28. 28. Frameworks • New frameworks are emerging – not quite prime time – watch this space • Frameworks will not solve all your issues – sorry 24Thursday, December 13, 12
  29. 29. Resources • s2js - http://www.github.com/s2js • cujo.js - http://www.cujojs.com • scripted - https://github.com/scripted-editor/scripted • SockJS - http://www.sockjs.org • Monty Hall REST API - https://github.com/acolyer/monty-hall • Monty Hall Client - https://github.com/five-eleven/monty-hall-ui • Messaging Demo - https://github.com/jeremyg484/s12gx-push-service/ 25Thursday, December 13, 12

×