Make your WordPress site progressive (Google I/O '18)

Make your WordPress site progressive (Google I/O '18)

Show Video

I. Bet. That you have heard before they. Turn progressive. Today we're gonna be talking about how, to make progressive WordPress. Sites and. You have heard the term progressive probably. In, that in the context of progressive web apps which means basically. Pro web, apps that have been developed, using modern web capabilities or. In. The context of progressive. Enhancements which is the application of those modern capabilities web. Capabilities into, your sites in, a step-by-step way, instead, of like all at, once, here. We are using the term progressive to. Capture the notion of progressive. Web development, which. Means development. Of user first web. Experiences, using, modern, web capabilities. Coding. And, performance, based practices, and the key here is, the word user first, which, means that, at the core of progressive, web development. Is, user. Experience so, let's start at the core what is user experience, user. Experience, refers to a, person. Emotion. When they are using a product in our case that, product is our website. Or WordPress. Site, so, it's all about how users, feel when, they are engaging with the content that we create and we publish, so, the way that I like to imagine this is you know in a nutshell what, I want is my, users to have that expression in their faces every, time that they go to my site a little. Bit but what. Are the qualities, in web, experiences. That actually, bring joy to users, and there, are mainly four, main, factors, there, are commonly, present, in what we define as a delightful, UX experiences, users. Love applications, that are fast, and reliable. They know they load quickly, consistently. And they, behave well once, they are running user. Loss. Oops sorry. Users. Love, applications, that are secure they want to feel safe when, they are trusting, their data and a transaction to, the apps users. Love, applications, that feel. Integrated, with their device know that they can take advantage of all the features that the device has to offer and users. Love applications, that are engaging right they like that kick, of wanting. To go back to the application and the, application makes. It very easy to. Come back to, them but. For, a long time building, applications, in the web that satisfies. These four pillars of delightful us was, not easy, or not possible at all and the main reason was that for a long time the main power of the web was, the, URL, the hyper linking capabilities but. If you compare it to platforms, to develop native apps for example in the island road plant from the, word lag behind in, the terms in this in terms of the things that you could do with, it however, the. Good news is, that the web has, been. Evolving, quickly, in, the in recent years and nowadays is, fully.

Possible To, build awesome web experiences, only using web capabilities. This, year is a subset, of the, web api that are available in the web platform today. So you can do a lot of things with them for, example accessing, device. Features, like the vibration, signal the, gyroscope, you, can implement. Native like features. Like add to homescreen offline. Access and so, on even augmented, reality is. A thing today in, the web now. On top of this we, have modern. Development, workflows a lot of tooling and powerful. Java screen frameworks, that add additional. Layers of abstraction that, allows, us to build very very complex, and awesome experiences. And, on top of all these you have yourself. The web developer, eager. To harness the power of this mountain of capabilities, right the, challenge, is that the complexity. Is such. That. Truly, taking advantage, of what the web has to offer is very difficult, right, so, as the. Complexity. Of the web ecosystem, has, increased, we also have seen an increase, in what I like to call the, capabilities, usage, gap which, simply is the difference, between what. Can be done and what, is actually actually. Done for, example if we go back to. Say. 1999. Probably. Most of you would not develop another way at the time but. Arguably. The gap was not big at that time there were no many things that we could do in the web there, was HTML, CSS, and, the, best thing is it was only a singer, phone factor, that you had to develop now, fast forward to today the. Complexity, has grown so much there are so many tools so many frameworks and so many things and we. Have to develop, applications. That had. To run well in what it seems to me an infinite. Number of form factors so no, wonder that that gap has grown and the. Problem. With this gap is that if we don't take advantage, of. What the way has to offer it's, very difficult to, build applications that satisfy the pillars, of a delightful, UX and we. See evidence, of this a lot in the wild there, are studies that show the prevalence, of applications, that from very, slow day of the exhibit, very poor, load, time. Performance, for example 19. Seconds long time on 3e on mobile. 75%. Of mobile it takes 10 seconds or more to load and, also there, are a lot of applications to many that, exhibit, poor, runtime. Performance so, things, like on responsive, pages, or content. Shifting in front of your eyes when you're engaging with it and, the bad news is, the users hate. This and we. See, evidence of that in the world as well in the, impact. That, these experiences has, on the, revenue potential of our site for example more. Than half the users are going to leave aside, that. Takes more than three seconds to load. 75, percent takes more than 10 seconds when, you. Figure it out right there is an inverse correlation between. Low time and conversions. And there is an inverse correlation between. Revenue, and low, time so. But. For me the, worst collateral. Effect of not, being able to take advantage of the web is what. Is known in sociology as the. Matthew. Effect of, accumulated, advantage. Product you have heard of it as the rich, get richer principal, which, means in our context, that given, the complexity, of the web platform. It seems that only, superstars. Developers. Organization. That have. Capability. To afford, large, high quality engineering teams are, the only ones that have a true chance to take advantage of the web and that is not what the web is all about, okay and notice. That given the prevalence of the experiences, that I just described even. Superstars developers, have a hard time to do it okay so the bottom line is we. Must strive to, close the, capabilities, usage gap and. There are mainly. Two ways that we can go about it one, is on us. Even. That the web capabilities, are, there for, us to use them if, we all do the right thing things, will be okay right we should not see those experiences, however. That, is easier said than. Done the reality looks more like this right. You, have to master so, many things to, have applications, that are delightful. That. It's very challenging you have to be, careful do not interfere with the critical rendering path low. Resources asynchronously. You, know do, code splitting, etcetera. Master, browser caching, so, many things so the landscape is so complex, that is very difficult to do the right thing the first time imagine. Doing the right thing all the, time for, the lifetime, of your application, in all circumstances, all, the, time so if you, know it's very hard a better. Option is what I'd like to think about a progressive. Web ecosystem, is. A, platform. Of what ecosystem, when, doing the right thing is, easy right, and. It. Involves several factors, the first one is an evolving web platform, right a platform, where new, wet api's are added probably, existing. API is are improved, you know we, have good, set of tools that help, developers, automate. Complex, tasks we. Have frameworks. That add, layers of a stratum to do complex applications, and a, key point in a progressive web ecosystem is, that we take the, learnings, and that we get from, using the tooling and the frameworks, and we, see what works and we baked them in back into the web platform so, this is a better option right we want to pursue this how.

Should We focus. Our efforts, to achieve this in. Order to to, answer that question it's very useful for me to think about the web in terms of a very very simple, model, that has three layers the top, layer has the content ecosystem that we all use every day, and give the perception of the web as one theme right, then, there is a second layer conformed. By content. Management systems, that are basically software, platforms, that make it easy to create and maintain, content. Okay I don't top of that the bottom layer, what. You hear many times has the web platform okay, there is nothing else that, the, implementation or, the power, of the web exposed. By, browsers in, implementation, of the Web API so. You can see that. The content ecosystem there is a dotted. Line divided, in two and that's very important, because nowadays, about. 50%. Of sites, in the web are powered, by some sort of content, management system, okay, and the other ones by some configuration. Combination. Of. Tools. And frameworks and so on. Now. At Google we, are interested, in, closing the capabilities, usage gap, everywhere. And we are pursuing significant. Answers across all dimension of the web ecosystem our. Effort, particularly. In this talk focuses. On closing the capabilities, usage gap in, the area of content management systems, now I wanna make clear all, containment. Systems are very important, and we want and, we want to help to make them all progressive platforms, but in this work we are focusing, specifically, in WordPress, and there are several reason why focusing. On WordPress will cause an impact not, only for the WordPress platform but also for. The content management space in general and the web as a whole, okay first. Historically. WordPress, has been seen as a blogging platform right. But the platform. Has been evolving steadily. Since, started, back in 2003, if I am not mistaken and. Now it powers experiences. Across, a variety of areas you know you name it travel education. Shopping. Etc, okay so if we close the capabilities, usage gap in, WordPress, we are going to be improving the, experience for users across, a variety of verticals, that's very important, the second one wordpress, is certainly the largest player, in the content management system, enjoying. Right now like a fifty nine percent of the open, source CMS. Market, share and, the, third, reason which is for me staggering, nowadays. WordPress, powers, around thirty, percent of the web so in a nutshell when I think about WordPress, I think, about so. Many users, publishing. And consuming, content in, the platform, and I would like all of them to, be able to get, a delightful, user experience both creating, the content and consuming. It so. Going. Back to our definition of progressive, web development when I say progressive. WordPress, what, I mean is a, wordpress. Platform where. Modern, workflows, coding, and performance best practices and, the, use of modern web api is the standard and not the exception is commonplace, okay, now you, must be asking yourself, how in, the world given, the size and scope of all press how can we make progress quickly we, want to have a progressive or precise yesterday. Not, five years from now but. Fear, not I am sure that you have heard about the, accelerated, mobile pages project.

Or Amp for, short and, is. A open source library, that makes it easy to build web. Pages and sites in general that can, provide those kind of experiences that are very compelling unload. Near instantaneously. Right. In. A nutshell what art does it, is to provide out of the box a set. Of powerful. Capabilities. And performance. Optimization, that address three, things low. Time performance, and why one snappy load times wrong. Time performance, I don't want content system from my eyes on a responsive pages and usability. So, no I want a smooth, transition, between my, interactions, when I entered engage with content so, if. We could, integrate. And with, the world's best fan platform. As a choice right we, would be putting at the fingertips of all WordPress developers, the, capability, of taking advantage of what amp has to offer to. Create experiences, that, are compelling under very, easy so, let's, quickly see what, amp is in, a nutshell and, we want to see the integration in, action so. I'm. Sorry I need to click faster but so. I'm, developing, ante yes. It. You, know entails. Three components, the first things is an HTML, that, you could think of it as both. A subset. Of HTML, because there are so much team attacks that are not allowed and the reason is that in order to satisfy. Reliable. Performance you, have to impose certain constraints. Right, but it's also super sick of HTML, because amp is essentially, a web, components library that, provides a, lot of advanced functionality, that you can't have at your fingertips in, the form of constant, element tasks okay, the, second component is the rank the end runtime, system, that, is a piece, of JavaScript, that runs on every amp page and has, you, know logic, to control custom elements, a lot of performance optimization. The load. Scheduling. And so on. And. Then. We have the, amp cash, notice. That the uncut is not necessary, to develop, on pages but. It is a sort, of like content distribution network. That. Serve. To you. Know make. Valid. Amp pages available and, ready to use to everyone I said, that it's not necessary, but it does offer a lot of optimizations. And performance, introduction, with the runtime system and that, actually provide that low time snappy, load time the users love and. Finally, is the use of amp in the web ecosystem that. Encompasses. The implementation. Of product, features as important, product features across, a variety of platforms that. Are seeking the same that we are seeking, enhancing. The experience that, the users of those, platforms get, things like for example the top news. Carousel. A Google is one of those protocol. Twitter. Users at LinkedIn, and our presence, isn't among this, platform, that can benefit, of. What an has to offer, so. One. In WordPress. Everything. Happens in one or three places right WordPress. Core that, is the platform itself, themes. That, had to do with the look and feel of the, WordPress sites and plugins. That, to do with, extending, the functionality that, the platform has to offer so, when we say and in WordPress, we, are referring, to an, amp, plugin that is, integrated, with the developer. Platform and the interaction, of that plug-in with, all the components of what precis like for example the underlying theme all the, plugins that may be installed, so that is one with what.

We Refer to as an in WordPress, now. The. Plugin, for, WordPress was. Pioneered, by an open source project. Started. By automatic. And it was started at the very very early, ages of amber they were the one of the earliest adopters of the framework, and. They implemented, a very, simple. But effective mechanism, that we call the, per mode which. Means that for every piece of poster content. In a pose, there was an equivalent. Version but, for amp okay. So. You had to for. Every piece of content you had two versions and the, plug-in succeeded, in achieving this goal but has one main limitation. That it was that if you didn't have enough, engineering. Capabilities, to, work on the results you usually, got a lot of functional, and visual disparity. Between the original content and the. End. Version so. After the diversion, plug-in. 0.5. Of the plug-in we, join forces with, xwp. And, basically. We set our eyes in our, site and on, enabling. What. We call native, experiences. In WordPress so a world, where, there is no need to have two versions of the same content because. There is no visual, disparity. Or functional, disparity, you can have only the Amazon, and get all the benefits of that. And has to offer without. Sacrificing. The. Flexibility. Of the WordPress platform that was our goal now there was a lot of work put, into this version and it, indeed, enabled, maybe, five experiences. We presented, that work in an Kampf couple. Of months ago and it's, very good however it's. Still, oriented, to power users, it is not as easy as we would like to be in order to make it mainstream so. We are here at i/o and we, are going, to you soon a lot of improvement. That we did in the area of tooling and also, the in the editorial workflow of, content creation in WordPress in, a second we're gonna talk about that and after this after 1.0, of the plugin i said, that we have right now on the alpha version of the 1.0. Then. Consider a word that we wanna mention a little bit at the end they, had to do with content ecosystem adoption. But before we do that i would like to you, know call theory, noodle, from xwp, to show where, we are in, the along. The road to progressive wordpress. Good. Morning. The. Latest work on, the. M plugin. Is focused on closing the capability, usage gap in two ways the. First one is by, providing a framework to, empower developers to. Integrate em in the WordPress ecosystem. And the, second one is by, providing tools, which, seamlessly, integrate, M components. In the brand-new content, creation workflow in WordPress. To. Put this in context, and better understand, how we closing, the capability, usage gap we're. Going to look at some real-world example. Let's. Take the 2015. Theme which, comes by default, bundled. In WordPress. It. Is active, on half, a million websites today, but. What would you really take to, actually convert, this theme to be M compatible, and, specifically.

Provide. A native amp experience. Well. Let's look at the theme first and some of the challenges we may encounter, the. 2015, theme is all about content, it, is designed for clarity, it is, also designed with a mobile-first, approach. One. Thing we want to pay specific attention to, is the. Menu drop-down which, uses JavaScript custom, JavaScript, on the code. Side if, we, look closer at the archives, widget, its. Uses disallowed, inline, JavaScript or dealers around in amp at least if. We look closer at, the. Image it uses. An image tag and not, an amp, image, tag, on. The. CSS, sign it. Loads. Three, CSS. Stylesheets, and, if, we look closer at the total size it's, close to your 114. Kilobytes, which, is way above the 50 kilobytes allowed, in M. If. We look at the JavaScript. There. Is multiple JavaScript. Files loading, and if we take a closer look at the function, that J is it. Includes. Or contains, the handlers, from the navigation, and widget area we saw earlier on and mobile, so. To convert this theme we. Have some, challenges custom, JavaScript, too much CSS, for EM and a, lot of non amp HTML. So. Let's look at how we can convert this theme. The. M plug-in comes with. A set of amazing, features that. Can really help us overcome these challenges and. It, will actually do most of the heavy lifting for, us so. The first thing we would need to do is to declare the so called M steam support, it. Is extremely. Simple all it takes is to, add the code snippet, that you see on the screen right now in the. Custom plug-in or in, the child theme and once. The M team support is declared, the M, plug-in, will consider, the active, theme for. Instance, the 2015. Theme as a native, amp citizen, and apply, a set, of really nifty features. For. Example the, M plug-in is capable, of converting. All, the WordPress. Building components, and make, them M compatible. And by, that we mean widgets, embeds. Comments. Literally. Everything, rendered, by the, WordPress components. So. We saw earlier on the problem with the archives widget, and if we look at the code on top before the, M plug-in conversion, we, have this inline. Disallowed. JavaScript in M and if, we look after the M conversion, we, can see that the plug-in has changed at to use the empty a Shinto function, which is part of the runtime JavaScript. Library and that will help or actually, that will pass M validation. So. If you look at the invalid, M and the valid em what, we're after is, to get exactly, the same result, and that's. What we see on the screen we didn't lose any functionalities. But on the right hand side we can see that it passes em validation. Only. 50, kilobytes of CSS is allowed in EM to ensure maximum. Page, speed, but. The reality, is in WordPress, a lot of the steams contain, a lot more than that, and to. Address this issue and make it easier, the, EM plugin includes, a CSS, tree shaking mechanism. Which. Has the ability to only, load, the, CSS, needed, on any, given page and remove. All the unnecessary, CSS. If. We look once again at the stripped down stripped, down version, of the, 2015. Theme, code there, are two, style sheets disallow, style, sheets and the C at the start that CSS, alone is 96. Kilobytes, the. Plugin has the ability to concatenate, the, CSS, apply. The tree, shaking and print. It in line using. The EM custom, style, HTML. As prescribed, by M and that, will apply as validation. If. We look once again at the invalid, and valid. M we. Can see that, we achieve. What we are after which is exactly the same result, but. We've gone from a hundred, and fourteen, kilobytes, of CSS, down. To nine kilobytes. Is. Ten. Times smaller. Predicting. What thousands, of plugins and custom, integrations. Will render on the page is extremely difficult and to. Address that the. Plugin includes a post processor. Which, is capable of, validating. The page outputs, and entering. Em compatibility. Wherever. Possible. But. In some cases it, may come or cost some, functionalities. Especially. When javascript, is involved.

So. Let's. Look at this a little bit in more details once, again if, we'll get the HTML, before the M plug-in conversion, we, see that there's an image and if, we look at the bottom snippet, the M plugin is able, to convert this image using the amp image tag and that, is considered, considered. As a safe, change but. If we look at the JavaScript the functions, that J dot, J is in. Order to pass an validation. It wouldn't have to be removed and the. Plugin is capable, of doing that but. If we look at the invalid, amp and M version the, invalid, works the menu toggle because it contains the JavaScript, but, on the right hand side the. Menu doesn't work anymore. And there, we have a problem right, the. Goal of the plug-in is to make amp, integration. As easy. As possible and to. Improve the user experience but. Not damage it by any mean and that's. Why we. Saw the need for a, validation, workflow, which allows developers. To benefit, from all the features that the plugin includes, but also have. Control, and be able to manage it, so. By default the. Plug-in will convert, and apply, all the conversions which are considered, as safe for example. The amp HTML, conversion, and for. The changes which could potentially, introduce. Regression, they, would have to go through a validation workflow. Which, looks like this for. Example for the CSS tree shaking which is still in beta. The. Developer, can go ahead and view, the front end as if, the plug-in whilst, you apply this feature and. As we can see and we saw earlier on it, works perfectly, fine and at that point we, can go ahead and tell the plug-in please enable, it so. That it passes an validation, in the. Context, of function, that J's we. Saw early on that it actually breaks the menu and the, plugin will not apply this change by default, not to introduce regression. And that. Will give developers a chance to go ahead and fix it for example, using. The EM bind component, and use, the set state function, to toggle the class right, and then. Preview, the page again once this change has been applied in a child team for example by overwriting, the header dot PHP. And, once. It's. Proven to be working, the. Developer can go ahead and tell the plug-in now, that we fixed it you can go ahead and remove the functions that J s and that will then pass the amp validation. So. To recap, what it took to actually convert. 2015. Theme which is a popular, theme right we. Had to declare or enable, the M steam support, we. Had to apply one fix for, the menu toggle, by using the M bind component, and we, went through a validation workflow. And told. The plug-in to apply all the M conversion, after, reviewing them and this. Is the end result what. We are looking at right now is a, native, M version of the 2015. Theme. It. Looks as great as the non am Persian of course, if we look at it on mobile it, looks similar as well and as we can see just.

Now Before. Because, we applied the M bind the, menu is still working is. It passing M validation. If you look at the console we can see that it has invalidation. Successfully. And. Next, look on the performance, side let's. Run the, lighthouse audit. Without. The M plugin so that's before the M conversion. We. Get a score of 66. With, a 4.8, first, meaningful prints. If. We run the same lighthouse. Test which is running on 3G. Slow mobile after the, M conversion. We, get an 88. With, the first meaningful paint of 2.8. Second. Amazing. We. Really see how, the latest, development, work done, on the, plugin is helping. Converting, existing, products. Existing, themes and plugins used by millions of people to, be M compatible. The. Other main focus. Area, is in the content creation side. Gutenberg. Is the, new revolutionary. Content, creation experience. In WordPress, it. Replaces, half, a dozen constants. Inconsistent. Ways of customizing WordPress. Bringing. It in line with, the modern code standards, and aligning. With. With. Web initiatives. It. Also closes the gap between the back end and the front end offering. An amazing, visual building, experience. So. Gutenberg, has the concept of blocks to build pages, and on, the other side M as the concept. Of components. Micro. Libraries to build pages but, what about combining. The power of bars and build, Gutenberg, M blocks, and this. Is exactly, what we did and it. Opens, the door for amazing. Things to happen, we. Worked hard on pushing the boundaries to take the native amp experience, in WordPress a step further, leveraging. All the, latest work done on the plug-in as well. As a range of custom, Gutenberg, M blocks and this, is what it looks like what. We're looking at right now is a, WordPress, and Gooden burg powered theme, it's. Inspired, from the M star travel, and all, functionalities. That we see on the page is powered, by WordPress, and couldn't work. If. We look at a single adventure. We. Can see that we also leveraging, some of the M components, for example the MK result slides, through the images, or in. The Empire, to. Actually toggle the price. We. Are also using. Some of the WordPress. Components, such as the comments, to actually allow users, to submit. Reviews. Or. The. WordPress search to actually search, for adventures. And, we. Can really see how the content management system, shines to manage the adventures, here, on. Mobile, it is the same version of this team and it looks just as great out, of the box what we're looking at is Native, em but it is seamlessly, integrated. Once. Again if, you look at how. Adventures. Are categorized, we can see that it is pretty, well. Organized, and if. You look at a single adventure, we see other M components, like the MQ tube to, make the user experience better. So. This theme is fast right, super, fast it's actually secure and seamlessly, integrating. And it, is pretty engaging. Which. Which, makes it perfectly perfectly, aligned with the four pillars of a delightful, user, experience. And what. About the content creation side, of it what about the. Content creation experience, that we spoke about earlier on well. Let's look at how Gooden burg can be used to rebuild a different, version of the, homepage. But. We don't have to do is give the page a title and. Then. We'll, have access to, a set of blocks for instance custom blocks by, clicking on the little plus button it. Will open a drop-down, with a set of blocks and what we want to do for example to, rebuild our homepage is just. Click on the hero block. And. As we can see what. We see immediately is that it resembled, the front-end and we have access to really cool things like inline, editing, to change the text.

This. Is new, in WordPress and it's pretty amazing, let's. Continue building, our page and add a discover, block, from. The latest three suggested, block which is the most use. Right. There we have a second, block on the page and we can continue editing, our, page for example by changing the, subtitle, and let's. Add one more, third block the. Featured destination. Block. Once. Again as we can see it post the content automatically, and if we were to reorder. These blocks to change the look and feel of the page we, could just go ahead and click on the little icon on the left hand side and boom, our block has moved up and is now under the hey row block, this. Is a pretty, amazing. Editing. Experience from. My perspective at least. Let's. Preview what we just built in 30, seconds, a different, version of the home page native, amp with, access, of the. Amazing, M components. And an amazing, content creation experience. Powered. By Gutenberg. So. Where we are today the. Zero-point-seven, plug-in. Version, of the plug-in was, released last week. And. 0.7. Is really the first step towards, native m it is more orientated. Towards, power, users, to build themes from scratch, on. The other hand we have the M plug-in 1.0, which is still in progress and that, will include the, validation, workflow we looked at today the CSS tree shaking. The. Co Gutenberg blocks made, em compatible, and a range of custom. Gutenberg, blocks which, integrates, the, M components. What. We have today is amazing. But. The future, is also very very bright and for, that I would like to invite Alberto, back on stage to tell you more about it thank. You. Thank, You theory oh my god that's so exciting. I feel. Like I never saw it before but it's awesome, so we, have certainly gone a long way, in. Our on our quest to achieve progressive. WordPress but, we, are not what we want to be there is quite a bit of work that we have to do and we are pursuing, significant. Efforts in three main areas one. Is, enabling. The app shell, navigation. Model in WordPress, you. May have heard of it as the app shell architecture, which is an architectural, pattern to, build sites in a way that, if, pages have static. Sections, that do not change across, navigation, we, could catch them easily, so that when, you navigate a page they can be loaded very quickly, and provide a very nice onwards, experience, for the user and the part. Of the pages that are changing, that can be then render dynamically, either on the client on or. On, the server and. What. I excited, in motion about, this work is that it includes, the incorporation. Of the service workers API into. The WordPress core platform, I'm very excited about this particular area another. Area is has. To do with remember. Our progressive web development. Model we, need tooling. To help users developers. To do complex, things in an easy way and one of those areas is tooling, to facilitate, the development of, WordPress themes. Progressive, WordPress themes I'm going to say a few more words about this in a second and. The. Last part which, is like an uber area had to do with ecosystem, adoption, right because you know as you saw WordPress. Is a has a vibrant, ecosystem of, thousands of plugins thousands, of themes and we want to and need to work with the WordPress community to.

Push. WordPress. Towards the progressive. Road. There, are many many, projects that are here and and, stay tuned for them now our friends. Are LinkedIn learning have been working very very hard developing. A progressive. Theme boilerplate. Essentially. It is a theme development starter kit that allows, or makes it easier for WordPress. Theme developers, to go from zero to a full progressive, theme very. Quickly so, the boilerplate comes, loaded with modern. Development workflow you, know highly configurable uses. Tools like composer and gold browser, sync, it. Comes, with a range of coding and performance best practices baked, in so, that for, example, asynchronous. Loading of resources, is by default lazy, loading, of images, is by default, okay, and it has an own theme and. Plug-in. Integration. So, that if the theme developer, decides. To have an incompatible, theme, he, can switch a flag and voila you're gonna get a incompatible. Start a theme from the get-go so the, main development of this project which is morten grant Hendrickson who. Is also a staff instructor, and LinkedIn learning it's, preparing an awesome course that is going to teach you everything about how to use this boilerplate and that, particular code is going to be free so don't miss out okay. And. Other things if you can take three things from this talk are the following success. In the web is all, about user, experience and, building. Delightful. User experiences. To. Do, that we need to strive to, close the capabilities, usage gap it. Should be easy to do the right thing in the web and, the. Topic of today it is possible today. For, WordPress developers, to. Get, native, ant experiences. Without sacrificing. Sacrificing the, fidelity of their side of the content, or the flexibility. Of the WordPress platform, remember. Those three things and if. You are a WordPress expert you. Like, to code quite a bit and you are passionate about making the WordPress ecosystem, better and the, web better as a whole you, may consider working with us exactly. On doing that and. With that I want to thank you there are some useful resources here, and I want to extend special thanks, to Western Rooter the, whole xwp, team and automatic, for all the awesome contribution, to this work and I'm very looking forward to what we're gonna achieve in, the coming month thank you very much.

2018-05-11 16:12

Show Video

Comments:

Content shifting is, hands down, the most annoying thing about the mobile web. I had content shift FOUR times while trying to read an article the other day.

Is the Progressive Theme Boilerplate available yet? I could not find it on LinkedIn Learning or Lynda.

Thanks

Can't find the theme.

I would be careful before committing to any AMP-based solution, as your URLs will route through Google servers, ultimately creating a situation where you are not in control anymore.

You guys are very cool! thanks for all your hard work, I am wondering if you would place some direct link to the resources in the description for all who want to keep up yo date... Thank you so much

I would really like to see the demo of Morten Rand-Hendriksen but his github account does not seem to have the repo for the example theme or the boiler theme.

Great content but what a chore. First Andy Kaufman then Pepé Le Pew. This is fundamentally about more effective communication so wouldn't it help to take effective communication seriously, Google?

I think the demo is based on this template https://github.com/xwp/travel

Well said

It's been posted here:) https://www.lynda.com/WordPress-tutorials/WordPress-Building-Progressive-Themes-WP-Rig/718676-2.html

Michael Allen Smith Here it is https://wprig.io/

You have some ressources here : https://github.com/mor10/popperscores

interesting

Other news