Progressive Content Management Systems (Chrome Dev Summit 2018)

Key Takeaways

[Music] I'm Alberto I'm a developer advocate in the content ecosystem team at Google and super happy to be here with my teammate Western Rooter we are going to talk about bringing the pillars of modern web development to the space of content management systems but let's start with the end goal in mind our goal as web creators is to maximize the joy that our users get when they go to the websites we build or the content that we create and publish on the web and although it is true that user experience is a complex matter there are certain elements that are commonly found in experiences the users love pacifically users love presentations that work number one they love sites that load fast consistently and offer good time runtime performance they love sites where they feel safe when they trust their data or they do transaction with the when they decide to do so they like sites that feel accessible and they are integrated with the full capabilities of their devices and the loss sites that offer great content quality the good news is that we can build today experiences they have these pillars if we take advantage of the capabilities that the modern web has to offer now doing this is what we call progressive web development in essence progressive web development is developing user first experiences following using modern war flows and modern web AP is following coding best practices and performance best practices and taking advantage of effective incentive mechanisms and validation structures that are available to all to us now we can take advantage of these principles in different ways depending about how we go to the creative process how do we create things in the web in general the things that we create in the web follows in two categories on one hand we can build websites or web ads from scratch in which case we have full control of the whole created journey from the build process to the functionality of the app to the look and feel or we can take advantage some kind of content management system that our our CMS for short there are software platforms that add a layer of abstraction over the open web to offer capabilities to create publish and consume digital content on the web if we follow the first route we have full control and flexibility is very powerful but also it requires a lot of expertise and resources to follow if we follow the second route we can take advantage of the capabilities that the CMS has to offer to us but then at the end of the day the experience that we can offer to our users depends on the characteristic of the CMS that we choose now it turns out that nowadays the majority of content in the web is created and consumed via some kind of content management system specifically 54% of sites today are built on some kind of content management system and we saw this year 11% year-over-year growth these are staggering statistics and there are other systems that do not think of themselves as CMS's but also offer the same capabilities of make it very easy to create and publish content so in reality these statistics are much higher so this basically means that the CMS space is very high with a large and very complex CMS comes in many shapes and form and they vary in according to certain dimensions for example you can have static versus dynamic open source close source special-purpose general-purpose but although there are difference between them they also share a lot of komova commonalities and specifically they many of them face common challenges when it comes to integrating progressive web technologies into their platforms so many of these systems are very large and complex they have many interacting components we have large code bases they have legacy code technical debt and so on they're also some of them have evolved on top of initial architectural choices that make it difficult for them to evolve a become progressive they also suffer from fragmentation very often in terms of things like the quality of the component that make them or the expertise of the developer community or the type of users that are creating a consuming content on the and often and this is very important CMS's lack the effective incentives for developers to do the right thing for example exposing coding and performance metrics so that users of the CMS can choose solutions based on quality and not just unpopularity now we want to tackle these challenges in the CMS space and in order to reason about how to do that it is very useful do a strap or thinking about these systems in terms of the components that make them ok a CMS ecosystem one way or another one way to another has certain components that form a you know a unique ecosystem for each of them there is usually a core a platform core that authors the the basic functionality of the system there is usually some kind of extension mechanism that allows you to extend the core functionality these extensions are usually called modules in some cinemas for logging on and others also things if they had to do with the look and feel of the system there is usually a developer's community that are in charge of evolving through off the core and the extensions of that platform and then there is the user base of the CMS that are either creating content or consuming content on the platform so when we talk about progressive content management systems we are talking about bringing the principles of progressive web development to the component of each of this ecosystem ok for example how do we bring calling and performance best practices to the developer ecosystem so that they can do the right thing can we bring tooling so that it make it easy for them to do the right thing on the first place or can we bring incentive mechanisms so that they are compelled to do the right thing now Google is working with many CMS's to support them in their effort as the integrated progressive technologies into their platform so in the next few slides we are going to show you the results of a particular effort that we have my team has followed in the context of specific CMS and then later on we are going to touch upon some of the great work done by other CMS's our team has been pursuing efforts to bring progressive web technologies to the WordPress ecosystems this little fellow here there is wobbu that the mask was a poor press ecosystem it's not a mouse although it looks like a mouse so so WordPress nowadays powers about 1/3 of the web so there's a lot of users you know creating and consuming content on this platform now given the size of complex and complexity of the world press ecosystem if we address the challenges that they face we will not have only an impact on a very large swath of the web but also we will be able to shed light on how to address these challenges in other CMS's so our goal with these efforts are twofold one is to tackle the challenges that the corporate ecosystem faces and also to gather our learnings that we get along the way and bring them to over two other CMS's in the form of objective guidance tutorials technology the transfers and so on now our approach the approach that we follow to make WordPress more progressive consists of two parts the first part is leveraging the capabilities of accelerated mobile pages of and four so for short and provides basically a well-lit path to modern web development in WordPress and is an open source web component library which provides out-of-the-box a set of capabilities and optimizations that are essential to achieve awesome web experiences in the web for example Collina performance best practices so that you don't get things like on responsive content when you are loading it or good usability so you don't have this content she stands in front of your eyes when you are trying to engage with the content it also provides incentive mechanism for example the capability of getting near instant loading time when an content is loaded from the and cache and it also provides a validation framework that helps developers to bring their sites to high performance states and to keep them in that state as the site evolves so if we enable an content creation in WordPress that means that what press developers can take advantage of all these capabilities without deviating of the normal content creation workflow that they following the plasmid normally we have achieved this integration by means of an amp plugin for WordPress right now it is in version 1.0 release candidate 2 and the stable version will be released at the end of this month now this plug-in has a lot of capabilities and features and unfortunately we don't have time today to go over them in detail but I want to mention a specific important one one that assists WordPress developers that they build themes and plugins that are fully and compatible the plug-in comes with a compatibility tool that supports the development of an content in WordPress in a nutshell for any URL on aside the plug-in tells us all information about any error that can exist in that URL in very new details it tells you even the mark-up that is generating the error and also the component in the WordPress site that generated the mark-up in the first place was it the team was it a plug-in was for press corps what is it so if you are a wordpress developer you can take advantage of this tool and all the other capabilities that the plug-in provides to you to you know create and content in your website if you are a developer from other CMS's the good news is that they are also implementing amp and we are going to tell you more about this in a little bit now the second part of our approach of bringing progressiveness tool to the WordPress ecosystem consists on integrating modern web capabilities and API into WordPress core we want things like service workers streaming background sync all the goodies that you have seen today we want them to be supported natively in the WordPress platform so the goal of the integration is that there is a consistent and unified approach so that all WordPress developers can take advantage of them as they develop functionality for either core or themes or plugins now last year our colleagues Summa we do have heard of him and who by the way has a complete disregard for the impossible he decided to say to show that PWA we WordPress is absolutely possible by building a WordPress theme that does all the things as he call it he successfully proved his case and he presented he or at CES last year but he also faced many challenges along the way and he recognized that it would have been super great if the WordPress platform would have provided him with the building blocks that he needed to build his warp residues are the things in a much easier way so in addition to a work on anvil WordPress or team focus this year on devising and implementing the integration of some of these building blocks into the WordPress core plus okay and we emphasized the requirement of doing that in a way that is seamlessly integrated with how WordPress worked in the first place so I would like to call my teammate Weston to tell us more where we are in this effort [Applause] yes Irma certainly did build a wordpress theme that did a lot of things and he had a serviceworker that was installed by the theme and that serviceworker powered things like offline reading and background sync it facilitated smooth page transitions as you navigate around the site and while his proof of concept was compelling it faced some he faced a lot of challenges and it was because WordPress didn't allow for doing things that he wanted to do and so but these challenges are not unique to WordPress they are common to other CMS's as well so there were a few fundamental challenges that needed to be addressed the first challenge is that there needs to be a central API in the CMS for generating a serviceworker because there wasn't this in WordPress the theme itself had to generate the serviceworker and this is a problem because as with Highlander there can only be one serviceworker a time multiple service workers could be installed but only one is active and so a CMS like WordPress needs to have needs to be able to generate that serviceworker centrally the next challenge is that writing serviceworker logic can be complex and that the CMS should provide abstractions as a part of it that eliminate a lot of that other plate code that has to be repeated over and over again and the last challenge as Alberto referred to is that WordPress extension system and other CMS's as well don't have sandboxing and so a a theme or plugin can do things that make it difficult to maintain advanced capabilities like the optional model so we implemented abstractions in WordPress to solve these challenges and what we did is not as applicable to more than just WordPress first of all we integrated the serviceworker API into WordPress so that themes and plugins can each include their own serviceworker logic and to be installed by the single serviceworker that is generated by at the CMS but this is just the base requirement there also needs to be as I said those abstractions to make it easier to generate the complex logic that is needed to power serviceworker so our integration includes your work box out of the box so that as you've heard about earlier today you can take advantage of all the complex logic for generating caching strategies and other advanced functionality like background sync that are part of work box so that you don't have to reinvent the wheel and since WordPress developers have historically been PHP first developers we have included PHP abstraction that allows you to write PHP instead of JavaScript and so that you can have a PHP call that it gets translated into the equivalent in JavaScript and to give you a sense for how this API is used in WordPress in this first example you can see a caching strategy being leveraged here stay awhile or validate to match any request that is made to the amp project CDN so that it will be then served from the cache while being updated in the background and here you can see a image being pre cached by the serviceworker and then serve directly from the cache without hearing the network at all and at these two examples here look familiar to you then that is no mistake because they're essentially PHP versions of what you would be doing otherwise in JavaScript via work box but if there is no abstraction in PHP for you to do that there you can also hook directly into the servers to add your own arbitrary JavaScript to do more advanced functionality if needed so given these service working capabilities one common application is the app shell model and app shell facilitates those seamless page transitions and offline interactions that you often see inside of native applications but making a app shell is often very difficult and challenging to do in word press because themes and plugins can add absolutely anything to a page like it just said and so this again is where the amp plugin plays a key role because it enforces those constraints to make sure that the content behaves in a way that doesn't break the app shell model and amp is also specifically designed to be embedded inside of these kinds of experiences here is a demonstration that we built that show us the standard theme 2017 with a nice spinning logo for fun keep watching that logo notice as I opened the nav menu and start clicking around the content is changing but they spent the logo keep spinning and is unchanged the header nav menu remains expanded and you don't lose that context as you navigate around the site so it's a single page application built in WordPress using a standard theme as the basis and we and we could do it just with a minimal amount of code thanks to the foundation that the amp plug-in provides in the amp project as well you can look at the pleura quest on the amp plug-in repo to see more specifics and how you can get started on your own themes to give you a glimpse of that here you can see the theme just has to declare theme support to enforce those constraints to make sure that everything is served available in amp you have to make sure that the whole theme is able to serve every page and amp so you do add this to your theme next you indicate the region in the template that contains the content that dynamically changes as you navigate around the site and lastly you tell the amp plugin that you're opting into app shell and then that then causes the amp plug-in to generate the serviceworker logic to pre-cached app shell and to add the JavaScript to the page that will then intercept the clicks and do the history management and all that and the bottom line here is that the theme developer doesn't have to know that the complexities of building apps shell they just extend what is already in the platform but serviceworker is applicable to more than just apps shell it also is useful for other advanced capabilities including offline access often when you if you've developed a wordpress theme you'll are familiar with 404 dot PHP template which is used to serve a page to the user when WordPress can't locate the site content that you're trying to load and in the same way we have extended WordPress template system to introduce an offline dot PHP which will then be served to the user when the browser can't access the site and so they get that nice branded experience from the theme without without the dinosaur and to opt in to caching pages that you visited while online you can opt in to that stale water validate strategy for navigation requests so that those will continue to be available when you got flying and lastly serviceworker is useful for commenting offline as well so here if I try to submit a comment while online or while offline then the servers worker can intercept that request and then replay it when the user comes back online via a Cron's about via background sync and here the developer doesn't have to do anything because it's just part of the integration it's off so with that in mind I'll pass it back to Alberto to talk about the road ahead [Music] thank you what's on this is super goes to see all the scenes running and we certainly have made a lot of progress in the context of WordPress and other CMS's have done also a lot of progress but we are still not quite what we need to be so in the context of WordPress we you know they keep the unplugging is available to you today you can download it from that github link so please download they start experimenting with your site we are going to continue expanding this were integrating and content creation into WordPress a space specifically in the context of Gutenberg that is the new editing experience in that platform in the area you know the integration of PWA the service workers and all the PWA capabilities into WordPress core we have made a lot of progress right now doc about the functionality is available in the form of the feature plug-in that you can also download an experiment it if you are a wordpress developer and we are going to continue working with the equal basic assistant to help them to integrate these technologies into their work at all levels now one aspect that we are working that is very exciting is enabling content creators to create content easily taking advantage of new powerful format as amps such as AM stories as you can see in this example and stories is a mobile focused format for delivering rich information in in terms of this value reach and tap through stories we are building an app stories editor for WordPress which is also integrated with Gutenberg the new editing experience of WordPress to give you a glimpse of where we are in this work this that you see here is all the Gutenberg experience and the good thing about Gutenberg is that everything is corresponds to a blog and that design premise lends itself very well to create an stories that are also formed by component so the goal of a the editor is to allowed users to manipulate all the components of an app stories control the parameters and so on we want powerful content formats like this to become available across all CMS's and one interesting development that is happening is that Gutenberg is be important to Drupal which is another popular open source CMS and this is great because then they are going to be able to take advantage this editor right away so much more on this it will be coming next year so stay tuned so to conclude I can say that the CMS pace is moving forward steadily along the progressive Web Road Google is working and supporting many on CMS platforms who help them advance in this path and we are seeing excellent results on some fronts here we have some examples Drupal which I mention is another popular open source CMS their developer communities is working on the amp and PWA modules they are available in sites today and they are working on enhancing them magenta which is a popular e-commerce platform they are releasing Magento 2.3 this month and that release includes PWS to do that is a set of guidelines and tools to be able to create awesome web experience in their platform adobe experience manager which is a popular CMS in the enterprise arena they have allowed the creation of unpublishing of single page applications directly from the page editor and they are working on also providing service water integration natively in their platform early next year at the end we have EC cubed that is one of the leading e-commerce platforms in Japan they are working with an agency that is called Sunday assistance on an AM plugin that would also enable the creation and content on their platform so we want to extend special thanks to xwp which is an excellent word press agency that has in partnering with us and they have made awesome contributions in the areas of bringing amp and PWA technologies to the WordPress plasmon with that I want to say thank you and stay tuned for more progress in it coming soon to CMS near you [Applause] [Music]