Your SlideShare is downloading. ×
Limelight Single Page Application Presentation
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Limelight Single Page Application Presentation


Published on

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

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. SA Knowledge SharingSingle Page Application DevelopmentHTML 5, CSS, JSApril, 26th 2013 Scott Puleo
  • 2. First things first … A Demo! New S&P Search Mobile Demo Code Available on the Githubs!
  • 3. You Probably Have Some Questions3
  • 4. Don’t worry…
  • 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. 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.•
  • 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. 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. 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. REST Templates in WCM JSON / HTML, it is all the same to Velocity
  • 11. Questions?11
  • 12. Resources Backbone & other MV* JS frameworks (great screencasts) (my framework of choice) JavaScript & General App Design (great podcast) (foundational) (foundational)
  • 13. Thank You13