Slide 1
Slide 1 text
5 Pillars of a Successful
Java Web Application
Eder Ignatowicz
Sr. Software Engineer @ Red Hat
Alex Porcelli
Principal Software Engineer @ Red Hat
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
Which backend architecture?
Slide 4
Slide 4 text
And what about front-end?
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Javascript Development
is complex
Slide 7
Slide 7 text
Web Javascript
development is complex
Slide 8
Slide 8 text
Web development
will stay complex
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Which web stack?
Slide 13
Slide 13 text
Which web architecture
best fits for this problem?
Slide 14
Slide 14 text
5 pillars:
Large scale application
Full stack Developers
UX Integration
5~10 years Life-Span
Interoperability
Slide 15
Slide 15 text
s
5 pillars:
Large scale application
Full stack Developers
UX Integration
5~10 years Life-Span
Interoperability
Slide 16
Slide 16 text
1mi+ lines of web code
5 projects
~150 subprojects
~30 devs
Code base of 7+ years
Large Scale Application
Slide 17
Slide 17 text
Static Typing
Large Scale Application
Slide 18
Slide 18 text
Refactoring
Large Scale Application
Slide 19
Slide 19 text
Large Scale Application
Slide 20
Slide 20 text
JavaScript Transpilers
Large Scale Application
Slide 21
Slide 21 text
Large Scale Application
Slide 22
Slide 22 text
.java
javac .class
Large Scale Application
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
The Good Parts
Slide 28
Slide 28 text
GWT • Good Parts
Java to JavaScript
Slide 29
Slide 29 text
GWT • Good Parts
java.* emulation
Slide 30
Slide 30 text
GWT • Good Parts
JS Interop
Slide 31
Slide 31 text
JS Interop • Consume
Java
@JsType(isNative = true)
public abstract class JQuery {
@JsMethod(namespace=GLOBAL)
public native static JQuery $(String selector);
public native JQuery css(String prop, String val);
public native JQuery attr(String name, String val);
}
Java
import static jquery.JQuery.$;
// ...
$("ul > li").css("color", "red").attr("data-level", "first");
Slide 32
Slide 32 text
JS Interop • Expose
Java
package foo;
@JsType
public class Dora {
public boolean late = true;
public Dora() {}
public String auAu() { return "Hello QCon!";}
}
JavaScript
var dora = new foo.Dora();
if (dora.late) {
alert(dora.auAu());
}
Slide 33
Slide 33 text
Refactoring
Large Scale Application
Slide 34
Slide 34 text
5 pillars:
Large scale application
Full stack Developers
UX Integration
5~10 years Life-Span
Interoperability
Slide 35
Slide 35 text
Shared
Programming Model
Devs Full Stack
Slide 36
Slide 36 text
“Java EE” in browser
Devs Full Stack
Slide 37
Slide 37 text
CDI-Lite
Devs Full Stack
Slide 38
Slide 38 text
Devs Full Stack
Slide 39
Slide 39 text
CDI @ Browser
ERRAI
Slide 40
Slide 40 text
CDI no Browser
@ApplicationScoped
public class ProjectsView {
@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 41
Slide 41 text
CDI no Browser
if (!filter.doFilter(event)) {
...
if (event.kind().equals(StandardWatchEventKind.ENTRY_ADD)) {
resourceAddedEvent.fire(buildEvent(ResourceAddedEvent.class,
event).getK2());
}
...
}
Slide 42
Slide 42 text
CDI no Browser
public void onNewFile(@Observes ResourceAddedEvent event) {
Window.alert("ResourceAddedEvent:" +
event.getPath().toURI() +
" ['" + event.getMessage() + "']");
}
Slide 43
Slide 43 text
CDI no Browser
Slide 44
Slide 44 text
ERRAI BUS
Server
Browser
Browser Browser
Browser
Long Polling
Web Sockets
SSE
Slide 45
Slide 45 text
Shared
Programming Model
Devs Full Stack
Slide 46
Slide 46 text
5 pillars:
Large scale application
Full stack Developers
UX Integration
5~10 years Life-Span
Interoperability
Slide 47
Slide 47 text
Pizza Types
-
<% for ( Pizza pizza : pizzaTypes ) { %>
- <%=pizza.getName()%> <%=pizza.getPrice()%>$ <% } %>
Size
Extra Toppings
<% for ( int j = 0; j < 3; j++ ) { %>
<% } %>
-
<% for ( int i = sliceSize * j; i < ( j + 1 ) * sliceSize; i++ ) { %>
- <%=pizzaToppings.get( i )%> <% } if ( j == 0 && remainder > 0 ) { %>
- <%=pizzaToppings.get( pizzaToppings.size() - 2 ) <% } else if ( j == 1 && remainder > 1 ) { %>
- <%=pizzaToppings.get( pizzaToppings.size() - 1 )%> <% } %>
Each extra topping is 0.65$
Slide 48
Slide 48 text
{{title}}
My favorite hero is: {{myHero}}
Heroes:
- {{ hero }}
Slide 49
Slide 49 text
Slide 50
Slide 50 text
ERRAI UI
@Dependent
@Templated
public class ProjectsView {
@Inject
@DataField( "projects-view" )
Div view;
@Inject
@DataField( "new-project" )
Button newProject;
@Inject
@DataField( "projects-list" )
UnorderedList projectsList;
}
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
Toggle navigation
-
Messages: 0
- Modified Datasources ExampleDS
- Error: System Failure
-
Brian Johnson
-
...
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
Leave the HTML/CSS in peace
UX Integration
Slide 55
Slide 55 text
5 pillars:
Large scale application
Full stack Developers
UX Integration
5~10 years Life-Span
Interoperability
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
Hexagonal Architecture - Alistair Cockburn
Onion Architecture - Jeffrey Palermo
DCI - James Coplien e Trygve Reenskaug.
BCE - Ivar Jacobson
Clean Architecture - Robert C. Martin
Architecture
Slide 58
Slide 58 text
Decoupled from Frameworks
Testable
Decoupled from UI
Decoupled from Database
Independent of external systems
Principles
Slide 59
Slide 59 text
No content
Slide 60
Slide 60 text
“Architecture is about intent.
We have made it about
frameworks and details”
Robert C. Martin
Slide 61
Slide 61 text
APPFORMER VFS
Use Cases
VFS
API
Regular FS
Clustering
GIT FS
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
Which web framework
should I use?
Slide 64
Slide 64 text
Which JS framework?
Slide 65
Slide 65 text
JS framework
choice
Years
1 2 3 4 5 6
First
Release
Danger
0
Slide 66
Slide 66 text
https://toddmotto.com/future-of-angular-1-x
What’s next for Angular 1.x?
“In all honesty, no one really knows what will happen”
Slide 67
Slide 67 text
1 2 3 4 5 6
Years
Deliver
JS
Framework
Choice
Learning
Curve
Project Canceled
or new version
is incompatible
Rewrite on the new
JS framework
Learning
Curve
Project Canceled
or new version
is incompatible
Rewrite on the new
JS framework
Learning
Curve
Slide 68
Slide 68 text
“A good architecture allows
volatile decisions to be
easily changed”
Robert C. Martin
Slide 69
Slide 69 text
What if I dealt with the volatility of
JS frameworks as a fact?
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
Component Model:
• Screen
• Editors
• Perspectives
• Popups
Programming Model
Slide 73
Slide 73 text
LifeCycle:
• OnStart
• OnSave
• IsDirty
• OnClose
Programming Model
...
Slide 74
Slide 74 text
Screen Screen
Editor
Perspective
Slide 75
Slide 75 text
Programming Model
Screen
Editor
Perspective
→ Interface WorkbenchScreenActivity
→ Interface WorkbenchEditorActivity
→ Interface PerspectiveActivity
Slide 76
Slide 76 text
Perspectives Lookup
AppFormer
Lookup
Perspective
ERRAI
CDI BEAN
MANAGER
Scan all
Perspective Activity
Implementations
GWT Perspective
Adapter
OLD GWT WIDGET
ERRAI UI Perspective
Adapter
Plain HTML Errai UI
Slide 77
Slide 77 text
7+ years old code with
“old school” GWT
Slide 78
Slide 78 text
HTML 5 canvas
fresh code
Slide 79
Slide 79 text
5~10 years Life-Span
The Web architecture should be
treated with the same respect as
you treat your backend.
Slide 80
Slide 80 text
5 pillars:
Large scale application
Full stack Developers
UX Integration
5~10 years Life-Span
Interoperability
Slide 81
Slide 81 text
@WorkbenchPerspective(identifier = “HomePerspective", isDefault = true)
@Templated
public class HomePerspective implements IsElement {
@Inject
@DataField
@WorkbenchPanel(parts = "MoodScreen?uber=fire&uber1=fire1")
Div moodScreen;
@Inject
@DataField
@WorkbenchPanel(parts = "HomeScreen?uber=fire")
Div homeScreen;
@Inject
@DataField
@WorkbenchPanel(parts = "AnotherScreen")
Div anotherScreen;
}
@JsType
public interface PerspectiveActivity{
PerspectiveDefinition getDefaultPerspectiveLayout();
@Override
default String getName() {
return getDefaultPerspectiveLayout().getName();
}
boolean isDefault();
Menus getMenus();
ToolBar getToolBar();
}
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
function TodoCtrl($scope) {
$scope.placeText = "MiscellaneousFeatures";
$scope.todos = [
{text: 'learn angular', done: true},
{text: 'build an angular app', done: false}
];
$scope.addTodo = function () {
$scope.todos.push({text: $scope.todoText, done: false});
$scope.todoText = '';
};
$scope.remaining = function () {
var count = 0;
angular.forEach($scope.todos, function (todo) {
count += todo.done ? 0 : 1;
});
return count;
};
$scope.archive = function () {
var oldTodos = $scope.todos;
$scope.todos = [];
angular.forEach(oldTodos, function (todo) {
if (!todo.done) {
$scope.todos.push(todo);
}
});
};
$scope["goto"] = function () {
$goToPlace($scope.placeText);
};
}
$registerPlugin({
id: "my_angular_js",
type: "angularjs",
templateUrl: "angular.sample.html",
title: function () {
return "angular " + Math.floor(Math.random() * 10);
},
on_close: function () {
alert("this is a pure JS alert!");
}
});
Slide 84
Slide 84 text
Perspectives
GWT Perspective
Adapter
OLD GWT WIDGET
ERRAI UI
Perspective
Adapter
Plain HTML Errai UI
Angular
Perspective
Adapter
Angular native
Perspective
Any JS Perspective
Adapter
Any JS Framework
AppFormer
Lookup
Perspective
ERRAI
CDI BEAN
MANAGER
Scan all
Perspective Activity
Implementations
Slide 85
Slide 85 text
Angular JS Screen
Slide 86
Slide 86 text
5 pillars:
Large scale application
Full stack Developers
UX Integration
5~10 years Life-Span
Interoperability
Slide 87
Slide 87 text
Web development
is complex
Slide 88
Slide 88 text
Web applications are
important pieces of
our architecture
Slide 89
Slide 89 text
Decoupled from Frameworks
Testable
Decoupled from UI
Decoupled from Database
Independent of external systems
Principles
Slide 90
Slide 90 text
Software architecture
is trade-offs exercise
Slide 91
Slide 91 text
5 pillars:
Large scale application
Full stack Developers
UX Integration
5~10 years life-span
Interoperability
Slide 92
Slide 92 text
Thank you.
Eder Ignatowicz
Sr. Software Engineer @ Red Hat
Alex Porcelli
Principal Software Engineer @ Red Hat
Slide 93
Slide 93 text
No content