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
   

   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
    niko@n-k.de www.n-k.de @dasniko
    https://github.com/dasniko/ozark-react
    

    View Slide