How we implemented a Single Page Application with SignalR for real time updates in Sitecore

1. Organized by the Community, for the Community.
SINGLE PAGE APPLICATION
WITH REALTIME UPDATES
IN SITECORE
Richard Seal

2. Organized by the Community, for the Community.
OVERVIEW
• Introductions…
• Who are ATP?
• Why a Single Page Application?
• What were the challenges?
• How we did it?
• RealTime Updates – Scoring & News Articles
• LiveBlog Market Place Module

3. Organized by the Community, for the Community.
WHO ARETHE ATP
• The Association ofTennis Professionals
– Governing body of men’s professional tennis.
– Player ranking & tournaments
– ATPWorldTour 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

4. Organized by the Community, for the Community.
WHY A SINGLE PAGE APPLICATION?
SUGCON NORTH AMERICA 2015 4

5. Organized by the Community, for the Community.
• Client Driven
• Wanted a “USAToday” 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?
SUGCON NORTH AMERICA 2015 5

6. Organized by the Community, for the Community.
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 ItemWebApi or build full custom Api to get
data.
SUGCON NORTH AMERICA 2015 6

7. Organized by the Community, for the Community.
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
SUGCON NORTH AMERICA 2015 7

8. Organized by the Community, for the Community.
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
SUGCON NORTH AMERICA 2015 8

9. Organized by the Community, for the Community.
BACKBONE.JS
SUGCON NORTH AMERICA 2015 9
Http Request Router
ViewDOM
Collection
/Models
Data
Source
Sitecore
Presentation

10. Organized by the Community, for the Community.
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
SUGCON NORTH AMERICA 2015 10
?ajax=true

11. Organized by the Community, for the Community.
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
SUGCON NORTH AMERICA 2015 11

12. Organized by the Community, for the Community.
BACKBONE SETUP CONT…
• Main application view
– Kicks off page transition animations
– Calls render on the Sitecore view
SUGCON NORTH AMERICA 2015 12

13. Organized by the Community, for the Community.
BACKBONE SETUP CONT…
• SitecoreView
SUGCON NORTH AMERICA 2015 13
• 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

14. Organized by the Community, for the Community.
SIMPLIFYINGTHE PRESENTATION
• Each page requires 2 sets of presentation
– Default Device
– Ajax Device
• Don’t want to force editors to build pages twice
• NewTemplate
– Add to the Device template inheritance:
SUGCON NORTH AMERICA 2015 14

15. Organized by the Community, for the Community.
SIMPLIFYINGTHE PRESENTATION
• Set the Ajax Device to a Presentation Device.
SUGCON NORTH AMERICA 2015 15

16. Organized by the Community, for the Community.
SIMPLIFYINGTHE PRESENTATION
• Set the Ajax Device to a Presentation Device.
• New pipeline processor:
– PerformRenderingForSinglePageApplication
SUGCON NORTH AMERICA 2015 16

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

18. Organized by the Community, for the Community.
SIGNALR –REALTIME SCORES & NEWS
UPDATES
SUGCON NORTH AMERICA 2015 18
Header/Menu
Scores/
News
Footer
Handled by BackboneView

19. Organized by the Community, for the Community.
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 SignalR application
• News Publish Pipeline
– Pushes new articles through SignalR based on the last
article published
SUGCON NORTH AMERICA 2015 19

20. Organized by the Community, for the Community.SUGCON NORTH AMERICA 2015 20
Player,Tournament & Scores Data
Sitecore DB
Live Scores
Update Service
Web Application
SignalR
Application
End User
Historical Scores
Service
Publish Pipeline

21. Organized by the Community, for the Community.
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.
SUGCON NORTH AMERICA 2015 21

22. Organized by the Community, for the Community.
NEWS PUBLISH PIPELINE
• On publish:end, the queue is then passed to the
SignalR application to broadcast out to all
subscribers
SUGCON NORTH AMERICA 2015 22

23. Organized by the Community, for the Community.
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.
SUGCON NORTH AMERICA 2015 23

24. Organized by the Community, for the Community.
SITECORE LIVE BLOG MODULE
• SignalR runs in the Sitecore Application Pool
– Pipelines to get it running:
SUGCON NORTH AMERICA 2015 24

25. Organized by the Community, for the Community.
SITECORE LIVE BLOG MODULE
• SPEAK Editor
– Slack style commands
– Can easily add new commands by implementing
ILiveBlogCommand
– Commands defined in Sitecore
• ShipsWith
– Markdown: default command.
– Twitter: Embeds and tweet
– More coming!
– Surprise one for Slack members….
SUGCON NORTH AMERICA 2015 25

26. Organized by the Community, for the Community.
LIVE BLOG
SUGCON NORTH AMERICA 2015 26
Live Blog Editor
HUB
Command Parser
MD Tweet Other
Live Blog Rendering
Sitecore

27. Organized by the Community, for the Community.SUGCON NORTH AMERICA 2015
SM
27SUGCON NORTH AMERICA 2015
THANKYOUTO OUR SPONSORS!