GWT Eclipse Plugin by Brandon Donnelson

GWT Eclipse Plugin by Brandon Donnelson
GWTcon - 14-15th November 2016

Transcript

2. CONFIDENTIAL • © 2016 Sencha Inc. GWT Eclipse Plugin Brandon Donnelson @branflake2267 November 2016
3. CONFIDENTIAL • © 2016 Sencha Inc. 3 About Me • Sencha GXT Support Engineer • I’ve been working with GWT a long time • I enjoy working with structured GWT Apps • Passion for making development easier .
4. CONFIDENTIAL • © 2016 Sencha Inc. 4
5. CONFIDENTIAL • © 2016 Sencha Inc. 5
6. CONFIDENTIAL • © 2016 Sencha Inc. Thank you! Thanks to Sencha, Google Cloud Tools team and others for making this happen! 6
7. CONFIDENTIAL • © 2016 Sencha Inc. 7 What’s the Purpose • The GWT Eclipse Plugin features provide engineering conveniences you don’t get from the available text editors out there • I suspect you’ll find the features will make development easier • Consistent building, tooling and debugging Experience
8. CONFIDENTIAL • © 2016 Sencha Inc. 8 Brief History of the GWT Eclipse Tooling • Google Plugin for Eclipse (GPE) - 1.0 April, 2009 - 3.9 March, 2016 - 7 years later • Google Plugin for Eclipse Fork (GPE-Fork V2) - Forked April 2015 after a long dry spell in development • GPE deprecation End of 2016 • GWT Eclipse Plugin (V3) - Started development July 2016
9. CONFIDENTIAL • © 2016 Sencha Inc. 9 GWT Eclipse Tooling Evolution GPE (GWT & Cloud) Cloud Tools for Eclipse (Only Cloud) GPE Fork (V2) (GWT & Cloud) GWT Eclipse Plugin (V3) (Only GWT)
10. CONFIDENTIAL • © 2016 Sencha Inc. 10 GWT Eclipse Plugin Features • GWT features have not been removed between the GPE to GWT Eclipse Plugin morph • GWT SDK Selection • GWT Compiler Launcher • GWT Development Mode with Jetty Launcher (a.k.a DevMode Super Dev Mode) • GWT Development Mode Launcher (a.k.a CodeServer Super Dev Mode) • GWT Legacy Development Mode Launcher (a.k.a Classic Dev Mode or OOPHM Dev Mode) • GWT Java Editor • GWT UIBinder Editor • OOPHM for Legacy Dev Mode • CSS Resources Editor • New Documentation with Videos • Maven integration
11. CONFIDENTIAL • © 2016 Sencha Inc. 11 New Features • Icons changed to GWT logos • GWT Development Mode (CodeServer) launcher • GSS files will load the CSS Resources Editor - Partial support because it doesn’t support the GSS semantics yet • GWT Facet for Server runtime integration • TBroyer Maven Plugin project configuration support • Bug fixes • Build integration testing • GWT 2.7 & GWT 2.8 SDK • GWT Compiler launcher
12. CONFIDENTIAL • © 2016 Sencha Inc. 12 Extensions • From: com.google To com.gwtplugins • com.gwtplugins.gwt.eclipse.core.gwtNature • com.gwtplugins.gwt.facet Extension classes are the same. They didn’t get renamed.
13. CONFIDENTIAL • © 2016 Sencha Inc. 13 Wish List • Clean up GWT Site Eclipse Docs • Full GSS Support • Gradle Configurators Support • GWT Designer (Elemental) • … Find the list of wishes: https://github.com/gwt-plugins/gwt-eclipse-plugin/projects/2
14. CONFIDENTIAL • © 2016 Sencha Inc. See it to believe it 14
15. CONFIDENTIAL • © 2016 Sencha Inc. 15 Eclipse Marketplace Install
16. CONFIDENTIAL • © 2016 Sencha Inc. 16 Install Features
17. CONFIDENTIAL • © 2016 Sencha Inc. 17 Documentation
18. CONFIDENTIAL • © 2016 Sencha Inc. 18 Documentation - Videos Published a GWT Eclipse Plugin V3 playlist Lots of Videos https://goo.gl/pbjhdH
19. CONFIDENTIAL • © 2016 Sencha Inc. 19 GSS • CSS Highlighting • CSS Content Assist • CSS Color Chooser
20. CONFIDENTIAL • © 2016 Sencha Inc. 20 Maven Integration • Both GWT Maven plugins are supported • TBroyer GWT Maven Plugin (recommended) • Mojo GWT Maven Plugin • Gradle support coming
21. CONFIDENTIAL • © 2016 Sencha Inc. 21 The Development Mode Launchers They come in two flavors: • GWT Development Mode (DevMode) • GWT Development Mode (CodeServer) What’s the difference???
22. CONFIDENTIAL • © 2016 Sencha Inc. 22 Legacy GWT Development Mode with Jetty Legacy GWT Development Mode is only supported in the older browsers. - Internet Explorer IE8 to IE11 - Firefox 26 Not supported In - Chrome - Safari - Edge (a.k.a Classic Dev Mode)
23. CONFIDENTIAL • © 2016 Sencha Inc. 23 GWT Development Mode with Jetty • (a.k.a Super Dev Mode) • Dev Mode runs both a Jetty server and Code Server.
24. CONFIDENTIAL • © 2016 Sencha Inc. 24 GWT Development Mode with Anything • Any Web Server • Any Device • Anywhere Anytime
25. CONFIDENTIAL • © 2016 Sencha Inc. 25 GWT Development Mode Launching • This will only run the Code Server • It only takes two arguments to run. -launcherDir and module name. • This will work with any browser • Copy the source war contents to the web app directory • Use –launcherDir to point to war output directory (exploded war dir) • (a.k.a Super Dev Mode)
26. CONFIDENTIAL • © 2016 Sencha Inc. 26 Launching Example • (a.k.a Super Dev Mode) • Dev Mode runs both a Jetty server and Code Server.
27. CONFIDENTIAL • © 2016 Sencha Inc. 27
28. CONFIDENTIAL • © 2016 Sencha Inc. 28 Running an External Web Server If the external web server has a different IP. • VM, docker, Kubernetes, some other server accessible on the network Issue • CodeServer has a hostname issue when not on the same ip • SolutionProxy, Tunnel back, Servlet • Change, Hack or PatchCode Server with -launcherDir on same ip • GWT Compiler - Super Flexible
29. CONFIDENTIAL • © 2016 Sencha Inc. 29 SSL • Debugging on an SSL server • Mixed Content Warning Possible Solutions • Turn of Security • Proxy, Tunnel, Code Server requests Ideally • Use the GWT Compiler launcher
30. CONFIDENTIAL • © 2016 Sencha Inc. 30 GWT Compiler Debugging • Compiler -incremental -setProperty user.agent=safari -war /path/to/war • Incremental • For Safari • Compilation is put into the hosted webapp directory
31. CONFIDENTIAL • © 2016 Sencha Inc. 31 GWT Compiler
32. CONFIDENTIAL • © 2016 Sencha Inc. 32
33. CONFIDENTIAL • © 2016 Sencha Inc. 33 IDE and Chrome Browser Integration • SDBG JavaScript Debugger makes JavaScript Debugging possible • Console output in IDE or Chrome • Breakpoints in IDE or Chrome • Variable inspection in IDE or Chrome • Stack inspection in IDE or chrome
34. CONFIDENTIAL • © 2016 Sencha Inc. 34 Breakpoints, Console, Variables and Stacks
35. CONFIDENTIAL • © 2016 Sencha Inc. 35
36. CONFIDENTIAL • © 2016 Sencha Inc. 36 Become Stargazers - Show your support I’d like to show management why investment is important! • Become a stargazer on github. • https://github.com/gwt-plugins/gwt-eclipse-plugin • Become a stargazer on the Eclipse Marketplace • https://marketplace.eclipse.org/content/gwt-eclipse-plugin
37. CONFIDENTIAL • © 2016 Sencha Inc. 37 Community Project • Come join the fun and help submit patches • Build project test cases I can use to test debugging • Submit issues • Submit feedback • Submit suggestions • Or just Comment and +1 threads
38. CONFIDENTIAL • © 2016 Sencha Inc. 38 Questions • Questions • Feedback • Suggestions • +Brandon.Donnelson • @branflake2267