JAVASCRIPT, AND

.JS APPS WITHJAVA 1.0

Niko Köbler So�ware-Architect, Developer & Trainer

| |

JAVA ME

REACTMVC

niko@n-k.de www.n-k.de @dasniko

@dasniko

http://www.jug-da.de

@JUG_DA

ISOMORPHIC JAVASCRIPTIf you look at the same entity ( ) in two

different contexts ( ), you should get

the same thing ( ).

code

client & server

result, html, DOM, ...

WHY ON CLIENT AND SERVER!?

DRY principleshare same logicone codebase / maintenancesingle point of truth (or failure)

single technology

SAME CODE

WHY RENDER ON

UX UX

Performance Performance

SEO

Legacy Browsers

Server Client

WEBAPPS SOUNDAWESOME...

ISOMORPHIC

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

Java + JavaScript = Nashorn

NASHORN &

Browsers: no simultaneous execution of JavaScript codeNashorn itself is not thread-safe by designThread-safety depends on your code!Use a ThreadLocal<ScriptEnginge> when your JScode is not thread-safe (i.e. React.js, Handlebars, etc.)

CONCURRENCY

REACT.invented by Facebook

component basednot a full-stack frameworkjust the "V" in MVCvirtual DOM (updates via diffs - no flickering)supports server-side rendering

JS"JavaScript library for building user interfaces"

http://reactjs.org

JS"JSP on steroids"

X

JS

JS

Xclass 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) )); } });

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

MVC 1.0

MVC 1.0Action-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=371https://mvc-spec.java.net/

https://ozark.java.net/

OZARK-ReactJS-based ViewEngine for MVC 1.0

REACThttps://github.com/dasniko/ozark-react

OZARK- STEPREACT

BUILD

OZARK- EXECUTION

REACTRUNTIME

OZARK- EXECUTION

REACTRUNTIME

OZARK- EXECUTION

REACTRUNTIME

OZARK- EXECUTION

REACTRUNTIME

OZARK- EXECUTION

REACTRUNTIME

OZARK- EXECUTION

REACTRUNTIME

OZARK- EXECUTION

REACTRUNTIME

OZARK- EXECUTION

REACTRUNTIME

OZARK- EXECUTION

REACTRUNTIME

OZARK- EXECUTION

REACTRUNTIME

OZARK- EXECUTION

REACTRUNTIME

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

REACT ENGINEVIEWpublic class ReactViewEngine extends ServletViewEngine { @Override public void processView(ViewEngineContext context) throws ViewEngineException // parse view and extract the actual template and the react.js function to call String view = context.getView(); // react:react.jsp?function=renderServer 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 ServletViewEngine ViewEngineContext ctx = new ViewEngineContextImpl(template, models, ...);

try { forwardRequest(ctx, "*.jsp", "*.jspx"); } catch (ServletException | IOException e) {

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

JS CODEX... 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

JSP

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

WHAT ?ES6 (Java 9)TypeScriptAngular Universal supportRouting

NEXT

THANK !ANY ?

Slides:

Niko Köbler So�ware-Architect, Developer & Trainer

| |

YOUQUESTIONS

bit.ly/isomorphic-javaland

niko@n-k.de www.n-k.de @dasniko

https://github.com/dasniko/ozark-react