SA Knowledge SharingSingle Page Application DevelopmentHTML 5, CSS, JSApril, 26th 2013 Scott Puleo
First things first … A Demo! New S&P Search http://ratings.standardandpoors.com/search Mobile Demo http://ratings.stan...
You Probably Have Some Questions3
Don’t worry…
Review: Traditional Web Development5Super Simplified - Request /Response1) Client asks for a resource by URL2) Server buil...
Single Page Applications• Small applications that run Client Side on the users Browser• Note the word Application!• Markup...
SPA’s !== Panacea Drawbacks to SPA’s SEO – Search Crawlers don’t runJavaScript ** Not every page needs to be a web Appl...
SPA’s Can be Awesome though! Benefits It is an application so it can do Cool Stuff! Responsive, native application feel...
Developing an SPA on the WCM platform How can such an application be built on WCM? ~ 4 files (don’t worry you know at le...
REST Templates in WCM JSON / HTML, it is all the same to Velocityhttp://ratings.standardandpoors.com/templates/app-search...
Questions?11
Resources Backbone & other MV* JS frameworks http://peepcode.com (great screencasts) http://www.backbonerails.com/ htt...
Thank You13
Upcoming SlideShare
Loading in …5
×

Limelight Single Page Application Presentation

1,502 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Limelight Single Page Application Presentation

  1. 1. SA Knowledge SharingSingle Page Application DevelopmentHTML 5, CSS, JSApril, 26th 2013 Scott Puleo
  2. 2. First things first … A Demo! New S&P Search http://ratings.standardandpoors.com/search Mobile Demo http://ratings.standardandpoors.com/templates/mobile_demo Code Available on the Githubs! https://github.com/Limelight-PS/sandp.portal.static https://github.com/Limelight-PS/sandp.phonegap2
  3. 3. You Probably Have Some Questions3
  4. 4. Don’t worry…
  5. 5. Review: Traditional Web Development5Super Simplified - Request /Response1) Client asks for a resource by URL2) Server builds & packages a fullybaked response and ships it back3) Client renders the response(maybe some JS rollovers or jQuery soup)
  6. 6. Single Page Applications• Small applications that run Client Side on the users Browser• Note the word Application!• Markup, CSS & JS required for the application sent with the initial request.• Page changes occur via JavaScript using Templates & DOM manipulation• URL hashes are used to track state and provide bookmark-able links.• http://www.foo.com/#/i-am-a-hash/path?cool=true&strange=maybe6
  7. 7. SPA’s !== Panacea Drawbacks to SPA’s SEO – Search Crawlers don’t runJavaScript ** Not every page needs to be a web Application! More expensive to develop and more difficult to debug. Clients must be willing to buy into the extra cost and time theapplication development requires.** Semantic server side HTML templates required to render content for SEO7
  8. 8. SPA’s Can be Awesome though! Benefits It is an application so it can do Cool Stuff! Responsive, native application feel. No page flicker! Most of the page processing happens client side, offloading serverload. Massive tooling support, Vibrant community. Code reuse. REST endpoints are general purpose and can beused for multiple applications. Paradigm used by modern web frameworks: Backbone, Angular,Ember.js, jQuery Mobile & Phonegap.8
  9. 9. Developing an SPA on the WCM platform How can such an application be built on WCM? ~ 4 files (don’t worry you know at least 75% this stuff)• HTML: Holds templates and markup used in the application• JavaScript: Provides the application logic**• CSS: Provides the page styles• REST Endpoint: Provides the application data** Frameworks like backbone.js do the frame-worky stuff9
  10. 10. REST Templates in WCM JSON / HTML, it is all the same to Velocityhttp://ratings.standardandpoors.com/templates/app-search.json?content-type=Media&keywords=&page=110
  11. 11. Questions?11
  12. 12. Resources Backbone & other MV* JS frameworks http://peepcode.com (great screencasts) http://www.backbonerails.com/ http://backbonejs.org/ http://marionettejs.com/ (my framework of choice) http://emberjs.com/ http://knockoutjs.com/ http://angularjs.org/ JavaScript & General App Design http://javascriptjabber.com/ (great podcast) http://www.watchmecode.net/javascript-fundamentals (foundational) http://javascript.crockford.com/ (foundational) http://singlepageappbook.com/12
  13. 13. Thank You13

×