bringing wordpress to the front-end. o2 is the new p2

67
o2 is the new P2 Bringing WordPress to the Front-End #wpo2

Upload: beau-lebens

Post on 22-Nov-2014

8.488 views

Category:

Technology


1 download

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

o2 is the new P2Bringing WordPress to the Front-End

#wpo2

Page 2: Bringing WordPress to the front-end. o2 is the new P2

@beaulebensdentedreality.com.au

[email protected]

Beau Lebens

Page 3: Bringing WordPress to the front-end. o2 is the new P2

A story

Page 4: Bringing WordPress to the front-end. o2 is the new P2

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
Page 6: Bringing WordPress to the front-end. o2 is the new P2

Time passes...(1 year)

Page 7: Bringing WordPress to the front-end. o2 is the new P2

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
Page 9: Bringing WordPress to the front-end. o2 is the new P2

Time passes...(4 years)

Page 10: Bringing WordPress to the front-end. o2 is the new P2
Page 11: Bringing WordPress to the front-end. o2 is the new P2

Wait a second...

Page 12: Bringing WordPress to the front-end. o2 is the new P2

v1.0.1

v1.5

Page 13: Bringing WordPress to the front-end. o2 is the new P2
Page 14: Bringing WordPress to the front-end. o2 is the new P2

Refined workflow

Page 15: Bringing WordPress to the front-end. o2 is the new P2

• Everything shared, searchable, archived

Refined workflow

Page 16: Bringing WordPress to the front-end. o2 is the new P2

• Everything shared, searchable, archived

• Multi-media enhanced

Refined workflow

Page 17: Bringing WordPress to the front-end. o2 is the new P2

• 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

• 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

• 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

Why P2?

Page 21: Bringing WordPress to the front-end. o2 is the new P2
Page 22: Bringing WordPress to the front-end. o2 is the new P2
Page 23: Bringing WordPress to the front-end. o2 is the new P2
Page 24: Bringing WordPress to the front-end. o2 is the new P2
Page 25: Bringing WordPress to the front-end. o2 is the new P2

This P2 thing...

Page 26: Bringing WordPress to the front-end. o2 is the new P2

This P2 thing...

• We have 150 of them at Automattic

Page 27: Bringing WordPress to the front-end. o2 is the new P2

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

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

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
Page 31: Bringing WordPress to the front-end. o2 is the new P2

What would P2 look like if we wrote it today?

Page 32: Bringing WordPress to the front-end. o2 is the new P2

This is not your grandfather’s P2

Page 33: Bringing WordPress to the front-end. o2 is the new P2

• 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

How do we make all of this available to everyone?

Page 35: Bringing WordPress to the front-end. o2 is the new P2

P3!

Page 36: Bringing WordPress to the front-end. o2 is the new P2

o2

Page 37: Bringing WordPress to the front-end. o2 is the new P2

“Communication is Oxygen”

http://ma.tt/2011/09/automattic-creed/

Page 38: Bringing WordPress to the front-end. o2 is the new P2
Page 39: Bringing WordPress to the front-end. o2 is the new P2

• o2 is a plugin

Page 40: Bringing WordPress to the front-end. o2 is the new P2

• o2 is a plugin

• o2 is a platform

Page 41: Bringing WordPress to the front-end. o2 is the new P2

• 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

• 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
Page 44: Bringing WordPress to the front-end. o2 is the new P2

Wait a second...

Page 45: Bringing WordPress to the front-end. o2 is the new P2
Page 46: Bringing WordPress to the front-end. o2 is the new P2
Page 47: Bringing WordPress to the front-end. o2 is the new P2

Default theme(Breathe)

Page 48: Bringing WordPress to the front-end. o2 is the new P2

Completely new codebase

Page 49: Bringing WordPress to the front-end. o2 is the new P2
Page 50: Bringing WordPress to the front-end. o2 is the new P2

Smoother UX

Page 51: Bringing WordPress to the front-end. o2 is the new P2

Native Infinite Scroll

Page 52: Bringing WordPress to the front-end. o2 is the new P2

Improved editor/shortcuts

Page 53: Bringing WordPress to the front-end. o2 is the new P2
Page 54: Bringing WordPress to the front-end. o2 is the new P2

JSON API with Backbone.js sync

Page 55: Bringing WordPress to the front-end. o2 is the new P2

Still to come...

Page 56: Bringing WordPress to the front-end. o2 is the new P2

WordPress.com and WordPress.org,

single or Multi-site

Page 57: Bringing WordPress to the front-end. o2 is the new P2

Networks

Page 58: Bringing WordPress to the front-end. o2 is the new P2

Jetpack-powered integration

Page 59: Bringing WordPress to the front-end. o2 is the new P2

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

Awesome mobile experience

Page 61: Bringing WordPress to the front-end. o2 is the new P2

Things we’ve learned

Page 62: Bringing WordPress to the front-end. o2 is the new P2

Template compatibility is hard

Page 63: Bringing WordPress to the front-end. o2 is the new P2

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

WP_Query

Page 65: Bringing WordPress to the front-end. o2 is the new P2

Options/Settings

Page 66: Bringing WordPress to the front-end. o2 is the new P2

WordPress.js?