javascript, and java me react.js apps with java ......apps sound awesome... isomorphic i'm in a...
TRANSCRIPT
JAVASCRIPT, AND
.JS APPS WITHJAVA 1.0
Niko Köbler So�ware-Architect, Developer & Trainer
| |
JAVA ME
REACTMVC
[email protected] www.n-k.de @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
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
[email protected] www.n-k.de @dasniko
https://github.com/dasniko/ozark-react