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.

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
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
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
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