Tweet
Tweet

Slide 1

Slide 1 text

Mats Bryntse, CEO @Bryntum Creating Reusable UI Components with Ext JS @Bryntum

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Intro | Bryntum Scheduler Component

Slide 4

Slide 4 text

Intro | Bryntum Gantt Component

Slide 5

Slide 5 text

Intro | Bryntum Kanban Component

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Intro | Quick poll Hands up: Who is using Ext JS?

Slide 8

Slide 8 text

Intro | Background One of the great strengths of Ext JS: Mature reusable UI components.

Slide 9

Slide 9 text

Intro | Demo DEMO: Ext JS UI components

Slide 10

Slide 10 text

Ext JS Class System Introduction

Slide 11

Slide 11 text

Class system | Ext classes •Legacy JS lacked real classes •Ext JS has its own class system •Dynamic loading •Classes defined as a String + properties

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Class system | Components Everything visual in Ext JS is a Component

Slide 14

Slide 14 text

Class system | Component life cycle constructor onLayout onRender initComponent onDestroy

Slide 15

Slide 15 text

Class system | Component template methods Ext.define(“My.app.FilterField", {
 extend : "Ext.form.TextField",
 
 initComponent : function() { … }, onRender : function() { … }, onDestroy : function() { … } });

Slide 16

Slide 16 text

Component Architecture Choices…

Slide 17

Slide 17 text

Component Architecture | Choosing a base class or… UI Class Pure JS class?
foo

Slide 18

Slide 18 text

Component Architecture | Choosing a UI base class or… Extending built-in cmp Custom UI cmp? ?

Slide 19

Slide 19 text

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 });

Slide 20

Slide 20 text

Component Architecture | Choosing a base class For custom UI classes, you have more choices: Ext.Component Ext.Panel Ext.Container
Foo

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

•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

Slide 23

Slide 23 text

Component Architecture | Task board Let’s look under the hood of the Task Board component

Slide 24

Slide 24 text

Component Architecture | Task board Ext.Panel[layout=hbox] Ext.Panel[layout=fit] Ext.DataView Ext.Container[layout=vbox]

Slide 25

Slide 25 text

Choosing framework | Modern or classic? Ext JS Classic or Modern?

Slide 26

Slide 26 text

Choosing framework | Ext JS Classic Classic: * supports IE >=8 * more widgets * more mature (10+ yrs) * heavier DOM * slower than Modern

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Mixins & Plugins Code reusability

Slide 29

Slide 29 text

Mixins & Plugins | Mixins •Mixins are just simple objects •Mixins make code reusable for classes •We use them extensively

Slide 30

Slide 30 text

Mixins & Plugins | Mixins •Very simple to use! Ext.define(“My.Mixin”, {
 foo : “bar” });
 Ext.define(“My.awesome.Class”, {
 mixins : [“My.Mixin”] });


Slide 31

Slide 31 text

Mixins & Plugins | Mixins

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Mixins & Plugins | Plugins Row expander, cell editing, row editing, header drag drop, header resize, row drag drop…

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Mixins & Plugins | Plugins Ext.define(“My.Plugin”, { extend : “Ext.AbstractPlugin”,
 init : function(component) {…} });
 new My.awesome.Class({
 plugins : [new My.Plugin()] });
 Definition: Usage:

Slide 36

Slide 36 text

Mixins & Plugins | Plugins

Slide 37

Slide 37 text

Tips & Tricks Some useful bits of info

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Tips & tricks | Containers are awesome Since Containers can Components: 
 You can put any Component into a tooltip!

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Finding bugs in production

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

What does the user see when there is an error?

Slide 44

Slide 44 text

Application monitoring NOTHING

Slide 45

Slide 45 text

Application monitoring | Bug life cycle Fix Occurrence ℹ Investigate Reproduce Report ✅

Slide 46

Slide 46 text

Application monitoring Fixing a bug with just a call stack is not easy

Slide 47

Slide 47 text

Application monitoring Introducing RootCause Modern JS error monitoring

Slide 48

Slide 48 text

Rounding up •Break your application into reusable Components •Test big components individually •Monitor application errors •Don’t rely on users reporting bugs

Slide 49

Slide 49 text

Rounding up | Links •//sencha.com/extjs •//bryntum.com/products/ •//therootcause.io

Slide 50

Slide 50 text

Rounding up | Questions Questions? Twitter: @Bryntum