Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
CONTENT AS A SERVICE:
WHAT TO KNOW ABOUT DECOUPLED CMS
PANTHEON WEBINAR WITH FOUR KITCHENS AND PIXO
TWITTER:
@GETPANTHEON
Pantheon.io 3
Speakers
Josh Koenig
Co-Founder &
Head of Developer
Experience
Pantheon
Mike
Minecki
Director of
Technology ...
Pantheon.io 4
Agenda
‣Why Decoupled CMS? Josh Koenig, Pantheon
‣Case Study #1: Mike Minecki, Four Kitchens
‣Case Study #2:...
WHY DECOUPLED CMS?
Pantheon.io 6
Monolith vs. Decoupled
Monolith
Templates & Themes
Display Logic
Editorial UI
Admin UI
VS.
Decoupled
Pantheon.io
Decoupled
7
•
CMS
JS App
User
Request
Hybrid
•
CMS
Single

Page App
User
Request
Single Page
•
CMS
Native
Mobi...
Pantheon.io 8
Speakers
Mike
Minecki
Director of
Technology Four
Kitchens
Pantheon.io 9
Speakers
Brandon 

Bowersox-
Johnson
Chief Technology
Strategist
Pixo
June 11, 2015
TWiT.tv
Drupal & Node.js = Content as a Service
Agenda
• About us
• About TWiT.tv
• Why Content as a Service?
• Architecture
• Workflow
• Final Thoughts
We make BIG websites
fourkitchens.com @fourkitchens
The TWiT.tv Netcast Network with Leo Laporte features
the #1 ranked technology podcast This Week in Tech,
along with over ...
Why TWiT.tv wanted a

Content as a Service architecture
Decouple upgrades
Cost of Drupal upgrade stifled redesign
attempts
Better API for app developers
Active community of developers currently
using RSS feeds.
Exiting and proven
technology
A desire to innovate and iterate.
Architecture
Architecture
• Node.js
• Drupal 7
• Custom encoding server (named Elroy)
• Cachefly for static assets.
Architecture walkthrough
Publishing and viewing a podcast on the
new TWiT.tv
Publishin
g
Drupal
Publishin
g
Drupal
Elroy
Publishin
g
Drupal
Elroy
Publishin
g
web
mobile apps
Drupal
Elroy
Viewin
g
web
mobile apps
Node.js
Drupal
Elroy
Warm
Cach
e
web
mobile apps
Node.js
Drupal
Redis
Elroy
Warm
Cach
e
web
mobile apps
Node.js
Drupal
Redis
Elroy
Warm
Cach
e
web
mobile apps
Node.js
Drupal
Redis
Elroy
Warm
Cach
e
web
mobile apps
Node.js
Drupal
Redis
Elroy
Warm
Cach
e
web
mobile apps
Node.js
Drupal
Elroy
Cold
Cach
e
web
mobile apps
Node.js
Drupal
Elroy
Cold
Cach
e
web
mobile apps
Node.js
Drupal
Redis
Elroy
Cold
Cach
e
web
mobile apps
Node.js
Drupal
Redis
Elroy
Cold
Cach
e
web
mobile apps
Node.js
Drupal
Redis
Elroy
Cold
Cach
e
Drupal architecture
• Drupal 7
• RESTful Module
• Very little custom Drupal code
Node.js architecture
• Saucier - Our headless framework
• Node.js
• Express for routing
• Dust templates
• Redis for cachi...
Workflow
API mockups
Get front end and back end teams working
early
Apiary.io
Edit in Markdown
Built in API console
Returns example
Acts as a proxy
Design in the browser
A dream come true
Wireframes
Style tiles
Design in the browser
Design in the browser
• Responsive loves design in the browser
• Workflow with Drupal is always clunky
• Decoupling made th...
Final thoughts
Decoupling empowered
everyone.
Decoupled empowerment
• Redesigns won’t require a CMS upgrade
• Independent work streams
• Best of breed tools
• More natu...
Thank you!
Case Study
Brandon Bowersox-Johnson
@brandonbowersox
@pixotech
www.pixotech.com
TABLET PHONE
TABLET PHONE
TABLET PHONE
TABLET PHONE
TABLET PHONE
TABLET PHONE
TABLET PHONE
Old Way
• CMS theming
• Limited team
• Develop in CMS
• Costly upgrades
• Choose the best FE
tools
• FE devs ≠ CMS devs
• ...
CMS
uic.edu
CMS
cms.uic.ed
u
Site
uic.edu
Content as a Service
cms.uic.ed
u
Site
uic.edu
Content as a Service
CMS JSON
The Front End
Pattern Lab
Pattern Lab
• Atomic design
• Test drive responsive layouts
• Assemble elements into pages
• More at patternlab.io
Benefits
• Able to pick and add best tools
• Front end team starts right away
• Test drive components
The CMS
WordPress
Decoupled WordPress
• Minimal custom code
• Component-based content structure
• WordPress JSON API
Benefits
• Less-customized CMS easier to upgrade
• More focused authoring experience
• Content available as JSON
CMS + Pattern Lab
Outpost
Outpost
• Lightweight PHP app
• Feeds JSON from WordPress or Drupal 

into Pattern Lab templates
• More at getoutpost.org
Outpost
1. Handles visitor requests (Symfony
HTTP...)
2. Fetches JSON content (Guzzl)
3. Caches responses (Stash)
4. Dev t...
Content Objects
• Feed JSON into PatternLab
• Encapsulate JSON into objects
Outpost
cms.uic.ed
u
Site
uic.edu
CMS JSON
Result
• Fell in love with our CMS again
• Built great FE with the best tools
• FE dev team and timeline not tied to CMS
•...
Thank you!
Q&A
THANK YOU
@GETPANTHEON
Content as a Service: What to Know About Decoupled CMS
Content as a Service: What to Know About Decoupled CMS
Content as a Service: What to Know About Decoupled CMS
Content as a Service: What to Know About Decoupled CMS
Content as a Service: What to Know About Decoupled CMS
Content as a Service: What to Know About Decoupled CMS
Content as a Service: What to Know About Decoupled CMS
Content as a Service: What to Know About Decoupled CMS
Content as a Service: What to Know About Decoupled CMS
Nächste SlideShare
Wird geladen in …5
×

Content as a Service: What to Know About Decoupled CMS

39.501 Aufrufe

Veröffentlicht am

Learn:

-How decoupled architecture can help future-proof a website

-How decoupled architecture leverages a wider set of experts by clearly delineating front and back-end

-How to use modules and patterns to build decoupled websites using Drupal 7 and WordPress

-What to expect from both Drupal 8 and the upcoming WordPress JSON API

  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download Full EPUB Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download Full doc Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download PDF EBOOK here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download EPUB Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download doc Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

Content as a Service: What to Know About Decoupled CMS

  1. 1. CONTENT AS A SERVICE: WHAT TO KNOW ABOUT DECOUPLED CMS PANTHEON WEBINAR WITH FOUR KITCHENS AND PIXO
  2. 2. TWITTER: @GETPANTHEON
  3. 3. Pantheon.io 3 Speakers Josh Koenig Co-Founder & Head of Developer Experience Pantheon Mike Minecki Director of Technology Four Kitchens Brandon 
 Bowersox- Johnson Chief Technology Strategist Pixo
  4. 4. Pantheon.io 4 Agenda ‣Why Decoupled CMS? Josh Koenig, Pantheon ‣Case Study #1: Mike Minecki, Four Kitchens ‣Case Study #2: Brandon Bowersox-Johnson, Pixo ‣Discussion and Q&A
  5. 5. WHY DECOUPLED CMS?
  6. 6. Pantheon.io 6 Monolith vs. Decoupled Monolith Templates & Themes Display Logic Editorial UI Admin UI VS. Decoupled
  7. 7. Pantheon.io Decoupled 7 • CMS JS App User Request Hybrid • CMS Single
 Page App User Request Single Page • CMS Native Mobile App User Request Native • Decoupled Front End CMS User Request CMS2 CMS
  8. 8. Pantheon.io 8 Speakers Mike Minecki Director of Technology Four Kitchens
  9. 9. Pantheon.io 9 Speakers Brandon 
 Bowersox- Johnson Chief Technology Strategist Pixo
  10. 10. June 11, 2015 TWiT.tv Drupal & Node.js = Content as a Service
  11. 11. Agenda • About us • About TWiT.tv • Why Content as a Service? • Architecture • Workflow • Final Thoughts
  12. 12. We make BIG websites fourkitchens.com @fourkitchens
  13. 13. The TWiT.tv Netcast Network with Leo Laporte features the #1 ranked technology podcast This Week in Tech, along with over 20 other top-ranked online shows.
  14. 14. Why TWiT.tv wanted a
 Content as a Service architecture
  15. 15. Decouple upgrades Cost of Drupal upgrade stifled redesign attempts
  16. 16. Better API for app developers Active community of developers currently using RSS feeds.
  17. 17. Exiting and proven technology A desire to innovate and iterate.
  18. 18. Architecture
  19. 19. Architecture • Node.js • Drupal 7 • Custom encoding server (named Elroy) • Cachefly for static assets.
  20. 20. Architecture walkthrough Publishing and viewing a podcast on the new TWiT.tv
  21. 21. Publishin g
  22. 22. Drupal Publishin g
  23. 23. Drupal Elroy Publishin g
  24. 24. Drupal Elroy Publishin g
  25. 25. web mobile apps Drupal Elroy Viewin g
  26. 26. web mobile apps Node.js Drupal Elroy Warm Cach e
  27. 27. web mobile apps Node.js Drupal Redis Elroy Warm Cach e
  28. 28. web mobile apps Node.js Drupal Redis Elroy Warm Cach e
  29. 29. web mobile apps Node.js Drupal Redis Elroy Warm Cach e
  30. 30. web mobile apps Node.js Drupal Redis Elroy Warm Cach e
  31. 31. web mobile apps Node.js Drupal Elroy Cold Cach e
  32. 32. web mobile apps Node.js Drupal Elroy Cold Cach e
  33. 33. web mobile apps Node.js Drupal Redis Elroy Cold Cach e
  34. 34. web mobile apps Node.js Drupal Redis Elroy Cold Cach e
  35. 35. web mobile apps Node.js Drupal Redis Elroy Cold Cach e
  36. 36. Drupal architecture • Drupal 7 • RESTful Module • Very little custom Drupal code
  37. 37. Node.js architecture • Saucier - Our headless framework • Node.js • Express for routing • Dust templates • Redis for caching
  38. 38. Workflow
  39. 39. API mockups Get front end and back end teams working early
  40. 40. Apiary.io
  41. 41. Edit in Markdown
  42. 42. Built in API console
  43. 43. Returns example
  44. 44. Acts as a proxy
  45. 45. Design in the browser A dream come true
  46. 46. Wireframes
  47. 47. Style tiles
  48. 48. Design in the browser
  49. 49. Design in the browser • Responsive loves design in the browser • Workflow with Drupal is always clunky • Decoupling made the process seamless
  50. 50. Final thoughts
  51. 51. Decoupling empowered everyone.
  52. 52. Decoupled empowerment • Redesigns won’t require a CMS upgrade • Independent work streams • Best of breed tools • More natural modern design process
  53. 53. Thank you!
  54. 54. Case Study
  55. 55. Brandon Bowersox-Johnson @brandonbowersox @pixotech www.pixotech.com
  56. 56. TABLET PHONE
  57. 57. TABLET PHONE
  58. 58. TABLET PHONE
  59. 59. TABLET PHONE
  60. 60. TABLET PHONE
  61. 61. TABLET PHONE
  62. 62. TABLET PHONE
  63. 63. Old Way • CMS theming • Limited team • Develop in CMS • Costly upgrades • Choose the best FE tools • FE devs ≠ CMS devs • Start without a CMS • Simpler CMS upgrades Goals
  64. 64. CMS uic.edu
  65. 65. CMS cms.uic.ed u Site uic.edu Content as a Service
  66. 66. cms.uic.ed u Site uic.edu Content as a Service CMS JSON
  67. 67. The Front End Pattern Lab
  68. 68. Pattern Lab • Atomic design • Test drive responsive layouts • Assemble elements into pages • More at patternlab.io
  69. 69. Benefits • Able to pick and add best tools • Front end team starts right away • Test drive components
  70. 70. The CMS WordPress
  71. 71. Decoupled WordPress • Minimal custom code • Component-based content structure • WordPress JSON API
  72. 72. Benefits • Less-customized CMS easier to upgrade • More focused authoring experience • Content available as JSON
  73. 73. CMS + Pattern Lab Outpost
  74. 74. Outpost • Lightweight PHP app • Feeds JSON from WordPress or Drupal 
 into Pattern Lab templates • More at getoutpost.org
  75. 75. Outpost 1. Handles visitor requests (Symfony HTTP...) 2. Fetches JSON content (Guzzl) 3. Caches responses (Stash) 4. Dev tools for logging, debugging
  76. 76. Content Objects • Feed JSON into PatternLab • Encapsulate JSON into objects
  77. 77. Outpost cms.uic.ed u Site uic.edu CMS JSON
  78. 78. Result • Fell in love with our CMS again • Built great FE with the best tools • FE dev team and timeline not tied to CMS • Unleashed content authoring • Easier upgrades over time
  79. 79. Thank you!
  80. 80. Q&A
  81. 81. THANK YOU @GETPANTHEON

×