bringing wordpress to the front-end. o2 is the new p2
DESCRIPTION
See more at http://geto2.com/ o2 is the next generation of the P2 theme from Automattic, a Twitter/Yammer-style communication platform, based on WordPress. This version is all written in Backbone and brings distributed collaboration up to the cutting edge of web technology.TRANSCRIPT
![Page 1: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/1.jpg)
o2 is the new P2Bringing WordPress to the Front-End
#wpo2
![Page 2: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/2.jpg)
@beaulebensdentedreality.com.au
Beau Lebens
![Page 3: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/3.jpg)
A story
![Page 4: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/4.jpg)
A theme called Prologue
http://en.blog.wordpress.com/2008/01/28/introducing-prologue/
![Page 5: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/5.jpg)
![Page 6: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/6.jpg)
Time passes...(1 year)
![Page 7: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/7.jpg)
P2, son of Prologue
http://themes.trac.wordpress.org/changeset/6285/ (2009-04-14)
![Page 8: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/8.jpg)
![Page 9: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/9.jpg)
Time passes...(4 years)
![Page 10: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/10.jpg)
![Page 11: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/11.jpg)
Wait a second...
![Page 12: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/12.jpg)
v1.0.1
v1.5
![Page 13: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/13.jpg)
![Page 14: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/14.jpg)
Refined workflow
![Page 15: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/15.jpg)
• Everything shared, searchable, archived
Refined workflow
![Page 16: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/16.jpg)
• Everything shared, searchable, archived
• Multi-media enhanced
Refined workflow
![Page 17: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/17.jpg)
• Everything shared, searchable, archived
• Multi-media enhanced
• Asynchronous AND Synchronous(ish)
Refined workflow
![Page 18: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/18.jpg)
• Everything shared, searchable, archived
• Multi-media enhanced
• Asynchronous AND Synchronous(ish)
• Accessible (desktop, mobile, email subs/posting, Jabber)
Refined workflow
![Page 19: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/19.jpg)
• Everything shared, searchable, archived
• Multi-media enhanced
• Asynchronous AND Synchronous(ish)
• Accessible (desktop, mobile, email subs/posting, Jabber)
• A radically transparent, shared inbox
Refined workflow
![Page 20: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/20.jpg)
Why P2?
![Page 21: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/21.jpg)
![Page 22: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/22.jpg)
![Page 23: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/23.jpg)
![Page 24: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/24.jpg)
![Page 25: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/25.jpg)
This P2 thing...
![Page 26: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/26.jpg)
This P2 thing...
• We have 150 of them at Automattic
![Page 27: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/27.jpg)
This P2 thing...
• We have 150 of them at Automattic
• 80%+ of our internal communication happens via P2
![Page 28: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/28.jpg)
This P2 thing...
• We have 150 of them at Automattic
• 80%+ of our internal communication happens via P2
• Every single Automattician is reliant on P2s to do their work
![Page 29: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/29.jpg)
This P2 thing...
• We have 150 of them at Automattic
• 80%+ of our internal communication happens via P2
• Every single Automattician is reliant on P2s to do their work
• Other people are even using P2s now
![Page 30: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/30.jpg)
![Page 31: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/31.jpg)
What would P2 look like if we wrote it today?
![Page 32: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/32.jpg)
This is not your grandfather’s P2
![Page 33: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/33.jpg)
• Exist as a network
• Cross-site Search
• Cross-posting
• Keyword + Name Notifications
• Shared Tags
• Email Integration/Following models
• Special syntaxes
• One-liner media handling
![Page 34: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/34.jpg)
How do we make all of this available to everyone?
![Page 35: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/35.jpg)
P3!
![Page 36: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/36.jpg)
o2
![Page 37: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/37.jpg)
“Communication is Oxygen”
http://ma.tt/2011/09/automattic-creed/
![Page 38: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/38.jpg)
![Page 39: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/39.jpg)
• o2 is a plugin
![Page 40: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/40.jpg)
• o2 is a plugin
• o2 is a platform
![Page 41: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/41.jpg)
• o2 is a plugin
• o2 is a platform
• o2 is a network
![Page 42: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/42.jpg)
• o2 is a plugin
• o2 is a platform
• o2 is a network
• o2 is a client-side app
![Page 43: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/43.jpg)
![Page 44: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/44.jpg)
Wait a second...
![Page 45: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/45.jpg)
![Page 46: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/46.jpg)
![Page 47: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/47.jpg)
Default theme(Breathe)
![Page 48: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/48.jpg)
Completely new codebase
![Page 49: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/49.jpg)
![Page 50: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/50.jpg)
Smoother UX
![Page 51: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/51.jpg)
Native Infinite Scroll
![Page 52: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/52.jpg)
Improved editor/shortcuts
![Page 53: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/53.jpg)
![Page 54: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/54.jpg)
JSON API with Backbone.js sync
![Page 55: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/55.jpg)
Still to come...
![Page 56: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/56.jpg)
WordPress.com and WordPress.org,
single or Multi-site
![Page 57: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/57.jpg)
Networks
![Page 58: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/58.jpg)
Jetpack-powered integration
![Page 59: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/59.jpg)
Node.js/Socket.io messaging backend*
* Maybe. We’re still experimenting with this.
![Page 60: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/60.jpg)
Awesome mobile experience
![Page 61: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/61.jpg)
Things we’ve learned
![Page 62: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/62.jpg)
Template compatibility is hard
![Page 63: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/63.jpg)
JS API
http://make.wordpress.org/core/2013/07/17/json-rest-api-version-0-3/
(read + write)
![Page 64: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/64.jpg)
WP_Query
![Page 65: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/65.jpg)
Options/Settings
![Page 66: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/66.jpg)
WordPress.js?
![Page 67: Bringing WordPress to the front-end. o2 is the new P2](https://reader034.vdocuments.mx/reader034/viewer/2022042613/5474a39eb4af9fb90a8b581c/html5/thumbnails/67.jpg)
@beaulebensdentedreality.com.au
geto2.com#wpo2