UberFire Quick Intro and Overview (early beta Jul 2013)

UF UberFire
Saturday, 29 June 13

GWT
Google committed to Open Source development
model
Steering Commit/Transparency
TimeBox releases (twice year)
Future focus
Mobile (reduced CPU utilization, more code splitting)
Easier “Hyrbid” apps
Smaller and faster executions

GWT
GWT used extensively at Google
Adwords (97% of google revenue)
Google Groups (rewrite just announced)
Major new consumer projects about to be announced
Big chunk of internal IT
100K+ monthly auto-update pings (Eclipse)
GWT considered mature
Not investing in marketing or evangalising

BRMS and BPMS

BRMS and BPMS
Authoring
Build
Deploy

BRMS and BPMS
Authoring
Build
Deploy
Monitor and Manage
Work

BRMS Components

What we Learned

5.x Critique
UI
GWT
But not easily
extended
Fixed layouts
No perspectives

5.x Critique
JCR
Performance Issues
Everything stored as blob
No tagging, branching etc.
Webdav
Limited team providers

6.x Requirements
Modular design
Plugins
Compile time composition of plugins
Maven modules
Hybrid GWT + JS support (Runtime Plugins)
Twitter Bootstrap UI

6.x Requirements
Panels
Common Life cycles
Panel re-use in other frameworks
Eclipse, Portal etc
Security visibility

6.x Requirements
Perspectives
Flexible layout with DnD
Multiple layout managers
Security visibility

6.x Requirements
Menu’s, Toolbars
decoupled form components
contextual to perspective and focus panel
Security visibility
GIT Backend
High Availabilty
GIT cluster

6.x Requirements
GIT Backend
VFS (nio2)
seamless API for client and Server
Security
MetaData
stored as .dot file in git for each “asset”
High Availability
GIT cluster

KIE
Knowledge is
Everything

UberFire Architecture

Workbench Screen

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

Workbench Screen$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!");
}
});
<div ng-controller="TodoCtrl">
<span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30" placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
<form ng-submit="goto()">
<input type="text" ng-model="placeText" size="30" placeholder="place to go">
<input class="btn-primary" type="submit" value="goTo">
</form>
</div>

Workbench Editor

@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
}
(...)
}
Workbench Editor

Screen Life Cycles
OnStart
OnSave
IsDirty
OnClose
OnFocus
OnLostFocus
OnMayClose
OnReveal
Lifecycle

@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();
}
}
Life Cycle Annotations

Workbench Perspective

Window Managers
NESW, with DnD
Nesting, for flexible layouts.
Supports programmatic and json
Future
Grid
Templates

@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;
}
}
Workbench Perspective

Workbench Perspective$registerPerspective({
"id": "Markdown Editor",
"view": {
"parts": [
{
"place": "MarkdownLiveViewer",
"parameters": {}
}
],
"panels": [
{
"width": 600,
"min_width": 300,
"position": "west",
"parts": [
{
"place": "MarkdownLiveEditor",
"parameters": {}
}
]
}
]
},
on_close: function () {
}
});

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

Hyrbid Plugins

DEMO 1
BRMS Beta3

DEMO 2
BPMS Beta4

DEMO 3
Web IDE

UI Improvments

UberFire new Navigation System

DEMO 4
Dynamic non-GWT Plugins
(Live, no Video)

UberFire Quick Intro and Overview (early beta Jul 2013)

Recommended

Recommended

More Related Content

Similar to UberFire Quick Intro and Overview (early beta Jul 2013)

Similar to UberFire Quick Intro and Overview (early beta Jul 2013) (20)

More from Mark Proctor

More from Mark Proctor (20)

Recently uploaded

Recently uploaded (20)

UberFire Quick Intro and Overview (early beta Jul 2013)