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

More Decks by Eder Ignatowicz

Other Decks in Programming

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