"Migrate large gwt applications - Lessons Learned" By Harald Pehl
2 likes1,873 views
This document discusses the migration of large GWT (Google Web Toolkit) applications, detailing a specific case involving the WildFly management console. It covers the project's history, architecture improvements, new UI frameworks, and the use of various third-party libraries. Additionally, it addresses code generation, annotation processing, and the build process, as well as providing links to related resources.
![Migrate Large GWT Applications
package org.jboss.hal.processor;
@AutoService(Processor.class)
public class NameTokenProcessor extends AbstractProcessor {
private final Set<TokenInfo> tokenInfos;
public NameTokenProcessor() {
super(NameTokenProcessor.class, TEMPLATES);
tokenInfos = new HashSet<>();
}
@Override
protected boolean onProcess(Set<? extends TypeElement> annotations, RoundEnvironment roundEnv) {
for (Element e : roundEnv.getElementsAnnotatedWith(NameToken.class)) {
TypeElement tokenElement = (TypeElement) e;
NameToken nameToken = tokenElement.getAnnotation(NameToken.class);
TokenInfo tokenInfo = new TokenInfo(nameToken.value()[0]);
tokenInfos.add(tokenInfo);
...
}
return false;
}
}](https://image.slidesharecdn.com/migratelargegwtapplications-171003091709/85/Migrate-large-gwt-applications-Lessons-Learned-By-Harald-Pehl-33-320.jpg)
"Migrate large gwt applications - Lessons Learned" By Harald Pehl
- 1. Migrate Large GWT Applications MIGRATE LARGE GWT APPLICATIONS Harald Pehl, GWTCon 2017 LESSONS LEARNED
- 2. Migrate Large GWT Applications About Me Senior Software Engineer at Red Hat Component Lead of the WildFly Management Console Working with GWT since 2008 http://hpehl.info https://github.com/hpehl @haraldpehl
- 3. Migrate Large GWT Applications HAL - WildFly Management Console
- 4. Migrate Large GWT Applications History First commit Feb 8 2011 2.9.14.Final 5.723 commits / 179 releases Today200k LoC
- 5. Migrate Large GWT Applications Current Version UI GWT Stock Widgets Cell Widgets No Widget Library Stack GWT 2.8 GWTP / GIN Some Code Generation ⇨ Lots of Repeating Code ⇦
- 6. Migrate Large GWT Applications New Version UI No Widgets PatternFly 3rd Party Libraries Stack Latest GWT Version GWTP / GIN Lots of Code Generation ⇨ Cleaner Architecture ⇦
- 7. Migrate Large GWT Applications Architecture SPI CodeGeneration Resources DMR UI / Ballroom Core Metadata Application GWTP GuavaRxGWT SLF4J
- 8. Migrate Large GWT Applications Comparison 200k 112k LoC Full Build 08:11 05:44 GWT Compile 06:51 02:46
- 9. Migrate Large GWT Applications Demo http://localhost:9090/
- 10. Migrate Large GWT Applications User Interface
- 11. Migrate Large GWT Applications MBUI Elemento 3rd Party Libs PatternFly
- 12. Migrate Large GWT Applications PatternFly UI Framework for Enterprise Web Applications Pattern Library ● Communication ● Content Views ● Data Visualization ● Forms & Control, Navigation & Widgets Common Styles, Colors & Icons
- 13. Migrate Large GWT Applications
- 14. Migrate Large GWT Applications Elemento Type Safe Builders and Event Handlers HTML Templates w/ Expression Support Helper Methods
- 15. Migrate Large GWT Applications HTMLDivElement div = div().css(progressContainewr) .add(div().css(progressDescription) .title(label) .textContent(label)) .add(div().css(progressCss) .add(valueBar = div().css(progressBar) .title(Names.NOT_AVAILABLE) .attr(ROLE, PROGRESSBAR) .aria(VALUE_MIN, "0") .add(valueElement = span().asElement()) .asElement()) .add(remainingBar = div().css(progressBar, progressBarRemaining) .title(Names.NOT_AVAILABLE) .add(remainingElement = span().css(srOnly).asElement()) .asElement())) .asElement();
- 16. Migrate Large GWT Applications public class Breadcrumb implements IsElement<HTMLElement> { private final HTMLElement root; public Breadcrumb() { root = ol().css(breadcrumb).asElement(); } public void clear() { Elements.removeChildrenFrom(root); } public Breadcrumb append(String segment, SegmentHandler handler) { root.appendChild(li() .add(a().css(clickable) .textContent(segment) .on(click, e -> handler.onClick())) .asElement()); return this; } @Override public HTMLElement asElement() { return root; } }
- 17. Migrate Large GWT Applications XML schema for common UI building blocks Navigation Tables HTML Forms CRUD Operations Annotation Processor MBUI
- 18. Migrate Large GWT Applications <sub-item id="ejb-thread-pool-item" title="Thread Pool"> <metadata address="/{selected.profile}/subsystem=ejb3/thread-pool=*"> <h1>Thread Pool</h1> <p>${metadata.getDescription().getDescription()}</p> <table id="ejb-thread-pool-table" title="Thread Pool" form-ref="ejb-thread-pool-form"> <actions> <action handler-ref="add-resource"/> <action handler-ref="remove-resource" scope="selected" name-resolver="${table.selectedRow().getName()}"/> </actions> <columns> <column name="name" value="${row.getName()}"/> </columns> </table> <form id="ejb-thread-pool-form" title="Thread Pool" auto-save="true" reset="true" name-resolver="${form.getModel().getName()}"/> </metadata> </sub-item>
- 19. Migrate Large GWT Applications @MbuiView public abstract class EjbView extends MbuiViewImpl<EjbPresenter> implements EjbPresenter.MyView { public static EjbView create(MbuiContext mbuiContext) { return new Mbui_EjbView(mbuiContext); } @MbuiElement("ejb-thread-pool-table") Table<NamedNode> threadPoolTable; @MbuiElement("ejb-thread-pool-form") Form<NamedNode> threadPoolForm; EjbView(MbuiContext mbuiContext) { super(mbuiContext); } }
- 20. Migrate Large GWT Applications http://localhost:9090/#ejb3-configuration
- 21. Migrate Large GWT Applications 3rd Party Libraries "dependencies": { "ace-builds": "^1.2.6", "datatables.net": "~1.10.13", "datatables.net-buttons": "~1.2.2", "datatables.net-keytable": "^2.1.3", "datatables.net-select": "~1.2.0", "font-awesome": "~4.7.0", "js-cookie": "~2.1.3", "javascript-auto-complete": "1.0.4", "jquery": "~2.2.4", "jstree": "~3.3.3", "patternfly": "~3.26.1", "tagmanager": "~3.0.2", "zeroclipboard": "^2.2.0" }
- 22. Migrate Large GWT Applications @JsType(isNative = true) public abstract class Modal { @JsFunction @FunctionalInterface public interface ModalHandler { void handle(); } @JsType(isNative = true, namespace = GLOBAL, name = OBJECT) public static class ModalOptions { public boolean keyboard; @JsOverlay public static ModalOptions create(boolean closeOnEsc) { ModalOptions options = new ModalOptions(); options.keyboard = closeOnEsc; return options; } } @JsMethod(namespace = GLOBAL) public native static Modal $(@NonNls String selector); public native void modal(ModalOptions modalOptions); public native void on(@NonNls String event, ModalHandler handler); }
- 23. Migrate Large GWT Applications Model View Presenter
- 24. Migrate Large GWT Applications MVP GWTP ● DI through GIN ● Simple and powerful history management ● Support for nested presenters ● Lifecycle events using GWT eventbus ● Lazy instantiation for presenters and views ● Effortless and efficient code splitting Widget ↔ Elemental2 Adapter
- 25. Migrate Large GWT Applications Escape From Callback Hell
- 26. Migrate Large GWT Applications RxGWT GWT specific bindings for RxJava Turn callbacks into “Rx types” Developed and maintained by @ibaca Documentation ● http://reactivex.io/ ● https://github.com/ReactiveX/RxJava ● https://github.com/intendia-oss/rxgwt
- 27. Migrate Large GWT Applications interface FooService extends RemoteService { void prepare(); void main(); void cleanup(); } interface FooServiceAsync { void prepare(AsyncCallback<Void> async); void main(AsyncCallback<Void> async); void cleanup(AsyncCallback<Void> async); }
- 28. Migrate Large GWT Applications public class ExecuteInOrder implements EntryPoint { @Override public void onModuleLoad() { FooServiceAsync service = GWT.create(FooService.class); service.prepare(new AsyncCallback<Void>() { public void onFailure(Throwable throwable) { console.log("Failed: " + throwable.getMessage()); } public void onSuccess(Void aVoid) { service.main(new AsyncCallback<Void>() { public void onFailure(Throwable throwable) { console.log("Failed: " + throwable.getMessage()) } public void onSuccess(Void aVoid) { service.cleanup(new AsyncCallback<Void>() { public void onFailure(Throwable throwable) { console.log("Failed: " + throwable.getMessage()) } public void onSuccess(Void aVoid) { console.log("Finished") } }); } }); } }); } }
- 29. Migrate Large GWT Applications public class ExecuteInOrder implements EntryPoint { @Override public void onModuleLoad() { FooServiceAsync service = GWT.create(FooService.class); Completable prepare = Completable.fromEmitter(em -> service.prepare(callback(em))); Completable main = Completable.fromEmitter(em -> service.main(callback(em))); Completable cleanup = Completable.fromEmitter(em -> service.cleanup(callback(em))); Completable.concat(prepare, main, cleanup) .doOnError(throwable -> console.log("Failed: " + throwable.getMessage())) .doOnCompleted(() -> console.log("Finished")) .subscribe(); } AsyncCallback<Void> callback(CompletableEmitter emitter) { return new AsyncCallback<Void>() { @Override public void onFailure(Throwable throwable) { emitter.onError(throwable); } @Override public void onSuccess(Void aVoid) { emitter.onCompleted(); } }; } }
- 30. Migrate Large GWT Applications public class RxDemo implements EntryPoint { @Override public void onModuleLoad() { Observable.interval(1, SECONDS) .take(10) .flatMapSingle(this::xhr) .forEach(timestamp -> console.log(timestamp)); } Single<String> xhr(long id) { String url = "http://server.test-cors.org/server?enable=true&id=" + id; return Single.fromEmitter(emitter -> { XMLHttpRequest xhr = new XMLHttpRequest(); xhr.open("GET", url); xhr.onload = event -> emitter.onSuccess(new Date().toLocaleTimeString()); xhr.send(); }); } }
- 31. Migrate Large GWT Applications Annotation Processing
- 32. Migrate Large GWT Applications Annotation Processing Registries Composite GIN MBUI EsDoc
- 33. Migrate Large GWT Applications package org.jboss.hal.processor; @AutoService(Processor.class) public class NameTokenProcessor extends AbstractProcessor { private final Set<TokenInfo> tokenInfos; public NameTokenProcessor() { super(NameTokenProcessor.class, TEMPLATES); tokenInfos = new HashSet<>(); } @Override protected boolean onProcess(Set<? extends TypeElement> annotations, RoundEnvironment roundEnv) { for (Element e : roundEnv.getElementsAnnotatedWith(NameToken.class)) { TypeElement tokenElement = (TypeElement) e; NameToken nameToken = tokenElement.getAnnotation(NameToken.class); TokenInfo tokenInfo = new TokenInfo(nameToken.value()[0]); tokenInfos.add(tokenInfo); ... } return false; } }
- 34. Migrate Large GWT Applications <#-- @ftlvariable name="generatedWith" type="java.lang.String" --> <#-- @ftlvariable name="packageName" type="java.lang.String" --> <#-- @ftlvariable name="className" type="java.lang.String" --> <#-- @ftlvariable name="tokenInfos" type="java.util.Set<org.jboss.hal.processor.NameTokenProcessor.TokenInfo>" --> package ${packageName}; import ... /* * WARNING! This class is generated. Do not modify. */ @Generated("${generatedWith}") public class ${className} implements org.jboss.hal.meta.token.NameTokens { private final Set<String> tokens; public ${className}() { this.tokens = new HashSet<>(); <#list tokenInfos as tokenInfo> this.tokens.add("${tokenInfo.token}"); </#list> } @Override public Set<String> getTokens() { return tokens; } }
- 35. Migrate Large GWT Applications Annotation Processing Freemarker Templates Use 3rd party libraries ● https://github.com/google/auto/tree/master/common ● https://github.com/google/auto/tree/master/service Test your annotation processor! ● https://github.com/google/compile-testing
- 36. Migrate Large GWT Applications public class FormTest { @Test public void simpleForm() { Compilation compilation = javac() .withOptions("-proc:only") .withProcessors(new MbuiViewProcessor()) .compile(JavaFileObjects.forResource("SimpleForm.java")); assertThat(compilation) .generatedSourceFile("Mbui_SimpleForm") .hasSourceEquivalentTo( JavaFileObjects.forResource("Mbui_SimpleForm.java")); } }
- 37. Migrate Large GWT Applications Build Process
- 38. Migrate Large GWT Applications Build & Run Maven First 3rd Party Libraries: Frontend Maven Plugin ● NPM ● Bower ● Grunt Build: Maven Plugin for GWT by Thomas Broyer Run: Browser Dev Tools
- 39. Migrate Large GWT Applications Open Issues
- 40. Migrate Large GWT Applications Open Issues GIN Code Splitting JSNI GWT.create() ClientBundle / i18n
- 41. Migrate Large GWT Applications Links https://github.com/hal/hal.next/ https://github.com/hal/elemento http://www.patternfly.org/ http://wildfly.org/
- 42. Migrate Large GWT Applications Thanks! Questions?