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

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

Transcript

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
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
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] • LARGE_OFFSET_[1-12] • EXTRA_LARGE_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