Javaland 2015 - Rich Internet Applications with JBoss Errai

In addition to a complex server architecture web and mobile applications also have a challenging client code base. However traditional Java frameworks focus on server side rendering and do not integrate JavaScript very well. JBoss Errai is a framework which helps developing large, scalable rich web applications using a consistent, standardized programming model for client development. Leveraging the Google Web Toolkit Errai brings a proven server-side programming model to the browser. The framework makes it possible to build rich web applications completely in Java. In a typesafe way with reducing boilerplate code.

Transcript

1. München/HQ Berlin Dresden Grenoble Hamburg Köln Leipzig Nürnberg Prag Rich Internet Applications with JBoss Errai
2. 2 Johannes Barop @jobarop mgm technology partners 07.04.15
3. 3 Rich Client Revolution 07.04.15
4. 4 Browser as application platform §  Increasing demand for rich web applications §  Browsers became stable and reliable §  HTML5 provides rich set of components §  Portable (desktop / mobile / …) Rich Client Revolution 07.04.15
5. 5 Browser as enterprise application platform §  Also suited for corporate systems §  Compared to desktop applications: §  Easier administration (installations, updates, scalability) §  Better interoperability Rich Client Revolution 07.04.15
6. 6 Problem: Browser not a trusted or safe environment §  State can be manipulated à Validation etc. needed §  Server (Java) and browser (JavaScript) platform are very different from each other à Code Duplication Rich Client Revolution 07.04.15
7. 7 Problem: Lack of integration of browsers technologies in Java §  Java frameworks focus on server side HTML templating §  Frontend resources only “dumb” static resources §  Need for a dedicated frontend setup (grunt / gulp / …) §  à Polyglot setup §  à “Native web” approach but very weak integration Rich Client Revolution 07.04.15
8. 8 Polyglot – Problem: Integration 07.04.15 IDE Compiler Text editor Build tools InDesign HTML CSS PhotoShop PROBLEM
9. 9 Polyglot – Problem: Client/Server Code Duplication PROBLEM
10. 10 Monoglot Project Setup 07.04.15
11. 11 §  Same language for back- and frontend §  Much better integration §  Cleaner project infrastructure §  Less different tools §  Easier development Monoglot Project 07.04.15
12. 12 NodeJS §  Based on V8 JavaScript engine §  Run JavaScript in the server Errai §  Run Java in the browser Monoglot Project 07.04.15
13. 13 07.04.15 PROBLEM Monoglot Project – Collaboration With Large Teams
14. 14 Monoglot Project: JavaScript versus Java 07.04.15
15. 15 Monoglot Project: JavaScript versus Java 07.04.15 It’s not about fighting!
16. 16 JavaScript §  Libraries have shorter life cycle §  Build chain not as stable as Maven/Gradle §  Native to the web §  Suited most for dynamic frontend driven projects with short lifecycle Java §  More stable than JavaScript §  More heavy that JavaScript §  Reusing Java resources §  Suited most for functional driven enterprise projects with long lifecycle Monoglot Project: The proper tool for the job 07.04.15
17. 17 Translate Java to JavaScript 07.04.15
18. 18 §  Using GWT (formerly Google Web Toolkit) §  Heavy optimizations based on the Java type system §  Java/GWT generated JavaScript usually smaller and faster than handwritten JavaScript Translate Java to JavaScript 07.04.15
19. 19 GWT? Is it still alive/relevant? 07.04.15
20. 20 §  2011-2012 §  Google shut down engineering in the Atlanta office §  à Pretty much the complete GWT team left Google §  Reduced marketing for GWT §  Competing frameworks inside Google §  No real Open Source project infrastructure §  Backward Compatibility §  Outdated stuff looks bad §  Frontend developers hate GWT J GWT? Is it still alive/relevant? - Why it’s considered dead 07.04.15
21. 21 §  ~ 200 commits per month §  Google §  Still major development driver (75% of commits) §  (New) products using GWT: (upcoming) Calendar, Inbox, Sheets, Shopping Express, Flights, Android Play Console, Wallet, Groups, … §  Other companies: §  Red Hat (Errai, Uberfire, BPM), Vaadin, … §  ~150.000 monthly active SDK users GWT? Is it still alive/relevant? 07.04.15
22. 22 §  Formed 2012 §  Transition to a real source Open Project Structure §  Lead the GWT project in major decisions GWT? Is it still alive/relevant? - GWT Steering Committee 07.04.15
23. 23 §  GWT.create 2013 and 2015 with more than 600 participants each GWT? Is it still alive/relevant? - Conferences 07.04.15
24. 24 GWT? Is it still alive/relevant? – Brand Relaunch 07.04.15
25. 25 §  Big & active community §  GWT 2.x §  Java 8 (2.8) §  Incremental compiler (yay!) §  New debugger §  Improved interoperability with JavaScript §  Still: A lot of the old crap included §  Ambitious plans for future improvements (> 3.0) GWT? Is it still alive/relevant? – Current State 07.04.15
26. 26 What do you think? GWT? Is it still alive/relevant? 07.04.15
27. 27 Let’s talk about Errai! 07.04.15
28. 28 §  Driven by Red Hat §  Apache Software License, Version 2.0 §  https://github.com/errai/errai §  http://erraiframework.org Errai 07.04.15
29. 29 07.04.15
30. 30 07.04.15
31. 31 §  Replaces most of GWT, except for the compiler 07.04.15
32. 32 §  Errai implements some Java EE 6 APIs for the browser §  CDI, JAX-RS, JPA, … 07.04.15
33. 33 Errai Mantras 07.04.15
34. 34 §  Code it Once §  Boilerplate sucks §  Declarative rocks Errai Mantras 07.04.15
35. 35 Features 07.04.15
36. 36 Contexts and Dependency Injection 07.04.15
37. 37 „Contexts and Dependency Injection” in Java(Script) 07.04.15 §  Java EE component model §  Dependency injection §  Event bus §  Scopes
38. 38 „Contexts and Dependency Injection” in Java(Script) 07.04.15 @Inject private Caller<TodoService> todoService; §  Dependency Injection
39. 39 „Contexts and Dependency Injection” in Java(Script) 07.04.15 @Inject @Created private Event<TodoItem> todoCreatedEvent; §  Firing CDI events
40. 40 „Contexts and Dependency Injection” in Java(Script) 07.04.15 @Inject @Created private Event<TodoItem> todoCreatedEvent; public void createTodo(String text) { TodoItem createdTodo = new TodoItem(title); todoCreatedEvent.fire(createdTodo); } §  Firing CDI events
41. 41 §  Catching CDI events is possible… §  … on Server §  … in the Browser §  Events are exchanged between server and browser and vice versa „Contexts and Dependency Injection” in Java(Script) 07.04.15 private void onTodoCreated( @Observes @Created final TodoItem createdItem) { /* ... */ }
42. 42 Remote Procedure Calls 07.04.15
43. 43 Remote Procedure Calls 07.04.15 @Remote interface TodoService { /* ... */ }
44. 44 Remote Procedure Calls 07.04.15 @Remote interface TodoService { /* ... */ } @Service class TodoServiceImpl implements TodoService { /* ... */ }
45. 45 Remote Procedure Calls 07.04.15 @Remote interface TodoService { /* ... */ } @Service class TodoServiceImpl implements TodoService { /* ... */ } @Inject private Caller<TodoService> todoService; /* ... */ todoService.call(/* callback */).createTodo("todo"); /* ... */
46. 46 Representational State Transfer 07.04.15
47. 47 Representational State Transfer 07.04.15 @Path("todos") interface TodoService { @POST @Consumes("text/plain") @Produces("application/json") TodoItem createTodo(String text); }
48. 48 Representational State Transfer 07.04.15 @Inject private Caller<TodoService> todoService; /* ... */ todoService.call(/* callback */).createTodo("todo"); /* ... */ @Path("todos") interface TodoService { @POST @Consumes("text/plain") @Produces("application/json") TodoItem createTodo(String text); } §  Client code the same as in the RPC example!
49. 49 Flexible Serialization 07.04.15
50. 50 Flexible Serialization 07.04.15 @Portable public class TodoItem { private boolean done; private String title; public TodoItem() {} public TodoItem(boolean done, String title){ this.done = done; this.title = title; } } §  No getter/setter for serialization needed
51. 51 Flexible Serialization with immutable Entities 07.04.15
52. 52 Flexible Serialization with immutable Entities 07.04.15 public class TodoItem { private final boolean done; private final String title; public static TodoItem create( @MapsTo("done") boolean done, @MapsTo("text") String title){ this.done = done; this.title = title; } } §  „@MapsTo“ can be eliminated with Java 8
53. 53 HTML5 Templates 07.04.15
54. 54 HTML5 Templates 07.04.15 <!doctype html> <html> <link rel="stylesheet" href="styles.css"> <form> <h3>Todo Item:</h3> <label for="title">Titel:</legend> <input datafield="title" id="title" type="text"/> <button datafield="submit">Todo anlegen</button> </form> §  Natural templating §  à Template can be opened in a plain browser
55. 55 HTML5 Templates 07.04.15 @Templated public class TodoItemForm extends Composite { @Inject @Datafield private TextBox title; @Datafield private Button submit = new Button(); @EventHandler("submit") private void addTodo(ClickEvent e) { /* add the todo to the list */ } }
56. 56 Bidirectional Data Binding 07.04.15
57. 57 Bidirectional Data Binding 07.04.15 @Templated public class TodoItemForm extends Composite { @Inject @Bound @Datafield private boolean done; @Inject @Bound @Datafield private TextBox text; private TodoItem todoItem; @Inject public TodoItemForm( @AutoBound DataBinder<TodoItem> binder) { this.todoItem = binder.getModel(); } }
58. 58 Navigation 07.04.15
59. 59 Navigation – Declaring Pages 07.04.15 §  Declarative Configuration §  Checked at compile time §  Java type system ensures that we do not have dead links @Page("example") public class ExamplePage extends Composite { /* ... */ }
60. 60 Navigation – Declaring Pages 07.04.15 §  Declarative Configuration §  Checked at compile time §  Java type system ensures that we do not have dead links @Page("example") public class ExamplePage extends Composite { /* ... */ } @Page("example") public class TodoItemPage extends Composite { @PageState private String key; }
61. 61 Navigation – With Anchors in Templates 07.04.15 @Page @Templated public class TodoItemPage extends Composite { @Inject @DataField private TransitionAnchor<TodoListPage> listLink; }
62. 62 Navigation – With Anchors in Templates 07.04.15 @Page @Templated public class TodoItemPage extends Composite { @Inject @DataField private TransitionAnchor<TodoListPage> listLink; } <!doctype html> <a data-field="listLink">Zur ToDo Liste</a>
63. 63 Navigation – Programmatically 07.04.15 @Page @Templated public class TodoItemPage extends Composite { @Inject private TransitionTo<TodoListPage> toListPage; }
64. 64 Navigation – Programmatically 07.04.15 @Page @Templated public class TodoItemPage extends Composite { @Inject private TransitionTo<TodoListPage> toListPage; } /* ... */ toListPage.go(); /* ... */
65. 65 Support of Mobile Hardware 07.04.15
66. 66 Support of Mobile Hardware 07.04.15 @Page @Templated public class ProfileEditPage extends Composite { @Inject private Camera camera; } §  Based on Apache Cordova (PhoneGap)
67. 67 Support of Mobile Hardware 07.04.15 @Page @Templated public class ProfileEditPage extends Composite { @Inject private Camera camera; } private void onBatLow(@Observes BatteryLowEvent) { /* warn the user */ } §  Based on Apache Cordova (PhoneGap)
68. 68 Summary 07.04.15
69. 69 §  Challenges of rich internet applications §  Integration of front end backend §  Code duplication between client and server §  Working on large code bases with large teams §  GWT is alive J Summary 07.04.15
70. 70 §  Use the best tools and standards §  HTML5 and CSS for layout §  Java for enterprise development §  Share data model and validation logic - Don’t repeat yourself! §  Bust the boilerplate §  It’s Java! §  Type-safe §  Java tooling (IDE, analysis) §  Java libraries (runtime, testing, …) Summary – How Errai Helps 07.04.15
71. 71 Innovation Implemented. 07.04.15 mgm technology partners GmbH Frankfurter Ring 105a 80807 München Tel.: +49 (89) 35 86 80-0 Fax: +49 (89) 35 86 80-288 http://www.mgm-tp.com Prag München Berlin Hamburg Köln Nürnberg Grenoble Leipzig Dresden