Richard Seal - Single Page Application - SUGCON

Organized by the Community, for the Community.

SINGLE PAGE APPLICATION WITH REAL TIME UPDATES IN SITECORE

Richard Seal


OVERVIEW

• Introductions…• Who are ATP?• Why a Single Page Application?• What were the challenges?• How we did it?• Real Time Updates – Scoring & News Articles• LiveBlogMarket Place Module


WHO ARE THE ATP

• The Association of Tennis Professionals– Governing body of men’s professional tennis.– Player ranking & tournaments– ATP World Tour finals – end of year tournament

• Some stats:– Ave 9-‐10 Million visits per month– Ave 30 -‐40 Million page hits– 20 content editors, worldwide

SUGCON NORTH AMERICA 2015 3


WHY A SINGLE PAGE APPLICATION?



• Client Driven• Wanted a “USA Today” feel to the site• More like an integrated application and not a bunch

of disparate web pages.• Sports Based– Users should be less than a click away from live scores at all times

– 2-‐3 clicks away from stats too!

• Bandwidth benefits– User does not have to download the “scaffolding” of the page every time.

WHY A SINGLE PAGE APPLICATION?



WHAT CHALLENGES?

• Standard SPA– Server Side: API Framework to pull data. No presentation– Client Site: JavaScript application/framework to get the data and present it.• Angular, Backbone, Ember etc…

• We could do that in Sitecore… But:– No page editing– No personalization– No caching on renderings– Have to use ItemWebApior build full custom Api to get data.



CHALLENGES CONT…?

• Other cons:– Page rendering speed. Complex designs on older machines, mobile devices == Bad user experience.

– Not great for SEO without a custom solution (at the time of building)

– Client needed to support older versions of IE that did not support push state. So needed to be able to fall back to a “classic” style website in those situations



HOW WE DID IT!• Don’t re-‐invent the wheel.– Backbone was our choice

• Light weight• Simple to use• Great community support

• Render the Html server side– Standard Sitecore MVC Renderings– Personalization, Datasources– Sitecore rendering cache– Can use Sitecore Field Renderers so the Page Editor still works



BACKBONE.JS


Http Request Router

ViewDOMCollection/Models

Data Source

Sitecore Presentation


BACKBONE SETUP• Each page needs 2 views– Standard, all headers and footers etc…– Backbone/Ajax, just the content that changes from page to page

• Setup new Device “Ajax”– Simple query string– Empty layout for ajax presentation with a single placeholder


?ajax=true


BACKBONE SETUP CONT…• Simple catch all route in backbone

– Catches all requests– Can call xDB/Google analytics or other package here– Loads default Sitecore view and tells it to render



BACKBONE SETUP CONT…

• Main application view– Kicks off page transition animations– Calls render on the Sitecore view



BACKBONE SETUP CONT…

• Sitecore View


• Builds the url from the request and appends ajax=true• Keeps any existing query string parameters• Aborts any previous Ajax request• Kicks off a new Ajax request for the page• Calls the method to complete page transition animations


SIMPLIFYING THE PRESENTATION

• Each page requires 2 sets of presentation– Default Device– Ajax Device

• Don’t want to force editors to build pages twice• New Template– Add to the Device template inheritance:




• Set the Ajax Device to a Presentation Device.




• Set the Ajax Device to a Presentation Device.• New pipeline processor:– PerformRenderingForSinglePageApplication


Organized by the Community, for the Community.SUGCON NORTH AMERICA 2015 17


SIGNALR –REALTIME SCORES & NEWS UPDATES


Header/Menu

Scores/News

Footer

Handled by Backbone View


SIGNALR –REALTIME SCORES & NEWS UPDATES

• SignalR to keep News & Scores updated• Separate SignalR application– Scale out / host in the Cloud (Azure)

• Scores update service– Aggregates scores data with Sitecore data– Pushes score updates through the SignalRapplication

• News Publish Pipeline– Pushes new articles through SignalRbased on the last article published


Organized by the Community, for the Community.SUGCON NORTH AMERICA 2015 20

Player, Tournament & Scores Data

Sitecore DB

Live Scores Update Service

Web ApplicationSignalR

Application

End User

Historical Scores Service

Publish Pipeline


NEWS PUBLISH PIPELINE

• The latest article published gets stored in an SQL Table

• On publish, if the item is a news article, we check the date against the last one published

• If its newer, it is queued for broadcast via the SignalR application

• Each time an article is broadcast, the last article Id gets updated in the table.



NEWS PUBLISH PIPELINE

• On publish:end, the queue is then passed to the SignalR application to broadcast out to all subscribers



SITECORE LIVE BLOG MODULE

• Out of this came the Live Blog module• The blog consists of a Live Blog data template– Datasource for the main blog– Each entry is a Sitecore Item

• Can use as a Datasource if you wanted to “quote” the blog elsewhere on the site

• A custom SPEAK editor for adding entries and viewing existing entries

• A new Controller rendering for displaying the Blog– Options for using require.js or other way of including the JavaScript, or the rendering will include the files needed.




• SignalR runs in the Sitecore Application Pool– Pipelines to get it running:




• SPEAK Editor– Slack style commands– Can easily add new commands by implementing ILiveBlogCommand

– Commands defined in Sitecore

• Ships With– Markdown: default command.– Twitter: Embeds and tweet– More coming!– Surprise one for Slack members….



LIVE BLOG


Live Blog Editor

HUBCommand Parser

MD Tweet Other

Live Blog Rendering

Sitecore

Organized by the Community, for the Community.SUGCON NORTH AMERICA 2015

SM

27SUGCON NORTH AMERICA 2015

THANK YOU TO OUR SPONSORS!

Richard Seal - Single Page Application - SUGCON

Technology

Transcript of Richard Seal - Single Page Application - SUGCON