Tweet
Tweet

Slide 1

Slide 1 text

@glueckpress #WPBerlin AMP WordPress

Slide 2

Slide 2 text

@glueckpress #WPBerlin Frameworks through the ages

Slide 3

Slide 3 text

@glueckpress #WPBerlin MIT License Copyright JS Foundation and other contributors, https://js.foundation/

Slide 4

Slide 4 text

@glueckpress #WPBerlin // jQuery $( selectors ) // Modern JavaScript querySelector( selectors ) querySelectorAll( selectors )

Slide 5

Slide 5 text

@glueckpress #WPBerlin MIT License Copyright jQuery Foundation and other contributors, https://jquery.org/

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

@glueckpress #WPBerlin Why frameworks?

Slide 11

Slide 11 text

@glueckpress #WPBerlin ⚙︎ Write HTML ⚙︎ Write JavaScript ⚙︎ Write CSS ⚙︎ Customise design ⚙︎ ⚙︎ ☕ ⚙︎ Import component ⚙︎ Customise design Code from scratch Use framework

Slide 12

Slide 12 text

@glueckpress #WPBerlin ⚙︎ Overhead ⚙︎ Code dependencies ⚙︎ Handle legacy code base Caveats

Slide 13

Slide 13 text

@glueckpress #WPBerlin Why AMP?

Slide 14

Slide 14 text

@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

Slide 15

Slide 15 text

@glueckpress #WPBerlin ⚙︎ Overhead ⚙︎ Code dependencies ⚙︎ Infrastructure dependencies ⚙︎ Handle legacy code base and infrastructure Caveats

Slide 16

Slide 16 text

@glueckpress #WPBerlin Why WordPress and AMP?

Slide 17

Slide 17 text

@glueckpress #WPBerlin whatwebcando.today

Slide 18

Slide 18 text

@glueckpress #WPBerlin

Slide 19

Slide 19 text

@glueckpress #WPBerlin ✨

Slide 20

Slide 20 text

@glueckpress #WPBerlin “WordPress is used by 
 ## % … of all websites.” —W3TECHS

Slide 21

Slide 21 text

@glueckpress #WPBerlin

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

@glueckpress #WPBerlin #ProgressiveWP

Slide 24

Slide 24 text

@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

Slide 25

Slide 25 text

@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

Slide 26

Slide 26 text

@glueckpress #WPBerlin “… it’s also about limiting what a theme can do …
 And that’s where AMP comes into the picture.” —WESTON RUTER

Slide 27

Slide 27 text

@glueckpress #WPBerlin

Slide 28

Slide 28 text

@glueckpress #WPBerlin ✨

Slide 29

Slide 29 text

@glueckpress #WPBerlin #Gutenberg

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

@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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

@glueckpress #WPBerlin AMP Stories

Slide 35

Slide 35 text

@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

Slide 36

Slide 36 text

@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

Slide 37

Slide 37 text

@glueckpress #WPBerlin Starters

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

@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

Slide 40

Slide 40 text

@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

Slide 41

Slide 41 text

@glueckpress #WPBerlin Caspar Hübinger
 @glueckpress
 glueckpress.com Discuss!