Download - Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

Transcript
Page 1: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

Async

Webapps

Page 2: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

Erwin de Gier

Sogeti Java CoEAmsterdam, Februari 2015

Vert.x, AngularJS,

MongoDB

Page 3: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

3

Demands

• Mobile

• Multicore

• Cloud computing

• Interactive & real-time

• Responsive• Collaborative

Page 4: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

4

Reactive manifesto

• react to events (message driven)

• react to load (scalable)

• react to failure (resilient)

• react to users (responsive)

Page 5: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

5

Blocking vs non-blocking

Client Server

One thread per connection (1 client)

Client Server

One thread per event-loop (multiple clients)

Request

Response

Request

Request

Request

Callback

Callback

Callback

Page 6: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

6

Vert.x

• c10k problem• Polyglot, running on JVM• Asynchronous and synchronous

• Scalable• Distributed eventbus

• Thread per event-loop, non blocking• Micro services

Page 7: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

7

Popular Technologies

• AngularJS: Javascript MVC framework

• VertX: Asynchroon Polyglot JVM library

• MongoDB: NoSQL database

Page 8: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

8

Vert.x

JVM

Vert.x containter

Vert.x module

Verticle

Vert.x module

Verticle

JVM

Vert.x containter

Vert.x module

Verticle

Vert.x module

Verticle

Event

Bus

Verticle

Verticle

Verticle

Verticle

Datastore

Page 9: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

9

Chat application

• Send messages

• Receive messages

• Network communication

• Persist messages

• Find messages

Page 10: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

10

Architecture

Page 11: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

11

Architecture

Page 12: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

12

Getting started

• Java SDK (JDK) 8• Maven

• IDE (Eclipse)• MongoDB

• git (optional)• check versions:

•mvn -X

Page 13: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

13

Starter project

• git clonehttps://github.com/erwindeg/vertx3-

chat-start.git

• mvn clean install

• java –jar target\<jar-name>-fat.jar

• http://localhost:8080

Page 14: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

14

Run it

• Eclipse:• run as java application

• main class: io.vertx.core.Starter

• run nl.sogeti.MainVerticle

• CLI:

•Java –jar target\<jar-name>-fat.jar

Page 15: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

15

Server MainVerticle.javaHttpServer server = vertx.createHttpServer(new

HttpServerOptions().setPort(8080).requestHandler(req ->

matcher.accept(req));

SockJSServer.sockJSServer(vertx, server).bridge(new

SockJSServerOptions().setPrefix("/eventbus"),

new BridgeOptions().addInboundPermitted(new

JsonObject()).addOutboundPermitted(new JsonObject()));

server.listen();

Page 16: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

16

Client angular main.html

<div ng-controller="MainCtrl">

<select ng-model="selected" ng-options="message.text as

message.name + ': ' + message.text for message in messages

| orderBy:'date':true"

multiple size="20" style="min-width: 90%;">

</select>

<form ng-submit="sendMessage()">

<input type="text" ng-model="message.name"

placeholder="Type your name here" /> <input type="text" ng-

model="message.text" placeholder="Type your message here“/>

<input type="submit" value="Send" />

</form>

</div>

Page 17: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

17

Assignment 1

• Send messages to the vertx eventbus

Page 18: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

18

Answer assignment 2angular.module('resourcesApp').controller('MainCtrl',

function($scope, $resource) {

$scope.messages = [];var eb = new

vertx.EventBus('http://'+window.location.host+ '/eventbus');

eb.onopen = function() {

eb.registerHandler('chat', function(message) {

$scope.messages.push(message);

$scope.$apply();

});

}

$scope.sendMessage = function() {

$scope.message.date = Date.now();

eb.publish('chat', $scope.message);

$scope.message.text = "";

};

});

Page 19: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

19

Assignment 2

• Log the messages on the server

vertx.eventBus().consumer(String address, Handler<Message<T>

message);

Page 20: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

20

Answer assignment 2

Page 21: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

21

Cluster mode

• –cluster –cluster-host <ip_address>

Page 22: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

22

Start MongoDB

• mongo\bin\mongod.exe –dbpath

data

Page 23: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

23

MongoDB persistence

private static final String MONGO_ADDRESS =

UUID.randomUUID().toString();

MongoService mongoService;

public void start() throws Exception {

mongoService = setUpMongo();

private MongoService setUpMongo() {

DeploymentOptions options = new

DeploymentOptions().setConfig(new

JsonObject().put("address", MONGO_ADDRESS));

vertx.deployVerticle(new MongoServiceVerticle(), options,

res -> System.out.println(res.result()));

return MongoService.createEventBusProxy(vertx,

MONGO_ADDRESS);

}

Page 24: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

24

Assignment 3

• Save the messages to MongoDB

Page 25: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

25

Answer assignment 3

public void start() throws Exception {

vertx.eventBus().consumer("chat", this::saveMessages);

private void saveMessages(Message message) {

proxy.insert("messages", new

JsonObject(message.body().toString()), res ->

System.out.println(res.succeeded()));

}

Page 26: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

26

Assignment 4

• Return all saved messages via REST

Page 27: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

27

Answer assignment 4

matcher.matchMethod(HttpMethod.GET, "/api/history", req ->

proxy.find("messages", new JsonObject(), res ->

req.response().end(new JsonArray(res.result()).toString())));

$scope.messages = $resource('/api/history').query();

Page 28: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

28

Unit Testing@RunWith(VertxUnitRunner.class)

public class MyJUnitTest {

private Vertx vertx;

@Before

public void setUp(TestContext context) {

Async async = context.async();

vertx = Vertx.vertx();

vertx.deployVerticle(MainVerticle.class.getName(), ar -> {

if (ar.succeeded()) {

async.complete();

} else {

context.fail("Could not deploy verticle");

}

});

}

Page 29: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

29

Unit Testing@Test

public void testHello(TestContext context) {

Async async = context.async();

HttpClient client = vertx.createHttpClient();

HttpClientRequest req = client.get(8080, "localhost", "/app/test.html");

req.exceptionHandler(err -> {

context.fail();

});

req.handler(resp -> {

context.assertEquals(200, resp.statusCode());

Buffer entity = Buffer.buffer();

resp.handler(entity::appendBuffer);

resp.endHandler(v -> {

context.assertEquals("test", entity.toString("UTF-8"));

async.complete();

});

});

req.end();

}

Page 30: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

30

Unit Testing

@After

public void tearDown(TestContext context) {

Async async = context.async();

vertx.close(ar -> {

async.complete();

});

}

Page 31: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

31

Assignment 5

• Test sending a message on the

eventbus

• See MyUnitTest.java

Page 32: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

32

Answer assignment 5

Page 33: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB
Page 34: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

34

Mongo DB unique index

• mongo\bin\mongo.exe

• use default_db• db.messages.createIndex( { date: 1, name: 1, text: 1 },{ unique : true })

Page 35: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

35

Receive messagesprivate final String channel = UUID.randomUUID().toString();

public void start() throws Exception {

vertx.eventBus().consumer(this.channel, this::saveMessages);

}

private void sendHistoryRequest(AsyncResult<String> result){

vertx.eventBus().publish("history", new

JsonObject().put("channel", this.channel));

}

Page 36: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

36

Send messagesvertx.eventBus().consumer("history", m -> proxy.find("messages",

new JsonObject(), res -> sendMessages(((JsonObject)

m.body()).getString("channel"), res)));

private void sendMessages(String channel,

AsyncResult<List<JsonObject>> result) {

if(!this.channel.equals(channel)){

for (JsonObject message : result.result()) {

System.out.println("sending message: "+message);

vertx.eventBus().send(channel, message);

}

}

}

Page 37: Async Webapps - edegier.nledegier.nl/presentations/vertx3-mongo-workshop-bootcamp.pdf · Erwin de Gier Sogeti Java CoE Amsterdam, Februari 2015 Vert.x, AngularJS, MongoDB

37

Send request for messages

private MongoService setUpMongo() {

vertx.deployVerticle(new MongoServiceVerticle(), options,

this::sendHistoryRequest);

}