Best Practices - By Lofi Dewanto
0 likes•1,221 views
The document outlines best practices for bootstrapping GWT projects for beginners. It recommends choosing a UI framework like GWTBootstrap3 at the start for simplicity. For microservice-based UIs, it suggests using techniques like TURDUCKEN for composition and InterApp EventBus for communication. It also provides solutions for running UIs independently by mocking services, and integrating GWT UIs into existing web apps by downloading JavaScript. The summary emphasizes that GWT remains well-suited for Java-based single page apps due to its programming model and ability to use Java semantics. It also notes that table/grid components and documentation could be improved.
Best Practices - By Lofi Dewanto
- 1. Best Practices Bootstrap GWT Projects for Beginners B. Lofi Dewanto, 2017
- 2. GWTCon 2017 - Best Practices for Beginners | 2017Seite 2 Blasius Lofi Dewanto Team Leader Application Development @ Interseroh Zero Waste Solutions https://www.interseroh.de
- 3. Agenda GWTCon 2017 - Best Practices for Beginners | 2017Seite 3 • Challenges and Objectives • Best Practices • Summary • Discussion GWT User Perspective
- 4. • Junior, intermediate Java developers • Experiences in Servlet, JSP also Spring MVC • No GWT experience • Reviewed projects: 5 domain projects • Team: 3 – 10 developers • Timeline: 3 years • Web apps with Spring, REST and JPA • Web apps – Microservices with Spring Boot, REST and JPA Challenges GWTCon 2017 - Best Practices for Beginners | 2017Seite 4 Intermediate in Java, Beginner in GWT GWT because of Java!
- 5. Technology Stack - Example GWTCon 2017 - Best Practices for Beginners | 2017Seite 5 Today: Microservice with Docker Container Java Virtual Maschine App Server: Tomcat (contained in Spring Boot) Docker - Rancher Presentation Layer: Java2JavaScript Transpiler mit GWT und GwtBootstrap3 Data Access: Hibernate Database: Oracle BPMN: Signavio, Camunda, UML: MagicDraw, KissMDA Operating System: Linux Business Logic: Spring Boot – Swagger – REST / JSON
- 6. • How to make GWT easily accessible for beginners? • How to bootstrap your GWT project successfully? • Fast • Easy • Secure • Fun! Objectives GWTCon 2017 - Best Practices for Beginners | 2017Seite 6 Successful GWT Project
- 7. GWTCon 2017 - Best Practices for Beginners | 2017Seite 7 Best Practices
- 8. Best Practices • Environment and Architecture (EA) • Microservice-oriented and Integration with available web apps (MSAI) • Programming Model (PROGM) • Module, Structure and Components (MSC) • Security (SEC) GWTCon 2017 - Best Practices for Beginners | 2017Seite 8 Categories
- 9. Choose your UI Framework Problem: a lot of choices in GWT planet, difficult to bootstrap • UI frameworks • Standard • GwtBootstrap3, GwtMaterialDesign • GXT, Smart GWT, Vaadin, … • Basic frameworks • Errai Framework • ArcBees GWTP • Vaadin (with server-side implementation), … GWTCon 2017 - Best Practices for Beginners | 2017Seite 9 EA: Standard, GwtBootstrap3, GXT, … Struts Spring MVC Enhydra Stripes Wicket JSF Tapestry Echo RIFE Java Oldies: Choice of UI Frameworks!
- 10. Choose your UI Framework Solution: choose it directly in the beginning, start simple! • Start simple, create a reference implementation for your team, extend and migrate as you go • Interseroh simple reference example: https://github.com/interseroh/demo-gwt-springboot • Good start GWT Project Generator: https://gwt-project-generator.cfapps.io GWTCon 2017 - Best Practices for Beginners | 2017Seite 10 EA: Standard, GwtBootstrap3, GXT, …
- 11. User Interface with Composition Problem: Microservice == Micro UI, no simple example how to do this • Communication between Micro UIs? GWTCon 2017 - Best Practices for Beginners | 2017Seite 11 MSAI: Microservice-based UI Microservice: Top Menu Bar Microservice: Search Microservice: Footer Microservice: Order Microservice: Rating Microservice: Advertisement One Web Page == many Microservices Web Page Source: http://microservices.io/patterns/ui/client-side-ui-composition.html
- 12. User Interface with Composition Solution: TURDUCKEN • Easy to begin with: ScriptInjector, no communication between Micro UIs • Communication: begin with InterApp EventBus GWTCon 2017 - Best Practices for Beginners | 2017Seite 12 MSAI: Microservice-based UI TURDUCKEN: http://www.slideshare.net/robertkeane1/turducken-divide-and-conquer-large-gwt-apps-with-multiple-teams GWT InterApp EventBus: https://github.com/sambathl/interapp-eventbus
- 13. Excursion: Interseroh TopMenuBar GWTCon 2017 - Best Practices for Beginners | 2017Seite 13 AppLauncher, Messaging, SSO, Profile Top Menu Bar: https://github.com/interseroh/topmenubar TopMenuBar
- 14. Problem: calling the services through server-side component (A) or directly to the microservices (B) needed Server Calling Business Services GWTCon 2017 - Best Practices for Beginners | 2017Seite 14 MSAI: Microservice-based UI Web browser Order Service Order UI Service Order UI JavaScript Product Service A A A B B B
- 15. Calling Business Services Solution: calling directly the microservices needed (B) • (A): Order UI Service only forwards the request, nonsense! • Do not afraid to implement presentation logic in GWT, Java logic GWTCon 2017 - Best Practices for Beginners | 2017Seite 15 MSAI: Microservice-based UI
- 16. Run One UI in One Time independently Problem: possibility to run the UI stand-alone to develop UI faster • In Microservice architecture: standalone UI development is important! GWTCon 2017 - Best Practices for Beginners | 2017Seite 16 MSAI: Microservice-based UI Server Web browser Order Service Order UI Service Order UI JavaScript Product Service
- 17. Run One UI in One Time independently Solution: Mocking all the RESTful services (RestyGWT) • Mocking the services • Requirement: no dead code, no test code in the production JavaScript! • On the server-side: use Spring profile to move the calls to one service • On the client-side: wrap RestyGWT call with a mock call, build a ModuleDevMock.gwt.xml which choose a mock implementation for the service call, using Maven profile GWTCon 2017 - Best Practices for Beginners | 2017Seite 17 MSAI: Microservice-based UI Server Web browser Order UI Service Order UI JavaScript
- 18. Problem: best practice in Maven module, separation of UI and Service BUT actually better to put them together! • It feels “natural” for Microservice UI and Service in One Maven Module GWTCon 2017 - Best Practices for Beginners | 2017Seite 18 MSAI: Microservice-based UI Web browser Order ServiceOrder UI Service Order UI JavaScript
- 19. UI and Service in One Maven Module Solution: none sofar • UI and Service together in Maven: problem with dependencies? • You can “copy” the JavaScript result to the service… • It makes your dependencies complex and not a Maven standard • No A depends on B, but A must be built before B! • Sofar it works fine with Spring Boot GWTCon 2017 - Best Practices for Beginners | 2017Seite 19 MSAI: Microservice-based UI
- 20. UI Integration - Copy or Download? Problem: Web app already available, how to extend with GWT Micro UI? • Actually easily possible… Two choices: • Copy JavaScript to the web app • Download the JavaScript from remote location GWTCon 2017 - Best Practices for Beginners | 2017Seite 20 MSAI: With available web apps Customer Portal Grails UI Integration
- 21. UI Integration - Copy or Download? Solution: download from remote location • Integration JavaScript (GWT-based) in available web app useful! • Both ways have advantages and disadvantages • Download from remote location: • Microservice-oriented • Easier to update GWTCon 2017 - Best Practices for Beginners | 2017Seite 21 MSAI: With available web apps
- 22. Table and Grid Component Darn Difficult! Problem: table and grid component difficult for beginners • UI components like grid, table, treeview are always difficult to use, no matter which technologies you are using! • Borland Delphi, Visual Basic, Struts, HTML, ... GWTCon 2017 - Best Practices for Beginners | 2017Seite 22 PROGM: Cell-based UI
- 23. Table and Grid Component Darn Difficult! Solution: make a better documentation for those components; learn, learn and learn • Luckily good StackOverflow answers • Vaadin has a good a good Grid component but the GWT (client-side) part does not have a good documentation GWTCon 2017 - Best Practices for Beginners | 2017Seite 23 PROGM: Cell-based UI Vaadin Grid Client-side: https://vaadin.com/docs/framework/v8/clientsidewidgets/clientsidewidgets-grid.html
- 24. Asynchronous Programming Model Problem: async calls are not predictable (no order) from caller perspective - “callback hell” • Quite a new concept for developers, who only has experiences in Java server-side web framework! • Ugly cascading if you need the order: public void onSuccess(Void result) { call(); … public void onSuccess(Void result) { … GWTCon 2017 - Best Practices for Beginners | 2017Seite 24 PROGM: Ugly cascading callbacks
- 25. Asynchronous Programming Model Solution: no general solution sofar • Wrap Async Callback with Promise GWTCon 2017 - Best Practices for Beginners | 2017Seite 25 PROGM: Ugly cascading callbacks Promise GWT: http://www.classicode.net/2017/02/gwts-asynccallback-and-promises getCars(city).onSuccess(r -> { /* code here */ });
- 26. UI Security Problem: how to secure GWT web app? • Same as any Single Page Applications • … it’s own topic ... GWTCon 2017 - Best Practices for Beginners | 2017Seite 26 SEC: Token-based OAuth 2 – OpenID Connect
- 27. UI Security Solution: OAuth 2, token-based security, OpenID Connect GWTCon 2017 - Best Practices for Beginners | 2017Seite 27 SEC: Token-based OAuth 2 – OpenID Connect OAuth 2 OAuth 2: https://www.digitalocean.com/community/tutorials/an-introduction-to-oauth-2
- 28. GWTCon 2017 - Best Practices for Beginners | 2017Seite 28 Summary
- 29. Summary (1) • GWT Swing-based programming model: is here to stay! • Very easy for beginners! • GWT uses Java semantic as near as possible • Very good show cases and examples • Table, Grid and Treeview difficult • But this is everywhere… • No designer (GWT Designer is still somewhere…) Seite 29 GWTCon 2017 - Best Practices for Beginners | 2017 GWT Designer: https://stackoverflow.com/questions/27175381/why-does-gwt-2-7-discontinue-the-gwt-designer
- 30. Summary (2) ● Documentation needs rework and cleaning • General features • Versions overview • Documentation (API and reference) per version • Quick start • … the rest • See Spring Framework documentation! Seite 30 GWTCon 2017 - Best Practices for Beginners | 2017
- 31. Summary (3) GWT still the BEST for Java-based Single Page Application! Seite 31 GWTCon 2017 - Best Practices for Beginners | 2017
- 32. Discussion Dr. Blasius Lofi Dewanto ITbyServices / Manager Application Development Phone: +49 (02203) 9147 - 1705 Fax: +49 (02203) 9157 - 9773 Mobile: +49 (0151) 6135 - 7172 E-Mail: [email protected] Web: www.interseroh.com