Slide 1
Slide 1 text
WHY WORDPRESS.COM CHOSE
JAVASCRIPT-FIRST APPROACH
Slide 2
Slide 2 text
James Tien
Automattic
JavaScript Wrangler
@southp
Slide 3
Slide 3 text
WHY
HOW
WHERE
Slide 4
Slide 4 text
WHY
...we built it?
Slide 5
Slide 5 text
WP-ADMIN
Slide 6
Slide 6 text
CALYPSO?
...DEMO TIME!
Slide 7
Slide 7 text
SO, WHAT'S WRONG
WITH WP-ADMIN?
Slide 8
Slide 8 text
WELL, NON-MODERN IS LIKE A SIN.
Slide 9
Slide 9 text
THE WORLD IS EVOLVING...
Once upon a time Now
One device.
One site / blog.
Server - client
Just too many.
Multisite
Server - Client
Slide 10
Slide 10 text
WHAT WOULD WE BUILD IF WE WERE
STARTING FROM SCRATCH TODAY?
(on a mysterious day in 2014)
Slide 11
Slide 11 text
MODERN
PERFORMANT
MOBILE-FIRST
MULTISITE
EASY TO USE
Slide 12
Slide 12 text
PHP → JAVASCRIPT
SVN + TRAC → GITHUB
...a big tech stack shi !
Slide 13
Slide 13 text
ONE OF THE HARDEST THINGS TO DO IN
TECHNOLOGY IS DISRUPT YOURSELF.
-- MATT MULLENWEG.
Slide 14
Slide 14 text
HOW
...did we approch it?
Slide 15
Slide 15 text
A GENERAL VIEW
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Modern JS
Module + Bundling
Task runner
View
State
Communicate with REST APIs
Slide 25
Slide 25 text
SILVER-BULLET
FRAMEWORKS?
Angular
Backbone
...
Slide 26
Slide 26 text
Pros Cons
integrated solution fat
less plumbering framework-only developers
deprecation risk
...we want it to last long.
Slide 27
Slide 27 text
A VANILLA APPROACH
Slide 28
Slide 28 text
NO BIG FRAMEWORKS!
Slide 29
Slide 29 text
Pros Cons
flexible more integration works
better modularity
JS developers
...integration works are actually a good thing.
Slide 30
Slide 30 text
View → React
State → Redux
Modern JS → Babel
Module + Bundling → Webpack
Task runner → GNU make
Slide 31
Slide 31 text
REACT
Slide 32
Slide 32 text
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
>
Slide 33
Slide 33 text
PURE......?
Slide 34
Slide 34 text
NO SIDE EFFECTS
SAME INPUT, SAME OUTPUT
Slide 35
Slide 35 text
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
>
)
;
}
Slide 36
Slide 36 text
PURE + PURE + ... => PURE
COMP. + COMP. + ... => COMPONENT
Slide 37
Slide 37 text
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
;
}
}
Slide 38
Slide 38 text
PURE + COMPONENT-SCOPED
CLASSES => REUSABLE
COMPONENTS
Slide 39
Slide 39 text
COMPONENT LIBRARY
...DEMO TIME!
https://wpcalypso.wordpress.com/devdocs/design
https://wpcalypso.wordpress.com/devdocs/app-components
Slide 40
Slide 40 text
REDUX
Slide 41
Slide 41 text
ONE GLOBAL IMMUTABLE APP STATE.
( STATE, ACTION ) => STATE
Slide 42
Slide 42 text
...YEAH! IT'S PURE!
Slide 43
Slide 43 text
/
/ 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 }
;
}
}
Slide 44
Slide 44 text
STATE + STATE + ... => STATE
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
STATE <-> REST API?
REDUX-THUNK
Slide 47
Slide 47 text
BABEL
Slide 48
Slide 48 text
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
Slide 49
Slide 49 text
WEBPACK
Slide 50
Slide 50 text
Incremental build
Flexible loader / plugin architeture
js / jsx
css / sass
json / svg / png / jpg ...
Module system
Slide 51
Slide 51 text
GNU MAKE
...WHY NOT GRUNT, GULP, ETC.?
Slide 52
Slide 52 text
IT JUST WORKS!
STABILITY > FANCINESS
Slide 53
Slide 53 text
WHAT HAVE THEY BROUGHT TO US?
Modularity
ES6 modules
Clean separation of view / state / server communication
Reusable components
Pureness
Less bugs
Composable
Slide 54
Slide 54 text
WHERE
...to go from here?
Slide 55
Slide 55 text
SO MUCH MORE!
Feature completeness
Server-side rendering
Calypso as a framework
...
Slide 56
Slide 56 text
WHAT MAKE US DO ALL
THESE IN THE FIRST
PLACE?
Slide 57
Slide 57 text
...REST API!
Slide 58
Slide 58 text
API AS CONTRACT
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
BLOGGING PLATFORM
↓
CMS
↓
APPLICATION FRAMEWORK
↓
COMMUNITY-DRIVEN, FULLY-OPEN SPEC!
Slide 63
Slide 63 text
WORDPRESS TODAY
AN IMPLEMENTATION OF THE SPEC BY PHP +
MYSQL
Slide 64
Slide 64 text
N FRONTENDS X M BACKENDS
Slide 65
Slide 65 text
Q: WHY WORDPRESS.COM CHOSE
JAVASCRIPT-FIRST APPROACH?
Slide 66
Slide 66 text
THE WORLD-WIDE-WEB IS EVOLVING
INTO A JS-GLUED OPERATING
SYSTEM.
Slide 67
Slide 67 text
...AND WE WANT TO SHOW THE
WORLD THAT WORDPRESS WILL BE
EVEN MORE VITAL
Slide 68
Slide 68 text
m(＿ ＿)m