Construindo aplicações HTML5 em Java

Criar pequenos websites é tarefa trivial para qualquer framework JavaScript moderno. Contudo, implementar e manter uma aplicação web em larga escala é um trabalho muito mais complexo. Java possui reputação de ser uma linguagem estável e robusta, perfeita para grandes aplicações corporativas.

E se pudéssemos compartilhar código Java EE entre cliente e servidor, reutilizando código entre diversas camadas da aplicação?

Nesta palestra você aprenderá como construir aplicações web ricas, type-safe, sem nenhum boilerplate através do modelo de programação do JBoss Errai; e como construir aplicações escaláveis que combinam os melhores aspectos de JavaScript, Java e HTML5.

O público conhecerá os desafios enfrentados na construção de aplicações web em larga escala, como o Errai aborda estes desafios e lições aprendidas direto das trincheiras na construção do framework Uberfire e das aplicações Web do Drools e jBPM.

Transcript

1. Construindo aplicações HTML5 em Java Eder Ignatowicz Sr. Software Engineer JBoss by Red Hat
2. Java <3
3. GWT <3
6. Como construimos os workbenches do Drools e do jBPM Eder Ignatowicz Sr. Software Engineer JBoss by Red Hat
8. ~600k linhas de client code ~20 repositórios
11. UX+ Dev
15. ERRAI UI
17. .java javac .class
18. src/main/java HelloWorld.gwt.xml client HelloWorldClient.java shared HelloWorldEntity.java server HelloWorldService.java src/main/webapp HelloWorld.html WEB-INF web.xml src/main/resources ErraiApp.properties
19. Shared Codebase
20. @Bindable @Entity @NamedQuery( name = "allComplaints", query = "SELECT c FROM UserComplaint c ORDER BY c.id" ) public class UserComplaint { @Id @GeneratedValue( strategy = GenerationType.AUTO ) private Long id; @Version private Long version; @NotNull private String name; @Email private String email; private String text; … }
21. JPA in the Browser
22. @Templated @Page public class ComplaintForm { @Inject private EntityManager em; @EventHandler("submit") private void onSubmit(ClickEvent e) { em.persist(complaint); em.flush(); } }
23. Data Binding
24. @Templated @Page public class ComplaintForm { @Inject @Bound @DataField private TextBox email; @Inject @Bound @DataField( "name" ) private TextBox username; @Inject @Bound @DataField private TextArea text; @Inject @Model private UserComplaint complaint; @EventHandler( "submit" ) private void onSubmit( ClickEvent e ) { sendToServer( complaint ); } }
25. Server Browser Browser Browser Browser Long Polling Web Sockets SSE
26. JAX-RS
27. Client Shared @Inject
 private Caller<ContactStorageService> contactService; contactService.call( (List<Contact> contacts) -> addAll(contacts) ).getAllContacts();
 @Path("/contact")
 public interface ContactStorageService { @GET
 @Produces("application/json")
 List<Contact> getAllContacts();
28. IDE Support
29. Refactoring
31. CDI <3
32. CDI no browser
33. Server Browser Browser Browser Browser Long Polling Web Sockets SSE
34. @Dependent @Templated public class ProjectsView implements ProjectsPresenter.View { private ProjectsPresenter presenter; @Inject Document document; @Inject @DataField( "projects-view" ) Div view; @Inject @DataField( "new-project" ) Button newProject; @Inject @DataField( "projects-list" ) UnorderedList projectsList; @Inject Instance<ProjectItem> projects;
35. Observando eventos no Client Server Ambos
36. public void onRemoteCreated(final @Observes @Operation(CREATE) ContactOperation contactOperation) {
 if (sourceIsNotThisClient(contactOperation)) {
 binder.getModel().add(contactOperation.getContact());
 } 
 }
37. JSInterop
38. package com.acme; @JsType class Foo { public int x; public int y; public int sum() { return x + y; } } var foo = new com.acme.Foo(); foo.x = 40; foo.y = 2; foo.sum(); // will return 42!
39. // in JavaScript com = { acme: {} }; com.acme.Foo = function() { this.x = 40; this.y = 2; }; com.acme.Foo.prototype.sum = function() { return this.x + this.y; }; // in Java package com.acme; @JsType(isNative = true) class Foo { public int x; public int y; public native int sum(); } class FooMain { public static void main() { Foo foo = new Foo(); foo.sum(); // will return 42! foo.x = 50; foo.y = 5; foo.sum(); // will return 55! }
41. Framework para construção de grandes aplicações estilo “workbench" e consoles web “Eclipse Like” Modelo de Programação "Opinativo"
44. DEMO (feature preview)
45. Java EE + GWT <3
46. Open Source <3
48. Eder Ignatowicz @ederign Obrigado <3 http://erraiframework.org http://uberfireframework.org IRC: #errai #uberfire na freenode
49. Social + CDI