WordCamp Kansai 2016: Why WordPress.com Chose JavaScript-First Approach.

WordCamp Kansai 2016: Why WordPress.com Chose JavaScript-First Approach.

This is a talk from WordCamp Kansai 2016, with the following session description:

"What would we build if we were starting from scratch today, knowing all we’ve learned over the past 13 years of building WordPress?" At the beginning of 2014, the folks at Automattic asked themselves this question. The result is what now known as Calypso. It is not only a product combining some latest web technology, but also the demonstration of what we see as the future of WordPress.

In this session, we cover a brief history about the evolving of Calypso, how we chose our development stack, and what we learned from them.

42b896eeaf27e9ebb1aa60befe585ad2?s=128

James Tien

July 13, 2016
Tweet

Transcript

  1. WHY WORDPRESS.COM CHOSE JAVASCRIPT-FIRST APPROACH

  2. James Tien Automattic JavaScript Wrangler @southp

  3. WHY HOW WHERE

  4. WHY ...we built it?

  5. WP-ADMIN

  6. CALYPSO? ...DEMO TIME!

  7. SO, WHAT'S WRONG WITH WP-ADMIN?

  8. WELL, NON-MODERN IS LIKE A SIN.

  9. THE WORLD IS EVOLVING... Once upon a time Now One

    device. One site / blog. Server - client Just too many. Multisite Server - Client
  10. WHAT WOULD WE BUILD IF WE WERE STARTING FROM SCRATCH

    TODAY? (on a mysterious day in 2014)
  11. MODERN PERFORMANT MOBILE-FIRST MULTISITE EASY TO USE

  12. PHP → JAVASCRIPT SVN + TRAC → GITHUB ...a big

    tech stack shi !
  13. ONE OF THE HARDEST THINGS TO DO IN TECHNOLOGY IS

    DISRUPT YOURSELF. -- MATT MULLENWEG.
  14. HOW ...did we approch it?

  15. A GENERAL VIEW

  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. Modern JS Module + Bundling Task runner View State Communicate

    with REST APIs
  25. SILVER-BULLET FRAMEWORKS? Angular Backbone ...

  26. Pros Cons integrated solution fat less plumbering framework-only developers deprecation

    risk ...we want it to last long.
  27. A VANILLA APPROACH

  28. NO BIG FRAMEWORKS!

  29. Pros Cons flexible more integration works better modularity JS developers

    ...integration works are actually a good thing.
  30. View → React State → Redux Modern JS → Babel

    Module + Bundling → Webpack Task runner → GNU make
  31. REACT

  32. DATA => VIEW { ' t i t l e

    ' : ' H e l l o ' , ' c o n t e n t ' : ' W C K a n s a i ! ' , } < a r t i c l e > < h 1 > H e l l o < / h 1 > < p > W C K a n s a i < / p > < / a r t i c l e >
  33. PURE......?

  34. NO SIDE EFFECTS SAME INPUT, SAME OUTPUT

  35. r e n d e r ( ) { c

    o n s t { t i t l e , c o n t e n t , } = t h i s . p r o p s ; r e t u r n ( < a r t i c l e > < h 1 > { t i t l e } < / h 1 > < p > { c o n t e n t } < / p > < / a r t i c l e > ) ; }
  36. PURE + PURE + ... => PURE COMP. + COMP.

    + ... => COMPONENT
  37. WHAT ABOUT STYLING...? COMPONENT-SCOPED CLASSES . c o m m

    e n t - b u t t o n { c o l o r : l i g h t e n ( $ g r a y , 1 0 ) ; l i s t - s t y l e - t y p e : n o n e ; p a d d i n g : 4 p x 4 p x 4 p x 2 7 p x ; p o s i t i o n : r e l a t i v e ; } . c o m m e n t - b u t t o n _ _ i c o n { f i l l : l i g h t e n ( $ g r a y , 1 0 % ) ; p o s i t i o n : a b s o l u t e ; l e f t : 0 ; t o p : 3 p x ; & : h o v e r { f i l l : $ b l u e - l i g h t ; } }
  38. PURE + COMPONENT-SCOPED CLASSES => REUSABLE COMPONENTS

  39. COMPONENT LIBRARY ...DEMO TIME! https://wpcalypso.wordpress.com/devdocs/design https://wpcalypso.wordpress.com/devdocs/app-components

  40. REDUX

  41. ONE GLOBAL IMMUTABLE APP STATE. ( STATE, ACTION ) =>

    STATE
  42. ...YEAH! IT'S PURE!

  43. / / I a m a s t a t

    e . { c o u n t e r : 0 , } / / I a m a n a c t i o n . { t y p e : ' I N C R E A S E ' , } / / M e , t o o . { t y p e : ' D E C R E A S E , } / / c a l l m e r e d u c e r . f u n c t i o n c o u n t e r _ r e d u c e r ( s t a t e , a c t i o n ) { s w i t c h ( a c t i o n . t y p e ) { c a s e ' I N C R E A S E ' : r e t u r n { c o u n t e r : s t a t e . c o u n t e r + 1 } ; c a s e ' D E C R E A S E ' : r e t u r n { c o u n t e r : s t a t e . c o u n t e r - 1 } ; } }
  44. STATE + STATE + ... => STATE

  45. None
  46. STATE <-> REST API? REDUX-THUNK

  47. BABEL

  48. A GO-TO ECMASCRIPT 6 ...a.k.a. the next generation JavaScript. Cleaner,

    richer syntax let, const, spread, destructuring, arrow function, ... ES6 modules import / export Better granularity vs CommonJS Promise A general framework for async computation
  49. WEBPACK

  50. Incremental build Flexible loader / plugin architeture js / jsx

    css / sass json / svg / png / jpg ... Module system
  51. GNU MAKE ...WHY NOT GRUNT, GULP, ETC.?

  52. IT JUST WORKS! STABILITY > FANCINESS

  53. WHAT HAVE THEY BROUGHT TO US? Modularity ES6 modules Clean

    separation of view / state / server communication Reusable components Pureness Less bugs Composable
  54. WHERE ...to go from here?

  55. SO MUCH MORE! Feature completeness Server-side rendering Calypso as a

    framework ...
  56. WHAT MAKE US DO ALL THESE IN THE FIRST PLACE?

  57. ...REST API!

  58. API AS CONTRACT

  59. None
  60. None
  61. None
  62. BLOGGING PLATFORM ↓ CMS ↓ APPLICATION FRAMEWORK ↓ COMMUNITY-DRIVEN, FULLY-OPEN

    SPEC!
  63. WORDPRESS TODAY AN IMPLEMENTATION OF THE SPEC BY PHP +

    MYSQL
  64. N FRONTENDS X M BACKENDS

  65. Q: WHY WORDPRESS.COM CHOSE JAVASCRIPT-FIRST APPROACH?

  66. THE WORLD-WIDE-WEB IS EVOLVING INTO A JS-GLUED OPERATING SYSTEM.

  67. ...AND WE WANT TO SHOW THE WORLD THAT WORDPRESS WILL

    BE EVEN MORE VITAL
  68. m(_ _)m