Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Architecture of a Modern Web App - SpringOne India

5,831 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

×