Construindo aplicações HTML5 em Java

Slide 1

Slide 1 text

Construindo aplicações HTML5 em Java Eder Ignatowicz Sr. Software Engineer JBoss by Red Hat

Slide 2

Slide 2 text

Java <3

Slide 3

Slide 3 text

GWT <3

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

UX+ Dev

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

ERRAI UI

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

.java javac .class

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Shared Codebase

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

JPA in the Browser

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Data Binding

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Server Browser Browser Browser Browser Long Polling Web Sockets SSE

Slide 26

Slide 26 text

JAX-RS

Slide 27

Slide 27 text

Client Shared @Inject  private Caller contactService; contactService.call( (List contacts) -> addAll(contacts) ).getAllContacts();  @Path("/contact")  public interface ContactStorageService { @GET  @Produces("application/json")  List getAllContacts();

Slide 28

Slide 28 text

IDE Support

Slide 29

Slide 29 text

Refactoring

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

CDI <3

Slide 32

Slide 32 text

CDI no browser

Slide 33

Slide 33 text

Server Browser Browser Browser Browser Long Polling Web Sockets SSE

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Observando eventos no Client Server Ambos

Slide 36

Slide 36 text

public void onRemoteCreated(final @Observes @Operation(CREATE) ContactOperation contactOperation) {  if (sourceIsNotThisClient(contactOperation)) {  binder.getModel().add(contactOperation.getContact());  }   }

Slide 37

Slide 37 text

JSInterop

Slide 38

Slide 38 text

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!

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

DEMO (feature preview)

Slide 45

Slide 45 text

Java EE + GWT <3

Slide 46

Slide 46 text

Open Source <3

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Eder Ignatowicz @ederign Obrigado <3 http://erraiframework.org http://uberﬁreframework.org IRC: #errai #uberﬁre na freenode