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
   

   View Slide

2. Java <3
   

   View Slide

3. GWT <3
   

   View Slide

4. View Slide

5. View Slide

6. Como construimos os
   workbenches do Drools
   e do jBPM
   Eder Ignatowicz
   Sr. Software Engineer
   JBoss by Red Hat
   

   View Slide

7. View Slide

8. ~600k linhas de client code
   ~20 repositórios
   

   View Slide

9. View Slide

10. View Slide

11. UX+ Dev
    

    View Slide

12. View Slide

13. View Slide

14. View Slide

15. ERRAI UI
    

    View Slide

16. View Slide

17. .java
    javac .class
    

    View Slide

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
    

    View Slide

19. Shared
    Codebase
    

    View Slide

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;
    …
    }
    

    View Slide

21. JPA in the
    Browser
    

    View Slide

22. @Templated
    @Page
    public class ComplaintForm {
    @Inject
    private EntityManager em;
    @EventHandler("submit")
    private void onSubmit(ClickEvent e) {
    em.persist(complaint);
    em.flush();
    }
    }
    

    View Slide

23. Data Binding
    

    View Slide

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 );
    }
    }
    

    View Slide

25. Server
    Browser
    Browser Browser
    Browser
    Long Polling
    Web Sockets
    SSE
    

    View Slide

26. JAX-RS
    

    View Slide

27. Client
    Shared
    @Inject

    private Caller contactService;
    contactService.call( (List contacts)
    -> addAll(contacts) ).getAllContacts();

    @Path("/contact")

    public interface ContactStorageService {
    @GET

    @Produces("application/json")

    List getAllContacts();
    

    View Slide

28. IDE Support
    

    View Slide

29. Refactoring
    

    View Slide

30. View Slide

31. CDI
    <3
    

    View Slide

32. CDI
    no browser
    

    View Slide

33. Server
    Browser
    Browser Browser
    Browser
    Long Polling
    Web Sockets
    SSE
    

    View Slide

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 projects;
    

    View Slide

35. Observando eventos no
    Client
    Server
    Ambos
    

    View Slide

36. public void onRemoteCreated(final @Observes
    @Operation(CREATE) ContactOperation contactOperation) {

    if (sourceIsNotThisClient(contactOperation)) {

    binder.getModel().add(contactOperation.getContact());

    }
    

    }
    

    View Slide

37. JSInterop
    

    View Slide

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!
    

    View Slide

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!
    }
    

    View Slide

40. View Slide

41. Framework para construção de grandes aplicações
    estilo “workbench" e consoles web
    “Eclipse Like”
    Modelo de Programação "Opinativo"
    

    View Slide

42. View Slide

43. View Slide

44. DEMO
    (feature preview)
    

    View Slide

45. Java EE + GWT
    <3
    

    View Slide

46. Open Source
    <3
    

    View Slide

47. View Slide

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

    View Slide

49. Social + CDI
    

    View Slide

50. View Slide

51. View Slide