GWT Eclipse Plugin by Brandon Donnelson GWTcon - 14-15th November 2016
View Slide
CONFIDENTIAL • © 2016 Sencha Inc.GWT Eclipse PluginBrandon Donnelson@branflake2267November 2016
CONFIDENTIAL • © 2016 Sencha Inc.3About 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.
CONFIDENTIAL • © 2016 Sencha Inc.4
CONFIDENTIAL • © 2016 Sencha Inc.5
CONFIDENTIAL • © 2016 Sencha Inc.Thank you!Thanks to Sencha, Google Cloud Tools team and others for making thishappen!6
CONFIDENTIAL • © 2016 Sencha Inc.7What’s the Purpose• The GWT Eclipse Plugin features provide engineering conveniences you don’tget from the available text editors out there• I suspect you’ll find the features will make development easier• Consistent building, tooling and debugging Experience
CONFIDENTIAL • © 2016 Sencha Inc.8Brief 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
CONFIDENTIAL • © 2016 Sencha Inc.9GWT Eclipse Tooling EvolutionGPE(GWT & Cloud)Cloud Tools for Eclipse (OnlyCloud)GPE Fork (V2)(GWT & Cloud)GWT Eclipse Plugin (V3)(Only GWT)
CONFIDENTIAL • © 2016 Sencha Inc.10GWT Eclipse Plugin Features• GWT features have not been removed betweenthe 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.aCodeServer 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
CONFIDENTIAL • © 2016 Sencha Inc.11New 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
CONFIDENTIAL • © 2016 Sencha Inc.12Extensions• From: com.google To com.gwtplugins• com.gwtplugins.gwt.eclipse.core.gwtNature• com.gwtplugins.gwt.facetExtension classes are the same. They didn’t get renamed.
CONFIDENTIAL • © 2016 Sencha Inc.13Wish 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
CONFIDENTIAL • © 2016 Sencha Inc.See it to believe it14
CONFIDENTIAL • © 2016 Sencha Inc.15Eclipse Marketplace Install
CONFIDENTIAL • © 2016 Sencha Inc.16Install Features
CONFIDENTIAL • © 2016 Sencha Inc.17Documentation
CONFIDENTIAL • © 2016 Sencha Inc.18Documentation - VideosPublished a GWTEclipse Plugin V3playlistLots of Videoshttps://goo.gl/pbjhdH
CONFIDENTIAL • © 2016 Sencha Inc.19GSS• CSS Highlighting• CSS Content Assist• CSS Color Chooser
CONFIDENTIAL • © 2016 Sencha Inc.20Maven Integration• Both GWT Maven plugins are supported• TBroyer GWT Maven Plugin (recommended)• Mojo GWT Maven Plugin• Gradle support coming
CONFIDENTIAL • © 2016 Sencha Inc.21The Development Mode LaunchersThey come in two flavors:• GWT DevelopmentMode (DevMode)• GWT DevelopmentMode (CodeServer)What’s the difference???
CONFIDENTIAL • © 2016 Sencha Inc.22Legacy GWT Development Mode with JettyLegacy GWT Development Mode is onlysupported in the older browsers.- Internet Explorer IE8 to IE11- Firefox 26Not supported In- Chrome- Safari- Edge(a.k.a Classic Dev Mode)
CONFIDENTIAL • © 2016 Sencha Inc.23GWT Development Mode with Jetty• (a.k.a Super Dev Mode)• Dev Mode runs both aJetty server and CodeServer.
CONFIDENTIAL • © 2016 Sencha Inc.24GWT Development Mode with Anything• Any Web Server• Any Device• Anywhere Anytime
CONFIDENTIAL • © 2016 Sencha Inc.25GWT 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)
CONFIDENTIAL • © 2016 Sencha Inc.26Launching Example• (a.k.a Super Dev Mode)• Dev Mode runs both aJetty server and CodeServer.
CONFIDENTIAL • © 2016 Sencha Inc.27
CONFIDENTIAL • © 2016 Sencha Inc.28Running an External Web ServerIf the external web server has a different IP.• VM, docker, Kubernetes, some other server accessible on the networkIssue• 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
CONFIDENTIAL • © 2016 Sencha Inc.29SSL• Debugging on an SSL server• Mixed Content WarningPossible Solutions• Turn of Security• Proxy, Tunnel, Code Server requestsIdeally• Use the GWT Compiler launcher
CONFIDENTIAL • © 2016 Sencha Inc.30GWT Compiler Debugging• Compiler -incremental -setProperty user.agent=safari -war /path/to/war• Incremental• For Safari• Compilation is put into the hosted webapp directory
CONFIDENTIAL • © 2016 Sencha Inc.31GWT Compiler
CONFIDENTIAL • © 2016 Sencha Inc.32
CONFIDENTIAL • © 2016 Sencha Inc.33IDE 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
CONFIDENTIAL • © 2016 Sencha Inc.34Breakpoints, Console, Variables and Stacks
CONFIDENTIAL • © 2016 Sencha Inc.35
CONFIDENTIAL • © 2016 Sencha Inc.36Become Stargazers - Show your supportI’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
CONFIDENTIAL • © 2016 Sencha Inc.37Community 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
CONFIDENTIAL • © 2016 Sencha Inc.38Questions• Questions• Feedback• Suggestions• +Brandon.Donnelson• @branflake2267