The Future of the CMS

Transcription

1 The Future of the CMS Decoupled architecture, multiple frontends, and content as a service August 10, 2016 Four Kitchens

2 Todd Ross Nienkerk CEO, Co-Founder, and Digital Strategist Four

3 I want you to rethink how we manage, publish, and consume content. I am here today because

4 Agenda What decoupled means

5 Agenda When decoupling makes sense

6 Agenda What s next What s next for content and the web.

7 1 2 3 What decoupled means

8 Frontend CMS Backend

9 Frontend CMS Backend

10 Head Frontend Decoupled (or headless ) Body CMS Backend * We have separated the head from the body. * The resulting architecture is decoupled (or headless ).

11 Frontend CMS Backend

12 Web Backend When we talk about the frontend, we most commonly mean your website.

13 Native apps Web AMP Feeds Backend Screen readers Xbox Alexa Smart TVs But your website is actually one of many frontends one of many ways users experience your content.

14 Native apps Web AMP Feeds Backend Screen readers Xbox Alexa Smart TVs This is the future of the CMS, where all frontends are first-class citizens

15 Native apps Web AMP Feeds Content Screen readers Xbox Alexa Smart TVs Where everything starts with content.

16 1 2 3 When decoupling makes sense

17 Decoupling makes sense when you want to Adopt cutting-edge frontend technologies

18 Backend safe repeatable known solutions, expected results Frontend safe repeatable known solutions, expected results BORING

19 Backend Frontend bleeding-edge tech richest experience high risk, high reward bleeding-edge tech richest experience high risk, high reward DANGEROUS The frontends are changing faster and are more diverse than content management needs

20 Backend safe repeatable known solutions, expected results Frontend bleeding-edge tech richest experience high risk, high reward JUST RIGHT This is the Goldilocks solution: Not too boring, and not too dangerous. Just right.

21 Decoupling makes sense when you want to Separate upgrades from redesigns

22 Coupled Redesign Redesign Redesign Redesign Time New CMS Upgrade CMS Upgrade CMS Upgrade CMS

23 Decoupled separates upgrades and redesigns Redesign Redesign Redesign Time New CMS Upgrade CMS Upgrade CMS

24 Decoupled helps you keep pace with frontend tech Redesign Angular React Backbone Ember Polymer Time New CMS Upgrade CMS

25 Decoupled allows multiple frontends and experiences Redesign ios app Roku Web redesign Alexa Time New CMS Upgrade CMS

26 Decoupling makes sense when you want to Eliminate tension between a design and your CMS

27 Design Who s walking whom? CMS Should your design be optimized for your CMS? Or should you modify your CMS to achieve your design? In other words, are you walking the dog, or is the dog walking you?

28 Two philosophies of designing for a CMS

29 CMS first The users needs are important, but there are many ways to satisfy them The design can be changed to align with the natural behavior of the CMS The end result is easier and cheaper to maintain

30 Design first The users needs are paramount and non-negotiable The design must be executed as-is This may involve hacking the CMS or creating a complicated codebase, which affects maintainability

31 Neither philosophy is wrong, and decoupling can satisfy both

32 Decoupling makes sense when you want to Centralize your content

33 Sara s website CMS Content Bob s website CMS My website CMS Content Frank s website CMS Content Laura s website CMS Content Content

34 My website CMS Content

35 My website CMS Content

36 Me Sara Frank Content hub Bob Laura

37 Me Sara

38 Me Sara

39 Me Sara

40 Me Sara

41 Decoupling makes sense when you want to Publish to many frontends and experiences

42 Native apps Web AMP Feeds Content hub Screen readers Xbox Alexa Smart TVs

43 Native apps Web AMP Feeds Screen readers Xbox Alexa Smart TVs

44 Native apps Web AMP Feeds Screen readers Xbox Alexa Smart TVs

45 Decoupling makes sense when you want to Integrate multiple backends or services

46 Native apps Web AMP Content Open Calais Video service Solr search

47 Decoupling makes sense when you want to Make your content easily accessible via an API

48 Native apps Web AMP Feeds Content hub Xbox Alexa Smart TVs

49 Native apps Web AMP Fan site Feeds Content hub Public API Xbox Alexa Smart TVs Public data

50

51 Why TWiT went headless

52 [It s] faster and easier to create new sites. Web design styles change faster than high fashion, so it's nice to be able to update the site without re-doing all the hard work on the backend. Source: Leo Laporte s announcement (4ktch.in/twittv-leo)

53 Having a complete API would make it easier to do apps. The app, just like the website, would have access to everything there is to know about TWiT, in a simple, accessible fashion. Source: Leo Laporte s announcement (4ktch.in/twittv-leo)

54 By making the API public, we encourage members of our audience to create new things, things we might never have thought of. You could even design a website you like better. Abstracting the content from the presentation seems like a big win. Source: Leo Laporte s announcement (4ktch.in/twittv-leo)

55 By keeping Drupal simple and avoiding additional thirdparty modules, we can make a more secure and reliable backend that will be much easier to upgrade when future versions of Drupal arrive. Source: Leo Laporte s announcement (4ktch.in/twittv-leo)

56 TWiT s case study: 4ktch.in/twittv-leo 4K s blog post: 4ktch.in/twittv-4k API documentation: docs.twittv.apiary.io Consume content the same way TWiT s website does! Saucier: github.com/fourkitchens/saucier Our open-source Node.js framework for building decoupled Drupal sites Instead of using all of Drupal, TWiT opted to use only the robust content management tools, and left other pieces like the theme system untouched. Instead, Four Kitchens built a lighter, decoupled frontend using Node.JS and a Redis cache that can handle more requests per second, with a median response time of 10ms during their busy live-stream hour. Both the Redis cache and Varnish are intelligently cleared as Drupal is updated, meaning that content is always fresh while remaining quick to download. The front end is an Express app using Dust to render templates. This mix of libraries allows pages to be constructed on the server (to provide faster page loads) while easily allowing the templates to be reused for client-side updates once the page is initialized.

57 Decoupling makes sense when you want to Adopt cutting-edge frontend technologies Separate upgrades from redesigns Eliminate tension between a design and your CMS Centralize your content Publish to many frontends and experiences Integrate multiple backends or services Make your content easily accessible via an API

58 1 2 3 What s next

59 Content comes first * Current CMSs manage websites first and content second. This needs to change. * Content strategy is a requirement for all organizations. * Content modeling is key to building a robust digital strategy. * Fully divorce content from its presentation.

60 We must design for experiences, not just devices * Different experiences. Different technologies. Doesn t mean RWD isn t important. It s still the core of how to present on the web. But, the internet as we think of it is no longer the only place where your content is relevant.

61 Frontend technologies are accelerating, and CMSs can t keep pace * As a result, CMSs should double-down on content. Put the C back in Content Management Systems.

62 Rise of WMSs (Website Management Systems) and services like Squarespace

63 Return of (small) static websites

64 Reusable, atomized content * Tokenized content *

65 Conversational interfaces * Alexa * Chatbots * Adding new fields for the NBC.com Alexa skill * Miked homes and offices * Subvocalization and subvocal mics

66 Virtual and augmented reality * Fully immersive, 360-degree video * Commerce * Tactile web

67 Fight Club (1999)

68 Questions?

69 Credits All content in this presentation, except where noted otherwise and listed below, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright Four Kitchens, LLC. The following icons are from the Noun Project and are licensed Creative Commons BY 3.0: Dog-walking illustration based on an icon by Pavel Nikandrov; Laptop icon by B. Agustín Amenábar Larraín; Tablet icon by Pham Thi Dieu Linh; Smartphone icon by George Agpoon; Media icon by Garrett Knoll; Text icon by Julien Miclo; Chat icon by Dolly Vu; Document icon by Nimal Raj. Drupal is a registered trademark of Dries Buytaert.