Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React.js Apps with Java MVC 1.0

React.js Apps with Java MVC 1.0

395d9a1bac6f64d04bbd713d5b6bc433?s=128

Niko Köbler

March 27, 2017
Tweet

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

  4. None
  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, ...
  6. None
  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
  9. None
  10. WEB APPS SOUND AWESOME... ISOMORPHIC

  11. None
  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
  19. None
  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