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.

Transcript

1. @glueckpress #WPBerlin AMP WordPress
2. @glueckpress #WPBerlin Frameworks through the ages
3. @glueckpress #WPBerlin MIT License Copyright JS Foundation and other contributors, https://js.foundation/
4. @glueckpress #WPBerlin // jQuery $( selectors ) // Modern JavaScript querySelector( selectors ) querySelectorAll( selectors )
5. @glueckpress #WPBerlin MIT License Copyright jQuery Foundation and other contributors, https://jquery.org/
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 1.0-alpha
 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
 glueckpress.com Discuss!