Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Saturday, 29 June 13
Who am I?
Drools co-founder
JBoss (2005)
Red Hat (2006)
Polymita Acquisition 2012
Red Hat Platform Architect
UF UberFire
S...
BRMS and BPMS Platforms
• Authoring
• Build
• Deploy
Saturday, 29 June 13
BRMS and BPMS Platforms
• Authoring
• Build
• Deploy
• Monitor and Manage
• Work
Saturday, 29 June 13
BRMS Components
Saturday, 29 June 13
Saturday, 29 June 13
Saturday, 29 June 13
Saturday, 29 June 13
Saturday, 29 June 13
Saturday, 29 June 13
Saturday, 29 June 13
Saturday, 29 June 13
Saturday, 29 June 13
Saturday, 29 June 13
•Merging
Saturday, 29 June 13
•Merging
•Grouping
Saturday, 29 June 13
Saturday, 29 June 13
Saturday, 29 June 13
Saturday, 29 June 13
Saturday, 29 June 13
Saturday, 29 June 13
Saturday, 29 June 13
Saturday, 29 June 13
Saturday, 29 June 13
GWT
Saturday, 29 June 13
GWT
public class Hello implements EntryPoint {
public void onModuleLoad() {
Button b = new Button("Click me",
new ClickLis...
GWT
• Java
• Type safety
• Refactoring
• Compile errors
• Encourages client side state
• Abstracts browser API hell
• Unif...
GWT
• Boiler plate code
• API for programmatic UIs
• Slow compilation
• GWT team left Google
• Not open source
• No transp...
GWT
• Errai
• UiBinder and ErraiUi
• SuperDev Mode
• Source Maps
• Ray Cromwell + team
• Fully Open Source
• Steering Comm...
UiBinder
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
  <div>
    Hello, <span ui:field='nameSpan'/>.
  </div>
...
UiBinder
<g:HTMLPanel>
    <g:Image resource='{res.logo}'/>
    <div class='{res.style.mainBlock}'>
      <div class='{res...
UiBinder
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'
   ...
Errai
Saturday, 29 June 13
Errai
• Removes boiler plate code
• CDI
• Context and Dependency Injection
• Annotation driven development
• Errai UI
• Un...
ErraiUI
<form data-field="form">
<legend>Log in to your account</legend>
<label for="username">Username</label>
<input dat...
ErraiUI @Templated
public class LoginForm extends Composite {
@Inject @Bound @DataField
private TextBox username;
@Inject ...
Errai Injecting,Firing and
@Inject @Updated
private Event<Document> updatedDocEvent;
...
button.addClickHandler(new ClickH...
Errai @Portable Marshalling@Portable
public class Person {
private String name;
private int age;
public Person() {}
public...
Errai JAX-RS
@Path("customers")
public interface CustomerService {
@POST
@Consumes("application/json")
@Produces("text/pla...
Errai RPC
@Service
public class HappyServiceImpl implements
HappyService {
public boolean isEveryoneHappy() {
return true;...
What we Learned
Saturday, 29 June 13
5.x Critique
UI
• GWT
• but not easily extended
• fixed layouts
• no perspectives
Saturday, 29 June 13
5.x Critique
UI
• GWT
• but not easily extended
• fixed layouts
• no perspectives
JCR
• Performance Issues
• Everything st...
5.x Critique
UI
• GWT
• but not easily extended
• fixed layouts
• no perspectives
JCR
• Performance Issues
• Everything st...
Requirements
• GWT + Errai
• Modular design
• Plugins
• Common Life cycles
• Compile time composition of plugins
• Composi...
UF UberFire
Saturday, 29 June 13
KIE - Knowledge Is Everything
Saturday, 29 June 13
KIE - Knowledge Is Everything
Saturday, 29 June 13
UberFire Architecture Overview
Saturday, 29 June 13
•Modular
•Extensible
•Dynamic and Flexible layouts
•Perspectives
Saturday, 29 June 13
Build and Deploy
Saturday, 29 June 13
Simple POM Editor
Saturday, 29 June 13
Local Maven Repository and
Manager
Saturday, 29 June 13
Create or Clone Git Repos
Saturday, 29 June 13
Demo
BRMS 6.0 Beta3
Saturday, 29 June 13
Saturday, 29 June 13
UI Improvments
Saturday, 29 June 13
UberFire new Navigation System
Saturday, 29 June 13
UberFire new Navigation System
Saturday, 29 June 13
UberFire new Navigation System
Saturday, 29 June 13
UberFire new Navigation System
Saturday, 29 June 13
BPM Integration
Saturday, 29 June 13
Work - Task Lists
Saturday, 29 June 13
Work - Task Lists
Saturday, 29 June 13
Work - Task Lists
Saturday, 29 June 13
Work - Task Lists
Saturday, 29 June 13
Work - Task Lists
Saturday, 29 June 13
Work - Task Lists
Saturday, 29 June 13
BPMN Designer (JS)
Saturday, 29 June 13
Proof Is In The Pudding
Saturday, 29 June 13
• UI Rewrite started in November
• Entire BRMS ported
• New BPMS built, all integrated
• Tasks, Calendars, BPM Designer
• ...
UberFire
Saturday, 29 June 13
UberFire
•Compile time composition of plugins
•modular components, each separate maven module.
•Lightweight
•Decoupled com...
UberFire Annotations
OnStart
OnSave
IsDirty
OnClose
OnFocus
OnLostFocus
OnMayClose
OnReveal
WorkbenchEditor
WorkbenchPersp...
Component Annotation
@WorkbenchPerspective(
identifier = "HomePerspective",
isDefault = true)
public class HomePerspective...
Component Annotation
@WorkbenchScreen(identifier = "MyFirstPanel")
public class MyFirstPanel extends SimplePanel {
public ...
@WorkbenchEditor(identifier = "TextEditor",
supportedTypes = { TextResourceType.class,
DotResourceType.class })
public cla...
@WorkbenchEditor(identifier = "TextEditor",
supportedTypes = { TextResourceType.class,
DotResourceType.class })
public cla...
@OnStart
public void onStart( final Path path ) {
this.path = path;
}
Lifecycle Annotation - Options
@OnStart
public void ...
Distribution Compositions
via
Maven
Saturday, 29 June 13
<project>
<artifactId>uberfire-webapp</artifactId>
<packaging>war</packaging>
<dependencies>
<dependency>
<groupId>org.ube...
Saturday, 29 June 13
Markdown Component
Saturday, 29 June 13
<module>
<inherits
name="org.uberfire.UberfireMarkdownWidget"/
>
<inherits name="org.jboss.errai.enterprise.CDI"/>
<inheri...
Saturday, 29 June 13
Show Case
Saturday, 29 June 13
UberFire Showcase
Saturday, 29 June 13
UberFire Showcase
Saturday, 29 June 13
UberFire Showcase
Saturday, 29 June 13
Demo Project
Web IDE
with Ace Editor
Saturday, 29 June 13
UberFire Demo Project
Saturday, 29 June 13
UberFire Demo Project
Saturday, 29 June 13
UberFire Demo Project
Saturday, 29 June 13
UberFire Demo Project
Saturday, 29 June 13
UberFire Demo Project
Saturday, 29 June 13
UberFire Demo Project
Saturday, 29 June 13
UberFire Demo Project
Saturday, 29 June 13
UberFire Demo Project
Saturday, 29 June 13
Demo
Saturday, 29 June 13
Saturday, 29 June 13
• http://droolsjbpm.github.io/uberfire/
• irc
• irc.freenode.net
• #guvnor
• #drools
Saturday, 29 June 13
Upcoming SlideShare
Loading in …5
×

UberFire (JudCon 2013)

1,444 views

Published on

UberFire is a tool to help rapidly build workbench or console applications. It's still in early beta stage, but this presentation gives a quick overview of what it provides, and how it woks. It shows a small video of the BRMS project being built with UberFire, as well as finishing with a simple web based IDE, that was built as an example application with UberFire

Published in: Technology
  • Be the first to comment

UberFire (JudCon 2013)

  1. 1. Saturday, 29 June 13
  2. 2. Who am I? Drools co-founder JBoss (2005) Red Hat (2006) Polymita Acquisition 2012 Red Hat Platform Architect UF UberFire Saturday, 29 June 13
  3. 3. BRMS and BPMS Platforms • Authoring • Build • Deploy Saturday, 29 June 13
  4. 4. BRMS and BPMS Platforms • Authoring • Build • Deploy • Monitor and Manage • Work Saturday, 29 June 13
  5. 5. BRMS Components Saturday, 29 June 13
  6. 6. Saturday, 29 June 13
  7. 7. Saturday, 29 June 13
  8. 8. Saturday, 29 June 13
  9. 9. Saturday, 29 June 13
  10. 10. Saturday, 29 June 13
  11. 11. Saturday, 29 June 13
  12. 12. Saturday, 29 June 13
  13. 13. Saturday, 29 June 13
  14. 14. Saturday, 29 June 13
  15. 15. •Merging Saturday, 29 June 13
  16. 16. •Merging •Grouping Saturday, 29 June 13
  17. 17. Saturday, 29 June 13
  18. 18. Saturday, 29 June 13
  19. 19. Saturday, 29 June 13
  20. 20. Saturday, 29 June 13
  21. 21. Saturday, 29 June 13
  22. 22. Saturday, 29 June 13
  23. 23. Saturday, 29 June 13
  24. 24. Saturday, 29 June 13
  25. 25. GWT Saturday, 29 June 13
  26. 26. 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); } }); } } Saturday, 29 June 13
  27. 27. 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 Saturday, 29 June 13
  28. 28. GWT • Boiler plate code • API for programmatic UIs • Slow compilation • GWT team left Google • Not open source • No transparency Saturday, 29 June 13
  29. 29. GWT • Errai • UiBinder and ErraiUi • SuperDev Mode • Source Maps • Ray Cromwell + team • Fully Open Source • Steering Committee • Roadmaps Saturday, 29 June 13
  30. 30. UiBinder <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>   <div>     Hello, <span ui:field='nameSpan'/>.   </div> </ui:UiBinder> Saturday, 29 June 13
  31. 31. 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> Saturday, 29 June 13
  32. 32. 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> Saturday, 29 June 13
  33. 33. Errai Saturday, 29 June 13
  34. 34. 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 Saturday, 29 June 13
  35. 35. 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> Saturday, 29 June 13
  36. 36. 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); } } Saturday, 29 June 13
  37. 37. 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 } Saturday, 29 June 13
  38. 38. 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; } ... } Saturday, 29 June 13
  39. 39. 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); Saturday, 29 June 13
  40. 40. 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 Saturday, 29 June 13
  41. 41. What we Learned Saturday, 29 June 13
  42. 42. 5.x Critique UI • GWT • but not easily extended • fixed layouts • no perspectives Saturday, 29 June 13
  43. 43. 5.x Critique UI • GWT • but not easily extended • fixed layouts • no perspectives JCR • Performance Issues • Everything stored as blob • No tagging, branching etc. • Webdav • Limited team providers Saturday, 29 June 13
  44. 44. 5.x Critique UI • GWT • but not easily extended • fixed layouts • no perspectives JCR • Performance Issues • Everything stored as blob • No tagging, branching etc. • Webdav • Limited team providers Deployment • Binary blobs, on url Saturday, 29 June 13
  45. 45. 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 Saturday, 29 June 13
  46. 46. UF UberFire Saturday, 29 June 13
  47. 47. KIE - Knowledge Is Everything Saturday, 29 June 13
  48. 48. KIE - Knowledge Is Everything Saturday, 29 June 13
  49. 49. UberFire Architecture Overview Saturday, 29 June 13
  50. 50. •Modular •Extensible •Dynamic and Flexible layouts •Perspectives Saturday, 29 June 13
  51. 51. Build and Deploy Saturday, 29 June 13
  52. 52. Simple POM Editor Saturday, 29 June 13
  53. 53. Local Maven Repository and Manager Saturday, 29 June 13
  54. 54. Create or Clone Git Repos Saturday, 29 June 13
  55. 55. Demo BRMS 6.0 Beta3 Saturday, 29 June 13
  56. 56. Saturday, 29 June 13
  57. 57. UI Improvments Saturday, 29 June 13
  58. 58. UberFire new Navigation System Saturday, 29 June 13
  59. 59. UberFire new Navigation System Saturday, 29 June 13
  60. 60. UberFire new Navigation System Saturday, 29 June 13
  61. 61. UberFire new Navigation System Saturday, 29 June 13
  62. 62. BPM Integration Saturday, 29 June 13
  63. 63. Work - Task Lists Saturday, 29 June 13
  64. 64. Work - Task Lists Saturday, 29 June 13
  65. 65. Work - Task Lists Saturday, 29 June 13
  66. 66. Work - Task Lists Saturday, 29 June 13
  67. 67. Work - Task Lists Saturday, 29 June 13
  68. 68. Work - Task Lists Saturday, 29 June 13
  69. 69. BPMN Designer (JS) Saturday, 29 June 13
  70. 70. Proof Is In The Pudding Saturday, 29 June 13
  71. 71. • 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 Saturday, 29 June 13
  72. 72. UberFire Saturday, 29 June 13
  73. 73. 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 Saturday, 29 June 13
  74. 74. UberFire Annotations OnStart OnSave IsDirty OnClose OnFocus OnLostFocus OnMayClose OnReveal WorkbenchEditor WorkbenchPerspective WorkbenchPopup WorkbenchScreen WorkbenchPartTitle WorkbenchPartView WorkbenchMenu Perspective Components Lifecycle Component Rendering Info Saturday, 29 June 13
  75. 75. 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; } } Saturday, 29 June 13
  76. 76. Component Annotation @WorkbenchScreen(identifier = "MyFirstPanel") public class MyFirstPanel extends SimplePanel { public MyFirstPanel() { setWidget( new Label("Hello World 1") ); } @WorkbenchPartTitle public String myTitle() { return "My First Panel!"; } } Saturday, 29 June 13
  77. 77. @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 } (...) } Component Annotation Saturday, 29 June 13
  78. 78. @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 Saturday, 29 June 13
  79. 79. @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( ) { } Saturday, 29 June 13
  80. 80. Distribution Compositions via Maven Saturday, 29 June 13
  81. 81. <project> <artifactId>uberfire-webapp</artifactId> <packaging>war</packaging> <dependencies> <dependency> <groupId>org.uberfire</groupId> <artifactId>uberfire-server</ artifactId> </dependency> <dependency> <groupId>org.uberfire</groupId> <artifactId>uberfire-client-api</ artifactId> </dependency> <dependency> <groupId>org.uberfire</groupId> <artifactId>uberfire-widgets-core- client</artifactId> </dependency> <dependency> <groupId>org.uberfire</groupId> <artifactId>uberfire-widgets-commons</ artifactId> </dependency> <dependency> <groupId>org.uberfire</groupId> <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> UberfireShowcase.gwt.xmlpom.xml Saturday, 29 June 13
  82. 82. Saturday, 29 June 13
  83. 83. Markdown Component Saturday, 29 June 13
  84. 84. <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> <groupId>org.uberfire</groupId> <artifactId>uberfire-widget- markdown</artifactId> </dependency> <dependency> <groupId>org.uberfire</groupId> <artifactId>uberfire-server</artifactId> </dependency> <dependency> <groupId>org.uberfire</groupId> <artifactId>uberfire-client-api</artifactId> </dependency> <dependency> <groupId>org.uberfire</groupId> <artifactId>uberfire-widgets-core-client</ artifactId> </dependency> <dependency> <groupId>org.uberfire</groupId> <artifactId>uberfire-widgets-commons</ artifactId> </dependency> <dependency> <groupId>org.uberfire</groupId> <artifactId>uberfire-workbench</artifactId> </dependency> (...) </dependencies> </project> UberfireShowcase.gwt.xmlpom.xml Saturday, 29 June 13
  85. 85. Saturday, 29 June 13
  86. 86. Show Case Saturday, 29 June 13
  87. 87. UberFire Showcase Saturday, 29 June 13
  88. 88. UberFire Showcase Saturday, 29 June 13
  89. 89. UberFire Showcase Saturday, 29 June 13
  90. 90. Demo Project Web IDE with Ace Editor Saturday, 29 June 13
  91. 91. UberFire Demo Project Saturday, 29 June 13
  92. 92. UberFire Demo Project Saturday, 29 June 13
  93. 93. UberFire Demo Project Saturday, 29 June 13
  94. 94. UberFire Demo Project Saturday, 29 June 13
  95. 95. UberFire Demo Project Saturday, 29 June 13
  96. 96. UberFire Demo Project Saturday, 29 June 13
  97. 97. UberFire Demo Project Saturday, 29 June 13
  98. 98. UberFire Demo Project Saturday, 29 June 13
  99. 99. Demo Saturday, 29 June 13
  100. 100. Saturday, 29 June 13
  101. 101. • http://droolsjbpm.github.io/uberfire/ • irc • irc.freenode.net • #guvnor • #drools Saturday, 29 June 13

×