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.

Front Architecting for the Enterprise

416 views

Published on

This is a review of the current landscape of approaches to front end architecture, the challenges and potential of adopting Single Page Applications in the Enterprise.

From a talk given at http://www.meetup.com/London-Emberjs-User-Group/events/165918482/

See the talk here:
http://vimeo.com/89076477

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Front Architecting for the Enterprise

  1. 1. 1 ARCHITECTING FOR THE ENTERPRISE https://xkcd.com/844/
  2. 2. 2 Thomas Cowell Head of Interactive Development (UK) @hairballopolis http://uk.linkedin.com/thomascowell
  3. 3. A Brief History of the Web
  4. 4. 4  60s – Packet switching discovered.  60s/70s – Dawn of networked computers  1982 – TCP/IP standardized (mass utilized until native stack in Windows 95)  80s/90s - AOL / Bulletin Boards Brief History of the Web
  5. 5. 6  80s/90s - AOL / Bulletin Boards  1984 – DNS  1991 – First Web Page  1993 – Mosaic – First Browser  1995 – Shockwave Flash  1999 – IE5  2000 – HTML4  2001 – IE6 Brief History of the Web
  6. 6. 8  2001 – IE6 & Windows XP  2004 – Facebook started  2005 – Firefox 1.0  2006 – Ajax takes of with Ruby on Rails  2008 – HTML5 first public draft  2012 – HTML5 Candidate Recommendation  2013 – 153 of Fortune 500 use HTML5  2014 – HTML5 Recommendation  April 8 2014 – WinXP & IE6 End of Life Brief History of the Web
  7. 7. OMG they have legacy systems
  8. 8. How to bring the best in breed solutions to a technically conservative market place.
  9. 9. Looking to the Future Or do I mean present?
  10. 10. Private & Confidential, SapientNitro © 2013
  11. 11. 14  Thin Client, Thick Server, pull/get only  Thick(ish) Client, Thick Server, isolated push  Thick Client, Thin(ish) Server, natural push Technical Design
  12. 12. 15 Low Complexity Pages Static HTML Full Page Refresh Client Pull / Get from Server Progressively Enhanced Pages Multiple Pages with in-page interactions Ajax, generally pull Transactional / Interactive May contain isolated Push widgets Single Page Applications Transactional / Workflow / Tool App like Experience Lends itself naturally to Push Technical Design
  13. 13. 16 SEO Maintainability Complexity of systems Platform support - CMS, Ecommerce system, etc. Performance (Perceived & Measured) Accessibility (A, AA, AAA, etc.) Fragmentation of Browsers Browser Support Emerging technology & speed Responsive / Adaptive Web? Technical Focus of Developers What are the constraints?
  14. 14. …they have legacy systems…
  15. 15. What does this mean?
  16. 16. 19 Using principles of well constructed systems UI systems.  Modular components  Clear separation of responsibilities  Self contained  Decoupled interactions  Shouldn’t fail when not there  Behave like DOM events  Clear dependency management  Dependency management - require js  Each module should manage its dependencies Architectural principles
  17. 17. 20
  18. 18. 21 Static HTML with no transaction with a server. Where to use this technology?  Brochure-ware  Informative sites, which irregularly change  Content is not transactional  Technology: CQ5, Tridian, Wordpress, Drupal, nanoc, jekyll Static Pages
  19. 19. 22
  20. 20. 23 An enhanced HTML page with componentry and moving parts where there are interactions with the server. Where to use this technology?  Transactional with greater client support  Where SEO is super important.  James Croft – Integrating Ember into existing sites. https://vimeo.com/86698279  Interactive Digital Experiences  Linger is short  Creative is not app-like in appearance  Technology: jQuery, Flash, eCommerce, airline booking sites. Progressively Enhanced
  21. 21. 24
  22. 22. 25 A page where a visitor spends a considerable amount of time transacting with a service or page. Where to use this technology?  Highly interactive pages and transactional pages  Behind authentication  SEO is not too important or can be embedded into server delivered HTML  Modern browsers are acceptable minimum.  JSON APIs all the way  Gmail, Facebook Timeline, Harley Bike Configurator, Trading platforms. Single Page Applications
  23. 23. 26 Technical Challenges  Analytics and measuring  In the controller  Part of view interactions  Content Management  How to provide simple management of the application to non-technical content managers  Seamless management and deployment  Authentication  Done in app, when on SSL  Done as a separate page when Single Page Applications
  24. 24. 27 Static Pages Progressive Enhanced Single Page Application Technical Complexity Low Medium - High Medium - High Initial HTML page Same Small transaction flourishes To bootstrap and then it changes SEO High High Medium - Low Performant Super Fast Fast Slow load & super fast Total Cost of Ownership Low Medium High Accessibility High High Medium (extra effort required) Responsive / Adaptive High High High Dwell Time Low Medium High Design is app-like Low Low – Medium High Volume of Transaction on each page None – Low Low – Medium High Legacy Browser Support High Priority Medium – High Low - Medium Complexity of Systems Low Medium Medium - High Can business logic exist in the client? No Maybe Maybe - Yes Server Interactions Pull only Isolated Push, generally pull Naturally Push
  25. 25. Here is the secret
  26. 26. 29 Be smart and flexible! Choose the right technology for the right purpose. We are already skilled at Static & Progressive Enhanced Sites
  27. 27. 30 Making a place for Single Page Applications Find suitable locations to make it a celebration of the technology  Application Like experiences  Behind Authentication  Configurators  Highly interactive  Transactional without substantial content changes.  JSON APIs
  28. 28. 31 How to handle a hybrid approach There is an opportunity to mix approaches as and where appropriate.  Identify the sweet spots  Look at cost of making as a static page vs SPA  Understand the visitor expectations  Are there security or privacy rationale that would be mitigated by separate pages.  Facebook,
  29. 29. Sometimes it feels like glaciers move faster
  30. 30. Sometimes legacy makes it interesting
  31. 31. © 2013 SAPIENT CORPORATION | CONFIDENTIAL THANK YOU

×