Building Ext JS 5 Components

From SenchaDay 2014 in Karlsruhe

Transcript

1. Copyright Sencha Inc. 2014 Mats Bryntse, founder of Bryntum Building Ext JS 5 Components @Bryntum
2. Intro | Content Basics Design phase Tips & Tricks • Ext class system • Extending a class • Component model • Choose base class • Architecture • Mixins, plugins • Destructor • Writing testable code • Avoiding private Ext code
3. Intro | Quick poll Hands up: Who’s built an Ext JS component?
4. Basics | Background One of the top strengths of Ext JS: Mature reusable UI components.
5. Basics | Background In 2009, I started Bryntum to build UI components
6. Basics | Background
7. Basics | Background
8. Basics | Background
9. Ext JS Class System Introduction
10. Class system | Ext.define Ext.define("MyApp.FilterField", {
 extend : "Ext.form.TextField", requires : ["Ext.other.Class"],
 width : 150,
 … })
11. Class system | Component life cycle Ext.define("MyApp.FilterField", {
 extend : "Ext.form.TextField",
 
 initComponent : function() { … }, afterRender : function() { … }, onDestroy : function() { … },
 … });
12. Class system | Component model Constructor Initialize Render Destroy Component life cycle
13. Class system | Advanced Ext.define("MyApp.FilterField", {
 extend : “Ext.some.Class”,
 
 onClassExtended : function() { … }, … }, function() { … }) // Class def callback
14. Design Phase Choices…
15. Design phase | Choosing a base class or… UI Class Pure JS class? <div> foo </div>
16. Design phase | Choosing a base class ? or… Extending built-in cmp Custom UI cmp? ?
17. Design phase | Choosing a base class Non-UI class should extend Ext.Base or Ext.util.Observable Ext.define("MyApp.SomeClass", {
 extend : “Ext.Base” // Or omit this });
18. Design phase | Choosing a base class For custom UI classes, you have more choices: Ext.Component Ext.Panel Ext.Container <div> Foo </div>
19. Design phase | 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
20. Design phase | Task board Let’s look under the hood of the Task Board component
21. Design phase | Task board
22. Design phase | Task board Ext.Panel[layout=hbox]
23. Design phase | Task board Ext.Panel[layout=hbox] Ext.Panel[layout=fit]
24. Design phase | Task board Ext.Panel[layout=hbox] Ext.Panel[layout=fit] Ext.Container[layout=vbox]
25. Design phase | Task board Ext.Panel[layout=hbox] Ext.Panel[layout=fit] Ext.DataView Ext.Container[layout=vbox]
26. Design phase | Task board Let’s verify using the Siesta component inspector
27. Design phase | Configuration Setting proper default properties
28. Design phase | Configuration •Avoid too many mandatory config settings •Provide reasonable defaults •For reusable components: Avoid using public API configs internally cls, style, listeners
29. Design phase | Configuration
30. Design phase | Configuration
31. Design phase | Configuration {viewPreset}, {startDate}, {endDate}
32. Design phase | Configuration {resourceStore} {viewPreset}, {startDate}, {endDate}
33. Design phase | Configuration {resourceStore} {eventStore} {viewPreset}, {startDate}, {endDate}
34. Design phase | Configuration {resourceStore} {eventStore} {rowHeight} { {viewPreset}, {startDate}, {endDate}
35. Design phase | Configuration Scheduler v1.0 new Sch.panel.SchedulerGrid({
 renderTo : document.body, viewPreset : “dayAndWeek”, startDate : new Date(2014, 11, 1), endDate : new Date(2015, 11, 1), eventStore : new Sch.data.EventStore(), resourceStore : new Sch.data.ResourceStore(), rowHeight : 25, …
 });

36. Design phase | Configuration Scheduler v3.0 Ext.define(“Sch.panel.SchedulerGrid”, {
 viewPreset : “dayAndWeek”, rowHeight : 25, initComponent : function() { Ext.applyIf(this, { startDate : new Date(), eventStore : new Sch.data.EventStore(), resourceStore : new Sch.data.ResourceStore()
 }); });
37. Design phase | Configuration Scheduler v3.0 new Sch.panel.SchedulerGrid({
 renderTo : document.body });

38. Mixins & Plugins Code reusability
39. Mixins & Plugins | Mixins •Mixins are just simple objects •Mixins make code reusable for classes •We use them extensively
40. Mixins & Plugins | Mixins •Very simple to use! Ext.define(“My.Mixin”, {
 foo : “bar” });
 Ext.define(“My.awesome.Class”, {
 mixins : [“My.Mixin”] });

41. Mixins & Plugins | Mixins
42. 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
43. Mixins & Plugins | Plugins Row expander, cell editing, row editing, header drag drop, header resize, row drag drop…
44. 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
45. Mixins & Plugins | Plugins Ext.define(“My.Plugin”, { extend : “Ext.AbstractPlugin”,
 init : function(component) {…} });
 new My.awesome.Class({
 plugins : [new My.Plugin()] });
 Definition: Usage:
46. Mixins & Plugins | Plugins
47. Tips & Tricks Some useful bits of info
48. Rounding up | Tips & tricks Stay on top of the API as much as possible Upgrade pains to be expected otherwise If you must override a private Ext JS method, document it We detect private overrides through tests
49. Rounding up | Tips & tricks
50. Rounding up | Tips & tricks Overriding Ext JS Ext.define("MyApp.view.UserCombo", {
 extend : “Ext.form.ComboBox",
 // TODO document!
 onExpand : function() {
 
 } });
 Always question these! Other solutions? Use a listener?
51. Rounding up | Tips & tricks Forgetting to remove event listeners. Ext.define("MyApp.view.UserList", {
 extend : "Ext.some.Class",
 
 initComponent : function() {
 this.store.on('load', this.onLoad, this);
 }, onLoad : function() { … }
 });

52. Rounding up | Tips & tricks Use onDestroy hook to remove event listeners. Or cmp.mon Ext.define("MyApp.view.UserList", {
 extend : "Ext.some.Class",
 
 initComponent : function() {
 this.store.on('load', this.onLoad, this);
 }, onDestroy : function() { this.store.un('load', this.onLoad, this);
 } });
53. Rounding up | Testing Writing testable code Models & Stores are pure JS, not tied to DOM Very easy to test. Very fast. Views & controllers are much harder
54. Rounding up | Testing Don’t forget to test Component Maker Test Pack on Github https://github.com/matsbryntse/Component-maker-test-pack Yes, you must test your component in IE too.
55. Rounding up | Links •//bryntum.com/products/ •//bryntum.com/docs/siesta •//github.com/matsbryntse/Component-maker-test-pack •//extjs.eu/ by Saki
56. Rounding up | Questions Questions? Twitter: @Bryntum