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
Tweet

More Decks by Niko Köbler

Other Decks in Technology

Transcript

  1. JAVASCRIPT, AND .JS APPS WITH JAVA 1.0 Niko Köbler So

    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