Make Enterprise Applications development easy, fast and reliable: productive-GWT.

Transcript

1. Make Enterprise Applications
   development easy, fast and reliable:
   productive-GWT.
   By and
   Luca Masini Alberto Mancini
   

   View Slide

2. Speakers
   Luca Masini Software Engineer
   Architect
   Developer
   @lmasini - luca.masini@gmail.com
   Alberto Mancini Freelance Software Developer
   Linux Sysadmin
   GWT Artisan
   #Javascript #Java
   @usernamelibero - alberto@jooink.com
   Thanks to and
   Rosanna Rinaldi Francesca Tosi
   

   View Slide

3. Motivating forces
   We need
   A programming model that can lower the barrier of using GWT as
   the GUI framework...
   ..helped by an archetype for fast startup of new enterprise
   application project
   

   View Slide

4. Target
   A coherent layout
   Integration with an external provisioning system for user and
   application data
   Simplified REST call
   GWT Widgets that let the developer ignore the underlying
   HTML5/CSS
   This was done gluing together some carefully chosen available
   frameworks.
   

   View Slide

5. Why not the sexy XXX
   framework ?
   Here a snippet of code using ProductiveGWT
   @MenuEntry(text = "Catalogue") //Integration with GUI...
   @RestrictedAccess(roles = SecurityRoles.RESPONSABILE) ///...and Security
   @Page // Navigation integrated with browser history
   public class CataloguePage extends AbstractRicercaView {
   // Declarative and type-safe UI-Binder
   interface Binder extends UiBinder {
   Binder INSTANCE = GWT.create(Binder.class);
   }
   @Inject // Service call interface
   Caller catalogueServiceCaller;
   // My Business code
   

   View Slide

6. AngularJS (v1)
   https://www.thoughtworks.com/radar/languages-and-frameworks
   

   View Slide

7. ReactJS
   It took 20 years to escape from JSP and ASP.
   Now Facebook has invented JSX, so that we can mix JavaScript and
   HTML:
   But Flux is very interesting !!!
   class App extends React.Component {
   render() {
   var i = 1;
   return (
   
   {i == 1 ? 'True!' : 'False'}
   
   );
   }
   }
   

   View Slide

8. Material Design
   

   View Slide

9. Material Design
   

   View Slide

10. Tech choices
    GWT 2.8 (of course)
    GWT Material 1.6 (soon 2.0)
    Errai Framework 4
    

    View Slide

11. GWT 2.8
    Java 8 is cool but....
    2.8 compile time is higher than in 2.7
    More memory usage (+80%)
    Variables name now are even more cryptically and still no
    support from Source Maps
    

    View Slide

12. GWT 2.8
    

    View Slide

13. GWT Material
    Chosen because it's ready to use in production now
    No Google's Material Design Light, we want GWT Widgets and few
    CSS3/HTML5 (distraction free coding)
    We are interested observers of gwt-polymer project...
    ...and the brand new GXT5
    

    View Slide

14. Errai Framework
    Dagger 2 is ligther and can wire applications like Errai CDI does,
    but...
    ...with Errai CDI we use the same programming model on client
    code and server code
    We also used a lot "Errai Navigation", "Errai Security" and "Errai
    JAX-RS"
    

    View Slide

15. View Slide

16. General structure of the project
    Archetype Generation of the project
    Errai Wiring, navigation, security,
    straightforward JAX
    Menu generation Java Annotation Processing (APT)
    

    View Slide

17. Archetype
    

    View Slide

18. Archetype
    

    View Slide

19. Archetype
    @MenuEntry(text = "Home, default page", order = 0)
    @RestrictedAccess(roles = {"gwtcon-admin", "gwtcon-user"})
    @Page(role = DefaultPage.class, path = "/home")
    public class Home extends HTML {
    @Inject BootstrapData bootstapData;
    @PageShowing private void setup() {
    }
    }
    

    View Slide

20. ERRAI Framework
    Errai Navigation
    easy, annotation based, history,
    typed inter apps (page) transitions;
    Errai Security
    clean, annotation based, authorization,
    SecurityContext;
    Errai JAX-RS
    REST-based Web services
    client-side interceptors
    Errai IOC
    @Inject
    @Alternative, customization
    

    View Slide

21. ERRAI Framework
    Errai Navigation to ...
    declare page with Page Annotation over the
    classes
    @Page(role = DefaultPage.class, path = "/home")
    public class Home extends HTML {...}
    navigate between pages
    @Inject TransitionTo transition;
    ...
    transition.go();
    

    View Slide

22. ERRAI Framework
    Errai Security to ...
    restrict access through Rescricted Access
    Annotation over:
    Pages and UI elements
    @Page(role = DefaultPage.class, path = "/home")
    @RestrictedAccess(roles = {"gwtcon-admin", "gwtcon-user"})
    public class Home extends HTML {
    @RestrictedAccess(roles = {"gwtcon-admin"})
    @Inject @DataField private Button sendLogo;
    ...
    }
    REST resources
    @GET @Path("/{id}")
    @Produces(MediaType.APPLICATION_JSON)
    @RestrictedAccess(roles = "gwtcon-admin")
    public Customer find(@PathParam("id") long id);
    

    View Slide

23. ERRAI Framework
    IOC to ...
    obtain user informations and application data through DI
    @Inject BootstrapData bootstrapData;
    ...
    Window.alert(bootstrapData.getUserInfo().getUsername());
    ...
    Window.alert(bootstrapData.getApplicationName());
    Window.alert(bootstrapData.getServerName());
    

    View Slide

24. ERRAI Framework
    IOC and Alternative to ...
    customize the SplashPage through an instance
    of AppView
    @Inject AppView appView;
    ...
    appView.getSplashScreen().setText("Splash … ");
    customize the SplashPage creating an
    alternative for SplashScreen and activating it
    into ErraiApp.properties
    @Alternative
    public class CustomSplashScreen implements SplashScreen {...}
    errai.ioc.enabled.alternatives=
    com.gwtcon.productivegwt.client.ui.CustomSplashScreen
    

    View Slide

25. ERRAI Framework
    Intercerptors to ...
    handle Async Callback through interceptors over REST
    resources
    @GET
    @Path("/{id}")
    @Produces(MediaType.APPLICATION_JSON)
    @InterceptedCall(RequestInterceptor.class)
    public Customer find(@PathParam("id") long id);
    

    View Slide

26. Annotation
    @MenuEntry
    Using APT
    From scratch
    Needs, sort of, global knowledge
    

    View Slide

27. Annotation
    The processor
    Hook on all classes
    @AutoService(Processor.class)
    @SupportedAnnotationTypes(value = {"*"})
    process, cache and emit
    @Override
    public boolean process(Set< ? extends TypeElement> elements,
    RoundEnvironment env) {
    if (env.processingOver()) { //last round, we can write
    //generate the 'menu' with the inforations from the pages-database
    } else {
    //.... enlist in the pages-database the current page
    }
    

    View Slide

28. Thanks!
    By and
    Luca Masini Alberto Mancini
    

    View Slide