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

    View Slide

  2. @dasniko

    View Slide

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

    View Slide

  4. View Slide

  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, ...

    View Slide

  6. View Slide

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

    View Slide

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

    View Slide

  9. View Slide

  10. WEB
    APPS SOUND
    AWESOME...
    ISOMORPHIC

    View Slide

  11. View Slide

  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

    View Slide

  13. Java + JavaScript = Nashorn

    View Slide

  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 when your JS
    code is not thread-safe (i.e. React.js, Handlebars, etc.)
    CONCURRENCY

    View Slide

  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

    View Slide

  16. JS
    "JSP on steroids"
    X

    View Slide

  17. 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)
    ));
    }
    });

    View Slide

  18. HTML
    Transpile JSX to JS with
    Babel

    George Orwell
    1984

    https://babeljs.io

    View Slide

  19. View Slide

  20. MVC 1.0

    View Slide

  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/

    View Slide

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

    View Slide

  23. OZARK-
    STEP
    REACT
    BUILD

    View Slide

  24. OZARK-
    EXECUTION
    REACT
    RUNTIME

    View Slide

  25. OZARK-
    EXECUTION
    REACT
    RUNTIME

    View Slide

  26. OZARK-
    EXECUTION
    REACT
    RUNTIME

    View Slide

  27. OZARK-
    EXECUTION
    REACT
    RUNTIME

    View Slide

  28. OZARK-
    EXECUTION
    REACT
    RUNTIME

    View Slide

  29. OZARK-
    EXECUTION
    REACT
    RUNTIME

    View Slide

  30. OZARK-
    EXECUTION
    REACT
    RUNTIME

    View Slide

  31. OZARK-
    EXECUTION
    REACT
    RUNTIME

    View Slide

  32. OZARK-
    EXECUTION
    REACT
    RUNTIME

    View Slide

  33. OZARK-
    EXECUTION
    REACT
    RUNTIME

    View Slide

  34. OZARK-
    EXECUTION
    REACT
    RUNTIME

    View Slide

  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 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

    View Slide

  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) {

    View Slide

  37. 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

    View Slide

  38. 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

    View Slide

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

    View Slide

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

    View Slide

  41. 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

    View Slide