ExtJS ViewModels for spreadsheet formulas, interactive D3 visualisations and other cool stuff

Did you know that you can emulate Excel formulas in ExtJS grids? Or that you can create interactive D3 visualisations from large amounts of ExtJS store data in realtime? All this and more is possible by using the power of ExtJS 5 ViewModels.

The new kid on the block, ExtJS 5, has offered a host of new possibilities. The new MVVM architecture is extremely powerful but can be intimidating at first, especially when coming from MVC. Once you have flipped the switch however you will wonder how you ever managed to live without it.

We will show you some examples of what can be accomplished when you really start thinking out of the box, and you can do it too. ViewModels are even more powerful than most people realize, especially when combined with things like HTML5 Canvas, WebGL, Bower components and more.

Transcript

2. Rob Boerman CTO & Co-founder, 2Gears
3. 2Gears
5. ExtJS5 ViewModels
6. ViewModel DataBinding
7. ViewModel DataBinding
10. D3 Visualisations in ExtJS
12. D3  Par''on   D3  Pack   D3  Tree   D3  Sunburst   D3  Hierarchy   Ext.Component   D3M0 D3 Class Structure
13. D3M0 Component Structure Main   Tree   Par''on  D3   Pack  D3   TreeD3   Sunburst  D3   Dashboard   Breadcrumb  
14. D3M0 Component Structure Main   Tree   Par''on  D3   Pack  D3   TreeD3   Sunburst  D3   Dashboard   Breadcrumb   MainModel  
18. D3M0 Binding
19. D3M0 Binding Main   Tree   Par''on  D3   Pack  D3   TreeD3   Sunburst  D3   Dashboard   Breadcrumb   MainModel   selec'on   selec'on  
20. D3 Visualisations in ExtJS
21. Businessplan in Excel
22. Businessplan in Excel Coach   Entrepreneur   Email,  XLS  comments,  Track  changes,  …   XLS,  XLSX,  OpenOffice,  …  
23. Main challenge Formulas
24. Excel formulas D1   A1   B1   C1   D5   D2   D3   D4  
25. Excel formulas D1   A1   B1   C1   D5   D2   D3   D4   Ext.grid.Panel   Ext.app.ViewModel  
26. JenC Demo
27. App Structure BusinessPlan   Tree   BreadCrumb   Content   BusinessPlanModel   EditorContainer   Sec'on  1   Sec'on  2   …   BPStores   store:  {BpNavStore}   Store   Chain    
28. Formula in Form BusinessPlanModel   {Bind}    
29. Formula in Form BusinessPlanModel  
30. Formula in Grid BusinessPlanModel   {Bind}    
31. Formula in Grid BusinessPlanModel   BPStores  
32. Formula in Grid BusinessPlanModel   BPStores   12x  
33. Formula in Grid BusinessPlanModel   BPStores  
34. Formula in Grid BusinessPlanModel   BPStores  
35. Managing formulas BusinessPlanModel   BPStores  
36. Binding formulas to records
37. ViewModel Formulas SUM   *   12   A   *   12   B   Func'onNode   OperatorNode   ConstantNode   SymbolNode  
38. ViewModel Formulas Run  when  dependencies  change   Run  MathJS  with  ViewModel  data   Update  record  field  with  result   Inject  Formula  ‘Stub’  in  ViewModel   Return  result  to  store  in  ViewModel  
39. Takeaways
40. The sky is the limit…
41. The sky is the limit… actually it isn’t
42. Questions? @robboerman /in/robboerman rob@2gears.com http://2gears.com