Tweet
Tweet

Slide 1

Slide 1 text

JAVASCRIPT, AND .JS APPS WITH JAVA 1.0 Niko Köbler So ware-Architect, Developer & Trainer | | JAVA ME REACT MVC niko@n-k.de www.n-k.de @dasniko

Slide 2

Slide 2 text

@dasniko

Slide 3

Slide 3 text

http://www.jug-da.de @JUG_DA

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 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 6

Slide 6 text

No content

Slide 7

Slide 7 text

WHY ON CLIENT AND SERVER!? DRY principle share same logic one codebase / maintenance single point of truth (or failure) single technology SAME CODE

Slide 8

Slide 8 text

WHY RENDER ON UX UX Performance Performance SEO Legacy Browsers Server Client

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

WEB APPS SOUND AWESOME... ISOMORPHIC

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

I'M IN A ENVIRONMENT! And I don't want to have more complicated deployments and performance overhead of interacting with external Node processes! JAVA

Slide 13

Slide 13 text

Java + JavaScript = Nashorn

Slide 14

Slide 14 text

NASHORN & Browsers: no simultaneous execution of JavaScript code Nashorn itself is not thread-safe by design Thread-safety depends on your code! Use a ThreadLocal when your JS code is not thread-safe (i.e. React.js, Handlebars, etc.) CONCURRENCY

Slide 15

Slide 15 text

REACT. 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 JS "JavaScript library for building user interfaces" http://reactjs.org

Slide 16

Slide 16 text

JS "JSP on steroids" X

Slide 17

Slide 17 text

JS JS X class Book extends React.Component { render() { return (

{this.props.author}

{this.props.title}
); } } var Book = React.createClass({displayName: "Book", render: function () { return ( React.createElement("div", {className: "book"}, React.createElement("h3", null, this.props.author), React.createElement("div", null, this.props.title) )); } });

Slide 18

Slide 18 text

HTML Transpile JSX to JS with Babel

George Orwell

1984
https://babeljs.io

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

MVC 1.0

Slide 21

Slide 21 text

MVC 1.0 Action-based Web-Framework, formerly part of Java EE 8 JSR-371 OZARK (RI) SPEC LEAD TRANSFER Oracle -> Ivar Grimstad https://jcp.org/en/jsr/detail?id=371 https://mvc-spec.java.net/ https://ozark.java.net/

Slide 22

Slide 22 text

OZARK- ReactJS-based ViewEngine for MVC 1.0 REACT https://github.com/dasniko/ozark-react

Slide 23

Slide 23 text

OZARK- STEP REACT BUILD

Slide 24

Slide 24 text

OZARK- EXECUTION REACT RUNTIME

Slide 25

Slide 25 text

OZARK- EXECUTION REACT RUNTIME

Slide 26

Slide 26 text

OZARK- EXECUTION REACT RUNTIME

Slide 27

Slide 27 text

OZARK- EXECUTION REACT RUNTIME

Slide 28

Slide 28 text

OZARK- EXECUTION REACT RUNTIME

Slide 29

Slide 29 text

OZARK- EXECUTION REACT RUNTIME

Slide 30

Slide 30 text

OZARK- EXECUTION REACT RUNTIME

Slide 31

Slide 31 text

OZARK- EXECUTION REACT RUNTIME

Slide 32

Slide 32 text

OZARK- EXECUTION REACT RUNTIME

Slide 33

Slide 33 text

OZARK- EXECUTION REACT RUNTIME

Slide 34

Slide 34 text

OZARK- EXECUTION REACT RUNTIME

Slide 35

Slide 35 text

MVC REACT CONTROLLER @Controller @Path("/react") public class ReactController { @Inject private Models models; @Inject private BookService service; @GET public String index() throws Exception { List books = service.getBooks(); models.put("data", books); return "react:react.jsp?function=renderServer"; } } https://github.com/dasniko/ozark- react/blob/master/src/main/java/dasniko/ozark/react/ReactController.java

Slide 36

Slide 36 text

REACT ENGINE VIEW public class ReactViewEngine extends ServletViewEngine { @Override public void processView(ViewEngineContext context) throws ViewEngineExce // parse view and extract the actual template and the react.js functio String view = context.getView(); // react:react.jsp?function=renderSer String template = view.substring("react:".length(), view.indexOf("?" String function = view.substring(view.indexOf("function=") + 9); // get "data" from model Models models = context.getModels(); Object data = models.get("data"); // call given js function on data String content = react.render(function, data); // and put results as string in model models.put("content", content); models.put("data", mapper.writeValueAsString(data)); // create a new context with the actual view and forward to ServletVie ViewEngineContext ctx = new ViewEngineContextImpl(template, models, .. try { forwardRequest(ctx, "*.jsp", "*.jspx"); } catch (ServletException | IOException e) {

Slide 37

Slide 37 text

REACT RENDERER private ThreadLocal engineHolder = ThreadLocal.withInitial(( ScriptEngine engine = new ScriptEngineManager().getEngineByName("nashorn engine.eval(read("nashorn-polyfill.js")); engine.eval(read("app.js")); return engine; )}; public String render(String function, Object object) { Object html = engineHolder.get().invokeFunction(function, object); return String.valueOf(html); } https://github.com/dasniko/ozark-react/blob/master/src/main/java/dasniko/ozark/react/React.java

Slide 38

Slide 38 text

JS CODE X ... var renderClient = function (books) { var data = books || []; React.render( , document.getElementById("content") ); }; var renderServer = function (books) { var data = Java.from(books); return React.renderToString( ); }; https://github.com/dasniko/ozark-react/blob/master/src/main/resources/jsx/index.jsx

Slide 39

Slide 39 text

JSP https://github.com/dasniko/ozark-react/blob/master/src/main/webapp/WEB-INF/views/react.jsp

Slide 40

Slide 40 text

WHAT ? ES6 (Java 9) TypeScript Angular Universal support Routing NEXT

Slide 41

Slide 41 text

THANK ! ANY ? Slides: Niko Köbler So ware-Architect, Developer & Trainer | | YOU QUESTIONS bit.ly/isomorphic-javaland niko@n-k.de www.n-k.de @dasniko https://github.com/dasniko/ozark-react