Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

14,257 views

Published on

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.

Published in: Technology, Business

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

  1. 1. o2 is the new P2 Bringing WordPress to the Front-End #wpo2
  2. 2. @beaulebens dentedreality.com.au beau@automattic.com Beau Lebens
  3. 3. A story
  4. 4. A theme called Prologue http://en.blog.wordpress.com/2008/01/28/introducing-prologue/
  5. 5. Time passes... (1 year)
  6. 6. P2, son of Prologue http://themes.trac.wordpress.org/changeset/6285/ (2009-04-14)
  7. 7. Time passes... (4 years)
  8. 8. Wait a second...
  9. 9. v1.0.1 v1.5
  10. 10. Refined workflow
  11. 11. • Everything shared, searchable, archived Refined workflow
  12. 12. • Everything shared, searchable, archived • Multi-media enhanced Refined workflow
  13. 13. • Everything shared, searchable, archived • Multi-media enhanced • Asynchronous AND Synchronous(ish) Refined workflow
  14. 14. • Everything shared, searchable, archived • Multi-media enhanced • Asynchronous AND Synchronous(ish) • Accessible (desktop, mobile, email subs/ posting, Jabber) Refined workflow
  15. 15. • 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
  16. 16. Why P2?
  17. 17. This P2 thing...
  18. 18. This P2 thing... • We have 150 of them at Automattic
  19. 19. This P2 thing... • We have 150 of them at Automattic • 80%+ of our internal communication happens via P2
  20. 20. 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
  21. 21. 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
  22. 22. What would P2 look like if we wrote it today?
  23. 23. This is not your grandfather’s P2
  24. 24. • Exist as a network • Cross-site Search • Cross-posting • Keyword + Name Notifications • Shared Tags • Email Integration/Following models • Special syntaxes • One-liner media handling
  25. 25. How do we make all of this available to everyone?
  26. 26. P3!
  27. 27. o2
  28. 28. “Communication is Oxygen” http://ma.tt/2011/09/automattic-creed/
  29. 29. • o2 is a plugin
  30. 30. • o2 is a plugin • o2 is a platform
  31. 31. • o2 is a plugin • o2 is a platform • o2 is a network
  32. 32. • o2 is a plugin • o2 is a platform • o2 is a network • o2 is a client-side app
  33. 33. Wait a second...
  34. 34. Default theme (Breathe)
  35. 35. Completely new codebase
  36. 36. Smoother UX
  37. 37. Native Infinite Scroll
  38. 38. Improved editor/shortcuts
  39. 39. JSON API with Backbone.js sync
  40. 40. Still to come...
  41. 41. WordPress.com and WordPress.org, single or Multi-site
  42. 42. Networks
  43. 43. Jetpack-powered integration
  44. 44. Node.js/Socket.io messaging backend* * Maybe.We’re still experimenting with this.
  45. 45. Awesome mobile experience
  46. 46. Things we’ve learned
  47. 47. Template compatibility is hard
  48. 48. JS API http://make.wordpress.org/core/2013/07/17/json-rest-api-version-0-3/ (read + write)
  49. 49. WP_Query
  50. 50. Options/Settings
  51. 51. WordPress.js?
  52. 52. @beaulebens dentedreality.com.au beau@automattic.com geto2.com #wpo2

×