Precompilation preferences in example of GWT

Slide 1

Slide 1 text

Precompilation preferences GWT example Ilja Hämäläinen Tallinn 2015

Slide 2

Slide 2 text

Agenda ● Demo ○ How it works. Quick overview. ○ Myths. ○ Development and debugging tools. ● Advantages of precompilation ● Future of GWT ○ Is GWT dead? ● Summary

Slide 3

Slide 3 text

Let’s make a new project from scratch and build it. Demo

Slide 4

Slide 4 text

1. It requires a lot of time: in real-life projects it can take more than 20-30 minutes Compilation and building

Slide 5

Slide 5 text

2. It requires a lot of hardware resources Compilation and building

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Compilation and building 3. It uses hundreds of lines of code to write simple things

Slide 8

Slide 8 text

Is it good for comfy development? It is horrible!

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Only full release workflow looks horrible. Actually… it is!

Slide 11

Slide 11 text

Let’s check the whole development flow.

Slide 12

Slide 12 text

#1 How to make compilation faster? ● Hardware ○ Uses a lot of CPU. Build in a cloud. ● Restrict amount of permutations ○ Compiler makes a lot of copies (permutations). Compile only those that you really need. (this will force generation only for Firefox)

Slide 13

Slide 13 text

Do you really need to re-build your code after each modification? #2 How to make development faster?

Slide 14

Slide 14 text

No, you don’t. There is DevMode for development.

Slide 15

Slide 15 text

Dev Mode in GWT 1 Two browsers a. Browser runs Java code “as is” (hosted browser). b. Second one is used to test already compiled JavaScript code.

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Dev Mode in GWT 2 Dev mode a. Dev mode that runs on the background and compiles code on- demand (like a hot-swap). b. Requires browser plugin. c. Will be deprecated in GWT 3.

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Dev Mode in GWT 3 Super dev mode a. Does not require any browser plugin. b. Can compile (incrementally) right from browser. c. Today all the browsers support source maps.

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Why do you need to write so much initial code? #3 Start new project.

Slide 22

Slide 22 text

● Maven archetypes ● Few backbone-like frameworks You can use for your bootstrapping: PWT Putnami Web Toolkit

Slide 23

Slide 23 text

Let’s dig into our topic. Precompilation advantages

Slide 24

Slide 24 text

Chapter 1 Dependency Injection

Slide 25

Slide 25 text

Chapter 1: Dependency Injection How it works: class A class B new B();

Slide 26

Slide 26 text

Chapter 1: Dependency Injection How it works: class A class B DI

Slide 27

Slide 27 text

Chapter 1: Dependency Injection How it works: class A interface IB DI Impl 1 Impl 2 Impl 3 Impl 4 js file js file js file js file ← permutations

Slide 28

Slide 28 text

Official term of the Dependency Injection in GWT. Deferred binding

Slide 29

Slide 29 text

1. When role is admin or moderator... 2. ... replace any occurrence of ISettings... 3. ...with SettingsAdmin Set rules in a *.gwt.xml file

Slide 30

Slide 30 text

Dependency Injection ● Generates all the variations ○ Creation of an object happens during the compilation phase rather than during runtime ● Security ○ Only allowed code comes to browser from server ● May look like server side DI ○ Ginjector (GIN) framework looks like Google Guice ● Performance ○ Browser uses only code that is needed

Slide 31

Slide 31 text

Let’s say we generate code for: ● 5 browsers ● 2 languages ● 2 roles (Admin and User) Permutations 5 x 2 x 2 = 20 permutations (20 versions of your application)

Slide 32

Slide 32 text

Compile report

Slide 33

Slide 33 text

Chapter 2: meta-programming Generate code during building phase. Demo. We create drop-down list with all the timezones:

Slide 34

Slide 34 text

Chapter 2: Code generation ● Any library/framework ○ Compilation is running on internal server rather than in browser. Thus, you are free to use any Java library or framework. ● Performance on runtime ○ Many dynamic functionalities may be pre-executed during compilation. ● Base for many other features ○ DI, RPC are fully based on code generation.

Slide 35

Slide 35 text

Chapter 3 PRC and Ajax

Slide 36

Slide 36 text

Choice 1: RPC You need to create remote interfaces, compiler will generate a code for you. Chapter 3: RPC and Ajax client side server side client code Remote Service Interface Interface Remote Service stub will be generated

Slide 37

Slide 37 text

Real world usage of RPC: 51% Chapter 3: RPC and Ajax by Vaadin

Slide 38

Slide 38 text

Choice 2.1: the old-school Ajax request. You can build JS-like Ajax request using RequestBuilder. Chapter 3: RPC and Ajax /* Original GWT RequestBuilder approach */ RequestBuilder rb = new RequestBuilder(RequestBuilder.GET, "http://httpbin.org/ip"); rb.setCallback(new RequestCallback() { @Override public void onResponseReceived(Request request, Response response) { ... } @Override public void onError(Request request, Throwable exception) { ... } }); rb.send();

Slide 39

Slide 39 text

Real world usage of RequestBuilder: 8% Chapter 3: RPC and Ajax by Vaadin

Slide 40

Slide 40 text

Chapter 3: RPC and Ajax Choice 3: resty-gwt Uses classical JAX-RS and client. client: PizzaService service = GWT.create(PizzaService.class); service.order(order, new MethodCallback() { public void onSuccess(Method method, OrderConfirmation response) { … } public void onFailure(Method method, Throwable exception) { … } }); server: public interface PizzaService extends RestService { @POST @Path("pizzaorders") public void order(PizzaOrder request, MethodCallback callback); }

Slide 41

Slide 41 text

Real world usage of RestyGWT: 6% Chapter 3: RPC and Ajax by Vaadin

Slide 42

Slide 42 text

Choice 4: additional 3rd-party libraries For example, the Requestor library which was released in January 2015… Chapter 3: RPC and Ajax requestor .req("http://httpbin.org/ip") .get(String.class) .done(new DoneCallback() { public void onDone(String result) { Window.alert(result); } }); … or using Java8 syntax requestor .req("http://httpbin.org/ip") .get(String.class) .done(r -> Window.alert(r));

Slide 43

Slide 43 text

Do you want some more coding?

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Chapter 4 Code splitting

Slide 46

Slide 46 text

Demo

Slide 47

Slide 47 text

Chapter 4: Code splitting 1. Analyzes code ○ Makes sure that extracted code is not called from anywhere. 2. Moves the splitted code out ○ After that it can be loaded asynchronously 3. Loads chunks of code on demand ○ Extracted code is not loaded immediately, but when it is necessary 4. Initial loading speed improving ○ When user loads an application, the initial time may be improved significantly Demo

Slide 48

Slide 48 text

Chapter 5 Code optimisations

Slide 49

Slide 49 text

Chapter 5: Code optimisations ○ 10 levels of optimisation ○ eliminates dead code ○ in-line simple methods ○ optimises strings ○ replaces Enum calls with values ○ checks params in a method ○ removes unnecessary code, like super() ○ set of normalisation rules - replaces common code with more optimal ○ -draftCompile flag to omit all the optimisations

Slide 50

Slide 50 text

Chapter 6 JSNI

Slide 51

Slide 51 text

JSNI - JavaScript Native Interface. Mix handwritten JavaScript into your Java source code. Chapter 7: JavaScript Native Interface public static native void alert(String msg) /*-{ $wnd.alert(msg); }-*/;

Slide 52

Slide 52 text

GWT now: is it dead? It is not dead at least until Vaadin exists.

Slide 53

Slide 53 text

● Errai ● Vaadin ● GXT ● SmartGWT GWT forks

Slide 54

Slide 54 text

New logo (2015)

Slide 55

Slide 55 text

Conferences

Slide 56

Slide 56 text

GWT Material Design New trends http://gwt-material.appspot.com/

Slide 57

Slide 57 text

It is JAVA! 1. IDEs ○ Eclipse and Intellij give more options for refactoring, code suggestions and more. 2. Building tools ○ Maven, Gradle. 3. Distributing ○ All GWT libraries are distributed as usual JAVA-application - through Central Maven repository or internal repository (Atrifactory, Nexus). ○ JavaDocs are useful for libraries. ○ Source code is downloaded by default. 4. Shared code ○ Constants, properties. ○ Simple classes (like DTOs). ○ Utilities.

Slide 58

Slide 58 text

● Small UI-widgets and decorations (sliders, effects and etc) ● Small projects ● Backenders and frontenders are separate divisions ● Consume 3rd party API using JSON ● UI Designer should know how to run a project GWT is bad for: ● Highly optimised code ● Static checking ● Shared code on Java ● Multi-team development in UI ● Java environment (tools, libs, frameworks), ideal support from IDE ● Developers work both on server and client side ● Traffic reducing GWT is good for:

Slide 59

Slide 59 text

Thank you! Questions?

Slide 60

Slide 60 text

GWTP: https://gwtp.arcbees.com/ PWT (Putnami Web Toolkit): http://pwt.putnami.org/ Resty-GWT: http://resty-gwt.github.io/ Requestor library: https://github.com/reinert/requestor Closure Stylesheets (as part of GCC): https://code.google.com/p/closure-stylesheets/ Errai: http://erraiframework.org/ References