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

Creating Reusable UI Components with Ext JS

C3d3ad4d0758d38bf60f1a648bd0fe02?s=47 Mats Bryntse
December 13, 2017

Creating Reusable UI Components with Ext JS

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

C3d3ad4d0758d38bf60f1a648bd0fe02?s=128

Mats Bryntse

December 13, 2017
Tweet

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