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

Niko Köbler

March 27, 2017

More Decks by Niko Köbler

Other Decks in Technology



    ware-Architect, Developer & Trainer | | JAVA ME REACT MVC [email protected] www.n-k.de @dasniko
  2. 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, ...
  3. WHY ON CLIENT AND SERVER!? DRY principle share same logic

    one codebase / maintenance single point of truth (or failure) single technology SAME CODE
  4. 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
  5. 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
  6. 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
  7. 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) )); } });
  8. 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
  9. 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/
  10. 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
  11. 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) {
  12. 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
  13. 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
  14. THANK ! ANY ? Slides: Niko Köbler So ware-Architect, Developer

    & Trainer | | YOU QUESTIONS bit.ly/isomorphic-javaland [email protected] www.n-k.de @dasniko https://github.com/dasniko/ozark-react