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

79,365 views

Published on

Published in: Technology

Architecture of a Modern Web App

  1. 1. Architecture of a Modern Web AppScott Andrews@scothisandrewss@vmware.com Re-distribution allowed with author’s consent. © 2013 SpringSource, A division of VMware. All rights reserved
  2. 2. About Me Joined SpringSource in 2008 Wearer of many hats Drifter  Teams • frameworks ⇆ applications • Spring Web • open source ⇆ commercial • tc Server • client ⇆ server • Spring Insight • front-end ⇆ back-end • Cloud Foundry • SpringSource JavaScript Re-distribution allowed with author’s consent. 2
  3. 3. Agenda Where we’ve been Where we’re going How we’ll get there Further resources Questions Re-distribution allowed with author’s consent. 3
  4. 4. Agenda Where we’ve been Where we’re going How we’ll get there Further resources Questions Re-distribution allowed with author’s consent. 4
  5. 5. In the beginning... Re-distribution allowed with author’s consent. 5
  6. 6. 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 Re-distribution allowed with author’s consent. 6
  7. 7. Let there be CGI Re-distribution allowed with author’s consent. 7
  8. 8. 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 Re-distribution allowed with author’s consent. 8
  9. 9. LiveScript JavaScript http://en.wikipedia.org/wiki/File:Pop-up_ads.jpg Re-distribution allowed with author’s consent. 9
  10. 10. LiveScript JavaScript Dynamic pages  Pros: Lightweight complement to • enhanced usability, maybe applets • reduced trips to the server Mostly used for simple scripting • basic form validation  Cons: • popup ads • abuses annoyed users • comet cursor trails • business logic often implemented twice: client and server http://en.wikipedia.org/wiki/File:Pop-up_ads.jpg Re-distribution allowed with author’s consent. 10
  11. 11. 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 Re-distribution allowed with author’s consent. 11
  12. 12. 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 Re-distribution allowed with author’s consent. 12
  13. 13. 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 and session state • extremely rich UI stored on client  Cons: • content not indexable • requires JavaScript • often requires a ‘modern’ browser Re-distribution allowed with author’s consent. 13
  14. 14. Agenda Where we’ve been Where we’re going How we’ll get there Further resources Questions Re-distribution allowed with author’s consent. 14
  15. 15. From server-side app to smart clients and services Browser Client Browser-based HTML Rendering (progressive enhancement) HTML HTTP View Application Controllers Server Generation Service Layer Channels Repositories RDBMS Server CRUD Re-distribution allowed with author’s consent. 15
  16. 16. From server-side app to smart clients and services HTML5 & JS Engine Browser app or Client embedded in native DOM Controllers Client-side model web stg events & HTTP & JSON notifications WebSockets Service Layer Channels Repositories RDBMS Server CRUD Re-distribution allowed with author’s consent. 16
  17. 17. From server-side app to smart clients and services HTML5 & JS Engine Browser app or Client embedded in native DOM Controllers Client-side model web stg events & HTTP & JSON notifications WebSockets Service Service Service business / domain services Service Layer Channels Repositories RDBMS Server CRUD Re-distribution allowed with author’s consent. 17
  18. 18. From server-side app to smart clients and services HTML5 & JS Engine Browser app or Client embedded in native DOM Controllers Client-side model web stg events & HTTP & JSON notifications WebSockets business / Service Service Service domain services Channels Repositories RDBMS Server CRUD Re-distribution allowed with author’s consent. 18
  19. 19. From server-side app to smart clients and services HTML5 & JS Engine Browser app or Client embedded in native DOM Controllers Client-side model web stg events & HTTP & JSON notifications WebSockets business / Service Service Service domain services Service Service Service platform services, web APIs PaaS SQL NoSQL other Re-distribution allowed with author’s consent. 19
  20. 20. DemoApplications as Services Monty Hall Re-distribution allowed with author’s consent. 20
  21. 21. Agenda Where we’ve been Where we’re going How we’ll get there Further resources Questions Re-distribution allowed with author’s consent. 21
  22. 22. Client side code as a first class citizen Apply design patterns • all of your old favorites still apply • functional and OO patterns Modularize • decompose applications • let loaders reassemble Unit test • several excellent test harnesses Enforce code quality • JSHint Re-distribution allowed with author’s consent. 22
  23. 23. DemoClient side code as a first class citizen Re-distribution allowed with author’s consent. 23
  24. 24. Think Messaging Web Sockets are message based Web Workers are message based DOM Events are message based Web vs Integration is a false dichotomy Re-distribution allowed with author’s consent. 24
  25. 25. DemoClient-Server Messaging Re-distribution allowed with author’s consent. 25
  26. 26. Simplify Views Simple templates can render on the client or server • JSP, et al will never render client side Can the model be cleanly serialized? • anemic domain model has benefits Avoid imperative logic • lots of conditions may indicate the model is poorly structured Re-distribution allowed with author’s consent. 26
  27. 27. Client vs Server The definitions of “back-end” and “front-end” are shifting • font-end != client, back-end != server Embrace both sides Specialize in client-server integration Re-distribution allowed with author’s consent. 27
  28. 28. Frameworks New frameworks are emerging • quickly reaching maturity • watch this space Frameworks will not solve all your issues • sorry Re-distribution allowed with author’s consent. 28
  29. 29. Agenda Where we’ve been Where we’re going How we’ll get there Further resources Questions Re-distribution allowed with author’s consent. 29
  30. 30. IoC + JavaScript Decompose applications into modules Assemble modules together with Dependency Injection Brian Cavalier and John Hann • founders of Cujo.js Webinar January 31st • signup: http://www.springsource.org/node/3768 • sneak peak: http://www.youtube.com/watch?v=TqX-CqYYwEc Re-distribution allowed with author’s consent. 30
  31. 31. Questions?Re-distribution allowed with author’s consent. 31
  32. 32. Links Libraries • clicks.js: https://github.com/s2js/clicks • integration.js: https://github.com/s2js/integration • rest.js: https://github.com/s2js/rest • wire.js: https://github.com/cujojs/wire Scripted Editor: http://scripted-editor.github.com/scripted/ Monty Hall application • front-end: https://github.com/five-eleven/monty-hall-ui • back-end: https://github.com/acolyer/monty-hall IoC + JavaScript Webinar: http://www.springsource.org/node/3768 Re-distribution allowed with author’s consent. 32
  33. 33. Architecture of a Modern Web AppScott Andrews@scothisandrewss@vmware.com Re-distribution allowed with author’s consent. © 2013 SpringSource, A division of VMware. All rights reserved

×