WordPress and AMP

In this meetup, Caspar Hübinger (@glueckpress) introduced the Accelerated Mobile Pages project and its ties to WordPress. As an active promoter of the Open Web, WordPress has been an early adopter of the AMP project on a large scale.

The talk’s purpose was to offer perspective for an open discussion on whether, why, and how WordPress developers and users could benefit from AMP, particularly in relation with the upcoming Gutenberg editor, as a framework to achieve rich content experiences with performance best practices built right in.

Frameworks through the ages

jQuery

  • free, open-source JavaScript library for simplifying client-side scripting of HTML
  • most used JavaScript library
  • released by John Resig in 2006, originally under under CC BY-SA 2.5, relicensed to MIT License shortly after
  • dual-licensed under GPL and MIT licenses at the end of 2006
  • GPL was dropped in 2012
  • currently licensed under MIT license
  • maintained by a team of developers, overseen by the jQuery Foundation
Copyright JS Foundation and other contributors, https://js.foundation/

jQuery UI

  • free, open-source curated set of user interface interactions, effects, widgets, and themes built on top of jQuery
  • released in 2007 by The jQuery Team (kicked off by Paul Bakaus) under MIT License
  • second most used JavaScript library
Copyright jQuery Foundation and other contributors, https://jquery.org/

Bootstrap

  • free, open-source front-end framework
  • developed by Mark Otto and Jacob Thornton at Twitter
  • released in 2011 under MIT License
  • originally maintained by/at Twitter, nowadays maintained by Mark Otto, Jacob Thornton, and contributors
Copyright (c) 2011-2018 Twitter, Inc.
Copyright (c) 2011-2018 The Bootstrap Authors

AngularJS

  • JavaScript-based open-source front-end web application framework
  • developed in 2009 by Miško Hevery at Brat Tech LLC
  • MIT License
  • maintained by Google and a community of contributing developers and companies
  • active development ends on June 30, 2018; version 1.7 long-term support will end on June 30, 2021
Copyright (c) 2010-2018 Google, Inc. http://angularjs.org

React

  • JavaScript library for building user interfaces
  • created by Jordan Walke at Facebook
  • maintained by Facebook and a community of contributing developers and companies
  • open-sourced under standard Apache License 2.0 in May 2013
  • re-licensed with a 3-clause BSD license and separate PATENTS text file in October 2014
  • re-licensed under MIT License in September 2017
Copyright (c) 2013-present, Facebook, Inc.

AMP (Accelerated Mobile Pages)

  • open-source toolset for creating fast and usable web pages
    • AMP HTML: HTML subset and superset, extended with custom properties
    • AMP JS: JavaScript-based implementation of performance practices, resource loading management, and custom tags
    • AMP Cache: proxy-based content delivery network for delivering valid AMP documents
  • first commit by Malte Ubl (Google) on 3 September 2015
  • maintained by the AMP team (mostly Google) and a community of contributing developers and companies
  • Apache License 2.0
Copyright 2015, Google Inc.

Why frameworks?

Code from scratch Use framework
Write HTML 🥐
Write JavaScript ☕️
Write CSS Import component
Customise design Customise design

Caveats

  • Overhead
  • Code dependencies
  • Handle legacy code base

Why AMP?

Code from scratch Use framework
Write semantic HTML 🥐
Write performant JavaScript ☕️
Write x-browser CSS Import component
Customise design Customise design
Set up caching {pre-validated, cached}
Run perf/a11y audits
Refine code
Renegotiate hours

Caveats

  • Overhead
  • Code dependencies
  • Infrastructure dependencies
  • Handle legacy code base and infrastructure

Why AMP in WordPress?

whatwebcando.today

  • Modern web applications can do most of the things native apps can do.
  • “We’ve hit peak WordPress”: WordPress has become a tool amongst other tools in the publishing stack.
  • WordPress holds back adoption of modern standards and best practices for “31% of the web”.

#ProgressiveWP

  • Implement coding and performance best practices
  • Encourage modern development workflows
  • Support modern Web APIs (e.g. Service Workers)
  • Enable progressive web applications (PWA)
  • Create user-first experiences

“We must strive to close the Capability/Usage gap … to democratise the building of delightful user experiences on the web.”
Alberto Medina

“How much should [people] need to know about how the web works in order to be able to publish some content?”
Morten Rand-Hendriksen

“… it’s also about limiting what a theme can do, … And that’s where AMP comes into the picture.”
Weston Ruter

Progressive WordPress is all about moving WordPress from the “cave in the desert” to the “spaceship”—just by using it to publish content.

#Gutenberg

“Everything is a block.”

“The … goal of Gutenberg is to create a post and page building experience that makes it easy to create rich post layouts.”
Gutenberg design principles

If everything is a block, how do we make sure blocks don’t suck?

History has shown again and again and again: You give people a new tool, they end up using it in irresponsible ways. Not because people are evil, or want to do evil things. But because many people are either ignorant, or uneducated in what they need to know to use a new tool responsibly.

If we give people blocks, it’s our responsibility to make sure those blocks won’t suck the life out of 31% of the web.

And this is where AMP could play an important role.
The very purpose of AMP is to “un-suck” user experience under realisitc (i.e. less than privileged) conditions. By letting AMP handle what themes and plugins print on the front-end, the rich post layouts promised by Gutenberg could make for an excellent, user-first, fast and reliable experience by default.

AMP Stories, for example, provide safe access to rich story telling—safe in the sense that it’s much, much harder to screw them up in terms of performance and UX.

Wrap up

WordPress and AMP—the pros:

  • A front-end library and caching infrastructure to complement Gutenberg blocks
  • A safe, responsible way to enable rich post layouts
  • A time-saver for developers and site builders
  • A lever for WP businesses to sell the performance
  • A toolbox to ensure performant, delightful UX across the WordPress product ecosystem
  • A relationship the entire web can benefit from

WordPress and AMP—concerns:

  • A corporation hijacking a community?
  • A monopoly on the rise?
  • A new chapter of browser wars?
  • A fist in the face of open Web Standards?
  • A fig-leaf to the fact WP lacks a front-end culture?
  • A nail in the coffin of WP as a community project?

Starters

Resources

Articles