JAVASCRIPT APPS
ISOMORPHIC
ON THE WITH .JS AND
MVC
JVM REACT
JAVA EE
Niko Köbler
So ware-Architect, Developer & Trainer
| |
niko@n-k.de www.n-k.de @dasniko
Slide 2
Slide 2 text
@dasniko
Slide 3
Slide 3 text
ATWOOD'S LAW
(Principle of Least Power)
Any application that can be written in
JavaScript, will eventually be written in
JavaScript
Jeff Atwood
http://blog.codinghorror.com/the-principle-of-least-power
Slide 4
Slide 4 text
JAVASCRIPT HAS
BECOME THE
APP RUNTIME
ENVIRONMENT
(at least in the browser)
Slide 5
Slide 5 text
MORPHIC
ISO
/ˌaɪ.soʊˈmɔɹ.fɪk/
greek: "isos" = equal, "morph" = shape
Slide 6
Slide 6 text
ISOMORPHIC JAVASCRIPT
If you look at the same entity ( ) in two
different contexts ( ), you
should get the same thing (
).
code
client & server
result, html,
DOM, ...
Slide 7
Slide 7 text
JAVASCRIPT
ISOMORPHIC
aka
JAVASCRIPT
UNIVERSAL
Slide 8
Slide 8 text
WHY ON
CLIENT AND SERVER!?
SAME CODE
DRY principle
share same logic
one codebase / maintenance
single point of truth (or failure)
single technology
Slide 9
Slide 9 text
WHY RENDER ON THE ?
SERVER
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
WHY RENDER ON THE ?
SERVER
b/c wait time matters!
http://www.radware.com
Slide 12
Slide 12 text
WHY RENDER ON THE ?
SERVER
this is how Google sees your site:
Slide 13
Slide 13 text
WHY RENDER ON THE ?
SERVER
UX
SEO
Performance
Legacy Browser Support
Slide 14
Slide 14 text
WHY RENDER ON THE ?
CLIENT
UX
Performance
Slide 15
Slide 15 text
ISOMORPHIC FTW!
1. User requests URL
2. Server fetches content for that URL
3. Server renders content to a response
4. User enjoys the content
5. Client is initialized
6. User nagivates to a different URL
7. Client fetches content for that URL
8. Client renders content to the DOM
Slide 16
Slide 16 text
WEB
APPS SOUND
AWESOME, BUT...
ISOMORPHIC
Slide 17
Slide 17 text
I'M IN A
ENVIRONMENT!
JAVA
And I don't want to have more complicated deployments
and performance overhead of interacting with external Node
processes!
Slide 18
Slide 18 text
RUN ON
THE WITH
!
JAVASCRIPT
JVM
NASHORN
Slide 19
Slide 19 text
NASHORN
JavaScript Engine on the JVM since Java 8
ECMAScript 5.1 compatibility
plus language and api extensions
ES6/ES2015 features come with Java 9
backports available
compiles JavaScript to Java Bytecode
providing interoperability of Java and JavaScript
Shell scripting mode
Slide 20
Slide 20 text
NASHORN &
CONCURRENCY
Browsers: no simultaneous execution of JavaScript code
Nashorn itself is not thread-safe by design
Thread-safety depends on your code!
Use a T
h
r
e
a
d
L
o
c
a
l
<
S
c
r
i
p
t
E
n
g
i
n
g
e
> when your JS
code is not thread-safe (i.e. React.js, Handlebars, etc.)
Slide 21
Slide 21 text
EXAMPLE: PASSWORD VALIDATION
JavaScript code:
f
u
n
c
t
i
o
n i
s
P
a
s
s
w
o
r
d
V
a
l
i
d
(
p
a
s
s
w
o
r
d
) {
v
a
r s
c
o
r
e = s
c
o
r
e
P
a
s
s
w
o
r
d
S
t
r
e
n
g
t
h
(
p
a
s
s
w
o
r
d
)
;
r
e
t
u
r
n s
c
o
r
e >
= 3
;
}
Java code:
p
u
b
l
i
c B
o
o
l
e
a
n i
s
P
a
s
s
w
o
r
d
V
a
l
i
d
(
S
t
r
i
n
g p
a
s
s
w
o
r
d
) {
t
r
y {
r
e
t
u
r
n (
B
o
o
l
e
a
n
) n
a
s
h
o
r
n
.
i
n
v
o
k
e
F
u
n
c
t
i
o
n
(
"
i
s
P
a
s
s
w
o
r
d
V
a
l
i
d
"
, p
a
s
s
w
o
r
d
)
;
} c
a
t
c
h (
S
c
r
i
p
t
E
x
c
e
p
t
i
o
n | N
o
S
u
c
h
M
e
t
h
o
d
E
x
c
e
p
t
i
o
n e
) {
t
h
r
o
w n
e
w R
u
n
t
i
m
e
E
x
c
e
p
t
i
o
n
(
e
)
;
}
}
Slide 22
Slide 22 text
REACT.JS
invented by Facebook
component based
not a full-stack framework
just the "V" in MVC
virtual DOM (updates via diffs - no flickering)
supports server-side rendering
"JavaScript library for building user interfaces"
"The new star on the web-dev heaven"
http://reactjs.org
JSX
c
l
a
s
s B
o
o
k e
x
t
e
n
d
s R
e
a
c
t
.
C
o
m
p
o
n
e
n
t {
r
e
n
d
e
r
(
) {
r
e
t
u
r
n (
;
}
}
<
d
i
v c
l
a
s
s
N
a
m
e
=
"
b
o
o
k
"
>
<
h
3
>
{
t
h
i
s
.
p
r
o
p
s
.
a
u
t
h
o
r
}
<
/
h
3
>
<
d
i
v
>
{
t
h
i
s
.
p
r
o
p
s
.
t
i
t
l
e
}
<
/
d
i
v
>
<
/
d
i
v
>
)
JS
v
a
r B
o
o
k = R
e
a
c
t
.
c
r
e
a
t
e
C
l
a
s
s
(
{
d
i
s
p
l
a
y
N
a
m
e
: "
B
o
o
k
"
,
r
e
n
d
e
r
: f
u
n
c
t
i
o
n (
) {
r
e
t
u
r
n (
R
e
a
c
t
.
c
r
e
a
t
e
E
l
e
m
e
n
t
(
"
d
i
v
"
, {
c
l
a
s
s
N
a
m
e
: "
b
o
o
k
"
}
,
R
e
a
c
t
.
c
r
e
a
t
e
E
l
e
m
e
n
t
(
"
h
3
"
, n
u
l
l
, t
h
i
s
.
p
r
o
p
s
.
a
u
t
h
o
r
)
,
R
e
a
c
t
.
c
r
e
a
t
e
E
l
e
m
e
n
t
(
"
d
i
v
"
, n
u
l
l
, t
h
i
s
.
p
r
o
p
s
.
t
i
t
l
e
)
)
)
;
}
}
)
;
Slide 26
Slide 26 text
HTML
<
d
i
v c
l
a
s
s
=
"
b
o
o
k
" d
a
t
a
-
r
e
a
c
t
i
d
=
"
.
1
.
$
0
"
>
<
h
3 d
a
t
a
-
r
e
a
c
t
i
d
=
"
.
1
.
$
0
.
0
"
>
G
e
o
r
g
e O
r
w
e
l
l
<
/
h
3
>
<
d
i
v c
l
a
s
s
=
"
l
e
a
d
" d
a
t
a
-
r
e
a
c
t
i
d
=
"
.
1
.
$
0
.
1
"
>
1
9
8
4
<
/
d
i
v
>
<
/
d
i
v
>
Transpile JSX to JS with
Webpack
& Babel
https://webpack.github.io
https://babeljs.io
JAVA 8 - MVC 1.0
EE
OZARK-REACT
ReactJS-based ViewEngine
https://github.com/dasniko/ozark-react
Slide 30
Slide 30 text
OZARK-REACT
STEP
BUILD
Slide 31
Slide 31 text
OZARK-REACT
EXECUTION
RUNTIME
Slide 32
Slide 32 text
OZARK-REACT
EXECUTION
RUNTIME
Slide 33
Slide 33 text
OZARK-REACT
EXECUTION
RUNTIME
Slide 34
Slide 34 text
OZARK-REACT
EXECUTION
RUNTIME
Slide 35
Slide 35 text
OZARK-REACT
EXECUTION
RUNTIME
Slide 36
Slide 36 text
OZARK-REACT
EXECUTION
RUNTIME
Slide 37
Slide 37 text
OZARK-REACT
EXECUTION
RUNTIME
Slide 38
Slide 38 text
OZARK-REACT
EXECUTION
RUNTIME
Slide 39
Slide 39 text
OZARK-REACT
EXECUTION
RUNTIME
Slide 40
Slide 40 text
OZARK-REACT
EXECUTION
RUNTIME
Slide 41
Slide 41 text
OZARK-REACT
EXECUTION
RUNTIME
Slide 42
Slide 42 text
MVC REACT CONTROLLER
@
C
o
n
t
r
o
l
l
e
r
@
P
a
t
h
(
"
/
r
e
a
c
t
"
)
p
u
b
l
i
c c
l
a
s
s R
e
a
c
t
C
o
n
t
r
o
l
l
e
r {
@
I
n
j
e
c
t
p
r
i
v
a
t
e M
o
d
e
l
s m
o
d
e
l
s
;
@
I
n
j
e
c
t
p
r
i
v
a
t
e B
o
o
k
S
e
r
v
i
c
e s
e
r
v
i
c
e
;
@
G
E
T
p
u
b
l
i
c S
t
r
i
n
g i
n
d
e
x
(
) t
h
r
o
w
s E
x
c
e
p
t
i
o
n {
L
i
s
t
<
B
o
o
k
> b
o
o
k
s = s
e
r
v
i
c
e
.
g
e
t
B
o
o
k
s
(
)
;
m
o
d
e
l
s
.
p
u
t
(
"
d
a
t
a
"
, b
o
o
k
s
)
;
r
e
t
u
r
n "
r
e
a
c
t
:
r
e
a
c
t
.
j
s
p
?
f
u
n
c
t
i
o
n
=
r
e
n
d
e
r
S
e
r
v
e
r
"
;
}
}
https://github.com/dasniko/ozark-
react/blob/master/src/main/java/dasniko/ozark/react/ReactController.java
Slide 43
Slide 43 text
REACT ENGINE
VIEW
p
u
b
l
i
c c
l
a
s
s R
e
a
c
t
V
i
e
w
E
n
g
i
n
e e
x
t
e
n
d
s S
e
r
v
l
e
t
V
i
e
w
E
n
g
i
n
e {
@
O
v
e
r
r
i
d
e
p
u
b
l
i
c v
o
i
d p
r
o
c
e
s
s
V
i
e
w
(
V
i
e
w
E
n
g
i
n
e
C
o
n
t
e
x
t c
o
n
t
e
x
t
) t
h
r
o
w
s V
i
e
w
E
n
g
i
n
e
E
x
c
e
p
t
i
/
/ p
a
r
s
e v
i
e
w a
n
d e
x
t
r
a
c
t t
h
e a
c
t
u
a
l t
e
m
p
l
a
t
e a
n
d t
h
e r
e
a
c
t
.
j
s f
u
n
c
t
i
o
n t
S
t
r
i
n
g v
i
e
w = c
o
n
t
e
x
t
.
g
e
t
V
i
e
w
(
)
; /
/ r
e
a
c
t
:
r
e
a
c
t
.
j
s
p
?
f
u
n
c
t
i
o
n
=
r
e
n
d
e
r
S
e
r
v
e
r
S
t
r
i
n
g t
e
m
p
l
a
t
e = v
i
e
w
.
s
u
b
s
t
r
i
n
g
(
"
r
e
a
c
t
:
"
.
l
e
n
g
t
h
(
)
, v
i
e
w
.
i
n
d
e
x
O
f
(
"
?
"
S
t
r
i
n
g f
u
n
c
t
i
o
n = v
i
e
w
.
s
u
b
s
t
r
i
n
g
(
v
i
e
w
.
i
n
d
e
x
O
f
(
"
f
u
n
c
t
i
o
n
=
"
) + 9
)
;
/
/ g
e
t "
d
a
t
a
" f
r
o
m m
o
d
e
l
M
o
d
e
l
s m
o
d
e
l
s = c
o
n
t
e
x
t
.
g
e
t
M
o
d
e
l
s
(
)
;
O
b
j
e
c
t d
a
t
a = m
o
d
e
l
s
.
g
e
t
(
"
d
a
t
a
"
)
;
/
/ c
a
l
l g
i
v
e
n j
s f
u
n
c
t
i
o
n o
n d
a
t
a
S
t
r
i
n
g c
o
n
t
e
n
t = r
e
a
c
t
.
r
e
n
d
e
r
(
f
u
n
c
t
i
o
n
, d
a
t
a
)
;
/
/ a
n
d p
u
t r
e
s
u
l
t
s a
s s
t
r
i
n
g i
n m
o
d
e
l
m
o
d
e
l
s
.
p
u
t
(
"
c
o
n
t
e
n
t
"
, c
o
n
t
e
n
t
)
;
m
o
d
e
l
s
.
p
u
t
(
"
d
a
t
a
"
, m
a
p
p
e
r
.
w
r
i
t
e
V
a
l
u
e
A
s
S
t
r
i
n
g
(
d
a
t
a
)
)
;
/
/ c
r
e
a
t
e a n
e
w c
o
n
t
e
x
t w
i
t
h t
h
e a
c
t
u
a
l v
i
e
w a
n
d f
o
r
w
a
r
d t
o S
e
r
v
l
e
t
V
i
e
w
E
n
V
i
e
w
E
n
g
i
n
e
C
o
n
t
e
x
t c
t
x = n
e
w V
i
e
w
E
n
g
i
n
e
C
o
n
t
e
x
t
I
m
p
l
(
t
e
m
p
l
a
t
e
, m
o
d
e
l
s
, .
.
.
)
;
t
r
y {
f
o
r
w
a
r
d
R
e
q
u
e
s
t
(
c
t
x
, "
*
.
j
s
p
"
, "
*
.
j
s
p
x
"
)
;
} c
a
t
c
h (
S
e
r
v
l
e
t
E
x
c
e
p
t
i
o
n | I
O
E
x
c
e
p
t
i
o
n e
) {
https://github.com/dasniko/ozark-
Slide 44
Slide 44 text
react/blob/master/src/main/java/dasniko/ozark/react/ReactViewEngine.java
REACT RENDERER
p
r
i
v
a
t
e T
h
r
e
a
d
L
o
c
a
l
<
S
c
r
i
p
t
E
n
g
i
n
e
> e
n
g
i
n
e
H
o
l
d
e
r = T
h
r
e
a
d
L
o
c
a
l
.
w
i
t
h
I
n
i
t
i
a
l
(
(
) -
S
c
r
i
p
t
E
n
g
i
n
e e
n
g
i
n
e = n
e
w S
c
r
i
p
t
E
n
g
i
n
e
M
a
n
a
g
e
r
(
)
.
g
e
t
E
n
g
i
n
e
B
y
N
a
m
e
(
"
n
a
s
h
o
r
n
"
e
n
g
i
n
e
.
e
v
a
l
(
r
e
a
d
(
"
n
a
s
h
o
r
n
-
p
o
l
y
f
i
l
l
.
j
s
"
)
)
;
e
n
g
i
n
e
.
e
v
a
l
(
r
e
a
d
(
"
a
p
p
.
j
s
"
)
)
;
r
e
t
u
r
n e
n
g
i
n
e
;
)
}
;
p
u
b
l
i
c S
t
r
i
n
g r
e
n
d
e
r
(
S
t
r
i
n
g f
u
n
c
t
i
o
n
, O
b
j
e
c
t o
b
j
e
c
t
) {
O
b
j
e
c
t h
t
m
l = e
n
g
i
n
e
H
o
l
d
e
r
.
g
e
t
(
)
.
i
n
v
o
k
e
F
u
n
c
t
i
o
n
(
f
u
n
c
t
i
o
n
, o
b
j
e
c
t
)
;
r
e
t
u
r
n S
t
r
i
n
g
.
v
a
l
u
e
O
f
(
h
t
m
l
)
;
}
https://github.com/dasniko/ozark-react/blob/master/src/main/java/dasniko/ozark/react/React.java
Slide 45
Slide 45 text
JS CODE
X
.
.
.
v
a
r r
e
n
d
e
r
C
l
i
e
n
t = f
u
n
c
t
i
o
n (
b
o
o
k
s
) {
v
a
r d
a
t
a = b
o
o
k
s |
| [
]
;
R
e
a
c
t
.
r
e
n
d
e
r
(
;
}
;
<
B
o
o
k
B
o
x d
a
t
a
=
{
d
a
t
a
} u
r
l
=
'
b
o
o
k
s
.
j
s
o
n
' p
o
l
l
I
n
t
e
r
v
a
l
=
{
5
0
0
0
} /
>
,
d
o
c
u
m
e
n
t
.
g
e
t
E
l
e
m
e
n
t
B
y
I
d
(
"
c
o
n
t
e
n
t
"
)
)
;
}
;
v
a
r r
e
n
d
e
r
S
e
r
v
e
r = f
u
n
c
t
i
o
n (
b
o
o
k
s
) {
v
a
r d
a
t
a = J
a
v
a
.
f
r
o
m
(
b
o
o
k
s
)
;
r
e
t
u
r
n R
e
a
c
t
.
r
e
n
d
e
r
T
o
S
t
r
i
n
g
(
<
B
o
o
k
B
o
x d
a
t
a
=
{
d
a
t
a
} u
r
l
=
'
b
o
o
k
s
.
j
s
o
n
' p
o
l
l
I
n
t
e
r
v
a
l
=
{
5
0
0
0
} /
>
)
https://github.com/dasniko/ozark-react/blob/master/src/main/resources/jsx/index.jsx
WHAT ?
NEXT
ES6 (Java 9)
TypeScript
Angular 2 "Universal support"
Routing
Slide 48
Slide 48 text
CONCLUSION
JavaScript
JavaScript frameworks becoming more mature
Isomorphic Applications help you to combine the best of
both worlds:
Solutions for Java ecosystems are available
evolves
(React, Angular 2, Ember 2)
server-side rendering and client-side RIA
(Java EE MVC, Spring Boot MVC, Play Framework)
Slide 49
Slide 49 text
THANK !
YOU
ANY ?
QUESTIONS
Niko Köbler
So ware-Architect, Developer & Trainer
| |
niko@n-k.de www.n-k.de @dasniko
https://github.com/dasniko/ozark-react