SlideShare a Scribd company logo

Single Page Applications with Real Time Updates - SUGCON

•Download as PPTX, PDF•
•
R
Richard Seal

This document discusses building a single page application for the ATP (Association of Tennis Professionals) website using Sitecore and Backbone.js. It aimed to provide a more integrated application experience for users while maintaining Sitecore functionality like personalization and caching. Key challenges addressed were rendering pages server-side in Sitecore while using a client-side framework, and supporting older browsers. SignalR was used to enable real-time score and news updates. A Live Blog module was also created using this approach.

Related slideshows

BikersPlanet.pptx
BikersPlanet.pptxBikersPlanet.pptx
BikersPlanet.pptx
 
Sitecore Commerce Catalog Management at Scale
Sitecore Commerce Catalog Management at ScaleSitecore Commerce Catalog Management at Scale
Sitecore Commerce Catalog Management at Scale
 
E-Auction
E-AuctionE-Auction
E-Auction
 
1 of 27
Organized by the Community, for the Community. SINGLE PAGE APPLICATION WITH REALTIME UPDATES IN SITECORE Richard Seal
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
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
Organized by the Community, for the Community. WHY A SINGLE PAGE APPLICATION? SUGCON NORTH AMERICA 2015 4
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
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
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
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
Organized by the Community, for the Community. BACKBONE.JS SUGCON NORTH AMERICA 2015 9 Http Request Router ViewDOM Collection /Models Data Source Sitecore Presentation
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
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
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
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
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
Organized by the Community, for the Community. SIMPLIFYINGTHE PRESENTATION • Set the Ajax Device to a Presentation Device. SUGCON NORTH AMERICA 2015 15
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
Organized by the Community, for the Community.SUGCON NORTH AMERICA 2015 17
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
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
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
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
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
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
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
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
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
Organized by the Community, for the Community.SUGCON NORTH AMERICA 2015 SM 27SUGCON NORTH AMERICA 2015 THANKYOUTO OUR SPONSORS!

More Related Content

Single Page Applications with Real Time Updates - SUGCON

  • 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!

Editor's Notes

  1. Introduce Me Brief history What I do at Lightmaker Who Lightmaker are An international digital agency Nearly 20 years experience Offices Orlando Denver Vancouver UK Give overview of Presentation:
  2. Show the code – run through. Transition through some pages.