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

Venue: RWX 2011 (1.5 hour conference talk)
Focus: Learn how the GWT, Errai and CDI stack enable you to create rich applications that process real time data without all the complexity.
GWT project: http://code.google.com/p/google-web-toolkit
Errai project: http://jboss.org/errai
"The was amazing" video: http://www.youtube.com/watch?v=C8Cdut-3GyM

End users now expect to be presented with real time data in a web application. But these rich experiences are complex to develop. Tools like GWT enable efficient development of high-performance, rich web applications by shielding developers from JavaScript, browser quirks and evolving markup languages. However, GWT only addresses the client-side environment. Developers need a similar abstraction for exchanging real time data with the server.

Errai, an open-source GWT extension framework, streams data asynchronously over a high-performance, bidirectional messaging bus. Errai's bus runs concurrently in the browser and on the server (inside a Java Servlet). Errai's push technology delivers data from the server to any connected browser simultaneously and in real time, while the method of communication is transparent to the developer.

Errai also brings CDI, the standard Java programming model, to the browser. What, CDI in the browser? Yep, in JavaScript. This means the developer can use a single programming model for both client and server-side development. To take it a step further, Errai hooks the CDI event notifications to its messaging bus, hiding the high-performance messaging behind CDI's declarative event model. Client or server, it's all just CDI programming.

Transcript

1. Delivering the Rich Web at Low Cost Bidirectional client/server messaging Dan Allen (JBoss) @mojavelinux
2. Rich Web Challenges
3. Simplify & <DOM> manipulation
4. high performance, small footprint
5. ompatibility
6. Wasteland of Quirks
7. It's time to get organized
8. Do you wish to debug?
9. ser e perience
10. Design!
11. Event-driven client-server communication Websockets HTTP
12. Productivity for developers performance for users Google Web Toolkit code.google.com/toolkit /'gwIt/
13. GWT == Client-side RIA
14. GWT == Client-side RIA
15. Use existing Java tools
16. Wait, ? Seriously?
17. Seriously.
18. Type-safety & code-assist tooling
19. Keeps code organized
20. Loads of talent! 10,000,000 Java developers worldwide!
21. "No compromise" AJAX
22. Java-to-JavaScript compiler Code you can't match by hand
23. Handles Application minification
24. Makes the browser look good!
25. Throughput Results % Threadcount
26. CPU Load Results % Threadcount
27. 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)
28. "Code & refresh" development mode
29. IDE & build tool plugins Google Plugin for Eclipse GWT Designer
31. 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
32. 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
34. What about data?
35. GWT RPC REST
36. Build serious applications for the browser. Develop purely in Java.
37. 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
38. Errai Message Bus Central communication channel Autonomous components exchange information via messages by using well-defined interfaces
39. Errai Message Bus • Event processing • Queuing & buffering • Protocol conversion • Message routing Central communication channel
40. 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
41. "CDI in the browser"
42. 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
43. Errai "Hello, Server!" via CDI Event @Inject private Event<ClientMessage> clientEvent; clientEvent.fire(new ClientMessage("Hello, Server!")); client
44. Message Received via CDI Event server public void receive(@Observes ClientMessage msg) { System.out.println(msg.getMessage()); } Hello, Server!
45. Errai conversation Address a single node in response to an event
46. Errai "Hello, Client!" via CDI Event @Inject private Event<ServerMessage> serverEvent; server @Conversational public void receive(@Observes ClientMessage msg) { serverEvent.fire(new ServerMessage("Hello, Client!")); }
47. UI Update via CDI Event public void receive(@Observes ServerMessage msg) { Window.alert(msg.getMessage()); } client
48. 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
49. 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
50. 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
51. Monitoring the Bus
52. REST Easy (JAX-RS) @Path("customers") public interface CustomerService { @POST @Consumes("application/json") @Produces("text/plain") public long createCustomer(Customer customer); } server
53. RESTveryEasy RemoteCallback<Long> onCreate = new RemoteCallback<Long>() { 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
54. Demos
55. "That was amazing!"
56. GWT & Errai As rich as you can take it!
57. Mike Brock Errai Lead | @jbossmike Jonathan Fuerth Errai Dev | @jfuerth Christian Sadilek Errai Dev | @csadilek :virals http://github.com/errai