A look into Calypso

Presented at WordCamp Europe, Vienna 2016.

The introduction of Calypso has brought the notion of a modern JavaScript approach to the front and center of the WordPress community. What does an admin UI built entirely in JavaScript (with technologies like React that have taken the JavaScript community by storm) mean for WordPress and how we think of JavaScript in the project? Explain some of Calypso’s core development values that have driven us from the very start at Automattic. How does it look internally and why it’s not powered by any “framework”? How can you get started, contribute, and begin making cool things with it?

Transcript

1. @matias_ventura Matías Ventura matiasventura.com WordCamp EU 2016, Vienna
2. A into Calypso
3. JS
4. Speed
6. Single-Page App Written in JavaScript Driven by WP.com REST API And some of WP-API
7. API Client → ←
8. Matt Mullenweg “A lot of people thought we should keep this proprietary, but throughout my life I’ve learned that the more you give away, the more you get back.” *
9. { Calypso } github.com/Automattic/wp-calypso
13. A declarative view layer written in pure JavaScript that simplifies the process of building complex UIs. React
14. Just Render() React updates the DOM to reflect current state of truth.
16. Not a framework
17. Library (view layer)
18. React Sass page.js wpcom.js redux webpack WP-API Components socket.io
19. Development Values
20. 0. We do it all for the user
21. 1. We optimize for iterating quickly
22. 2. We are here for the long haul See “Our Approach to Data”
23. 3. We don’t trust ourselves to be perfect
24. 4. We are in it together
25. When developers and designers care about all the flows, not just where their particular section ends, the work as a whole begins to shine.
26. Code Splitting With size comes
30. Smart preloading
33. <AsyncLoad> github.com/Automattic/wp-calypso/pull/5356 IN PROGRESS
34. Why do components matter?
36. <Site> What is a component?
37. JSX + Sass
38. Live components gallery
39. <Site> <Sidebar> <SitePopover> <EditorGroundControl> Composition
40. <Site> Components define app level semantics. NATIVE HTML <header> APP
41. <Site> App Components and their impact on collaboration. <Post> <Comments> <DraftsList>
42. Defines a language that transcends the medium, one which can be applied to mobile, the web, and desktop.
43. Using Calypso as a Framework
44. React Sass page.js wpcom.js redux webpack WP-API COMPONENTS
45. i18n App State App Components preloading SSR UI Components Offline(?) calypso
46. Build what you need JS Module Compilation Webpack + Babel → build.js } JS Module JS Module JS Module JS Module JS Module JS Module JS Module JS Module
47. { "features": { "reader": false } } { "project": “my-project" } // wp-calypso/client/my-project.js
52. $blue-wordpress: #e14d43; $blue-medium: #69a8bb; $gray: #a0a5aa; $gray-light: #f1f1f1; $gray-dark: #23282d; $orange-jazzy: #f56e28; $orange-fire: $orange-jazzy; $masterbar-color: $gray-dark; $sidebar-bg-color: $gray-dark; $sidebar-text-color: $white; $sidebar-selected-color: $blue-medium;
53. Install Calypso locally and play around with it. Use it to build a custom project and let us know how it goes. Add full WP-API support as a library to use instead of wpcom.js. ;) * * * try()
54. Thank you. @matias_ventura matiasventura.com