Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Construindo aplicações HTML5 em Java

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.

B937ab5ebe4923869c0da0d3c1b58778?s=128

Eder Ignatowicz

October 11, 2016
Tweet

Transcript

  1. Construindo aplicações HTML5 em Java Eder Ignatowicz Sr. Software Engineer

    JBoss by Red Hat
  2. Java <3

  3. GWT <3

  4. None
  5. None
  6. Como construimos os workbenches do Drools e do jBPM Eder

    Ignatowicz Sr. Software Engineer JBoss by Red Hat
  7. None
  8. ~600k linhas de client code ~20 repositórios

  9. None
  10. None
  11. UX+ Dev

  12. None
  13. None
  14. None
  15. ERRAI UI

  16. None
  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

  30. None
  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! }
  40. None
  41. Framework para construção de grandes aplicações estilo “workbench" e consoles

    web “Eclipse Like” Modelo de Programação "Opinativo"
  42. None
  43. None
  44. DEMO (feature preview)

  45. Java EE + GWT <3

  46. Open Source <3

  47. None
  48. Eder Ignatowicz @ederign Obrigado <3 http://erraiframework.org http://uberfireframework.org IRC: #errai #uberfire

    na freenode
  49. Social + CDI

  50. None
  51. None