React.js Apps with Java MVC 1.0

Transcript

1. 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
2. @dasniko
3. http://www.jug-da.de @JUG_DA
5. 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. WHY ON CLIENT AND SERVER!? DRY principle share same logic one codebase / maintenance single point of truth (or failure) single technology SAME CODE
8. WHY RENDER ON UX UX Performance Performance SEO Legacy Browsers Server Client
10. WEB APPS SOUND AWESOME... ISOMORPHIC
12. 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
13. Java + JavaScript = Nashorn
14. 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<ScriptEnginge> when your JS code is not thread-safe (i.e. React.js, Handlebars, etc.) CONCURRENCY
15. 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
16. JS "JSP on steroids" X
17. JS JS X class Book extends React.Component { render() { return ( <div className="book"> <h3>{this.props.author}</h3> <div>{this.props.title}</div> </div> ); } } 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) )); } });
18. HTML Transpile JSX to JS with Babel <div class="book" data-reactid=".1.$0"> <h3 data-reactid=".1.$0.0">George Orwell</h3> <div class="lead" data-reactid=".1.$0.1">1984</div> </div> https://babeljs.io
20. MVC 1.0
21. 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/
22. OZARK- ReactJS-based ViewEngine for MVC 1.0 REACT https://github.com/dasniko/ozark-react
23. OZARK- STEP REACT BUILD
24. OZARK- EXECUTION REACT RUNTIME
25. OZARK- EXECUTION REACT RUNTIME
26. OZARK- EXECUTION REACT RUNTIME
27. OZARK- EXECUTION REACT RUNTIME
28. OZARK- EXECUTION REACT RUNTIME
29. OZARK- EXECUTION REACT RUNTIME
30. OZARK- EXECUTION REACT RUNTIME
31. OZARK- EXECUTION REACT RUNTIME
32. OZARK- EXECUTION REACT RUNTIME
33. OZARK- EXECUTION REACT RUNTIME
34. OZARK- EXECUTION REACT RUNTIME
35. MVC REACT CONTROLLER @Controller @Path("/react") public class ReactController { @Inject private Models models; @Inject private BookService service; @GET public String index() throws Exception { List<Book> 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
36. 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) {
37. REACT RENDERER private ThreadLocal<ScriptEngine> 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
38. JS CODE X ... var renderClient = function (books) { var data = books || []; React.render( <BookBox data={data} url='books.json' pollInterval={5000} />, document.getElementById("content") ); }; var renderServer = function (books) { var data = Java.from(books); return React.renderToString( <BookBox data={data} url='books.json' pollInterval={5000} /> ); }; https://github.com/dasniko/ozark-react/blob/master/src/main/resources/jsx/index.jsx
39. JSP https://github.com/dasniko/ozark-react/blob/master/src/main/webapp/WEB-INF/views/react.jsp
40. WHAT ? ES6 (Java 9) TypeScript Angular Universal support Routing NEXT
41. 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