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.phonegap

3

You Probably Have Some Questions

Don’t worry…

5

Review: Traditional Web Development

Super Simplified - Request / Response

1) Client asks for a resource by URL

2) Server builds & packages a fully baked response and ships it back

3) 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=maybe

7

SPA’s !== Panacea

Drawbacks to SPA’s

SEO – Search Crawlers don’t run JavaScript **

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 the application development requires.

** Semantic server side HTML templates required to render content for SEO

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 server load.

Massive tooling support, Vibrant community.

Code reuse. REST endpoints are general purpose and can be used for multiple applications.

Paradigm used by modern web frameworks: Backbone, Angular, Ember.js, jQuery Mobile & Phonegap.

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 stuff

10

REST Templates in WCM JSON / HTML, it is all the same to Velocity

http://ratings.standardandpoors.com/templates/app-search.json?content-type=Media&keywords=&page=1

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/

Thank You

13