What if someone told you that you could use the full capacity of your server? That you could have the same performance on the backend as your react frontend? Don't you believe it? That you could choose the best language/tool for the task and you were not limited by what you already know? In this talk, I'll show you that you can use the full power of React on the frontend and Vert.x on the backend. You will see a fast full stack development workflow with Rollup/Webpack + Babel + React. How you can mix JavaScript with any other language. Build microservice applications in minutes.

2. REACTIVE
Message Driven
Responsive

4. REACTIVEPROGRAMMING
Message Driven
Responsive

5. REACTIVESYSTEM
Message Driven
Responsive
Resilient
Elastic

7. WHY REACTIVE SYSTEMS?

8. TYPICAL JAVA APP...
final String PID = ManagementFactory.getRuntimeMXBean().getName();
@RequestMapping(value = "/work", method = RequestMethod.GET)
public @ResponseBody String work(HttpServletResponse resp) {
resp.setContentType("text/plain");
resp.setCharacterEncoding("UTF-8");
return "Pi is: " + Pi.calculate(100_000_000);
}
@RequestMapping(value = "/", method = RequestMethod.GET)
public @ResponseBody String home(HttpServletResponse resp) {
resp.setContentType("text/plain");
resp.setCharacterEncoding("UTF-8");
return "Current PID: " + PID;
}

9. TYPICAL NODE APP...
var process = require('process');
var app = require('express')();
var pi = require('./pi');
app.get('/', function (req, res) {
res.send('Request served by ' + process.pid);
});
app.get('/work', function (req, res) {
res.send('Pi = (' + process.pid + ') ' + pi(100000000));
});
app.listen(8080, function () {
console.log('Pi server listening on port 8080!')
});

11. DEMO

12. TYPICAL VERT.X APP...
// Initial Setup //
final String PID = ManagementFactory
.getRuntimeMXBean().getName();
final Router app = Router.router(vertx);
// Reactive Trait: RESPONSIVE //
// responsive, even under high load this handler
// can respond to requests
app.get("/").handler(ctx -> {
ctx.response()
.putHeader("content-type", "text/plain")
// Reactive Trait: RESILIENT //
// resilient, in case of failure the system
// recovers
.end("Current PID: " + PID);
});
// Reactive Trait: MESSAGE DRIVEN //
app.get("/work").handler(ctx -> {
// message driven, events can cross boundaries
// using a message driven architecture
vertx.eventBus().send("pi", null, reply -> {
if (reply.failed()) {
ctx.fail(reply.cause());
} else {
ctx.response()
.putHeader("content-type", "text/plain")
.end("Pi = " + reply.result().body());
}
});
});
// Reactive Trait: ELASTIC //
// elastic we can deploy several consumers to
// scale the application
vertx.eventBus().consumer("pi", m -> {
// can mix blocking and non-blocking code
vertx.executeBlocking(
fut -> fut.complete(Pi.calculate(100000000)),
false,
fut -> m.reply(PID + ": " + fut.result()));
});

13. DEMO

14. REACTIVE APPLICATIONS

15. REACT.JS
Simplicity
Component Based Approach
Performance and Virtual DOM
Awesome for SEO
Testability/Developers tools
Bonus: Mobile apps with react native

16. REACT.JS
Simplicity
Component Based Approach
Performance and Virtual DOM
Awesome for SEO
Testability/Developers tools
Bonus: Mobile apps with react native

18. WITH VERT.X YOU CAN...
Run JS with your Java,Scala,Kotlin,Groovy,Ruby,etc...
Mix CPU intensive tasks with non CPU intensive
Call EventBus remote services as if they were local
drop Node.JS

19. VERT.X UNIVERSAL APP
// Initial Setup //
const Router = require("vertx-web-js/router")
const StaticHandler =
require("vertx-web-js/static_handler")
import React from 'react'
import {renderToString} from 'react-dom/server'
import {match, RouterContext} from 'react-router'
import routes from '../shared/components/routes'
const app = Router.router(vertx)
// Rest API (Similar to Express.JS) //
app.get('/api/post').handler((ctx) => {
ctx.response()
.putHeader("content-type", "application/json")
.end(JSON.stringify(posts))
})
app.get('/api/post/:id').handler((ctx) => {
const id = ctx.request().getParam('id')
const post = posts.filter(p => p.id == id)
if (post) {
ctx.response()
.putHeader(
"content-type", "application/json")
.end(JSON.stringify(post[0]))
} else {
ctx.fail(404)
}
})
// Mix React.JS with Vert.x //
app.get().handler((ctx) => {
match({
routes: routes,
location: ctx.request().uri()
}, (err, redirect, props) => {
if (err) {
ctx.fail(err.message);
} else if (redirect) {
ctx.response()
.putHeader("Location",
redirect.pathname + redirect.search)
.setStatusCode(302)
.end();
} else if (props) {
const routerContextWithData = (
<RouterContext
{...props}
createElement={(Component, props) => {
return <Component
posts={posts} {...props} />
}}
/>)

20. VERT.X UNIVERSAL APP
// Mix React.JS with Vert.x //
app.get().handler((ctx) => {
match({
routes: routes,
location: ctx.request().uri()
}, (err, redirect, props) => {
if (err) {
ctx.fail(err.message);
} else if (redirect) {
ctx.response()
.putHeader("Location",
redirect.pathname + redirect.search)
.setStatusCode(302)
.end();
} else if (props) {
const routerContextWithData = (
<RouterContext
{...props}
createElement={(Component, props) => {
return <Component
posts={posts} {...props} />
}}
/>)
// Render React.js without Node //
const appHtml =
renderToString(routerContextWithData)
ctx.response()
.putHeader("content-type", "text/html")
.end(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Universal Blog</title>
</head>
<body>
<div id="app">${appHtml}</div>
<script
src="/bundle.js"></script>
</body>
</html>`)
} else {
ctx.next()
}
})
})
// Serve resources and start //
app.get().handler(StaticHandler.create().handle)
vertx.createHttpServer()
.requestHandler(app.accept).listen(8080)

21. DEMO

23. WHAT ABOUT MICROSERVICES?

24. IN YOUR VERT.X APP...
final Router router = Router.router(vertx);
// Allow events for the designated addresses
BridgeOptions sockjsConfig = new BridgeOptions()
.addInboundPermitted(new PermittedOptions().setAddress("greetings"))
.addOutboundPermitted(new PermittedOptions().setAddress("greetings"));
// Create the event bus bridge and add it to the router.
router
.route("/eventbus/*")
.handler(SockJSHandler.create(vertx).bridge(sockjsConfig));
router.route().handler(StaticHandler.create());
vertx.createHttpServer().requestHandler(router::accept).listen(8080);

25. IN YOUR VERT.X APP (2)...
...
router.route().handler(StaticHandler.create());
vertx.createHttpServer().requestHandler(router::accept).listen(8080);
EventBus eb = vertx.eventBus();
vertx.setPeriodic(500, t ->
eb.send("greetings",
new JsonObject().put("msg", "Greetings from Vert.x!")));

26. IN YOUR REACT APP...
import EventBus from 'vertx3-eventbus-client'
const eb = new EventBus(`//${window.location.host}/eventbus`)
class App extends React.Component {
constructor(props) {
super(props)
this.state = { messages: [] }
}
render() {
let listItems = this.state.messages.map(message => {
return ( <li>{ `${message}` }</li> )
})
return ( <div><ul>{listItems}</ul></div> )
}

27. IN YOUR REACT APP (2)...
...
class App extends React.Component {
...
componentWillMount() {
Rx.Observable
.create((observer) => {
eb.registerHandler('greetings', (err, msg) => {
observer.next(msg.body.msg);
});
})
.subscribe(message => {
this.state.messages.unshift(message);
this.setState({ messages: this.state.messages });
});
}

28. IN YOUR NODE APP...
var EventBus = require('vertx3-eventbus-client');
var eb = new EventBus('http://localhost:8080/eventbus');
eb.onerror = function (err) {
console.error(err);
};
eb.onopen = function () {
setInterval(function () {
eb.send('greetings', {msg: 'Hello from Node.js!'});
}, 500);
};

29. IN YOUR REACT APP (3)...
...
class App extends React.Component {
...
static sayHello(e) {
e.preventDefault();
eb.send('greetings', {msg: 'Hello from React.js!'})
}
render() {
return (
...
<button onClick={App.sayHello}>Say Hello!</button>

30. DEMO

31. YOU GET A THE FREE BOOK!

32. WHAT ABOUT CALLBACK HELL?

33. ASYNC CODE:
route().handler(ctx -> {
ctx.user().isAuthorized("READ", res -> {
db.getConnection(conn -> {
conn.query("select * from test", rs -> {
conn.close( v -> {
ctx.response.end(rs.encode());
});
});
});
});
});

34. RX TO THE RESCUE
route().handler(ctx -> {
ctx.user().rxIsAuthorized("READ")
.flatMap(r -> db.rxGetConnection(conn))
.flatMap(c -> c.rxQuery("select * from test"))
.doAfterTerminate(c::close)
.subscribe(rs -> ctx.response.end(rs.encode()));
});

35. OR WITH (JS) VERT.X APP...
route().handler(async (ctx) -> {
if (await ctx.user().isAuthorized("READ")) {
try {
let c = await db.getConnection()
let rs = await c.query("select * from test")
ctx.response.end(rs.encode())
} finally {
c.close()
}
}
});

36. OR WITH (VERT.X SYNC) VERT.X APP...
route().handler(fiberHandler(ctx -> {
if (awaitResult(h -> ctx.user().isAuthorized("READ", h))) {
try (SQLConnection conn = awaitResult(jdbc::getConnection)) {
ResultSet res =
awaitResult(h -> conn.query("select * from test", h));
ctx.response.end(rs.encode());
}
}
}));

37. REACTIVE ISFUN!

38. HOW DO I START?
Github
Twitter
Youtube
Book
http://vertx.io
https://groups.google.com/forum/#!forum/vertx
https://github.com/vert-x3
@vertx_project
https://www.youtube.com/vertx_project
https://t.co/m2w7puPba8

39. THE END
Thanks you!
Follow me on twitter
Visit my blog
Start your project
@jetdrone
http://jetdrone.xyz
http://jetdrone.xyz/vertx-starter