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

1,273

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,273
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. SA Knowledge SharingSingle Page Application DevelopmentHTML 5, CSS, JSApril, 26th 2013 Scott Puleo
  • 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. 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.• http://www.foo.com/#/i-am-a-hash/path?cool=true&strange=maybe6
  • 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 Velocityhttp://ratings.standardandpoors.com/templates/app-search.json?content-type=Media&keywords=&page=110
  • 11. Questions?11
  • 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. Thank You13

×