Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Delivering the rich web at low cost: Bidirectio...

Dan Allen
December 15, 2011

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.

Dan Allen

December 15, 2011
Tweet

More Decks by Dan Allen

Other Decks in Programming

Transcript

  1. 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)
  2. 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
  3. 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
  4. Errai Message Bus • Event processing • Queuing & buffering

    • Protocol conversion • Message routing Central communication channel
  5. 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
  6. 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
  7. Errai "Hello, Server!" via CDI Event @Inject private Event<ClientMessage> clientEvent;

    clientEvent.fire(new ClientMessage("Hello, Server!")); client
  8. Message Received via CDI Event server public void receive(@Observes ClientMessage

    msg) { System.out.println(msg.getMessage()); } Hello, Server!
  9. 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!")); }
  10. 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
  11. 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
  12. 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
  13. REST Easy (JAX-RS) @Path("customers") public interface CustomerService { @POST @Consumes("application/json")

    @Produces("text/plain") public long createCustomer(Customer customer); } server
  14. 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
  15. Mike Brock Errai Lead | @jbossmike Jonathan Fuerth Errai Dev

    | @jfuerth Christian Sadilek Errai Dev | @csadilek :virals http://github.com/errai