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

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

3e8bbe56bf459ee2b5f4ca79fd63efde?s=47 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



November 14, 2016

More Decks by GWTcon

Other Decks in Technology


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

  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
  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
  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
  5. Bolder

  6. 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
  7. 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
  8. Better Than Ever

  9. 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
  10. 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
  11. 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
  12. Faster Performance

  13. 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 !!!
  14. Stronger Ideas

  15. 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)
  16. 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
  17. 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
  18. 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
  19. Previous Layout Challenges

  20. 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
  21. 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
  22. 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
  23. None
  24. RealResponsive Layout

  25. 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.”
  26. 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!
  27. But there is More than one Road • There are

    several roads to responsive • Like media queries using different block modes
  28. Flexbox • Using flex layout is the ultimate choice in

    CSS simplicity. • Easy centering, baseline, start or end aligning to name • And more…
  29. The Holy Grail * MDN

  30. Desktop and/or Mobile • Not only is it helpful for

    both Mobile and Desktop • It’s awesome with just Desktop
  31. None
  32. GXT 5 Makes It Simple

  33. 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
  34. 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
  35. 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!
  36. Columns • 12 Columns per row

  37. Responsive • Adapting to the size of display • One

    View, Same Content • Less to Code
  38. Construction • Simple Java Construction • 1. Add Component •

    2. With the ResponsiveStyles • 3. To the ResponsiveRow
  39. Column Sizes • EXTRA_SMALL _[1-12] • SMALL_[1-12] • MEDIUM_[1-12] •

    LARGE_[1-12] • EXTRA_LARGE_[1-12]
  40. Column Offsets • EXTRA_SMALL_OFFSET _[1-12] • SMALL_OFFSET_[1-12] • MEDIUM_OFFSET_[1-12] •

  41. 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
  42. Multiple ResponseStyles in Action

  43. Get More with Ext Js JsInteroping

  44. 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
  45. Pivot Grid

  46. Split or Locking Grid

  47. Charts

  48. 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!
  49. Professional Support

  50. 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
  51. Q&A

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

  53. 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
  54. None
  55. None