Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GWT Eclipse Plugin by Brandon Donnelson

GWTcon
November 15, 2016

GWT Eclipse Plugin by Brandon Donnelson

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

GWTcon

November 15, 2016
Tweet

More Decks by GWTcon

Other Decks in Technology

Transcript

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

    View full-size slide

  2. 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 full-size slide

  3. CONFIDENTIAL • © 2016 Sencha Inc.
    4

    View full-size slide

  4. CONFIDENTIAL • © 2016 Sencha Inc.
    5

    View full-size slide

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

    View full-size slide

  6. 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 full-size slide

  7. 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 full-size slide

  8. 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 full-size slide

  9. 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 full-size slide

  10. 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 full-size slide

  11. 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 full-size slide

  12. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. CONFIDENTIAL • © 2016 Sencha Inc.
    17
    Documentation

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. 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 full-size slide

  20. 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 full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

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

    View full-size slide

  24. 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 full-size slide

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

    View full-size slide

  26. CONFIDENTIAL • © 2016 Sencha Inc.
    27

    View full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

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

    View full-size slide

  31. CONFIDENTIAL • © 2016 Sencha Inc.
    32

    View full-size slide

  32. 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 full-size slide

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

    View full-size slide

  34. CONFIDENTIAL • © 2016 Sencha Inc.
    35

    View full-size slide

  35. 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 full-size slide

  36. 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 full-size slide

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

    View full-size slide