Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WordPress and AMP

WordPress and AMP

Meetup discussion intro to WordPress and Accelerated Mobile Pages, offering perspective on AMP in relation to frameworks on the web in general, Progressive WordPress, and the Gutenberg project.


Caspar Hübinger

July 03, 2018

More Decks by Caspar Hübinger

Other Decks in Programming


  1. @glueckpress #WPBerlin AMP WordPress

  2. @glueckpress #WPBerlin Frameworks through the ages

  3. @glueckpress #WPBerlin MIT License Copyright JS Foundation and other contributors,

  4. @glueckpress #WPBerlin // jQuery $( selectors ) // Modern JavaScript

    querySelector( selectors ) querySelectorAll( selectors )
  5. @glueckpress #WPBerlin MIT License Copyright jQuery Foundation and other contributors,

  6. @glueckpress #WPBerlin MIT License Copyright (c) 2011-2018 Twitter, Inc. Copyright

    (c) 2011-2018 The Bootstrap Authors
  7. @glueckpress #WPBerlin MIT License Copyright (c) 2010-2018 Google, Inc. http://angularjs.org

  8. @glueckpress #WPBerlin MIT License Copyright (c) 2013-present, Facebook, Inc.

  9. @glueckpress #WPBerlin Apache License Copyright 2015, Google Inc.

  10. @glueckpress #WPBerlin Why frameworks?

  11. @glueckpress #WPBerlin ⚙︎ Write HTML ⚙︎ Write JavaScript ⚙︎ Write

    CSS ⚙︎ Customise design ⚙︎ ⚙︎ ☕ ⚙︎ Import component ⚙︎ Customise design Code from scratch Use framework
  12. @glueckpress #WPBerlin ⚙︎ Overhead ⚙︎ Code dependencies ⚙︎ Handle legacy

    code base Caveats
  13. @glueckpress #WPBerlin Why AMP?

  14. @glueckpress #WPBerlin ⚙︎ Write semantic HTML ⚙︎ Write performant JS

    ⚙︎ Write x-browser CSS ⚙︎ Customise design ⚙︎ Set up caching ⚙︎ Run perf/a11y audits ⚙︎ Refine code ⚙︎ Renegotiate hours ⚙︎ ⚙︎ ☕ ⚙︎ Import component ⚙︎ Customise design ⚙︎ {pre-validated, cached} Code from scratch Use AMP
  15. @glueckpress #WPBerlin ⚙︎ Overhead ⚙︎ Code dependencies ⚙︎ Infrastructure dependencies

    ⚙︎ Handle legacy code base and infrastructure Caveats
  16. @glueckpress #WPBerlin Why WordPress and AMP?

  17. @glueckpress #WPBerlin whatwebcando.today

  18. @glueckpress #WPBerlin

  19. @glueckpress #WPBerlin ✨

  20. @glueckpress #WPBerlin “WordPress is used by 
 ## % …

    of all websites.” —W3TECHS
  21. @glueckpress #WPBerlin

  22. @glueckpress #WPBerlin “We’ve hit peak WordPress.” —NOEL TOCK

  23. @glueckpress #WPBerlin #ProgressiveWP

  24. @glueckpress #WPBerlin ⚙︎ 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 #ProgressiveWP
  25. @glueckpress #WPBerlin “How much should [people] need to know about

    how the web works
 in order to be able to
 publish some content?” —MORTEN RAND-HENDRIKSEN
  26. @glueckpress #WPBerlin “… it’s also about limiting what a theme

    can do …
 And that’s where AMP comes into the picture.” —WESTON RUTER
  27. @glueckpress #WPBerlin

  28. @glueckpress #WPBerlin ✨

  29. @glueckpress #WPBerlin #Gutenberg

  30. @glueckpress #WPBerlin “Everything is a block.” —GUTENBERG DESIGN PRINCIPLES

  31. @glueckpress #WPBerlin “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
  32. @glueckpress #WPBerlin If everything is a block, how do we

    make sure blocks don’t suck?
  33. @glueckpress #WPBerlin Apache License Copyright 2015, Google Inc.

  34. @glueckpress #WPBerlin AMP Stories

  35. @glueckpress #WPBerlin ⚙︎ A front-end library 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
  36. @glueckpress #WPBerlin ⚙︎ 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? WordPress and AMP
  37. @glueckpress #WPBerlin Starters

  38. @glueckpress #WPBerlin https://w.org/plugins/amp https://wprig.io

  39. @glueckpress #WPBerlin ⚙︎ WP Rig
 https://wprig.io/ ⚙︎ AMP for WordPress

 https://github.com/Automattic/amp-wp/releases ⚙︎ AMP project
 https://www.ampproject.org/ ⚙︎ AMP by example
 https://ampbyexample.com/ Resources
  40. @glueckpress #WPBerlin ⚙︎ Progressive WordPress
 https://medinathoughts.com/2018/05/17/ progressive-wordpress/ ⚙︎ Standardizing lessons

    learned from AMP
 https://amphtml.wordpress.com/2018/03/08/ standardizing-lessons-learned-from-amp/ ⚙︎ Contributing to the AMP Project
 https://amphtml.wordpress.com/2018/06/21/ contributing-to-the-amp-project/ Articles
  41. @glueckpress #WPBerlin Caspar Hübinger
 glueckpress.com Discuss!