$30 off During Our Annual Pro Sale. View Details »

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.

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

    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