GWT Eclipse Plugin by Brandon Donnelson

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

Transcript

1. View Slide

2. CONFIDENTIAL • © 2016 Sencha Inc.
   GWT Eclipse Plugin
   Brandon Donnelson
   @branflake2267
   November 2016
   

   View Slide

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
   .
   

   View Slide

4. CONFIDENTIAL • © 2016 Sencha Inc.
   4
   

   View Slide

5. CONFIDENTIAL • © 2016 Sencha Inc.
   5
   

   View Slide

6. CONFIDENTIAL • © 2016 Sencha Inc.
   Thank you!
   Thanks to Sencha, Google Cloud Tools team and others for making this
   happen!
   6
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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)
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

14. CONFIDENTIAL • © 2016 Sencha Inc.
    See it to believe it
    14
    

    View Slide

15. CONFIDENTIAL • © 2016 Sencha Inc.
    15
    Eclipse Marketplace Install
    

    View Slide

16. CONFIDENTIAL • © 2016 Sencha Inc.
    16
    Install Features
    

    View Slide

17. CONFIDENTIAL • © 2016 Sencha Inc.
    17
    Documentation
    

    View Slide

18. CONFIDENTIAL • © 2016 Sencha Inc.
    18
    Documentation - Videos
    Published a GWT
    Eclipse Plugin V3
    playlist
    Lots of Videos
    https://goo.gl/pbjhdH
    

    View Slide

19. CONFIDENTIAL • © 2016 Sencha Inc.
    19
    GSS
    • CSS Highlighting
    • CSS Content Assist
    • CSS Color Chooser
    

    View Slide

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
    

    View Slide

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???
    

    View Slide

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)
    

    View Slide

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.
    

    View Slide

24. CONFIDENTIAL • © 2016 Sencha Inc.
    24
    GWT Development Mode with Anything
    • Any Web Server
    • Any Device
    • Anywhere Anytime
    

    View Slide

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)
    

    View Slide

26. CONFIDENTIAL • © 2016 Sencha Inc.
    26
    Launching Example
    • (a.k.a Super Dev Mode)
    • Dev Mode runs both a
    Jetty server and Code
    Server.
    

    View Slide

27. CONFIDENTIAL • © 2016 Sencha Inc.
    27
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

31. CONFIDENTIAL • © 2016 Sencha Inc.
    31
    GWT Compiler
    

    View Slide

32. CONFIDENTIAL • © 2016 Sencha Inc.
    32
    

    View Slide

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
    

    View Slide

34. CONFIDENTIAL • © 2016 Sencha Inc.
    34
    Breakpoints, Console, Variables and Stacks
    

    View Slide

35. CONFIDENTIAL • © 2016 Sencha Inc.
    35
    

    View Slide

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
    

    View Slide

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
    

    View Slide

38. CONFIDENTIAL • © 2016 Sencha Inc.
    38
    Questions
    • Questions
    • Feedback
    • Suggestions
    • +Brandon.Donnelson
    • @branflake2267
    

    View Slide