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
Tweet

More Decks by Caspar Hübinger

Other Decks in Programming

Transcript

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

    querySelector( selectors ) querySelectorAll( selectors )
  2. @glueckpress #WPBerlin ⚙︎ Write HTML ⚙︎ Write JavaScript ⚙︎ Write

    CSS ⚙︎ Customise design ⚙︎ ⚙︎ ☕ ⚙︎ Import component ⚙︎ Customise design Code from scratch Use framework
  3. @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
  4. @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
  5. @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
  6. @glueckpress #WPBerlin “… it’s also about limiting what a theme

    can do …
 And that’s where AMP comes into the picture.” —WESTON RUTER
  7. @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
  8. @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
  9. @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
  10. @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
  11. @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