Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular 2 boot by Arnaud Tournier

GWTcon
November 14, 2016

Angular 2 boot by Arnaud Tournier

Angular 2 boot by Arnaud Tournier
GWTcon2016 - Firenze 14-15th November 2016

http://lteconsulting.fr/angular2boot-gwtcon2016/#/

GWTcon

November 14, 2016
Tweet

More Decks by GWTcon

Other Decks in Technology

Transcript

  1. ANGULAR 2 BOOT
    Arnaud Tournier - @ltearno - LTE Consulting - GWT Con 2016 - Firenze

    View full-size slide

  2. ARNAUD TOURNIER
    LTE Consulting founder.
    Speaker: Java One, Devoxx France, GWT.create, GWTCon,
    JUGs, etc…
    Training: Java, C#, .net, Typescript, GWT, Angular 2, JavaEE,
    Spring, git…
    Email: [email protected]
    Twitter: @ltearno
    Web: www.lteconsulting.fr
    Full stack (x86_64 to JavaScript)

    View full-size slide

  3. THIS PRESENTATION IS ONLINE!
    lteconsulting.fr/angular2boot-gwtcon2016
    works on your phone too ;)
    Demo code available at
    github.com/ltearno/tour-of-heroes
    github.com/ltearno/angular2boot-
    demos

    View full-size slide

  4. ANGULAR 2 BOOT?
    A new RIA paradigm for Java : programming Angular 2 with
    Java 8.
    The coolest Java 8 RIA framework in the place ;)
    lteconsulting.fr/angular2boot

    View full-size slide

  5. A MORE TECHNICAL TITLE…
    Integrating Angular 2 and GWT 2.8:
    problems and solutions…

    View full-size slide

  6. WHY DO THAT?
    I want to bene t from the best UI coding paradigms (Data
    binding, DI, … ).
    I want strong typing and powerful IDE tools.
    I want to be more productive.
    I want to be in phase with the future.
    (I may want to progressively migrate an existing app)

    View full-size slide

  7. THE PROBLEM
    Angular 2 natively supports Typescript, Javascript and Dart.
    But Java is not in the party, let’s remedy!

    View full-size slide

  8. ANGULAR 2
    non invasive,
    modern architecture, simple and
    effective.

    View full-size slide

  9. GWT 2.8 CORE
    Java 8 (strong typing, lambdas, streams, … )
    JsInterop (easy integration with JS)
    SuperDevMode (incremental fast compile on reload)
    Optimized compilation for production (js size,
    ef ciency)

    View full-size slide

  10. JSR 269
    Java Annotation Processing API,
    Code generation integrated within Java
    compilation,
    Boilerplate code generation.

    View full-size slide

  11. SPRING BOOT
    Standalone server application (µ-service
    friendly),
    Easy to start with,
    Rich API,
    Note: Angular2Gwt works with any backend.

    View full-size slide

  12. ANGULAR
    Angular 1 was released in 2009.
    A full rewrite gave birth to Angular 2 in 2016.
    Much better and simpler architecture !

    View full-size slide

  13. ANGULAR 2 FUNDAMENTALS
    Components,
    Dependency Injection,
    Data binding and change
    detection.

    View full-size slide

  14. COMPONENTS
    Most basic building block of the application.
    A component is a class with:
    a view (an HTML template),
    and a model (data and
    methods).
    Interaction between view and model through data binding.

    View full-size slide

  15. COMPONENTS
    Each component is responsible for a part of the DOM tree.
    Components also form a tree.
    A bit like the GWT Widgets…
    Components interacts with each other through cleanly
    de ned ways.

    View full-size slide

  16. COMPONENTS TREE

    View full-size slide

  17. DEPENDENCY INJECTION
    Sharing services between components.
    Lifecycle and dependencies are managed by Angular.
    Each component has a Dependency Injector.
    Those also form a tree.

    View full-size slide

  18. DATA BINDING
    Angular uses Zone.js to track changes.
    Zones == asynchronous TLS.
    Preserve an execution context across asynchronous calls.
    (done by patching most of the browsers async functions)

    View full-size slide

  19. GWT IN ANGULAR2BOOT
    Only uses the compiler,
    JsInterop used a lot,
    No widgets, no User module (unless you want to mix legacy
    GWT and Angular).
    Because that’s how future will look like.

    View full-size slide

  20. JSR 269 - PLUGGABLE ANNOTATION
    PROCESSING API
    Shown here last year!
    Standard API for code generation in Java.
    (Used to generate the boiler plate code Angular requires.)
    Registered annotation processors receive the program’s AST
    and can then generate les (sources, byte-code or resources)
    which are part of the compilation.
    Integrated with the Java compiler.

    View full-size slide

  21. GOOD POINTS
    Generated code is visible and debuggable,
    You can reference the generated code in your code.
    No overhead at runtime.
    (Does not depend on byte code: GWT compatible)

    View full-size slide

  22. JUST ONE MORE THING
    A processor can break the compilation by outputting errors.
    It can also provide the user with tips by outputting warnings.

    View full-size slide

  23. ANGULAR2BOOT

    View full-size slide

  24. JAVA/JAVASCRIPT COMMUNICATION
    We need to make the java application communicate with the
    javascript Angular 2 runtime.
    JsInterop can do that.

    View full-size slide

  25. FEEDING ANGULAR WITH METADATAS
    Angular requires metadata on components (DI, routing,
    inputs/ouputs, … ) and uses ES7/Typescript decorators (ex
    @Component()) for this purpose.
    Those decorators alter component’s constructor at runtime
    so that less boilerplate code is required.

    View full-size slide

  26. IN JAVA?
    Annotations can play the role of decorators (ex
    @Component).
    Those are processed at compile time.
    And generate RTTI code for Angular.

    View full-size slide

  27. HOW?
    JSR-269 is used to generate RTTI,
    Use Angular JS API through JsInterop to provide the
    RTTI.
    Fetch Java class compiled JS constructor at runtime,
    Patch it with Angular required metadata,
    Provide the patched constructor function to Angular.

    View full-size slide

  28. TYPESCRIPT WRITTEN COMPONENT
    @Component( { selector: "my­hero­detail",
    templateUrl: "hero­detail.component.html",
    styleUrls: "hero­detail.component.css" } )
    export class HeroDetailComponent
    {
    @Input() hero = null;
    @Output() updated = new EventEmitter();
    HeroDetailComponent( private HeroService heroService ) {}
    ngOnInit() { ... }
    // ...
    }

    View full-size slide

  29. JAVA EQUIVALENT
    @Component( selector = "my­hero­detail",
    templateUrl = "hero­detail.component.html",
    styleUrls = "hero­detail.component.css" )
    @JsType
    public class HeroDetailComponent implements OnInit
    {
    @Input public Hero hero = null;
    @Output public EventEmitter updated = new EventEmitter<>();
    private HeroService heroService;
    public HeroDetailComponent( HeroService heroService )
    {
    this.heroService = heroService;
    }
    @Override
    public void ngOnInit() { ... }

    View full-size slide

  30. CONSISTENT SYNTAX
    The developper should be able to read JS documentation and
    know how to code in Java.
    In brief, we want syntax consistency.

    View full-size slide

  31. ARCHITECTURE

    View full-size slide

  32. NOW, THE PROBLEMS

    View full-size slide

  33. MODULE LOADING PROBLEM
    GWT is not SystemJS (ES7 modules) friendly.
    Need to generate a bundle with all Angular inside (you can
    choose/build your bundle depending on what you need).

    View full-size slide

  34. THE INSTANCEOF PROBLEM
    Angular checks at runtime that components are valid.
    With SuperDevMode, code is loaded in an external frame
    thus breaking instanceof operator.
    Few places needed to be patched (for dev mode only).

    View full-size slide

  35. BUILDING ANGULAR
    Angular 2 requires a strict environment to be built.
    Docker to the rescue!
    ⇒ From RC6 to 2.0 nal: 1 hour of work!

    View full-size slide

  36. LEGACY GWT WIDGETS INTEGRATION
    Works both ways :
    GWT widgets inside an Angular2Boot application:
    WidgetAdapterPanel.
    Angular 2 components in a legacy GWT application:
    AngularComponentContainerWidget.

    View full-size slide

  37. TESTING
    Unit tests,
    Integration
    tests.

    View full-size slide

  38. UNIT TESTS
    Dif cult to use the GWTTestCase facility
    HTMLUnit does not support Angular 2 runtime (not ES6
    compatible)
    More, GWT uses Jetty as a testing backend but we want to be
    able to use any backend (eg. SpringBoot).
    No real solution yet…

    View full-size slide

  39. INTEGRATION TESTS
    Using Selenium WebDriver and Spring integration testing
    facilities, it is done easily!

    View full-size slide

  40. FUTURE WORK, IDEAS

    View full-size slide

  41. PWA APPLICATION
    Thanks Mañolo, you inspired me ;)

    View full-size slide

  42. GENERATE UI CODE FROM MODEL OBJECTS
    Code generation is not easy in Javascript but really easy in
    Java.
    (see last year ).
    GWTCon talk on JSR-269

    View full-size slide

  43. GENERATE SERVICE ACCESS CODE FROM
    BACKEND INTERFACE
    Code generation, again…

    View full-size slide

  44. TS DEFINITIONS GENERATION
    Generate TS descriptions of Java components for easy
    integration of Java components into a TS Angular application.

    View full-size slide

  45. ANGULAR IN NASHORN FOR SERVER-SIDE
    RENDERING (ANGULAR UNIVERSAL)

    View full-size slide

  46. ANGULAR2BOOT WITH NATIVESCRIPT

    View full-size slide

  47. MODULE LOADING
    Not easy!
    Best is maybe to wait for GWT3 (J2Cl) which will be more
    ES7 module friendly.
    Will allow more AOT compilation optimizations (Angular AOT
    compiler may be able to work on the generated code).
    Better integration with JS build and packaging tools.

    View full-size slide

  48. JAVASCRIPT AND JAVA COMMMUNITIES NEED
    TO EXCHANGE!
    WebPack inspired by GWT’s code splitting,
    Problems solved by Java since 20 years should inspire
    JS!
    Dynamism of the JS ecosystem should inpire Java!

    View full-size slide

  49. USE CASES
    100% Java applications (small or big),
    Service implementations in Java (strongly typed Web
    service interfacing),
    JS, Typescript and Java integration,
    Would t well with JBoss Forge and JHipster…

    View full-size slide

  50. HOW COOL IS THAT?
    Tested on few projects, was very impressive! Work ow is
    really comfortable.
    Dead simple bootstrapping (only one maven dep, simpler
    than Angular 2 itself!).
    GWT compilation without User module (Widgets) is dead
    fast.
    Gives GWT a second youth! (only uses the core).
    Optimizations done by GWT are still very powerful: fast
    application, small download.

    View full-size slide

  51. EASY TO TRY
    mvn archetype:generate \
    ­DarchetypeGroupId=fr.lteconsulting \
    ­DarchetypeArtifactId=angular2­gwt.archetype \
    ­DarchetypeVersion=1.6
    mvn clean install # produces an executable fat jar
    java ­jar target/YOUR_ARTIFACT_ID.jar

    View full-size slide

  52. COMPILE ON RELOAD
    # Backend
    mvn spring­boot:run
    # Frontend
    mvn gwt:run­codeserver

    View full-size slide

  53. THANKS, IT WAS A PLEASURE!
    Maybe you have questions?
    Try it!
    lteconsulting.fr/angular2boot
    Twitter: @ltearno

    View full-size slide