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