Isomorphic JavaScript Apps with React.JS and Java EE

Talk from JavaZone 2016, Oslo

Transcript

1. 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
2. @dasniko
3. 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
4. JAVASCRIPT HAS BECOME THE APP RUNTIME ENVIRONMENT (at least in the browser)
5. MORPHIC ISO /ˌaɪ.soʊˈmɔɹ.fɪk/ greek: "isos" = equal, "morph" = shape
6. 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, ...
7. JAVASCRIPT ISOMORPHIC aka JAVASCRIPT UNIVERSAL
8. WHY ON CLIENT AND SERVER!? SAME CODE DRY principle share same logic one codebase / maintenance single point of truth (or failure) single technology
9. WHY RENDER ON THE ? SERVER
11. WHY RENDER ON THE ? SERVER b/c wait time matters! http://www.radware.com
12. WHY RENDER ON THE ? SERVER this is how Google sees your site:
13. WHY RENDER ON THE ? SERVER UX SEO Performance Legacy Browser Support
14. WHY RENDER ON THE ? CLIENT UX Performance
15. 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
16. WEB APPS SOUND AWESOME, BUT... ISOMORPHIC
17. 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!
18. RUN ON THE WITH ! JAVASCRIPT JVM NASHORN
19. 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
20. 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.)
21. 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 ) ; } }
22. 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
23. FLUX https://facebook.github.io/flux Frameworks: Facebook Flux, Fluxible by Yahoo, Reflux, Alt, Flummox, Marty.js, McFly, Lux, Material Flux, Redux, Nuclear.js, Fluxette, Fluxxor, Freezer, etc...
24. JSX "JSP on steroids"
25. 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 ) ) ) ; } } ) ;
26. 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
27. DEMO
28. JAVA 8 - MVC 1.0 EE Action-based Web-Framework JSR-371 https://jcp.org/en/jsr/detail?id=371 https://mvc-spec.java.net/ OZARK (RI) https://ozark.java.net/
29. JAVA 8 - MVC 1.0 EE OZARK-REACT ReactJS-based ViewEngine https://github.com/dasniko/ozark-react
30. OZARK-REACT STEP BUILD
31. OZARK-REACT EXECUTION RUNTIME
32. OZARK-REACT EXECUTION RUNTIME
33. OZARK-REACT EXECUTION RUNTIME
34. OZARK-REACT EXECUTION RUNTIME
35. OZARK-REACT EXECUTION RUNTIME
36. OZARK-REACT EXECUTION RUNTIME
37. OZARK-REACT EXECUTION RUNTIME
38. OZARK-REACT EXECUTION RUNTIME
39. OZARK-REACT EXECUTION RUNTIME
40. OZARK-REACT EXECUTION RUNTIME
41. OZARK-REACT EXECUTION RUNTIME
42. 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
43. 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-
44. 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
45. 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
46. JSP https://github.com/dasniko/ozark-react/blob/master/src/main/webapp/WEB-INF/views/react.jsp
47. WHAT ? NEXT ES6 (Java 9) TypeScript Angular 2 "Universal support" Routing
48. 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)
49. 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