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

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

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. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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 !!!
  10. 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)
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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.”
  18. 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!
  19. But there is More than one Road • There are

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

    CSS simplicity. • Easy centering, baseline, start or end aligning to name • And more…
  21. Desktop and/or Mobile • Not only is it helpful for

    both Mobile and Desktop • It’s awesome with just Desktop
  22. 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
  23. 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
  24. 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!
  25. Responsive • Adapting to the size of display • One

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

    2. With the ResponsiveStyles • 3. To the ResponsiveRow
  27. 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
  28. 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
  29. 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!
  30. 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
  31. Q&A

  32. 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