Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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)

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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)

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

THE RECIPE

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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)

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

COMPONENTS TREE

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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)

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

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)

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

ANGULAR2BOOT

Slide 26

Slide 26 text

THE BASICS

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

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() { ... } // ... }

Slide 32

Slide 32 text

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() { ... }

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

ARCHITECTURE

Slide 35

Slide 35 text

NOW, THE PROBLEMS

Slide 36

Slide 36 text

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).

Slide 37

Slide 37 text

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).

Slide 38

Slide 38 text

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!

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

TESTING Unit tests, Integration tests.

Slide 41

Slide 41 text

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…

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

FUTURE WORK, IDEAS

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

ANGULAR2BOOT WITH NATIVESCRIPT

Slide 50

Slide 50 text

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.

Slide 51

Slide 51 text

CONCLUSIONS

Slide 52

Slide 52 text

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!

Slide 53

Slide 53 text

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…

Slide 54

Slide 54 text

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.

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

DEMO

Slide 58

Slide 58 text

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