Creating Reusable UI Components with Ext JS

My presentation at Sencha RAD Mix in Tokyo December 13, 2017

Transcript

1. Mats Bryntse, CEO @Bryntum Creating Reusable UI Components with Ext JS @Bryntum
2. Intro | About me •Mats Bryntse, from Stockholm Sweden ! •First saw Ext JS in 2007, fell in love with the grid ❤ •In 2009, I started Bryntum •We make UI components and dev tools
3. Intro | Bryntum Scheduler Component
4. Intro | Bryntum Gantt Component
5. Intro | Bryntum Kanban Component
6. Intro | Agenda Ext JS intro Architecture Error monitoring • Ext JS class system • Extending a class • Component model • Life cycle, constructor, destructor • Choose base class • Architecture • Mixins, plugins • Writing testable code • How to detect bugs in production • Recording session video • RootCause
7. Intro | Quick poll Hands up: Who is using Ext JS?
8. Intro | Background One of the great strengths of Ext JS: Mature reusable UI components.
9. Intro | Demo DEMO: Ext JS UI components
10. Ext JS Class System Introduction
11. Class system | Ext classes •Legacy JS lacked real classes •Ext JS has its own class system •Dynamic loading •Classes defined as a String + properties
12. Class system | Ext.define Ext.define("MyApp.FilterField", {
 extend : "Ext.form.TextField", requires : ["Ext.other.Class"],
 width : 150,
 … }); Before a class is defined, all dependencies are loaded
13. Class system | Components Everything visual in Ext JS is a Component
14. Class system | Component life cycle constructor onLayout onRender initComponent onDestroy
15. Class system | Component template methods Ext.define(“My.app.FilterField", {
 extend : "Ext.form.TextField",
 
 initComponent : function() { … }, onRender : function() { … }, onDestroy : function() { … } });
16. Component Architecture Choices…
17. Component Architecture | Choosing a base class or… UI Class Pure JS class? <div> foo </div>
18. Component Architecture | Choosing a UI base class or… Extending built-in cmp Custom UI cmp? ?
19. Component Architecture | Choosing a base class Non-UI classes should extend Ext.Base or Ext.util.Observable Ext.define("MyApp.SomeClass", {
 extend : “Ext.Base” // Or omit this });
20. Component Architecture | Choosing a base class For custom UI classes, you have more choices: Ext.Component Ext.Panel Ext.Container <div> Foo </div>
21. Component Architecture | Abstractions Use the right Ext JS abstraction level Native DOM Ext JS “DOM Core” Ext.Component HtmlElement, doc.getElementById JS API, Ext.Element, Ext.get Sizing, life cycle Ext.Container Layout, contain other components Ext.Panel Title, toolbars, buttons
22. •If you’re building a complex UI component: •Break it down into smaller sub-components •Combine pieces to form a powerful component Component Architecture | Break down big components into pieces
23. Component Architecture | Task board Let’s look under the hood of the Task Board component
24. Component Architecture | Task board Ext.Panel[layout=hbox] Ext.Panel[layout=fit] Ext.DataView Ext.Container[layout=vbox]
25. Choosing framework | Modern or classic? Ext JS Classic or Modern?
26. Choosing framework | Ext JS Classic Classic: * supports IE >=8 * more widgets * more mature (10+ yrs) * heavier DOM * slower than Modern
27. Choosing framework | Ext JS Modern or… Modern: * supports IE >=11 * Uses modern CSS * Less DOM footprint * Faster than Classic * Touch friendly * Less widgets than classic
28. Mixins & Plugins Code reusability
29. Mixins & Plugins | Mixins •Mixins are just simple objects •Mixins make code reusable for classes •We use them extensively
30. Mixins & Plugins | Mixins •Very simple to use! Ext.define(“My.Mixin”, {
 foo : “bar” });
 Ext.define(“My.awesome.Class”, {
 mixins : [“My.Mixin”] });

31. Mixins & Plugins | Mixins
32. Mixins & Plugins | Plugins •Works for any Ext.Component •Easy way to enable extra functionality for instances •Avoids class bloat, Ext grid is a great example •Ext JS grid has tons of “optional” features
33. Mixins & Plugins | Plugins Row expander, cell editing, row editing, header drag drop, header resize, row drag drop…
34. Mixins & Plugins | Plugins •By using mixins, the core part of the Grid stays manageable •If you don’t use feature X, Sencha Cmd will not include it
35. Mixins & Plugins | Plugins Ext.define(“My.Plugin”, { extend : “Ext.AbstractPlugin”,
 init : function(component) {…} });
 new My.awesome.Class({
 plugins : [new My.Plugin()] });
 Definition: Usage:
36. Mixins & Plugins | Plugins
37. Tips & Tricks Some useful bits of info
38. Tips & tricks | Best practices Stay on top of the public Ext JS API as much as possible Upgrade pains to be expected otherwise If you must override a private Ext JS method, document it At Bryntum, we detect private overrides through tests
39. Tips & tricks | Containers are awesome Since Containers can Components: 
 You can put any Component into a tooltip!
40. Tips & tricks | Testing Writing testable code Models & Stores are pure JS, not tied to DOM Very easy to test. Very fast. Views & controllers are much harder
41. Finding bugs in production
42. Finding production bugs | Not always easy Errors in production are sometimes logged, Often ignored or logs forgotten With huge JS code bases, we cannot ignore production errors
43. What does the user see when there is an error?
44. Application monitoring NOTHING
45. Application monitoring | Bug life cycle Fix Occurrence ℹ Investigate Reproduce Report ✅
46. Application monitoring Fixing a bug with just a call stack is not easy
47. Application monitoring Introducing RootCause Modern JS error monitoring
48. Rounding up •Break your application into reusable Components •Test big components individually •Monitor application errors •Don’t rely on users reporting bugs
49. Rounding up | Links •//sencha.com/extjs •//bryntum.com/products/ •//therootcause.io
50. Rounding up | Questions Questions? Twitter: @Bryntum