Angular 2 boot by Arnaud Tournier

3e8bbe56bf459ee2b5f4ca79fd63efde?s=47 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/#/

3e8bbe56bf459ee2b5f4ca79fd63efde?s=128

GWTcon

November 14, 2016
Tweet

Transcript

  1. ANGULAR 2 BOOT Arnaud Tournier - @ltearno - LTE Consulting

    - GWT Con 2016 - Firenze
  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: ltearno@gmail.com Twitter: @ltearno Web: www.lteconsulting.fr Full stack (x86_64 to JavaScript)
  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
  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
  5. A MORE TECHNICAL TITLE… Integrating Angular 2 and GWT 2.8:

    problems and solutions…
  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)
  7. THE PROBLEM Angular 2 natively supports Typescript, Javascript and Dart.

    But Java is not in the party, let’s remedy!
  8. THE RECIPE

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

  10. 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)
  11. JSR 269 Java Annotation Processing API, Code generation integrated within

    Java compilation, Boilerplate code generation.
  12. SPRING BOOT Standalone server application (µ-service friendly), Easy to start

    with, Rich API, Note: Angular2Gwt works with any backend.
  13. ANGULAR Angular 1 was released in 2009. A full rewrite

    gave birth to Angular 2 in 2016. Much better and simpler architecture !
  14. ANGULAR 2 FUNDAMENTALS Components, Dependency Injection, Data binding and change

    detection.
  15. 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.
  16. 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.
  17. COMPONENTS TREE

  18. None
  19. DEPENDENCY INJECTION Sharing services between components. Lifecycle and dependencies are

    managed by Angular. Each component has a Dependency Injector. Those also form a tree.
  20. 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)
  21. 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.
  22. 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.
  23. 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)
  24. JUST ONE MORE THING A processor can break the compilation

    by outputting errors. It can also provide the user with tips by outputting warnings.
  25. ANGULAR2BOOT

  26. THE BASICS

  27. JAVA/JAVASCRIPT COMMUNICATION We need to make the java application communicate

    with the javascript Angular 2 runtime. JsInterop can do that.
  28. 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.
  29. IN JAVA? Annotations can play the role of decorators (ex

    @Component). Those are processed at compile time. And generate RTTI code for Angular.
  30. 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.
  31. 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() { ... } // ... }
  32. 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<Hero> updated = new EventEmitter<>(); private HeroService heroService; public HeroDetailComponent( HeroService heroService ) { this.heroService = heroService; } @Override public void ngOnInit() { ... }
  33. CONSISTENT SYNTAX The developper should be able to read JS

    documentation and know how to code in Java. In brief, we want syntax consistency.
  34. ARCHITECTURE

  35. NOW, THE PROBLEMS

  36. 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).
  37. 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).
  38. 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!
  39. LEGACY GWT WIDGETS INTEGRATION Works both ways : GWT widgets

    inside an Angular2Boot application: WidgetAdapterPanel. Angular 2 components in a legacy GWT application: AngularComponentContainerWidget.
  40. TESTING Unit tests, Integration tests.

  41. 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…
  42. INTEGRATION TESTS Using Selenium WebDriver and Spring integration testing facilities,

    it is done easily!
  43. FUTURE WORK, IDEAS

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

  45. 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
  46. GENERATE SERVICE ACCESS CODE FROM BACKEND INTERFACE Code generation, again…

  47. TS DEFINITIONS GENERATION Generate TS descriptions of Java components for

    easy integration of Java components into a TS Angular application.
  48. ANGULAR IN NASHORN FOR SERVER-SIDE RENDERING (ANGULAR UNIVERSAL)

  49. ANGULAR2BOOT WITH NATIVESCRIPT

  50. 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.
  51. CONCLUSIONS

  52. 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!
  53. 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…
  54. 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.
  55. 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
  56. COMPILE ON RELOAD # Backend mvn spring­boot:run # Frontend mvn

    gwt:run­codeserver
  57. DEMO

  58. THANKS, IT WAS A PLEASURE! Maybe you have questions? Try

    it! lteconsulting.fr/angular2boot Twitter: @ltearno