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

GXT5 - Bolder, better, faster, stronger by Brandon Donnelson

GWTcon
November 14, 2016

GXT5 - Bolder, better, faster, stronger by Brandon Donnelson

"GXT5 - Bolder, better, faster, stronger" by Brandon Donnelson
#GWTcon2016 Firenze - 14/15th November 2016

GWTcon

November 14, 2016
Tweet

More Decks by GWTcon

Other Decks in Technology

Transcript

  1. GXT 5
    Brandon Donnelson
    David Becker
    Bolder, Better, Faster, Stronger

    View full-size slide

  2. Introduction
    • I’m from Arlington, WA
    • 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
    • My wife and I have 5 kids, 1 llama, 2 alpacas, 4 goats, dog,
    cat and some chickens.
    2

    View full-size slide

  3. What is GXT
    • We provide GWT Components for building your application
    • So it’s like building a house
    • And you want to go shopping at the Hardware store for components to do the job
    • And we provide the pretty kitchen cabinets, bathroom fixtures and lighting fixtures
    • You don’t have to pick all Sencha components to do the job, but I think you’ll like the
    options.
    • Stop by and ask about all the Sencha GXT Java components options

    View full-size slide

  4. 3 Goals
    • Provide and overview of the GXT engine
    • Provide you an glimpse into GXT responsive layouts
    • And provide an intro into our component options

    View full-size slide

  5. A Bolder Plan
    GXT 5 is a bold new release designed from the ground up to
    usher in the future of web development with Java.
    • Starting with a clean slate
    - A lot can change in 10 years
    - Time for a fresh start
    • Focusing on the future
    - Addressing GWT 3 head on
    - Modern, mature web technologies
    • Aiming to be the #1 Java solution for the web
    - Leave nothing on the table

    View full-size slide

  6. Bold Ideas from Experience
    Java has decades of experience offering GUI frameworks: JavaFX, Swing, AWT, etc.
    We wanted to draw on that familiarity & experience and bring it to the modern web.
    • New concepts in GXT 5 include:
    - Scene graphs
    - Clear separation of concerns
    • Component model
    • Component appearance
    • Component behavior
    - Observable properties
    - Observable collections
    7

    View full-size slide

  7. Better Than Ever

    View full-size slide

  8. Better by Design
    It’s better because it offers responsive design, true mobile widgets,
    material design, and a radical new theming system.
    • Flexbox layouts
    - Responsiveness is baked in
    - Almost entirely CSS layout
    • Responsive grid layouts
    - Traditional 12 column grid
    - New 12x12 grid
    • Responsive width and height

    View full-size slide

  9. Better Theming
    • We have an all new theming system
    • CSS3 standards based
    • Native Google Closure Stylesheets + more
    • No special tools
    • Easy, centralized changes
    • Mix & match themes
    • Fully customizable
    10

    View full-size slide

  10. Better Technologies
    • Built on GWT 2.8
    - Java 8 syntax & APIs
    - JsInterop
    - Incremental compilation
    • Makes extensive use of Java 8
    - Lambdas
    - Method references
    - Streams
    - Functional interfaces
    11

    View full-size slide

  11. Faster Performance

    View full-size slide

  12. Modern Is Faster
    We’ve gone to the metal to make it faster by using CSS3, HTML5,
    lightweight DOM access, and eliminated legacy baggage by only
    supporting evergreen browsers.
    • CSS3
    - Strong preference for CSS based layouts
    • HTML5
    - New input & UI elements
    • Foundation DOM
    - JsInterop with the browser apis
    • Evergreen browsers only !!!

    View full-size slide

  13. Stronger Ideas

    View full-size slide

  14. Stronger Ideas Expedite Implementation
    GXT 5 is stronger and more flexible than ever thanks to an abstracted
    & unified event mechanism, extensible gesture tracking, observable
    lists and properties, and a robust model-view-controller pattern that
    decouples component appearance and behavior from state.
    • Simple ideas. Extensible ideas. Your ideas.
    • No matter what you want to do, we want to let you do it…
    - Component level separation of concerns (MVC pattern)
    - Everything is observable (properties, lists, maps, sets)
    - Unified & custom events (with hierarchy, filters & handlers)
    - Extensible gestures (including multi-touch & mouse)

    View full-size slide

  15. Stronger Separation of Concerns
    16
    • Components have adopted a micro-MVC pattern
    - Clear responsibilities leads to cleaner, simpler code
    - Easy to customize, no rigid contracts
    • Component maintains state
    - State exposed via observable properties & collections
    • Appearance renders to the screen
    - Listens for state changes & updates the browser
    • Behavior monitors event and updates state
    - Listens for user input & updates the component state

    View full-size slide

  16. Stronger Events
    • Abstracted & normalized to unify browser event differences
    - Touch? Pointers? Mouse? Who cares…
    - Browser, action & custom events are handled the same way
    • Hierarchical events support ‘classes’ of events
    - Listen for MouseEvent.ANY, InputEvent.ANY, etc.
    • Event Filters & Handlers
    - Both capture and bubble phases are supported
    - Filters preview/capture events before components
    - Handlers respond/consume events after components
    • Gesture recognizers
    - Customizable
    17

    View full-size slide

  17. Stronger Gestures
    • Gesture recognizers
    - Configurable options for taps, direction, velocity, etc.
    - Recognizer tracks begin, changed, recognized, failed & canceled states
    - Recognizer emits gesture events
    • Simultaneous gestures
    - Multiple gestures can be recognized together (pinch & rotate)
    • Dependent gestures
    - Single-tap only if not a double-tap or triple-tap
    • Custom gestures
    - Write your own gesture recognizer classes
    18

    View full-size slide

  18. Previous Layout Challenges

    View full-size slide

  19. The Challenges
    • Hard to fake responsive layout in earlier versions
    • GXT 4 relies heavily on programmatic sizing
    • Extremely difficult to make responsive
    • Debugging and nested debugging are challenging!
    • Monolithic sets of programmatic source

    View full-size slide

  20. The Upsets
    • So many edge cases
    • Lots of docs
    • Confusing story
    • Some flow, some programmatic, some pain
    • So many containers
    • Flow or Not to flow

    View full-size slide

  21. Ripping Out your Hair
    • Mixing Flow Sizing with Programmatic sizing
    • Spending hours on what should take minutes
    • It works on some but not others
    • The grid just won’t size when I enlarge
    • Zooming doesn’t work
    • Too many resolutions to account for

    View full-size slide

  22. RealResponsive Layout

    View full-size slide

  23. Responsive Layout
    • According to MDN, “the defining aspect of the flex
    layout is the ability to alter its items’ width and/or
    height to best fill the available space on any display
    device.”

    View full-size slide

  24. One set of sourceto rule them all!
    • You won’t need a separate Phone, Tablet and Desktop UI view
    • One UI view for all of your device views and resolutions
    • Simply simpler to write!

    View full-size slide

  25. But there is More than one Road
    • There are several roads to responsive
    • Like media queries using different block modes

    View full-size slide

  26. Flexbox
    • Using flex layout is the ultimate choice in CSS simplicity.
    • Easy centering, baseline, start or end aligning to name
    • And more…

    View full-size slide

  27. The Holy Grail
    * MDN

    View full-size slide

  28. Desktop and/or Mobile
    • Not only is it helpful for both Mobile and Desktop
    • It’s awesome with just Desktop

    View full-size slide

  29. GXT 5 Makes It Simple

    View full-size slide

  30. GXT 5 Simplifies Responsive Layout in Java Construction
    • Uses CSS Sizing
    • Browser rendering, means performance is optimized!!!
    • Native scrolling and animations
    • 12 column responsive grid layout
    • CSS 3 responsive widget design

    View full-size slide

  31. Introducing the New Responsive Grid Layout in GXT 5
    • Like the Bootstrap Grid System
    • Like the Material Design Responsive Grid
    • Built into the GXT Foundation

    View full-size slide

  32. The Goal
    • Make writing layouts easy and intuitive!!!!!
    • Eliminate edge cases in building components
    • Use merely one container
    • Simpler nesting architecture
    • Less time spent on layouts!!!
    • Simplified construction, simplified rendering , simplified debugging!

    View full-size slide

  33. Columns
    • 12 Columns per row

    View full-size slide

  34. Responsive
    • Adapting to the size of display
    • One View, Same Content
    • Less to Code

    View full-size slide

  35. Construction
    • Simple Java Construction
    • 1. Add Component
    • 2. With the ResponsiveStyles
    • 3. To the ResponsiveRow

    View full-size slide

  36. Column Sizes
    • EXTRA_SMALL _[1-12]
    • SMALL_[1-12]
    • MEDIUM_[1-12]
    • LARGE_[1-12]
    • EXTRA_LARGE_[1-12]

    View full-size slide

  37. Column Offsets
    • EXTRA_SMALL_OFFSET _[1-12]
    • SMALL_OFFSET_[1-12]
    • MEDIUM_OFFSET_[1-12]
    • LARGE_OFFSET_[1-12]
    • EXTRA_LARGE_OFFSET_[1-12]

    View full-size slide

  38. Multiple ResponsiveStyles
    • Use combinations of Extra Small, Small,
    Medium, Large and Extra Large layouts
    to build the responsiveness
    • And use Extra Small, Small, Medium,
    Large and Extra Large Offsets

    View full-size slide

  39. Multiple ResponseStyles in Action

    View full-size slide

  40. Get More with Ext Js JsInteroping

    View full-size slide

  41. Get more, Pivot Grid, Charts, Grids…
    • Ext Js has a pivot grid
    • Ext Js has Trees and Grids
    • Ext Js has Split Grid and Grids with Range Selection
    • Ex Js has a Calendar
    • Aria support
    • And much, much more, ask us in back…
    • Wrapping with JsInterop provides awesome buying power

    View full-size slide

  42. Split or Locking Grid

    View full-size slide

  43. Java Ext Js Construction
    • GXT uses the same terminology as Ext
    Js, so the construction patterns are
    similar
    • Example constructing a Grid Using
    Jsinterop
    • It’s Easy to write Javascript with GWT
    2.8 JsInterop Java Types
    • Writing Javascript with Java is
    awesome!

    View full-size slide

  44. Professional Support

    View full-size slide

  45. Get Help Fast
    • Professional Sencha hands on support at your finger tips
    • GWT Development Mode (Super Dev Mode) hands on help
    • Get the job done faster with in depth GWT/GXT help

    View full-size slide

  46. Early Access available now…
    http://pages.sencha.com/gxt-5-ea.html

    View full-size slide

  47. Want more
    • Follow GXT tips and tricks on a regular basis
    • On Linked in GXT User Group
    • On Google+ - Tips and Tricks
    • On Twitter @branflake2267
    • Find me roaming Gitter

    View full-size slide