The state of CMS in 2019: Headless, JAMstack and ReactJS – or: If your Content Marketing doesn't work, maybe just your Content Management System is shit.
4 likes702 views
The document discusses the vulnerabilities and performance issues within popular content management systems (CMSs) like WordPress and Drupal, highlighting the high percentage of unpatched installations and the consequences of slow website speeds. It advocates for a paradigm shift towards a modern development approach utilizing JAMstack and serverless architecture, which promises improved security, performance, and usability. The proposal emphasizes the need for a user-friendly headless CMS with efficient editing capabilities to meet the demands of contemporary web development.
The state of CMS in 2019: Headless, JAMstack and ReactJS – or: If your Content Marketing doesn't work, maybe just your Content Management System is shit.
- 1. Berlin, 2018-01-01 The state of CMS in 2019 Online Marketing Rockstars, Hamburg, 2019-05-08 <thomas.witt@scrivito.com> @thomas_witt linkedin.com/in/thomaswitt Thomas Witt Co-Founder Headless, JAMstack and ReactJS – or: If your Content Marketing doesn't work, maybe just your Content Management System is shit.
- 2. 73,2 %
- 3. www.wpwhitesecurity.com/statistics-70-percent-wordpress-installations-vulnerable/ 73,2 % of 40,000+ WordPress Websites in Alexas Top 1 Million suffer from vulnerabilities which can be detected using free automated tools.
- 4. Out of 42,106 WordPress websites in Alexa’s top 1 million websites… 769 websites (1.82%) are still running a subversion of WordPress 2.0. Only 1,785 websites upgraded to version 3.6.1 between the 12th and the 15th of September 2013. 30,823 WordPress websites out of 42,106 (=73,2%) are exposed to exploitable vulnerabilities. WordPress Version (Top 10) No. of Installations No. of Known Vulnerabilities 3.6 13,034 5 3.6.1 (latest) 7,814 0 3.5.1 6,859 8 3.5.2 4,031 0 3.4.2 2,204 12 3.5 1,655 10 3.3.1 820 24 3.2.1 820 10 3.3.2 732 14 3.4 295 15 Total (Excl 3.6.1) 30,823 www.wpwhitesecurity.com/statistics-70-percent-wordpress-installations-vulnerable/
- 5. … and we're not even talking about plugins here.
- 6. 7h
- 7. www.drupal.org/forum/newsletters/security-public-service-announcements/2014-10-29/drupal-core-highly-critical 7h Automated attacks began compromising Drupal 7 websites that were not patched or updated within hours of the announcement. You should proceed under the assumption that every Drupal 7 website was compromised unless updated or patched before Oct 15th 2014, 11pm UTC, that is 7 hours after the announcement.
- 8. 115.000
- 9. research.checkpoint.com/uncovering-drupalgeddon-2/ 115.000 Websites unpatched 2 months after Drupalgeddon 2 on March 28th, 2018. Attackers are able to carry out a full site takeover of any Drupal customer, e.g. to install a malicious backdoor and execute arbitrary commands on the server.
- 10. … only 28 days later, on April 25th, 2018
- 11. 5h
- 12. www.bleepingcomputer.com/news/security/hackers-dont-give-site-owners-time-to-patch-start-exploiting-new-drupal-flaw-within-hours/ 5h Five hours after the Drupal team published a security update for the Drupal CMS, hackers are actively exploiting it in the wild. Two hours after the first in-the-wild attacks were reported, an exploit was posted on Pastebin.
- 13. A lot of Reasons why … Improper deployment Security configuration issues A lack of security knowledge or resources Lack of resources to migrate to newer CMS versions Overall site maintenance by webmasters Broken authentication and session management Issues with backwards compatibility Most notorious threats to CMS’ stem from vulnerabilities introduced by add-on modules, plugins, themes, and extensions. sucuri.net/reports/2018-hacked-website-report#
- 14. Clearly, we have a problem with security and CMSes. But let's talk about something different.
- 15. 78%
- 16. www.oreilly.com/library/view/time-is-money/9781491928783/ch01.html 78% of users felt stress or anger while using a slow website.
- 17. www.oreilly.com/library/view/time-is-money/9781491928783/ch01.html 71 % feel regularly inconvenienced by slow websites 70 % state their performance-related stress or anger has increased, over the years 50 % believe websites have not improved in speed or became slower 39 % have decided not to visit a company again as a result of experiencing a slow website 49 % expect load times of 2 seconds or less 18 % expect pages to load instantly
- 18. SEO Performance is about retaining users and improving conversions developers.google.com/web/fundamentals/performance/why-performance-matters/
- 19. https://developer.akamai.com/blog/2015/09/01/mobile-web-performance-monitoring-conversion-rate 1-second improvement correlated to a 27% increase in conversion rate
- 20. 53%
- 21. developers.google.com/web/fundamentals/performance/why-performance-matters/ 53% of mobile site visits were abandoned if a page took longer than 3 seconds to load.
- 22. www.marketwired.com/press-release/tealeaf-announces-new-mobile-transaction-research-conducted-harris-interactive-shows-1419058.htm Phone Rage – the struggle is real! Throw their phone 4 % Scream at their phone 11 % Curse at their phone 23 % Behave more or less normally 62 %
- 23. … if the site is loading at all.
- 24. www.omr.com, Monday, 2019-05-06, 10:28 CET
- 25. 0%
- 27. 0% of all website visitors could get information about 4U9525 on germanwings.com or dus.com www.itv.com/news/update/2015-03-24/germanwings-website-down-following-incident/
- 28. During a crisis, speculation, opinions, conspiracy theories, rumours and facts will be tossed around. Company websites and company social media accounts are some of the first places the media and the public turn to for the latest news and updates on a crisis. It’s really important that a crisis communications strategy exists and that websites are crisis ready. These sites must be able to handle a dramatic increase in digital traffic. Germanwings’ website went down when news broke of the incident and remained unavailable for some time. It was unfortunate as they were referring audiences to their website for updates via social media. www.corporatemediaservices.com.au/blog/online-crisis-communications-germanwings/
- 29. With the current common CMS technology available … (… we call it legacy …)
- 30. Building secure sites is hard! Deep knowledge of back-end security patterns required.
- 31. Building reliable sites is hard! Deep knowledge of scalability and global fail-over patterns required.
- 32. Building performant sites is hard! Deep knowledge of browsers, network and back-end-performance required.
- 33. … and we even didn't talk about usability for the editors
- 34. How did we get there? … and how do we solve this?
- 35. We need a new approach how to build web-sites Frontend Backend CMS ❓ ❓ ❓
- 36. The old stack: A Brief History of web technologies
- 38. Browser Server
- 39. Server #!/usr/bin/perl use Time::localtime; print "Content-type:text/ htmlnn"; my $time = localtime; print "Today is: " . ($time->year() + 1900) . "/" . $time->mon() . "/" . $time->mday(); ProgramBrowser
- 45. How do other smart companies do it?
- 46. neliosoftware.com/es/blog/wordpress-vip-un-servicio-para-grandes-empresas/ +$75,000/year for certified updates +$5.000/plugin for code check (security, performance, …) +$25.000/Theme code check +$75.000 per general security review +$3.000 per general training day (4 ppl) +$3.000 per SEO training day (4 ppl) +$30.000 per developer training (4 ppl) +$15.000 per admin training
- 47. And by the way: You can't change code directly. Every single line of code you add has to be reviewed before put into production.
- 48. "We use Wordpress, because it is cheaper… and everybody else does it. They all can't be wrong." (And we've saved big on license cost!)
- 49. The Web needs a paradigm shift For the last 15 years, the web has been built on-the-fly, causing increasing issues with … Security • Over 10% of all sites hacked • More security exploits than days in a year for popular CMS Performance • Single Origin • Builds for every visitor • Low conversion • Not mobile friendly Scalability and Infrastructure • Infrastructure needs to scale up-front • Different technologies for back-end and front-end Maintaining a CMS is not a value in itself!
- 50. How do we solve this?
- 51. Frontend: The New Stack (Pump up the JAM)
- 52. The Evolution of the Web Browser Server Classic Web-Server (Static site) until 1997 Browser Web-Server App-Server Database Legacy Web (Site built EVERY time it is served) 1997 - Today Now CDN Browser Microservices Modern Web
- 53. Browser When a user requests a page … CDN HTML & JavaScript
- 54. CDN When a user requests a page … User requesting a page You, making changes to your page, code or layout JavaScript Code (Git) CMS API (Scrivito) Build Tool (Netlify) HTML & JavaScript ContentLayout & Logic Browser
- 55. Decouple Building & Hosting Generated HTML-Markup, functionality built with JavaScript, consume APIs
- 57. So we're back to static sites? 😳
- 59. 1. Pre-render the HTML markup 2. Enhance with ReactJS! All public pages are pre-built resulting in lightning speed performance, but every part can and is dynamic, thanks to JavaScript.
- 60. Application Logic URL Routing View/Rendering/Layout Data Persistence User Management Forms Validation Animations DOM Manipulation
- 61. Application Logic URL Routing View/Rendering/Layout Data Persistence User Management Forms Validation Animations DOM Manipulation
- 62. Welcome to the API Economy - the browser as integration platform Browser CDNAPIs JavaScript Framework HTML & JavaScript
- 63. ERP Messaging Welcome to the API Economy - the browser as integration platform Authentication & Authorization Search Serverless Functions & APIs Payment Shopping Cart eCommerce Forms E-Mailings Team Chat & Notification Website Chat Comments CRM Content Management Browser CDN JavaScript Framework HTML & JavaScript No servers were harmedwhile building this site.
- 64. J A M
- 65. Javascript A M
- 68. Javascript APIs Markup Any dynamic programming during the request/response cycle is handled by JavaScript, running entirely on the client. All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTPS with JavaScript. These can be custom-built or leverage third-party services. Markup are prebuilt at deploy time.
- 69. Advantage: Static sites don't need servers No servers = no hacking, no patching, no nothing.
- 70. JAMstack: Cheaper to scale, more secure, easier to maintain Decoupled Building and Hosting Entire public site is on a CDN 100% fail-proof and SEO-compatible Infinitely scalable Reduced attack vectors Pre-Rendered HTML-Markup Faster sites (First Contentful & Meaningful Paint) Apply logic by rehydrating the page in the client with ReactJS • The web-browser is the integration platform APIs APIs rather than databases
- 71. We need a new approach how to build web-sites Frontend Backend CMS JAMstack ✅ ❓ ❓
- 72. But how do I create those backend APIs?
- 73. Backend: New Architectures (Will it Lambda?)
- 74. Servers are a thing of the past.
- 75. Not our problem Our Problem Value
- 76. OS Containers Runtime Application Functions Not our problem Our Problem Value Containers Runtime Application Functions Application Functions Functions IaaS: Infrastructure as a service CaaS: Container as a service PaaS: Platform as a service FaaS: Function as a service Hardware Virtualization OS Containers Runtime Application Functions NaaS: Nothing as a service Hardware Virtualization Hardware Virtualization OS Hardware Virtualization OS Containers Runtime Hardware Virtualization OS Containers Runtime Application
- 77. Function as a Service = Serverless
- 79. It is serverless the same way WiFi is wireless. The phrase "serverless" doesn’t mean servers are no longer involved. It simply means that developers no longer have to think that much about them.
- 81. Two types of Serverless APIs Function as a Service (FaaS) Event-driven computing where developers only deploy functions which are triggered by events. Backend as a Service (BaaS) Third-party API-based services that replace core subsets of functionality in an application
- 83. Pay per use Time-based Usage-based $5 /hr *2 $7,200 /mo 1 TPS $5 /hr *2 $7,200 / mo 1000 TPS $0,0000002 /tr $1078.27 /mo $0,0000002 /tr $ 0,539 /mo
- 84. Advantages of Serverless Computing Serverless means … don’t pay for it if no-one uses it don’t need to worry about scaling don’t need to provision and manage servers … resulting in applications which are cheaper • Don't pay for idle servers resilient • Auto-scaling, high availability and redundancy by default secure and maintenance free • Infrastructure maintained and patched by default using the same programming language for back- and frontend • JavaScript • More efficient development processes
- 85. JAMstack ❤ Serverless Functions for APIs Decoupled Building and Hosting ✅ Pre-Rendered Markup ✅ APIs APIs replacing databases External APIs (BaaS) • e.g. "Headless CMS" JavaScript Functions (FaaS) • Same technology for front- and back-end
- 86. JAMstack does indeed move complexity elsewhere. It moves it out of your area of responsibility. And it moves it over to domain experts who offer specialized services as commodities. It is perfectly possible that complexity still exists. But we don’t need to shoulder that burden. In the same way as wireless routers depend on wires. And serverless functions run on servers. Somewhere. But not in my house. :) medium.com/@philhawksworth/jamstack-does-indeed-move-complexity-elsewhere-e34b62bd66df
- 87. We need a new approach how to build web-sites Frontend Backend CMS JAMstack ✅ Serverless ✅ ❓
- 88. So I just need a Headless CMS, move to JAMstack and Serverless and everything's gonna be alright?
- 89. Not so fast.
- 90. "What might be surprising: The use case of a single repository of information feeding a single website is not a great value-add for a headless CMS. There’s just not a huge value proposition there." gadgetopia.com/post/9743
- 91. Where pure headless CMSes fail miserably The Web is Still a Visual Medium In the end, a pure Headless CMS is just a remote database What pure headless CMS don't offer Comfortable Editor UI (I'll show you …) & In-Context Editing Page-based composition with widgets Page previews URL and Hierarchy Management • List Ordering, Child Content Objects, Referential Content Attributes Real-Time collaboration Workflows and Permissions Full Text Search
- 92. The ugly truth: Headless CMSes just developed half of the product … and sell this as a feature.
- 93. What about the editors? CMS UIs suck They don't really care about us.
- 101. Wouldn't you rather like a CMS … well … with a head? … because otherwise you might be losing your head sooner or later.
- 102. The State of CMS in 2019 Open Source Bad UX, ancient technologies, server-based / not native cloud Commercial Expensive, ancient technologies, server-based / not native cloud Cloud Web-Site Builders Not extensible, only small biz Pure Headless CMS Bad UX, not a full solution
- 103. Editor wish list for a modern headless CMS with a head Intuitive WYSIWYG editing • Cross-Device Preview Modular page structure • Using ReactJS components as Widgets Drag-and-Drop Auto-saving Real-time collaboration on content • Working Copies (like git branches) • Parallel editing like Google Docs • Like programmers on code – git branches, anyone? • History and Roll-Back SEO & Social Media Media Asset Management Hierarchies and Navigations Permissions, Workflows, History, Roll-Back … and of course: serverless & still 100% native cloud based
- 104. Demo
- 105. THIS is the new approach how to build web-sites Frontend Backend CMS JAMstack ✅ Serverless ✅ Scrivito ✅
- 106. Check lists for a modern CMS (with a head) in 2019 Tech/Developer/IT Security, Performance, Scalability & Reliability • Serverless, API-driven, decoupled • Entire site on CDN out-of-the-box Zero infrastructure, maintenance, patching • Low total cost of ownership Modern integration and customization capabilities • Single JavaScript Technology Stack • Frontend: ReactJS • Serverless backend: Lambda • APIs and SDKs Centralized Authentication and Authorization • JWT compatible 100% Native Cloud Setup • Not a dedicated legacy software install on servers • Native multi tenancy solution, built for the cloud Editors / Usability Intuitive WYSIWYG editing • Modular page structure using ReactJS Widgets • Drag-and-Drop • Cross-device preview • Auto-Saving Real-time collaboration on content • Working Copies (like git branches) • Parallel editing like Google Docs • Permissions, Workflows, Roll-Back, History SEO • Including Social Media Support Media Asset Management • Automatic image optimizations / resizing Hierarchies and Navigations Built-in, powerul Search
- 107. Easy Flowchart Will it JAMstack with a head? 🎉🎊🚀 Try harder! No Yes
- 108. Shameless self-promotion Sign up for a 30 day free trial at: scrivito.com/signup Get 25% off for your first year with the code "OMR 19"
- 109. Questions? Twitter / Slides: @thomas_witt