0
Architecture of a Modern Web AppScott Andrews@scothisandrewss@vmware.com                             Re-distribution allow...
About Me Joined SpringSource in 2008 Wearer of many hats Drifter                                                Teams ...
Agenda   Where we’ve been   Where we’re going   How we’ll get there   Further resources   Questions                  ...
Agenda   Where we’ve been   Where we’re going   How we’ll get there   Further resources   Questions                  ...
In the beginning...                      Re-distribution allowed with author’s consent.                                   ...
In the beginning... Sites were static HTML                            Pros:                                             ...
Let there be CGI                   Re-distribution allowed with author’s consent.                                         ...
Let there be CGI Introduced dynamic generated                      Pros: pages                                          ...
LiveScript JavaScript        http://en.wikipedia.org/wiki/File:Pop-up_ads.jpg                                             ...
LiveScript JavaScript Dynamic pages                                                               Pros: Lightweight com...
AJAX - Web 2.0 Google Maps sparked Web 2.0                     Pros: GMail                                             ...
Unobtrusive JavaScript No JavaScript, no problem                            Pros: Provide features for user agents     ...
Client Side Applications Business logic lives on the client                   Pros: Resources and permanent state      ...
Agenda   Where we’ve been   Where we’re going   How we’ll get there   Further resources   Questions                  ...
From server-side app to smart clients and services                                                                Browser ...
From server-side app to smart clients and services           HTML5 & JS Engine                                   Browser a...
From server-side app to smart clients and services             HTML5 & JS Engine                                   Browser...
From server-side app to smart clients and services             HTML5 & JS Engine                                 Browser a...
From server-side app to smart clients and services             HTML5 & JS Engine                                    Browse...
DemoApplications as Services       Monty Hall   Re-distribution allowed with author’s consent.                            ...
Agenda   Where we’ve been   Where we’re going   How we’ll get there   Further resources   Questions                  ...
Client side code as a first class citizen Apply design patterns  • all of your old favorites still apply  • functional an...
DemoClient side code as a first class citizen           Re-distribution allowed with author’s consent.                    ...
Think Messaging Web Sockets are message based Web Workers are message based DOM Events are message based Web vs Integr...
DemoClient-Server Messaging   Re-distribution allowed with author’s consent.                                              ...
Simplify Views Simple templates can render on the client or server  • JSP, et al will never render client side Can the m...
Client vs Server The definitions of “back-end” and “front-end” are shifting  • font-end != client, back-end != server Em...
Frameworks New frameworks are emerging  • quickly reaching maturity  • watch this space Frameworks will not solve all yo...
Agenda   Where we’ve been   Where we’re going   How we’ll get there   Further resources   Questions                  ...
IoC + JavaScript Decompose applications into modules Assemble modules together with Dependency Injection Brian Cavalier...
Questions?Re-distribution allowed with author’s consent.                                                 31
Links Libraries  • clicks.js: https://github.com/s2js/clicks  • integration.js: https://github.com/s2js/integration  • re...
Architecture of a Modern Web AppScott Andrews@scothisandrewss@vmware.com                             Re-distribution allow...
Upcoming SlideShare
Loading in...5
×

Architecture of a Modern Web App

39,265

Published on

Published in: Technology
1 Comment
58 Likes
Statistics
Notes
  • is there any comment for it or just slides?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
39,265
On Slideshare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
757
Comments
1
Likes
58
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×