UberFire (JudCon 2013)

Who am I?
Drools co-founder
JBoss (2005)
Red Hat (2006)
Polymita Acquisition 2012
Red Hat Platform Architect
UF UberFire
Saturday, 29 June 13

BRMS and BPMS Platforms
• Authoring
• Build
• Deploy

BRMS and BPMS Platforms
• Authoring
• Build
• Deploy
• Monitor and Manage
• Work

BRMS Components

•Merging

•Merging
•Grouping

GWT
public class Hello implements EntryPoint {
public void onModuleLoad() {
Button b = new Button("Click me",
new ClickListener() {
public void onClick(Widget sender) {
Window.alert("Hello, Ajax");
RootPanel.get().add(b);
}
});
}
}

GWT
• Java
• Type safety
• Refactoring
• Compile errors
• Encourages client side state
• Abstracts browser API hell
• Unified bubble system
• Browser specific compilations
• Small size
• Fast Execution

GWT
• Boiler plate code
• API for programmatic UIs
• Slow compilation
• GWT team left Google
• Not open source
• No transparency

GWT
• Errai
• UiBinder and ErraiUi
• SuperDev Mode
• Source Maps
• Ray Cromwell + team
• Fully Open Source
• Steering Committee
• Roadmaps

UiBinder
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
<div>
Hello, <span ui:field='nameSpan'/>.
</div>
</ui:UiBinder>

UiBinder
<g:HTMLPanel>
<g:Image resource='{res.logo}'/>
<div class='{res.style.mainBlock}'>
<div class='{res.style.userPictureSprite}'/>
<div>
Well hello there
<span class='{res.style.nameSpan}'
ui:field='nameSpan'/>
</div>
</div>
</g:HTMLPanel>

UiBinder
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:my='urn:import:com.my.app.widgets' >
<g:HTMLPanel>
<my:WeatherReport ui:field='weather'/>
<my:Stocks ui:field='stocks'/>
<my:CricketScores ui:field='scores' />
</g:HTMLPanel>
</ui:UiBinder>

Errai
• Removes boiler plate code
• CDI
• Context and Dependency Injection
• Annotation driven development
• Errai UI
• Unified programming model
• Pervasive Events and Event Bus
• Client and server
• RPC
• JAX-RS
• Marshalling @Portable

ErraiUI
<form data-field="form">
<legend>Log in to your account</legend>
<label for="username">Username</label>
<input data-field="username" id="username"
type="text" placeholder="Username">
<label for="password">Password</label>
<input data-field="pass" id="password"
type="password" placeholder="Password">
<button data-field="submit">Log in</button>
<button>Cancel</button>
</form>

ErraiUI @Templated
public class LoginForm extends Composite {
@Inject @Bound @DataField
private TextBox username;
@Inject @Bound @DataField("pass")
private PasswordTextBox password;
@Inject @Model
private User user;
@EventHandler("submit")
private void onLogin(ClickEvent e) {
login(user);
}
}

Errai Injecting,Firing and
@Inject @Updated
private Event<Document> updatedDocEvent;
...
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
updatedDocEvent.fire(document);
}
});
...
public void onUpdatedDocument(@Observes @Updated Document doc) {
// received updated document
}

Errai @Portable Marshalling@Portable
public class Person {
private String name;
private int age;
public Person() {}
public Person(String name, int age) {
this.name = name;
this.age = age;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
...
}

Errai JAX-RS
@Path("customers")
public interface CustomerService {
@POST
@Consumes("application/json")
@Produces("text/plain")
public long createCustomer(Customer customer);
}
@Inject
private Caller<CustomerService> customerService;
...
customerService.call(new RemoteCallback<Long>() {
public void callback(Long response) {
Window.alert(response);
}
}).createCustomer(customer);

Errai RPC
@Service
public class HappyServiceImpl implements
HappyService {
public boolean isEveryoneHappy() {
return true; // this could be a lie!
}
}
@Remote
public interface
HappyService {...}
@Inject
private Caller<HappyService> happyService;
...
happyService.call(new RemoteCallback<Boolean>() {
public void callback(Boolean response) {
// process response
}
}).isEveryoneHappy();
shared
server
client

What we Learned

5.x Critique
UI
• GWT
• but not easily extended
• fixed layouts
• no perspectives

5.x Critique
UI
• GWT
• fixed layouts
• no perspectives
JCR
• Performance Issues
• Everything stored as blob
• No tagging, branching etc.
• Webdav
• Limited team providers

5.x Critique
UI
• GWT
• fixed layouts
• no perspectives
JCR
• Performance Issues
• Everything stored as blob
• No tagging, branching etc.
• Webdav
• Limited team providers
Deployment
• Binary blobs, on url

Requirements
• GWT + Errai
• Modular design
• Plugins
• Common Life cycles
• Compile time composition of plugins
• Composition via Maven modules
• Panel re-use in other frameworks
• Eclipse, Portal etc
• Perspectives
• Flexible layouts
• GIT Backend
• High Availabilty
• Hybrid GWT + JS support

UF UberFire

KIE - Knowledge Is Everything

UberFire Architecture Overview

•Modular
•Extensible
•Dynamic and Flexible layouts
•Perspectives

Build and Deploy

Simple POM Editor

Local Maven Repository and
Manager

Create or Clone Git Repos

Demo
BRMS 6.0 Beta3

UI Improvments

UberFire new Navigation System

BPM Integration

Work - Task Lists

BPMN Designer (JS)

Proof Is In The Pudding

• UI Rewrite started in November
• Entire BRMS ported
• New BPMS built, all integrated
• Tasks, Calendars, BPM Designer
• Only one person on core UI framework
• All team memebers distributed
• Despite aggressive schedule
• Code remains modular
• Easy to maintan and extend
• No one is complaining yet :)
Proof Is In The Pudding

UberFire
•Compile time composition of plugins
•modular components, each separate maven module.
•Lightweight
•Decoupled components
•Layout Manager and Perspectives
•Embeddable/Reusable (*)
•Unified API
•Security
•I/O
•VFS
•Metadata
•Menus, Toolbars, Panels, etc.
•Standard Life Cycle

UberFire Annotations
OnStart
OnSave
IsDirty
OnClose
OnFocus
OnLostFocus
OnMayClose
OnReveal
WorkbenchEditor
WorkbenchPerspective
WorkbenchPopup
WorkbenchScreen
WorkbenchPartTitle
WorkbenchPartView
WorkbenchMenu
Perspective
Components Lifecycle
Component
Rendering Info

Component Annotation
@WorkbenchPerspective(
identifier = "HomePerspective",
isDefault = true)
public class HomePerspective {
@Perspective
public PerspectiveDefinition buildPerspective() {
final PerspectiveDefinition p =
new PerspectiveDefinitionImpl();
p.setName( "Home Perspective" );
p.getRoot().addPart(
new PartDefinitionImpl(
new DefaultPlaceRequest( "RepoList" ) ) );
return p;
}
}

@WorkbenchScreen(identifier = "MyFirstPanel")
public class MyFirstPanel extends SimplePanel {
public MyFirstPanel() {
setWidget( new Label("Hello World 1") );
}
@WorkbenchPartTitle
public String myTitle() {
return "My First Panel!";
}
}

@WorkbenchEditor(identifier = "TextEditor",
supportedTypes = { TextResourceType.class,
DotResourceType.class })
public class TextEditorPresenter {
@WorkbenchPartTitle
public String getTitle() {
return "Text Editor [" + path.getFileName() + "]";
}
@WorkbenchPartView
public IsWidget getWidget() {
return view; //injected
}
(...)
}

@WorkbenchEditor(identifier = "TextEditor",
supportedTypes = { TextResourceType.class,
DotResourceType.class })
public class TextEditorPresenter {
(...)
@OnStart
public void onStart( final Path path ) {
this.path = path;
}
@OnSave
public void onSave() {
}
@IsDirty
public boolean isDirty() {
return view.isDirty();
}
}
Lifecycle Annotation

@OnStart
public void onStart( final Path path ) {
this.path = path;
}
Lifecycle Annotation - Options
@OnStart
public void onStart( final PlaceRequest path ) {
this.path = path;
}
@OnStart
public void onStart( ) {
}

Distribution Compositions
via
Maven

<project>
<artifactId>uberfire-webapp</artifactId>
<packaging>war</packaging>
<dependencies>
<dependency>
<groupId>org.uberfire</groupId>
<artifactId>uberfire-server</
artifactId>
</dependency>
<dependency>
<artifactId>uberfire-client-api</
artifactId>
</dependency>
<dependency>
<artifactId>uberfire-widgets-core-
client</artifactId>
</dependency>
<dependency>
<artifactId>uberfire-widgets-commons</
artifactId>
</dependency>
<dependency>
<artifactId>uberfire-workbench</
artifactId>
</dependency>
(...)
</dependencies>
</project>
<module>
<inherits
name="org.jboss.errai.enterprise.CDI"/>
<inherits
name="org.uberfire.security.UberfireSecurityClien
t"/>
<inherits
name="org.uberfire.UberfireWorkbench"/>
<inherits
name="org.uberfire.UberfireWidgetsCore"/>
<inherits name="org.uberfire.UberfireBackend"/>
<source path='client'/>
<source path='shared'/>
</module>
UberﬁreShowcase.gwt.xmlpom.xml

Markdown Component

<module>
<inherits
name="org.uberfire.UberfireMarkdownWidget"/
>
<inherits name="org.jboss.errai.enterprise.CDI"/>
<inherits
name="org.uberfire.security.UberfireSecurityClient"/>
<inherits name="org.uberfire.UberfireWorkbench"/>
<inherits name="org.uberfire.UberfireWidgetsCore"/>
<inherits name="org.uberfire.UberfireBackend"/>
<source path='client'/>
<source path='shared'/>
</module>
<project>
<artifactId>uberfire-webapp</artifactId>
<packaging>war</packaging>
<dependencies>
<dependency>
<artifactId>uberfire-widget-
markdown</artifactId>
</dependency>
<dependency>
<artifactId>uberfire-server</artifactId>
</dependency>
<dependency>
<artifactId>uberfire-client-api</artifactId>
</dependency>
<dependency>
<artifactId>uberfire-widgets-core-client</
artifactId>
</dependency>
<dependency>
<artifactId>uberfire-widgets-commons</
artifactId>
</dependency>
<dependency>
<artifactId>uberfire-workbench</artifactId>
</dependency>
(...)
</dependencies>
</project>
UberﬁreShowcase.gwt.xmlpom.xml

Show Case

UberFire Showcase

Demo Project
Web IDE
with Ace Editor

UberFire Demo Project

• http://droolsjbpm.github.io/uberfire/
• irc
• irc.freenode.net
• #guvnor
• #drools

UberFire (JudCon 2013)

More Related Content

Similar to UberFire (JudCon 2013)

More from Mark Proctor

Recently uploaded

UberFire (JudCon 2013)