What's Coming Next in Sencha Frameworks

1,370 views

Published on

Don Griffin at ModUX 2013
http://moduxcon.com

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,370
On SlideShare
0
From Embeds
0
Number of Embeds
341
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

What's Coming Next in Sencha Frameworks

  1. 1. What’s Coming Next in Sencha Frameworks
  2. 2. Don Griffin Engineering Manager don@sencha.com @dongryphon
  3. 3. Framework Goals
  4. 4. Awesome Apps Scalable Development Device Compatibility Goals
  5. 5. Common Core
  6. 6. sencha-core
  7. 7. sencha-core Goals
  8. 8. Consistency Compatibility sencha-core : Goals
  9. 9. sencha-core Content
  10. 10. sencha-core : Content Feature / Environment Detection Ext.env,  Ext.feature, Ext.browser,  Ext.os, Ext.supports,  Ext.is
  11. 11. Utilities XTemplate,  Ext.Array, Ext.Object,  Ext.String, Ext.Function,  Ext.Date, ... sencha-core : Content
  12. 12. Class System sencha-core : Content
  13. 13. Dynamic Loader sencha-core : Content
  14. 14. Momentum Scroller sencha-core : Content
  15. 15. Delegated Event System sencha-core : Content
  16. 16. Gesture Recognition sencha-core : Content
  17. 17. Ext.data Investigating sencha-core : Content
  18. 18. Charts
  19. 19. Charts - Today Ext JS Ext.chart Sencha Touch Ext.chart
  20. 20. Charts - Today Ext JS
  21. 21. Charts - Ext JS Today Designed for Desktop
  22. 22. Charts - Ext JS Today Mouse Input
  23. 23. Charts - Ext JS Today Plenty of Memory & CPU
  24. 24. Charts - Today Sencha Touch
  25. 25. Charts - Touch Today Designed for Touch Input
  26. 26. Charts - Touch Today Constrained Memory
  27. 27. Charts - Touch Today Limited CPU
  28. 28. Charts - Touch Today Large Datasets
  29. 29. Charts - Going Forward Unification Leverage Gains Easy Migration
  30. 30. Charts Ext JS ext-chartsExt.chart Sencha Touch Ext.chartsencha-charts Today Packages
  31. 31. Sencha Touch
  32. 32. New Themes
  33. 33. Blackberry 10
  34. 34. Cordova / PhoneGap
  35. 35. Ext.device.*
  36. 36. sencha  cordova  init
  37. 37. sencha  phonegap  init
  38. 38. Touch Grid
  39. 39. Demo
  40. 40. Ext JS
  41. 41. Touch Events
  42. 42. tap swipe pinch touchmove touchstart/end longpress rotate doubletap tapcancel singletap pinchstart/end rotatestart/end drag
  43. 43. el.on({      click:  this.onClick }); el.on({      tap:  this.onClick }); Translated
  44. 44. Grid
  45. 45. Cell Updating
  46. 46. Custom Renderers columns:  [{      text:  '%  Change',      dataIndex:  'field',      renderer:  function  (v)  {            var  c  =  (v  <  0)  ?  'red'  :  'green';            return  '<span  style="color:'+c+';">'  +                      Ext.util.Format.number(v,  '0.00')  +                '</span>';      } }]
  47. 47. Anatomy of a Grid Cell <tr>    <td  class="...">        <div  class="x-­‐grid-­‐cell-­‐inner">            <span  style="color:red">...</span>        </div>    </td> </tr>
  48. 48. Grid Updates Today record.set('field',  42);
  49. 49. Grid Updates Today Render The Cell ...Again
  50. 50. Grid Updates Today <tr>    <td  class="...">        <div  class="x-­‐grid-­‐cell-­‐inner">            <span  style="color:red">...</span>        </div>    </td> </tr> ?
  51. 51. Grid Updates Today The full signature for renderer is:        function  (value,                            cellData,  //  problem  #1                            record,                            rowIndex,                            columnIndex,                            store,                            view);
  52. 52. Grid Updates Today cellData.innerCls vs. <div>
  53. 53. Grid Updates Today <tr>    <td  class="...">        <div  class="x-­‐grid-­‐cell-­‐inner">            <span  style="color:red">...</span>        </div>    </td> </tr> ?
  54. 54. Grid Updates Today cellData.tdCls vs. <td>
  55. 55. Grid Updates Today <tr>    <td  class="...">        <div  class="x-­‐grid-­‐cell-­‐inner">            <span  style="color:red">...</span>        </div>    </td> </tr>
  56. 56. Grid Updates Today Not so bad ?
  57. 57. Grid Updates Today record.set('other',  2);
  58. 58. Grid Updates Today The full signature for renderer is:        function  (value,                            cellData,                            record,      //  problem  #2                            rowIndex,                            columnIndex,                            store,                            view);
  59. 59. Grid Updates Today When Any Field Changes?!
  60. 60. Grid Cell Updaters update  !==  render
  61. 61. Grid Cell Updaters columns:  [{      text:  '%  Change',      dataIndex:  'fieldName',      depends:  ['field2',  'field3'],      renderer:  ...,      updater:  function  (el,  v,  record)  {            var  sp  =  Ext.fly(el).down('span',  true);            sp.style.color  =  (v  <  0)  ?  'red'  :  'green';            sp.firstChild.data  =                  Ext.util.Format.number(v,  '0.00');      } }]
  62. 62. Grid Cell Updaters Minimal DOM Change
  63. 63. Grid Cell Updaters Only When Needed
  64. 64. Buffered Updates
  65. 65. Buffered Updates Configure Maximum Rate
  66. 66. Buffered Updates Tracks Field Changes
  67. 67. Gadgets
  68. 68. Gadgets Think Flyweight Components
  69. 69. Gadgets Minimal Life-cycle
  70. 70. Gadgets Data Bound
  71. 71. Gadgets Gadget el0 childEl childEl el el1 childEl childEl +data +data
  72. 72. Gadgets Declarative Listeners
  73. 73. Gadgets Ext.define('Ext.gadget.Slider',        extend:  'Ext.gadget.Gadget', ...        listeners:  {                mousedown:  'onMouseDown',                dragstart:  'cancelDrag',                drag:  'cancelDrag',                dragend:  'cancelDrag'        },
  74. 74. Gadgets Listeners in childEls
  75. 75. Gadgets Events are Delegated
  76. 76. Gadgets gadget.attach(data,  el);
  77. 77. Gadgets - Grid Column columns:  [{        xtype:  'gadgetcolumn',        dataIndex:  'status',        gadget:  'progressbar' }] Configured on columns similar to ‘editor’
  78. 78. Gadgets - Grid Column columns:  [{        xtype:  'gadgetcolumn',        gadget:  {                type:  'button',                text:  'Remove'        } }]
  79. 79. Gadgets - Grid Column columns:  [{        xtype:  'gadgetcolumn',        dataIndex:  'size',        gadget:  'slider' }] In some case it can even edit like an ‘editor’
  80. 80. Gadgets - Grid Column columns:  [{        text:  'Trend',        gadget:  {                type:  'sparkline.line',                width:  '100%',                tipTpl:  'Price:  {y:number("0.00")}'        } }]
  81. 81. Demo
  82. 82. MVC Routing
  83. 83. Address Bar Controller Methods
  84. 84. http://www.foo.com/app#foo/bar controller.handleFooBar()
  85. 85. Ext.define('MyApp.controller.Foo',  {        extend:  'Ext.app.Controller',        config  :  {                routes  :  {                        'foo/bar':  'handleFoo'                }        },        handleFoo:  function  ()  {                ...        } });
  86. 86. What about Parameters?
  87. 87. http://www.foo.com/app#foo/bar/42 controller.handleFooBar(42)
  88. 88.        config  :  {                routes  :  {                        'foo/bar/:id':  'handleFooBar'                }        },        handleFooBar:  function  (id)  {                ...        }
  89. 89. Validating Actions
  90. 90.        config  :  {                routes  :  {                        'foo/bar/:id':  {                                action:  'handleFoo',                                before:  'beforeFoo'                        }                }        },        beforeFoo:  function  (id,  action)  {                ...  validate  action  ...        }
  91. 91. Forms
  92. 92. Ext.picker.Color
  93. 93. Ext.button.Segmented
  94. 94. Ext.form.field.Tag
  95. 95. Demo
  96. 96. Border Layout
  97. 97. Region Groups Shared space for Regions
  98. 98. Group Arrangement Tabs Boxes Accordion
  99. 99. Stateful Item Persistence
  100. 100. Demo
  101. 101. Conclusion • Contact Info - don@sencha.com - @dongryphon

×