Delivering the rich web at low cost: Bidirectional client/server messaging in GWT - RWX 2011

Slide 1

Slide 1 text

Delivering the Rich Web at Low Cost Bidirectional client/server messaging Dan Allen (JBoss) @mojavelinux

Slide 2

Slide 2 text

Rich Web Challenges

Slide 3

Slide 3 text

Simplify & manipulation

Slide 4

Slide 4 text

high performance, small footprint

Slide 5

Slide 5 text

ompatibility

Slide 6

Slide 6 text

Wasteland of Quirks

Slide 7

Slide 7 text

It's time to get organized

Slide 8

Slide 8 text

Do you wish to debug?

Slide 9

Slide 9 text

ser e perience

Slide 10

Slide 10 text

Design!

Slide 11

Slide 11 text

Event-driven client-server communication Websockets HTTP

Slide 12

Slide 12 text

Productivity for developers performance for users Google Web Toolkit code.google.com/toolkit /'gwIt/

Slide 13

Slide 13 text

GWT == Client-side RIA

Slide 14

Slide 14 text

GWT == Client-side RIA

Slide 15

Slide 15 text

Use existing Java tools

Slide 16

Slide 16 text

Wait, ? Seriously?

Slide 17

Slide 17 text

Seriously.

Slide 18

Slide 18 text

Type-safety & code-assist tooling

Slide 19

Slide 19 text

Keeps code organized

Slide 20

Slide 20 text

Loads of talent! 10,000,000 Java developers worldwide!

Slide 21

Slide 21 text

"No compromise" AJAX

Slide 22

Slide 22 text

Java-to-JavaScript compiler Code you can't match by hand

Slide 23

Slide 23 text

Handles Application minification

Slide 24

Slide 24 text

Makes the browser look good!

Slide 25

Slide 25 text

Throughput Results % Threadcount

Slide 26

Slide 26 text

CPU Load Results % Threadcount

Slide 27

Slide 27 text

Class Library Core Java java.lang.* java.util.* java.io.* no reflection :( Browser APIs AJAX JSON & XML HTML 5 UI framework a la Swing UI Binder RPC Mechanism (Java backends) RequestBuilder (REST calls)

Slide 28

Slide 28 text

"Code & refresh" development mode

Slide 29

Slide 29 text

IDE & build tool plugins Google Plugin for Eclipse GWT Designer

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

GWT Project Layout / src/main/java/ org.example HelloWorld.gwt.xml org.example.client HelloWorld.java org.example.client HelloWorldService.java war/ HelloWorld.css HelloWorld.html WEB-INF/ web.xml

Slide 32

Slide 32 text

GWT "Hello, World!" public class HelloWorld implements EntryPoint { public void onModuleLoad() { Button button = new Button("Click Me!"); button.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) { Window.alert("Hello, World!"); }}); RootPanel.get().add(button); } } Compiles to JavaScript client

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

What about data?

Slide 35

Slide 35 text

GWT RPC REST

Slide 36

Slide 36 text

Build serious applications for the browser. Develop purely in Java.

Slide 37

Slide 37 text

Errai makes GWT easier to use ● Fuses client and server ○ Event-driven programming model ○ Push messaging ○ Payload serialization ● Ridiculously fast performance ● Server integration ● Simplified RPC & JAX-RS integration

Slide 38

Slide 38 text

Errai Message Bus Central communication channel Autonomous components exchange information via messages by using well-defined interfaces

Slide 39

Slide 39 text

Errai Message Bus ● Event processing ● Queuing & buffering ● Protocol conversion ● Message routing Central communication channel

Slide 40

Slide 40 text

Internet Service A Service B Server bus Client bus Client bus E1 E2 E3 E1 E2 E3 UI Event listener Server-side component Message payload Browser Browser

Slide 41

Slide 41 text

"CDI in the browser"

Slide 42

Slide 42 text

Errai CDI ● Unified client/server programming model ○ Wiring (@Inject) ○ Producers ○ Events (across the wire!) ○ Scoped beans ● Easy access to message bus ● RPC-style invocation via typed interface ● Publish/subscribe

Slide 43

Slide 43 text

Errai "Hello, Server!" via CDI Event @Inject private Event clientEvent; clientEvent.fire(new ClientMessage("Hello, Server!")); client

Slide 44

Slide 44 text

Message Received via CDI Event server public void receive(@Observes ClientMessage msg) { System.out.println(msg.getMessage()); } Hello, Server!

Slide 45

Slide 45 text

Errai conversation Address a single node in response to an event

Slide 46

Slide 46 text

Errai "Hello, Client!" via CDI Event @Inject private Event serverEvent; server @Conversational public void receive(@Observes ClientMessage msg) { serverEvent.fire(new ServerMessage("Hello, Client!")); }

Slide 47

Slide 47 text

UI Update via CDI Event public void receive(@Observes ServerMessage msg) { Window.alert(msg.getMessage()); } client

Slide 48

Slide 48 text

Serialization of payload as easy as... @ExposeEntity public class ClientMessage { private String message; public ClientMessage() {} public ClientMessage(String message) { this.message = message; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } } Default constructor required

Slide 49

Slide 49 text

Errai "Hello, Server!" via Errai Bus @EntryPoint public class HelloWorld { @Inject public void init(final MessageBus bus) { Button button = new Button("Click Me!", new ClickHandler() { public void onClick(ClickEvent event) { MessageBuilder.createMessage() .toSubject("HelloWorldService") .withValue("Hello, Server!").done().sendNowWith(bus); }}); RootPanel.get().add(button); } } client

Slide 50

Slide 50 text

Message Received via Errai Bus @Service public class HelloWorldService implements MessageCallback { public void callback(Message msg) { String val = msg.get(String.class, MessageParts.Value); System.out.println(val); } } Hello, Server! server

Slide 51

Slide 51 text

Monitoring the Bus

Slide 52

Slide 52 text

REST Easy (JAX-RS) @Path("customers") public interface CustomerService { @POST @Consumes("application/json") @Produces("text/plain") public long createCustomer(Customer customer); } server

Slide 53

Slide 53 text

RESTveryEasy RemoteCallback onCreate = new RemoteCallback() { public void callback(Long id) { Window.alert("Customer created with ID: " + id); } }; Button create = new Button("Create", new ClickHandler() { public void onClick(ClickEvent event) { String firstName = firstNameInput.getText(); ... RestClient.create(CustomerService.class, onCreate) .createCustomer(new Customer(firstName, lastName, zip)); } }); client

Slide 54

Slide 54 text

Demos

Slide 55

Slide 55 text

"That was amazing!"

Slide 56

Slide 56 text

GWT & Errai As rich as you can take it!

Slide 57

Slide 57 text

Mike Brock Errai Lead | @jbossmike Jonathan Fuerth Errai Dev | @jfuerth Christian Sadilek Errai Dev | @csadilek :virals http://github.com/errai