SlideShare a Scribd company logo
Rock solid UI modeling using
   annotation processing
         Case of study
          @gdigugli
          @jubaudry
Speakers
• @gdigugli – Gilles Di Guglielmo     • @jubaudry – Julien Baudry
• Java Developer since 1999           • Java Developer since 2007
• Software architect at               • Senior developer at




• ILOG – IBM                          • Prima-Solutions
     2D Graphic toolkit                  SOA Platform for J2EE
     Rule Engine                         Domain models code generators
• Prima-Solutions                         Reinsurance software
     SOA Platform for J2EE
     Domain models code generators
Agenda
       Context
     Quick demo
 Modeling approach
 Dependency Model
    Field features
      Extensions
  Live coding demo
Back to LesFurets.com
Context at LesFurets.com
• 5 questions sets for an insurance aggregator
     Car form (160 questions)
     Motorbike form (180 questions)
     Health form (50 questions)
     Home form (70 questions)
     Loan form (40 questions)
• A lot of questions with business rules linked by
  dependencies and business rules
Sample : old question set for motorbike
Nature of dependencies
• Visibility
    I declare a claim -> question set for this child appears
• Value range
    I’ve been owning a car for one year -> constraint on the
     date for a claim should be later than the car’s purchase
     date
• Reset
    I change the number of occurred claims from 2 to 1 ->
     previous details of claim number 2 should be dropped
• Validation
    I change my date of birth -> I could not obtain my car
     license before being 18 years old
Complexity and bug hell
• Historical design was      • Governance of the business
  based on a page scope        rules between fields was
• All the rules between        difficult
  fields were embedded in    • Lots of side effects between
  each page code               rules
• Business rules were        • Improving or adding new
  directly written on the
  widget values without        rules provided a lot of
  MVC pattern                  regressions
• Page navigation was        • Dependencies between
  triggering model updates     fields was not documented
  that were sent to the      • Adding new fields or
  server                       shuffling the fields order
                               required a lot of testing
The CSS ids : a limited starting point
• All the form fields were still having a CSS class
  and an ID for CSS skinning
     No real taxonomy
     No guaranty that CSS ids are unique
     Styling is evolving with his own constraints
     Not the original purpose of CSS


                Using CSS on web forms hides an
                implicit model that could be leveraged
Requirements
• Ensuring non regression even with frequent
  changes on forms
   No unexpected side effects between business rules
   Make unit testing possible
• Enabling a fast and up-to-date understanding of
  the form complexity
• Reducing the maintenance effort
• Supporting fields shuffle
• Supporting AB testing
MDL4UI our OSS sandbox
• Available on github
     http://github.com/lesfurets/mdl4ui
•   Full framework and example
•   Based on GWT and Twitter bootstrap
•   Ready to fork and play
•   Requires Java 6+ and Maven
•   50 sec to build and run from scratch

            WE ACCEPT PULL REQUESTS
Context

    Quick demo

 Modeling approach

 Dependency model

    Field features

     Extensions

  Live coding demo

Back to LesFurets.com
Context

    Quick demo

 Modeling approach

 Dependency model

    Field features

     Extensions

  Live coding demo

Back to LesFurets.com
MDL4UI model concepts




                    Screen
MDL4UI model concepts




                    Blocks
MDL4UI model concepts




                   Groups
MDL4UI model concepts




                    Fields
Introducing MDL4UI model layers
     FieldID – GroupID – BlockID – ScreenID - ScenarioID      MetaModel


                                 Customization layer


EFieldSample – EGroupSample – BlockSample - EScreenSample        Model



                                                            Model Instance
               Field – Group – Block - Screen
                                                              (runtime)


                                                            View of the MVC
      FieldView – GroupView – BlockView - ScreenView
                                                            pattern (runtime)
FieldID – GroupID – BlockID – ScreenID - ScenarioID                                            MetaModel



                                   UI Elem ent
                         elementTy  pe() : ElementTy [1]
                                                     pe                        We define a UI MetaModel, and
                         childs() : UIElement [0..*]                            all concept for other layers.


                                                                                          Scr eenID
                                                                       nextBlock( blockID : BlockID [1] ) : Block [1]
                                                                                                                 ID

                                   El ementID



                                                               Bl ockID
      Fi eldI D
type() : FieldTy [1]
                pe

                       Gr oupI D




                                                    Scenar ioI D
                              screens() : ScreenID [0..*]
                              nextScreen( screenID : ScreenID [1] ) : ScreenID [1]
Customization layer

 EFieldSample – EGroupSample – BlockSample - EScreenSample                                                              Model


                                     UI Elem ent                                                         Scenar ioI D
                           elementTy  pe() : ElementTy [1]
                                                       pe                         screens() : ScreenID [0..*]
                           childs() : UIElement [0..*]                            nextScreen( screenID : ScreenID [1] ) : ScreenID [1]



          Fi eldI D                  El ementID
                                                                                  Scr eenID
    type() : FieldTy [1]
                    pe
                                                               nextBlock( blockID : BlockID [1] ) : Block [1]
                                                                                                         ID



                                                                                   «enumeration»                           «enumeration»
     «enumeration»
                                                                                  EScr eenSampl e                        EScenar ioS am pl e
     EFi eldSam ple                              Bl ockID
                             Gr oupI D                                  SCR_REGISTRATION_BY_MAIL
FIRST_NAME                                                                                                              SCENARIO_MAIL
                                                                        SCR_REGISTRATION_BY_PHONE                       SCENARIO_PHONE
LAST_NAME                                                               SCR_DONE
EMAIL
BIRTHDATE
LANGUAGE
TIMEZONE
PHONE_NUMBER                                                 «enumeration»
EMAIL_ACCEPTED
                            «enumeration»                    EBl ockSampl e                    We define our UI model (screens,
EMAILS_PREFERENCES
MAX_WEEKLY_EMAILS          EGr oupS am pl e        PERSONAL_INFORMATIONS                           fields, etc.), only using
LOGIN
PASSWORD
                           EMAIL_GROUP             MAIL_SETTINGS
                                                   PHONE_SETTINGS
                                                                                                        enumerations.
PASSWORD_CONFIRMATION                              ACCOUNT
Model Instance
                      Field – Group – Block - Screen
                                                                                             (runtime)



                                            UI El em en t
                                                                                   We instantiate our UI model,
                                 elementTy  pe() : ElementTy [1]
                                                             pe                    with i18n resources injected.
                                 childs() : UIElement [0..*]




                                   -items    El emen t

                                     0..*


                                                                                                     Gr o u p
                                                                                           -fields
                                                                     F i eld
                                                     -label : String [1]                   0..*
       Bl o ck        -blocks                        -help : String [1]
                                  Scr een            -placeholder : String [1]
-label : String [1]   0..*                           -renderer [1]
                                                     -state : FieldState [1]
                                                     -validation : FieldValidation [1]
View of the MVC
          FieldView – GroupView – BlockView - ScreenView
                                                                                                pattern (runtime)



                                                   UI Elem ent                        We instantiate all HTML widgets
                                        elementType() : ElementType [1]               from a UI model instance, using
                                        childs() : UIElement [0..*]                      GWT and twitter bootstrap
                                                                                               frameworks.


                                                                          -childs
                                                                          -childs
                                                 El ementView             1
                                                                          -childs
                                                                          0..*
                                                                          0..*



                                                                                                  Bl ockView
            Fi eldVi ew                 Scr eenView                   Gr oupVi ew         -form : WellForm [1]
-controlGroup : ControlGroup [1]                                                          -modify : Button [1]
                                   +getScreen() : Screen [1]         -row : Row [1]       -submit : Button [1]
-validation : HelpInline [1]
                                                                                          -fieldset : Fieldset [1]
                                                                                          -actions : FormActions [1]

                                     DefaultScr eenV iew
                                   -container : Container [1]
From the point of view of a screen




                         Model     View of the
Model      MetaModel    Instance   MVC pattern
                       (runtime)    (runtime)
From the point of view of a field




                     Model Instance   View of the MVC
Model    MetaModel
                       (runtime)      pattern (runtime)
Implementing the model
Why modeling as code ?
•   Sorry we are Java developers
•   Built-in continuous integration for the model
•   No code generation required to implement the model
•   Modeling concept understanding is not required
•   Modeling stack is transparent for UI development
•   Tooling is very fast
•   Memory footprint is very low
•   A lot of consistency checking is done by the compiler
•   More benefits to come in the next slides …
Context

    Quick demo

 Modeling approach

 Dependency Model

    Field features

     Extensions

  Live coding demo

Back to LesFurets.com
We need a dependency graph
• Implementing business rules involves triggering
  the behaviors using a dependency model
• No semantics on the dependency
• Fields receive dependency events with source
  attribute
• Each field implements various features to react
  to dependency events
     Visibility of the fields
     Value range definition
     Reset of value
     Validation of value
Validation dependency
Visibility dependency
In code declarative
             dependencies modeling




•   Implemented using enumerations
•   Only direct dependency between fields
•   Reference one field as source
•   Reference multiple fields as targets
Dependencies processing
  Declared          Dependencies       Deep dependencies
dependencies           graph                resolved


 A –> B                 A              A –> B,D
 B –> D                                B –> D,A
                    C           B
 D –> A                                D –> A,B
 C –> D                     D          C –> D,A,B
Hand written code   Underlying model     Generated code
Deep dependency, dependency cycle,
         graph validation
• Cycle declaration between fields is allowed
• Deep dependencies are statically resolved
   For each field the deep dependencies are
    generated during the compilation
   Model declared in EFieldDependency[Sample]
   Deep dependency are generated in
    EFieldDeepDependency[Sample]
   Dependency order is not guaranteed
• No runtime infinite loop
Simple dependency API

public interface FieldDependencyFactory {

    FieldID[] get(FieldID fieldId);
}

• Implementation is generated by our maven plugin
• Graph is built from the FieldDependency declaration
• Deep dependencies are statically resolved for each field
     Look at the implementation EFieldDeepDependency[Sample]
• No runtime computation of the dependencies
• Safe and efficient
Code generation using a maven
             custom plugin
                                    • Model interfaces
Mdl4ui-base     Mdl4ui-model
                                    • Model declaration

                •   Implements a java code generator
                •   XMI export of the model from code
Mdl4ui-maven    •   Computes the deep dependencies graph
                •   Based on the maven project compilation
                    classpath

                • Executes the MDL4UI maven plugin
                • Loads previously compiled model in Mdl4ui-
Mdl4ui-fields     model
                • Generates the graph as code
                • Compiles the generated code
Walkthrough the model
                in a maven plugin
 void lookOver(ElementID parentId) {
   for (ElementID childId : parentId.childs()) {
     if (childId.elementType() == GROUP ||
         childId.elementType() == BLOCK)
        lookOver(childId);
     else
        System.out.println("field :" + childId);
   }
 }


• Simple tree API to explore the structure
• Easy use of recursive algorithms
Maven plugin declaration
<plugin>                                            Model instance is
 <groupId>org.mdl4ui</groupId>                          available in the maven
 <artifactId>mdl4ui-maven</artifactId>
 <executions>
                                                        project classpath
  <execution>                                           through the maven
   <id>generate-model</id>                              dependencies
   <phase>process-classes</phase>                   We load the model
   <goals>
    <goal>generateModel</goal>
                                                        from the screens
   </goals>                                             elements
   <configuration>
    <screenClasses>
      <screenClasse>org.mdl4ui.ui.sample.EScreenSample</screenClasse>
    </screenClasses>
   </configuration>
  </execution>
  ….
Context

    Quick demo

 Modeling approach

 Dependency Model

    Field features

     Extensions

  Live coding demo

Back to LesFurets.com
Goal and inspiration
• UI logic is often synonym of spaghetti code
• Decoupling UI and logic is often difficult to implement
• Slicing the logic in tiny pieces of code is the key for :
    Testability
    Governance
• Inspiration
    MVC (client side)
    JavaBean
    BeanValidation
    Injection, CDI, Guice, Dagger
• Browser runtime using JavaScript is a heavy constraint
    Inversion of control is difficult to implement
Features provided by fields
• FieldInitializer
    Initialize default value and range
• FieldEditor
    MVC pattern to sync the model during form completion
    Validation during form completion
    Reset after visibility changes
• FieldBehaviour
    Visibility update
    Dependency update
• Labeling
    Attached widget labels, help messages, place holders
FieldInitializer API
public interface FieldInitializer {   • Initialize the field during the
                                        bootstrap of the application
    void init(Field field,
              FieldEvent event);
}
FieldEditor API
                                                             • WizardContext is the
public interface FieldEditor {                                 entry point of the
                                                               domain model for
  void updateFromContext(Field field, WizardContext context,   the MVC pattern
                               FieldEvent fieldEvent);
                                                                   • updateFromContext
    void updateContext(Field field, WizardContext context,           and updateContext
                       FieldEvent fieldEvent);                       read and update the
                                                                     domain model of the
    void reset(Field field, WizardContext context,
                                                                     MVC pattern
               FieldEvent fieldEvent);
                                                                   • reset is called after a
                                                                     field is hidden or a
    FieldValidation validate(Field field, WizardContext context,
                                                                     value change from a
                             FieldEvent fieldEvent);
                                                                     dependency
}
FieldBehaviour API
public interface FieldBehaviour {               • isVisible returns the
                                                  visibility following the
    boolean isVisible(FieldID fieldId,            value of the domain
                                                  model
                      WizardContext context,
                                                • updateValue is triggered
                      FieldEvent fieldEvent);     by the dependency
                                                  management
    void updateValue(Field field,
                    WizardContext context,
                    FieldEvent event);
}
Declaring a feature of a field
@InjectSampleBehaviour(
    @OnField({ EFieldSample.EMAILS_PREFERENCES,
                 EFieldSample.MAX_WEEKLY_EMAILS }))
public class AcceptEmailsBehaviour extends DefaultBehaviour {

    @Override
    public boolean isVisible(FieldID fieldId, WizardContext context,
                             FieldEvent fieldEvent) {
      SampleContext sampleContext = (SampleContext) context;
      Boolean acceptEmail = sampleContext.getUserAccount().isAcceptEmail();
      return acceptEmail != null && acceptEmail;
    }
}
Injecting the field features with
      annotations and meta annotation
Meta annotation      Custom annotation                       Injected resource
@InjectInit          @InjectSampleInit                       Any class implementing
                     Reference one or more EFieldSample      FieldInitializer

@InjectEditor        @InjectSampleEditor                     Any class implementing
                     Reference one or more EFieldSample      FieldEditor
@InjectBehaviour     @InjectSampleBehaviour                  Any class implementing
                     Reference one or more EFieldSample      FieldBehaviour

@InjectLabel         @InjectSampleLabel                      Any interface method without
                     Reference one or more EField, EGroup,   parameter returning a String
                     EBlock and EScreen[Sample]


@InjectHelp          @InjectSampleHelp                       Any interface method without
                     Reference one or more EField, EGroup,   parameter returning a String
                     EBlock and EScreen[Sample]

@InjectPlaceHolder   @InjectSamplePlaceHolder                Any interface method without
                     Reference one or more EField, EGroup,   parameter returning a String
                     EBlock and EScreen[Sample]
The plumbing using APT
We use Annotation Processing Tool to bind together the
various field features and the fields
• APT is a standard tooling packaged with the JDK since
  Java 6
• Allows to generate source code and resources in the
  source path of the compiler during the early stage of the
  compilation process
• Source code processing based on javax.lang.model API
• Code processing is triggered by annotation
• No built-in code generator
    Use basic template mechanism to simplify source code
     generation
Generated pattern to glue things
                                     together
                                                                                                           Code generation is triggered
                                               Fi eldB eh avi our Factor y
                                     +get( fieldId : FieldID [1] ) : FieldBehaviour [1]                     by @InjectBehaviour
                                                                                                           APT processor is executed
                                                                                                            during the compilation of
                                                                                                            Mdl4ui-field project
                      «Generated»                                                     «Generated»
            Gw tFi eldB ehavi our Facto ry                                MockFi eldB ehaviour Factory     We perform some validations,
                              .. .                                                          .. .

                                                                                                            like detecting duplicated
                                                                                                            injections
                                                                                                           We use a factory pattern
              -behaviours        *                                                -behaviours      *
                                                     Fi eldB eh avi our
+isVisible( fieldId : FieldID [1], context : WizardContex [1], fieldEv : FieldEvent [1] ) : boolean [1]
                                                         t            ent
+updateValue( field : Field [1], context : WizardContext [1], event : FieldEv [1] ) : void [1]
                                                                             ent                            returning the right instance for
                                                                                                            each field
                                                                                                           An implementation for GWT
                                                    DefaultBehaviour
                                                                                                            client runtime purpose
                                                                                                           A mock implementation GWT
                                                                                                            less for unit testing purpose
Replicate the factory pattern
                 for each feald feature
Meta annotation      Feature factory

@InjectInit


@InjectEditor


@InjectBehaviour


@InjectLabel


@InjectHelp



@InjectPlaceHolder
Context

    Quick demo

 Modeling approach

 Dependency Model

    Field features

     Extensions

  Live coding demo

Back to LesFurets.com
Content of MDL4UI
• Mdl4ui-I18n : foundation framework for text resource injection, containing APT
  processors and annotations
• Mdl4ui-base: foundation framework for the UI model interfaces, containing
  APT processors and annotations
• Mdl4ui-model: model instance for our code sample, including fields and
  dependencies
• Mdl4ui-maven: maven plugin part of the foundation framework that generate
  and check the dependency graph between the fields, export the model in XMI
• Mdl4ui-fields: business rules, validation and field editors (MVC pattern) for
  our sample

• Mdl4ui-webapp: the web
                                [INFO]   Reactor Summary:
                                [INFO]
                                [INFO]   mdl4ui-root ....................................... SUCCESS [0.375s]
  application that assembles    [INFO]
                                [INFO]
                                         mdl4ui-i18n ....................................... SUCCESS [1.921s]
                                         mdl4ui-base ....................................... SUCCESS [0.829s]
                                [INFO]   mdl4ui-model ...................................... SUCCESS [2.860s]
  the code, compiles various    [INFO]
                                [INFO]
                                         mdl4ui-maven ...................................... SUCCESS [1.641s]
                                         mdl4ui-fields ..................................... SUCCESS [4.751s]
  resources with GWT and        [INFO]
                                [INFO]
                                         mdl4ui-webapp ..................................... SUCCESS [39.632s]
                                         ------------------------------------------------------------------------
                                [INFO]   BUILD SUCCESS
  adds styling                  [INFO]
                                [INFO]
                                         ------------------------------------------------------------------------
                                         Total time: 52.166s
Generate UML to
                                       understand the model
                               • Use to document the model and specify evolution
                               • Visualize the dependency graph
                               • Artifact Generated during the continuous integration
                        SCR_REG ISTRATION_ BY_PHONE


PHONE _SETTINGS : M y S ettin gs and Pho ne Numbe r
LANG UAGE :
 Language
                        TIMEZONE :
                         Tim ezone
                                               PHO NE_NU MBER
                                                  : Phone                              MDL4UI            UML
                                                  Num ber


                                                                                      ScreenID         Package
        ACCOUNT : M y Account


                                                                                       BlockID         Package
                             PASSW ORD _CO
                              NFI RMATI ON :
                              Confi rm your
                               passwor d                                              GroupID          Package
                                                                                                       Instance
LOG IN : Logi n               PASSW ORD :                                              FieldID
                               Passwor d
                                                                                                     specification
                                                                                      FieldLabel        Class
                  PE RSO NAL_INFO RM ATIO NS : M y Inform ations
LAST_NAME :              EMAI L : Emai l         BI RTHD A :
                                                           TE      FI RST_NAME :
                                                                                   FieldDependency   Dependency
 Last Nam e                                       Bi r th date      Fi rst N ame
Field tracking
• Use field features to track
   Field inputs
   Field validation errors
   Screen and block navigation

• Use of tracking results
   Find common user profiles
   Improve forms for faster input
   Find ergonomic issues
AB testing and shuffling the fields
• Define two versions of a webpage (A and B)
• Split traffic amongst those versions
• Determine which one was more successful
   Validate any new design
   Improve the conversion rate

• How it can be done?
   Define new fields and new FieldBehaviour
   Define two different scenarios
Unit testing
• Need to test fields using regression tests:
     validation rules
     field visibility update
     domain model read & update
     domain model reset

• Generated mock factories allow to execute
  features implementation without a web
  application container (GWT)
Unit testing
@Test
public void dependencies() {
  FieldDependencyFactory dependencyFactory
          = new FieldDependencySampleFactory();

    Collection<FieldID> dependencies =
      Arrays.asList(dependencyFactory.get(EMAIL_ACCEPTED));

    assertEquals(2, dependencies.size());
    assertTrue(dependencies.contains(EMAILS_PREFERENCES));
    assertTrue(dependencies.contains(MAX_WEEKLY_EMAILS));
}
Unit testing
@Test
public void visibility() {
  FieldDependencyFactory dependencyFactory = new FieldDependencySampleFactory();
  MockFieldBehaviourFactory behaviourFactory = new MockFieldBehaviourFactory();

    SampleContext context = new SampleContext();

    for (FieldID dependency : dependencyFactory.get(EMAIL_ACCEPTED)) {
      FieldBehaviour behaviour = behaviourFactory.get(dependency);

        context.getUserAccount().setAcceptEmail(false);
        assertFalse(behaviour.isVisible(dependency, context, null));

        context.getUserAccount().setAcceptEmail(true);
        assertTrue(behaviour.isVisible(dependency, context, null));
    }
}
Selenium and integration testing
• Selenium is a test automation framework for
  web applications
   sends commands to a browser
   retrieves results (parsing the DOM)


• Supports:
   Java, Ruby, Python, C#, etc.
   Firefox, Chrome, IE, iOS & Android browsers, etc.
Selenium and integration testing
• Generation of page object classes
   representing a screen or a block with selenium
    framework
   exposing methods to manipulate each fields


• Make testing easier
   hide selenium framework complexity
   minimize the test maintenance effort
Selenium and integration testing
@Test
 public void testRegistration() {
   RegistrationByMailScreen registrationScreen
                   = new RegistrationByMailScreen(getDriver());
   registrationScreen.assertDisplayed();
   registrationScreen.getPersonalInformations()//
             .assertDisplayed()//
             .setFirstName("John")//
             .setLastName("Doe")//
             .setBirthdate(new DateMidnight(1980, 1, 1))//
             .setEmail("john@doe.com")//
             .submit();
     registrationScreen.getMailSettings().assertDisplayed;
 }             «enumeration»                                 «enumeration»
              EScr eenSampl e                                EBl ockSampl e
        SCR_REGISTRATION_BY_MAIL                        PERSONAL_INFORMATIONS
        SCR_REGISTRATION_BY_PHONE                       MAIL_SETTINGS
        SCR_DONE                                        PHONE_SETTINGS
                                                        ACCOUNT
Context

    Quick demo

 Modeling approach

 Dependency Model

    Field features

     Extensions

  Live coding demo

Back to LesFurets.com
Context

    Quick demo

 Modeling approach

 Dependency Model

    Field features

     Extensions

  Live coding demo

Back to LesFurets.com
Refactoring and Agile practice
•   Opportunity based
•   12 iterations with production deployment
•   1 year of step by step refactoring
•   Test coverage from 10% to 50% (in progress)
•   Automated testing on more than 400 fields in
    5 complex forms
Project implementation timeline
Under investigation
•   Multi Variable Testing
•   Machine learning algorithm on field tracking
•   Dynamic shuffling of the fields order
•   Adaptive path for the forms completion
Enjoy MDL4UI

More Related Content

Viewers also liked

All about Arctic Foxes
All about Arctic FoxesAll about Arctic Foxes
All about Arctic Foxes
kefiore
 
JavaOne 2012 - CON11234 - Multi device Content Display and a Smart Use of Ann...
JavaOne 2012 - CON11234 - Multi device Content Display and a Smart Use of Ann...JavaOne 2012 - CON11234 - Multi device Content Display and a Smart Use of Ann...
JavaOne 2012 - CON11234 - Multi device Content Display and a Smart Use of Ann...
gdigugli
 
Koala
KoalaKoala
Koala
kefiore
 
All about Mountain Lions
All about Mountain LionsAll about Mountain Lions
All about Mountain Lions
kefiore
 
Smart annotation processing - Paris JUG
Smart annotation processing - Paris JUGSmart annotation processing - Paris JUG
Smart annotation processing - Paris JUG
gdigugli
 
Smart Annotation Processing - Marseille JUG
Smart Annotation Processing - Marseille JUGSmart Annotation Processing - Marseille JUG
Smart Annotation Processing - Marseille JUG
gdigugli
 
Marketing Research 101
Marketing Research 101Marketing Research 101
Marketing Research 101
lizbreed
 
An Economic Gardeing Project in Michigan: Libraries as Strategic Partners in ...
An Economic Gardeing Project in Michigan: Libraries as Strategic Partners in ...An Economic Gardeing Project in Michigan: Libraries as Strategic Partners in ...
An Economic Gardeing Project in Michigan: Libraries as Strategic Partners in ...
lizbreed
 
Give 'Em The Business
Give 'Em The BusinessGive 'Em The Business
Give 'Em The Business
lizbreed
 
SoftShake 2015 - DomainModel.stream()
SoftShake 2015 - DomainModel.stream()SoftShake 2015 - DomainModel.stream()
SoftShake 2015 - DomainModel.stream()
gdigugli
 
Active Job - Rails
Active Job - RailsActive Job - Rails
Active Job - Rails
Raphael Monteiro
 
GTD Getting things done presentation 06-2015
GTD Getting things done presentation 06-2015GTD Getting things done presentation 06-2015
GTD Getting things done presentation 06-2015
Raphael Monteiro
 
Economic Gardening &amp; the Role of Libraries in Serving Entrepreneurs, Mich...
Economic Gardening &amp; the Role of Libraries in Serving Entrepreneurs, Mich...Economic Gardening &amp; the Role of Libraries in Serving Entrepreneurs, Mich...
Economic Gardening &amp; the Role of Libraries in Serving Entrepreneurs, Mich...
lizbreed
 
Role of Libraries in Serving Entrepreneurs, Creating Entrepreneurial Communit...
Role of Libraries in Serving Entrepreneurs, Creating Entrepreneurial Communit...Role of Libraries in Serving Entrepreneurs, Creating Entrepreneurial Communit...
Role of Libraries in Serving Entrepreneurs, Creating Entrepreneurial Communit...
lizbreed
 

Viewers also liked (14)

All about Arctic Foxes
All about Arctic FoxesAll about Arctic Foxes
All about Arctic Foxes
 
JavaOne 2012 - CON11234 - Multi device Content Display and a Smart Use of Ann...
JavaOne 2012 - CON11234 - Multi device Content Display and a Smart Use of Ann...JavaOne 2012 - CON11234 - Multi device Content Display and a Smart Use of Ann...
JavaOne 2012 - CON11234 - Multi device Content Display and a Smart Use of Ann...
 
Koala
KoalaKoala
Koala
 
All about Mountain Lions
All about Mountain LionsAll about Mountain Lions
All about Mountain Lions
 
Smart annotation processing - Paris JUG
Smart annotation processing - Paris JUGSmart annotation processing - Paris JUG
Smart annotation processing - Paris JUG
 
Smart Annotation Processing - Marseille JUG
Smart Annotation Processing - Marseille JUGSmart Annotation Processing - Marseille JUG
Smart Annotation Processing - Marseille JUG
 
Marketing Research 101
Marketing Research 101Marketing Research 101
Marketing Research 101
 
An Economic Gardeing Project in Michigan: Libraries as Strategic Partners in ...
An Economic Gardeing Project in Michigan: Libraries as Strategic Partners in ...An Economic Gardeing Project in Michigan: Libraries as Strategic Partners in ...
An Economic Gardeing Project in Michigan: Libraries as Strategic Partners in ...
 
Give 'Em The Business
Give 'Em The BusinessGive 'Em The Business
Give 'Em The Business
 
SoftShake 2015 - DomainModel.stream()
SoftShake 2015 - DomainModel.stream()SoftShake 2015 - DomainModel.stream()
SoftShake 2015 - DomainModel.stream()
 
Active Job - Rails
Active Job - RailsActive Job - Rails
Active Job - Rails
 
GTD Getting things done presentation 06-2015
GTD Getting things done presentation 06-2015GTD Getting things done presentation 06-2015
GTD Getting things done presentation 06-2015
 
Economic Gardening &amp; the Role of Libraries in Serving Entrepreneurs, Mich...
Economic Gardening &amp; the Role of Libraries in Serving Entrepreneurs, Mich...Economic Gardening &amp; the Role of Libraries in Serving Entrepreneurs, Mich...
Economic Gardening &amp; the Role of Libraries in Serving Entrepreneurs, Mich...
 
Role of Libraries in Serving Entrepreneurs, Creating Entrepreneurial Communit...
Role of Libraries in Serving Entrepreneurs, Creating Entrepreneurial Communit...Role of Libraries in Serving Entrepreneurs, Creating Entrepreneurial Communit...
Role of Libraries in Serving Entrepreneurs, Creating Entrepreneurial Communit...
 

Similar to Rock solid UI modeling using annotation processing - CodeGeneration 2013

Cocos2d for beginners
Cocos2d for beginnersCocos2d for beginners
Cocos2d for beginners
Azukisoft Pte Ltd
 
Chapter 12 - Activity Intent
Chapter 12 - Activity  IntentChapter 12 - Activity  Intent
Chapter 12 - Activity Intent
Sittiphol Phanvilai
 
Understanding Reflection
Understanding ReflectionUnderstanding Reflection
Understanding Reflection
Tamir Khason
 
Iphone lecture imp
Iphone lecture  impIphone lecture  imp
Iphone lecture imp
Pragati Singh
 
RenderMan*: The Role of Open Shading Language (OSL) with Intel® Advanced Vect...
RenderMan*: The Role of Open Shading Language (OSL) with Intel® Advanced Vect...RenderMan*: The Role of Open Shading Language (OSL) with Intel® Advanced Vect...
RenderMan*: The Role of Open Shading Language (OSL) with Intel® Advanced Vect...
Intel® Software
 
Reactive Model-View-ViewModel Architecture
Reactive Model-View-ViewModel ArchitectureReactive Model-View-ViewModel Architecture
Reactive Model-View-ViewModel Architecture
Gyuwon Yi
 
Jeff English: Demystifying Module Development - How to Extend Titanium
Jeff English: Demystifying Module Development - How to Extend TitaniumJeff English: Demystifying Module Development - How to Extend Titanium
Jeff English: Demystifying Module Development - How to Extend Titanium
Axway Appcelerator
 
Adopting Swift Generics
Adopting Swift GenericsAdopting Swift Generics
Adopting Swift Generics
Max Sokolov
 
Mocking vtcc3 - en
Mocking   vtcc3 - enMocking   vtcc3 - en
Mocking vtcc3 - en
vgrondin
 
A Layered Architecture for the Model-driven Development of Distributed Simula...
A Layered Architecture for the Model-driven Development of Distributed Simula...A Layered Architecture for the Model-driven Development of Distributed Simula...
A Layered Architecture for the Model-driven Development of Distributed Simula...
Daniele Gianni
 
Design Patterns para Microsserviços com MicroProfile
 Design Patterns para Microsserviços com MicroProfile Design Patterns para Microsserviços com MicroProfile
Design Patterns para Microsserviços com MicroProfile
Víctor Leonel Orozco López
 
L04 Software Design Examples
L04 Software Design ExamplesL04 Software Design Examples
L04 Software Design Examples
Ólafur Andri Ragnarsson
 
Mobile Weekend Budapest presentation
Mobile Weekend Budapest presentationMobile Weekend Budapest presentation
Mobile Weekend Budapest presentation
Péter Ádám Wiesner
 
AOP on Android
AOP on AndroidAOP on Android
AOP on Android
Tibor Srámek
 
iOS overview
iOS overviewiOS overview
iOS overview
gupta25
 
Genode OS Framework
Genode OS FrameworkGenode OS Framework
Genode OS Framework
Vasily Sartakov
 
Tellurium 0.7.0 presentation
Tellurium 0.7.0 presentationTellurium 0.7.0 presentation
Tellurium 0.7.0 presentation
John.Jian.Fang
 
IOS debugging
IOS debuggingIOS debugging
IOS debugging
Dawid Planeta
 
Reflection Slides by Zubair Dar
Reflection Slides by Zubair DarReflection Slides by Zubair Dar
Reflection Slides by Zubair Dar
zubairdar6
 
How and Where in GLORP
How and Where in GLORPHow and Where in GLORP
How and Where in GLORP
ESUG
 

Similar to Rock solid UI modeling using annotation processing - CodeGeneration 2013 (20)

Cocos2d for beginners
Cocos2d for beginnersCocos2d for beginners
Cocos2d for beginners
 
Chapter 12 - Activity Intent
Chapter 12 - Activity  IntentChapter 12 - Activity  Intent
Chapter 12 - Activity Intent
 
Understanding Reflection
Understanding ReflectionUnderstanding Reflection
Understanding Reflection
 
Iphone lecture imp
Iphone lecture  impIphone lecture  imp
Iphone lecture imp
 
RenderMan*: The Role of Open Shading Language (OSL) with Intel® Advanced Vect...
RenderMan*: The Role of Open Shading Language (OSL) with Intel® Advanced Vect...RenderMan*: The Role of Open Shading Language (OSL) with Intel® Advanced Vect...
RenderMan*: The Role of Open Shading Language (OSL) with Intel® Advanced Vect...
 
Reactive Model-View-ViewModel Architecture
Reactive Model-View-ViewModel ArchitectureReactive Model-View-ViewModel Architecture
Reactive Model-View-ViewModel Architecture
 
Jeff English: Demystifying Module Development - How to Extend Titanium
Jeff English: Demystifying Module Development - How to Extend TitaniumJeff English: Demystifying Module Development - How to Extend Titanium
Jeff English: Demystifying Module Development - How to Extend Titanium
 
Adopting Swift Generics
Adopting Swift GenericsAdopting Swift Generics
Adopting Swift Generics
 
Mocking vtcc3 - en
Mocking   vtcc3 - enMocking   vtcc3 - en
Mocking vtcc3 - en
 
A Layered Architecture for the Model-driven Development of Distributed Simula...
A Layered Architecture for the Model-driven Development of Distributed Simula...A Layered Architecture for the Model-driven Development of Distributed Simula...
A Layered Architecture for the Model-driven Development of Distributed Simula...
 
Design Patterns para Microsserviços com MicroProfile
 Design Patterns para Microsserviços com MicroProfile Design Patterns para Microsserviços com MicroProfile
Design Patterns para Microsserviços com MicroProfile
 
L04 Software Design Examples
L04 Software Design ExamplesL04 Software Design Examples
L04 Software Design Examples
 
Mobile Weekend Budapest presentation
Mobile Weekend Budapest presentationMobile Weekend Budapest presentation
Mobile Weekend Budapest presentation
 
AOP on Android
AOP on AndroidAOP on Android
AOP on Android
 
iOS overview
iOS overviewiOS overview
iOS overview
 
Genode OS Framework
Genode OS FrameworkGenode OS Framework
Genode OS Framework
 
Tellurium 0.7.0 presentation
Tellurium 0.7.0 presentationTellurium 0.7.0 presentation
Tellurium 0.7.0 presentation
 
IOS debugging
IOS debuggingIOS debugging
IOS debugging
 
Reflection Slides by Zubair Dar
Reflection Slides by Zubair DarReflection Slides by Zubair Dar
Reflection Slides by Zubair Dar
 
How and Where in GLORP
How and Where in GLORPHow and Where in GLORP
How and Where in GLORP
 

Recently uploaded

Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
bellared2
 
Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17
Bhajan Mehta
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
Shiv Technolabs
 
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptxMAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
janagijoythi
 
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
Priyanka Aash
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
shanihomely
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
Priyanka Aash
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
DianaGray10
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
DianaGray10
 
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
Priyanka Aash
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
SAI KAILASH R
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
Google Developer Group - Harare
 
(CISOPlatform Summit & SACON 2024) Regulation & Response In Banks.pdf
(CISOPlatform Summit & SACON 2024) Regulation & Response In Banks.pdf(CISOPlatform Summit & SACON 2024) Regulation & Response In Banks.pdf
(CISOPlatform Summit & SACON 2024) Regulation & Response In Banks.pdf
Priyanka Aash
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
aslasdfmkhan4750
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 

Recently uploaded (20)

Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
 
Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
 
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptxMAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
 
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
 
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
(CISOPlatform Summit & SACON 2024) Cyber Insurance & Risk Quantification.pdf
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
 
(CISOPlatform Summit & SACON 2024) Regulation & Response In Banks.pdf
(CISOPlatform Summit & SACON 2024) Regulation & Response In Banks.pdf(CISOPlatform Summit & SACON 2024) Regulation & Response In Banks.pdf
(CISOPlatform Summit & SACON 2024) Regulation & Response In Banks.pdf
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 

Rock solid UI modeling using annotation processing - CodeGeneration 2013

  • 1. Rock solid UI modeling using annotation processing Case of study @gdigugli @jubaudry
  • 2. Speakers • @gdigugli – Gilles Di Guglielmo • @jubaudry – Julien Baudry • Java Developer since 1999 • Java Developer since 2007 • Software architect at • Senior developer at • ILOG – IBM • Prima-Solutions  2D Graphic toolkit  SOA Platform for J2EE  Rule Engine  Domain models code generators • Prima-Solutions  Reinsurance software  SOA Platform for J2EE  Domain models code generators
  • 3. Agenda Context Quick demo Modeling approach Dependency Model Field features Extensions Live coding demo Back to LesFurets.com
  • 4. Context at LesFurets.com • 5 questions sets for an insurance aggregator  Car form (160 questions)  Motorbike form (180 questions)  Health form (50 questions)  Home form (70 questions)  Loan form (40 questions) • A lot of questions with business rules linked by dependencies and business rules
  • 5. Sample : old question set for motorbike
  • 6. Nature of dependencies • Visibility  I declare a claim -> question set for this child appears • Value range  I’ve been owning a car for one year -> constraint on the date for a claim should be later than the car’s purchase date • Reset  I change the number of occurred claims from 2 to 1 -> previous details of claim number 2 should be dropped • Validation  I change my date of birth -> I could not obtain my car license before being 18 years old
  • 7. Complexity and bug hell • Historical design was • Governance of the business based on a page scope rules between fields was • All the rules between difficult fields were embedded in • Lots of side effects between each page code rules • Business rules were • Improving or adding new directly written on the widget values without rules provided a lot of MVC pattern regressions • Page navigation was • Dependencies between triggering model updates fields was not documented that were sent to the • Adding new fields or server shuffling the fields order required a lot of testing
  • 8. The CSS ids : a limited starting point • All the form fields were still having a CSS class and an ID for CSS skinning  No real taxonomy  No guaranty that CSS ids are unique  Styling is evolving with his own constraints  Not the original purpose of CSS Using CSS on web forms hides an implicit model that could be leveraged
  • 9. Requirements • Ensuring non regression even with frequent changes on forms  No unexpected side effects between business rules  Make unit testing possible • Enabling a fast and up-to-date understanding of the form complexity • Reducing the maintenance effort • Supporting fields shuffle • Supporting AB testing
  • 10. MDL4UI our OSS sandbox • Available on github  http://github.com/lesfurets/mdl4ui • Full framework and example • Based on GWT and Twitter bootstrap • Ready to fork and play • Requires Java 6+ and Maven • 50 sec to build and run from scratch WE ACCEPT PULL REQUESTS
  • 11. Context Quick demo Modeling approach Dependency model Field features Extensions Live coding demo Back to LesFurets.com
  • 12. Context Quick demo Modeling approach Dependency model Field features Extensions Live coding demo Back to LesFurets.com
  • 17. Introducing MDL4UI model layers FieldID – GroupID – BlockID – ScreenID - ScenarioID MetaModel Customization layer EFieldSample – EGroupSample – BlockSample - EScreenSample Model Model Instance Field – Group – Block - Screen (runtime) View of the MVC FieldView – GroupView – BlockView - ScreenView pattern (runtime)
  • 18. FieldID – GroupID – BlockID – ScreenID - ScenarioID MetaModel UI Elem ent elementTy pe() : ElementTy [1] pe We define a UI MetaModel, and childs() : UIElement [0..*] all concept for other layers. Scr eenID nextBlock( blockID : BlockID [1] ) : Block [1] ID El ementID Bl ockID Fi eldI D type() : FieldTy [1] pe Gr oupI D Scenar ioI D screens() : ScreenID [0..*] nextScreen( screenID : ScreenID [1] ) : ScreenID [1]
  • 19. Customization layer EFieldSample – EGroupSample – BlockSample - EScreenSample Model UI Elem ent Scenar ioI D elementTy pe() : ElementTy [1] pe screens() : ScreenID [0..*] childs() : UIElement [0..*] nextScreen( screenID : ScreenID [1] ) : ScreenID [1] Fi eldI D El ementID Scr eenID type() : FieldTy [1] pe nextBlock( blockID : BlockID [1] ) : Block [1] ID «enumeration» «enumeration» «enumeration» EScr eenSampl e EScenar ioS am pl e EFi eldSam ple Bl ockID Gr oupI D SCR_REGISTRATION_BY_MAIL FIRST_NAME SCENARIO_MAIL SCR_REGISTRATION_BY_PHONE SCENARIO_PHONE LAST_NAME SCR_DONE EMAIL BIRTHDATE LANGUAGE TIMEZONE PHONE_NUMBER «enumeration» EMAIL_ACCEPTED «enumeration» EBl ockSampl e We define our UI model (screens, EMAILS_PREFERENCES MAX_WEEKLY_EMAILS EGr oupS am pl e PERSONAL_INFORMATIONS fields, etc.), only using LOGIN PASSWORD EMAIL_GROUP MAIL_SETTINGS PHONE_SETTINGS enumerations. PASSWORD_CONFIRMATION ACCOUNT
  • 20. Model Instance Field – Group – Block - Screen (runtime) UI El em en t We instantiate our UI model, elementTy pe() : ElementTy [1] pe with i18n resources injected. childs() : UIElement [0..*] -items El emen t 0..* Gr o u p -fields F i eld -label : String [1] 0..* Bl o ck -blocks -help : String [1] Scr een -placeholder : String [1] -label : String [1] 0..* -renderer [1] -state : FieldState [1] -validation : FieldValidation [1]
  • 21. View of the MVC FieldView – GroupView – BlockView - ScreenView pattern (runtime) UI Elem ent We instantiate all HTML widgets elementType() : ElementType [1] from a UI model instance, using childs() : UIElement [0..*] GWT and twitter bootstrap frameworks. -childs -childs El ementView 1 -childs 0..* 0..* Bl ockView Fi eldVi ew Scr eenView Gr oupVi ew -form : WellForm [1] -controlGroup : ControlGroup [1] -modify : Button [1] +getScreen() : Screen [1] -row : Row [1] -submit : Button [1] -validation : HelpInline [1] -fieldset : Fieldset [1] -actions : FormActions [1] DefaultScr eenV iew -container : Container [1]
  • 22. From the point of view of a screen Model View of the Model MetaModel Instance MVC pattern (runtime) (runtime)
  • 23. From the point of view of a field Model Instance View of the MVC Model MetaModel (runtime) pattern (runtime)
  • 25. Why modeling as code ? • Sorry we are Java developers • Built-in continuous integration for the model • No code generation required to implement the model • Modeling concept understanding is not required • Modeling stack is transparent for UI development • Tooling is very fast • Memory footprint is very low • A lot of consistency checking is done by the compiler • More benefits to come in the next slides …
  • 26. Context Quick demo Modeling approach Dependency Model Field features Extensions Live coding demo Back to LesFurets.com
  • 27. We need a dependency graph • Implementing business rules involves triggering the behaviors using a dependency model • No semantics on the dependency • Fields receive dependency events with source attribute • Each field implements various features to react to dependency events  Visibility of the fields  Value range definition  Reset of value  Validation of value
  • 30. In code declarative dependencies modeling • Implemented using enumerations • Only direct dependency between fields • Reference one field as source • Reference multiple fields as targets
  • 31. Dependencies processing Declared Dependencies Deep dependencies dependencies graph resolved A –> B A A –> B,D B –> D B –> D,A C B D –> A D –> A,B C –> D D C –> D,A,B Hand written code Underlying model Generated code
  • 32. Deep dependency, dependency cycle, graph validation • Cycle declaration between fields is allowed • Deep dependencies are statically resolved  For each field the deep dependencies are generated during the compilation  Model declared in EFieldDependency[Sample]  Deep dependency are generated in EFieldDeepDependency[Sample]  Dependency order is not guaranteed • No runtime infinite loop
  • 33. Simple dependency API public interface FieldDependencyFactory { FieldID[] get(FieldID fieldId); } • Implementation is generated by our maven plugin • Graph is built from the FieldDependency declaration • Deep dependencies are statically resolved for each field  Look at the implementation EFieldDeepDependency[Sample] • No runtime computation of the dependencies • Safe and efficient
  • 34. Code generation using a maven custom plugin • Model interfaces Mdl4ui-base Mdl4ui-model • Model declaration • Implements a java code generator • XMI export of the model from code Mdl4ui-maven • Computes the deep dependencies graph • Based on the maven project compilation classpath • Executes the MDL4UI maven plugin • Loads previously compiled model in Mdl4ui- Mdl4ui-fields model • Generates the graph as code • Compiles the generated code
  • 35. Walkthrough the model in a maven plugin void lookOver(ElementID parentId) { for (ElementID childId : parentId.childs()) { if (childId.elementType() == GROUP || childId.elementType() == BLOCK) lookOver(childId); else System.out.println("field :" + childId); } } • Simple tree API to explore the structure • Easy use of recursive algorithms
  • 36. Maven plugin declaration <plugin>  Model instance is <groupId>org.mdl4ui</groupId> available in the maven <artifactId>mdl4ui-maven</artifactId> <executions> project classpath <execution> through the maven <id>generate-model</id> dependencies <phase>process-classes</phase>  We load the model <goals> <goal>generateModel</goal> from the screens </goals> elements <configuration> <screenClasses> <screenClasse>org.mdl4ui.ui.sample.EScreenSample</screenClasse> </screenClasses> </configuration> </execution> ….
  • 37. Context Quick demo Modeling approach Dependency Model Field features Extensions Live coding demo Back to LesFurets.com
  • 38. Goal and inspiration • UI logic is often synonym of spaghetti code • Decoupling UI and logic is often difficult to implement • Slicing the logic in tiny pieces of code is the key for :  Testability  Governance • Inspiration  MVC (client side)  JavaBean  BeanValidation  Injection, CDI, Guice, Dagger • Browser runtime using JavaScript is a heavy constraint  Inversion of control is difficult to implement
  • 39. Features provided by fields • FieldInitializer  Initialize default value and range • FieldEditor  MVC pattern to sync the model during form completion  Validation during form completion  Reset after visibility changes • FieldBehaviour  Visibility update  Dependency update • Labeling  Attached widget labels, help messages, place holders
  • 40. FieldInitializer API public interface FieldInitializer { • Initialize the field during the bootstrap of the application void init(Field field, FieldEvent event); }
  • 41. FieldEditor API • WizardContext is the public interface FieldEditor { entry point of the domain model for void updateFromContext(Field field, WizardContext context, the MVC pattern FieldEvent fieldEvent); • updateFromContext void updateContext(Field field, WizardContext context, and updateContext FieldEvent fieldEvent); read and update the domain model of the void reset(Field field, WizardContext context, MVC pattern FieldEvent fieldEvent); • reset is called after a field is hidden or a FieldValidation validate(Field field, WizardContext context, value change from a FieldEvent fieldEvent); dependency }
  • 42. FieldBehaviour API public interface FieldBehaviour { • isVisible returns the visibility following the boolean isVisible(FieldID fieldId, value of the domain model WizardContext context, • updateValue is triggered FieldEvent fieldEvent); by the dependency management void updateValue(Field field, WizardContext context, FieldEvent event); }
  • 43. Declaring a feature of a field @InjectSampleBehaviour( @OnField({ EFieldSample.EMAILS_PREFERENCES, EFieldSample.MAX_WEEKLY_EMAILS })) public class AcceptEmailsBehaviour extends DefaultBehaviour { @Override public boolean isVisible(FieldID fieldId, WizardContext context, FieldEvent fieldEvent) { SampleContext sampleContext = (SampleContext) context; Boolean acceptEmail = sampleContext.getUserAccount().isAcceptEmail(); return acceptEmail != null && acceptEmail; } }
  • 44. Injecting the field features with annotations and meta annotation Meta annotation Custom annotation Injected resource @InjectInit @InjectSampleInit Any class implementing Reference one or more EFieldSample FieldInitializer @InjectEditor @InjectSampleEditor Any class implementing Reference one or more EFieldSample FieldEditor @InjectBehaviour @InjectSampleBehaviour Any class implementing Reference one or more EFieldSample FieldBehaviour @InjectLabel @InjectSampleLabel Any interface method without Reference one or more EField, EGroup, parameter returning a String EBlock and EScreen[Sample] @InjectHelp @InjectSampleHelp Any interface method without Reference one or more EField, EGroup, parameter returning a String EBlock and EScreen[Sample] @InjectPlaceHolder @InjectSamplePlaceHolder Any interface method without Reference one or more EField, EGroup, parameter returning a String EBlock and EScreen[Sample]
  • 45. The plumbing using APT We use Annotation Processing Tool to bind together the various field features and the fields • APT is a standard tooling packaged with the JDK since Java 6 • Allows to generate source code and resources in the source path of the compiler during the early stage of the compilation process • Source code processing based on javax.lang.model API • Code processing is triggered by annotation • No built-in code generator  Use basic template mechanism to simplify source code generation
  • 46. Generated pattern to glue things together  Code generation is triggered Fi eldB eh avi our Factor y +get( fieldId : FieldID [1] ) : FieldBehaviour [1] by @InjectBehaviour  APT processor is executed during the compilation of Mdl4ui-field project «Generated» «Generated» Gw tFi eldB ehavi our Facto ry MockFi eldB ehaviour Factory  We perform some validations, .. . .. . like detecting duplicated injections  We use a factory pattern -behaviours * -behaviours * Fi eldB eh avi our +isVisible( fieldId : FieldID [1], context : WizardContex [1], fieldEv : FieldEvent [1] ) : boolean [1] t ent +updateValue( field : Field [1], context : WizardContext [1], event : FieldEv [1] ) : void [1] ent returning the right instance for each field  An implementation for GWT DefaultBehaviour client runtime purpose  A mock implementation GWT less for unit testing purpose
  • 47. Replicate the factory pattern for each feald feature Meta annotation Feature factory @InjectInit @InjectEditor @InjectBehaviour @InjectLabel @InjectHelp @InjectPlaceHolder
  • 48. Context Quick demo Modeling approach Dependency Model Field features Extensions Live coding demo Back to LesFurets.com
  • 49. Content of MDL4UI • Mdl4ui-I18n : foundation framework for text resource injection, containing APT processors and annotations • Mdl4ui-base: foundation framework for the UI model interfaces, containing APT processors and annotations • Mdl4ui-model: model instance for our code sample, including fields and dependencies • Mdl4ui-maven: maven plugin part of the foundation framework that generate and check the dependency graph between the fields, export the model in XMI • Mdl4ui-fields: business rules, validation and field editors (MVC pattern) for our sample • Mdl4ui-webapp: the web [INFO] Reactor Summary: [INFO] [INFO] mdl4ui-root ....................................... SUCCESS [0.375s] application that assembles [INFO] [INFO] mdl4ui-i18n ....................................... SUCCESS [1.921s] mdl4ui-base ....................................... SUCCESS [0.829s] [INFO] mdl4ui-model ...................................... SUCCESS [2.860s] the code, compiles various [INFO] [INFO] mdl4ui-maven ...................................... SUCCESS [1.641s] mdl4ui-fields ..................................... SUCCESS [4.751s] resources with GWT and [INFO] [INFO] mdl4ui-webapp ..................................... SUCCESS [39.632s] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS adds styling [INFO] [INFO] ------------------------------------------------------------------------ Total time: 52.166s
  • 50. Generate UML to understand the model • Use to document the model and specify evolution • Visualize the dependency graph • Artifact Generated during the continuous integration SCR_REG ISTRATION_ BY_PHONE PHONE _SETTINGS : M y S ettin gs and Pho ne Numbe r LANG UAGE : Language TIMEZONE : Tim ezone PHO NE_NU MBER : Phone MDL4UI UML Num ber ScreenID Package ACCOUNT : M y Account BlockID Package PASSW ORD _CO NFI RMATI ON : Confi rm your passwor d GroupID Package Instance LOG IN : Logi n PASSW ORD : FieldID Passwor d specification FieldLabel Class PE RSO NAL_INFO RM ATIO NS : M y Inform ations LAST_NAME : EMAI L : Emai l BI RTHD A : TE FI RST_NAME : FieldDependency Dependency Last Nam e Bi r th date Fi rst N ame
  • 51. Field tracking • Use field features to track  Field inputs  Field validation errors  Screen and block navigation • Use of tracking results  Find common user profiles  Improve forms for faster input  Find ergonomic issues
  • 52. AB testing and shuffling the fields • Define two versions of a webpage (A and B) • Split traffic amongst those versions • Determine which one was more successful  Validate any new design  Improve the conversion rate • How it can be done?  Define new fields and new FieldBehaviour  Define two different scenarios
  • 53. Unit testing • Need to test fields using regression tests:  validation rules  field visibility update  domain model read & update  domain model reset • Generated mock factories allow to execute features implementation without a web application container (GWT)
  • 54. Unit testing @Test public void dependencies() { FieldDependencyFactory dependencyFactory = new FieldDependencySampleFactory(); Collection<FieldID> dependencies = Arrays.asList(dependencyFactory.get(EMAIL_ACCEPTED)); assertEquals(2, dependencies.size()); assertTrue(dependencies.contains(EMAILS_PREFERENCES)); assertTrue(dependencies.contains(MAX_WEEKLY_EMAILS)); }
  • 55. Unit testing @Test public void visibility() { FieldDependencyFactory dependencyFactory = new FieldDependencySampleFactory(); MockFieldBehaviourFactory behaviourFactory = new MockFieldBehaviourFactory(); SampleContext context = new SampleContext(); for (FieldID dependency : dependencyFactory.get(EMAIL_ACCEPTED)) { FieldBehaviour behaviour = behaviourFactory.get(dependency); context.getUserAccount().setAcceptEmail(false); assertFalse(behaviour.isVisible(dependency, context, null)); context.getUserAccount().setAcceptEmail(true); assertTrue(behaviour.isVisible(dependency, context, null)); } }
  • 56. Selenium and integration testing • Selenium is a test automation framework for web applications  sends commands to a browser  retrieves results (parsing the DOM) • Supports:  Java, Ruby, Python, C#, etc.  Firefox, Chrome, IE, iOS & Android browsers, etc.
  • 57. Selenium and integration testing • Generation of page object classes  representing a screen or a block with selenium framework  exposing methods to manipulate each fields • Make testing easier  hide selenium framework complexity  minimize the test maintenance effort
  • 58. Selenium and integration testing @Test public void testRegistration() { RegistrationByMailScreen registrationScreen = new RegistrationByMailScreen(getDriver()); registrationScreen.assertDisplayed(); registrationScreen.getPersonalInformations()// .assertDisplayed()// .setFirstName("John")// .setLastName("Doe")// .setBirthdate(new DateMidnight(1980, 1, 1))// .setEmail("john@doe.com")// .submit(); registrationScreen.getMailSettings().assertDisplayed; } «enumeration» «enumeration» EScr eenSampl e EBl ockSampl e SCR_REGISTRATION_BY_MAIL PERSONAL_INFORMATIONS SCR_REGISTRATION_BY_PHONE MAIL_SETTINGS SCR_DONE PHONE_SETTINGS ACCOUNT
  • 59. Context Quick demo Modeling approach Dependency Model Field features Extensions Live coding demo Back to LesFurets.com
  • 60. Context Quick demo Modeling approach Dependency Model Field features Extensions Live coding demo Back to LesFurets.com
  • 61. Refactoring and Agile practice • Opportunity based • 12 iterations with production deployment • 1 year of step by step refactoring • Test coverage from 10% to 50% (in progress) • Automated testing on more than 400 fields in 5 complex forms
  • 63. Under investigation • Multi Variable Testing • Machine learning algorithm on field tracking • Dynamic shuffling of the fields order • Adaptive path for the forms completion