Refine your application with custom components

Ext JS is a superb framework for creating UI:s for large-scale and data-heavy applications. It provides a full data layer and a collection of great components for visualization and interaction. Furthermore Ext JS enables you to create custom components that will meet your specific needs. This session will demonstrate real world examples of custom Ext JS components that are built to provide great UX but also with code maintenance and refactoring in mind.

This presentation is from SenchaCon 2015 roadshow in Oslo, Copenhagen & Stockholm.

Transcript

1. Refine  your  application   with  custom  components Emil  Pennlöv,  Orango AB
2. Emil  Pennlöv ▸ 12  years  in  web  tech ▸ 6  years  working  with  Sencha framwork(s) ▸ Certified  trainer  @  Sencha ▸ Team  leader  @  Orango AB Microsoft  Dynamics  AX,  Microsoft  Dynamics  NAV,  Bison,  PRMS 99  employees  (ERP  consultants) Malmö,  Helsingborg,  Kristianstad &  Stockholm Select  partner  with  Sencha 5  Sencha devs -­‐ both  internal  &  external  projects
4. emil.pennlov@orango.se EmilPennlov Emil  Pennlöv www.meetup.com/The-­‐Oresund-­‐ExtJS-­‐Meetup/
5. Abstract ▸ ERP   ▸ Challenges  when  developing  a  large  scale  application ▸ Benefits  of  creating  custom  components ▸ Examples  of  custom  components ▸ After  lunch  we’ll  write  a  custom  component  
6. “Emil,  please  tell  me  about  ERP   so  I’ll  fall  asleep” -­‐ Wife ERP?
7. ERP   Warehouse  management Manufacturing Purchasing Sales Financial  management CRM ... API 3rd party  application …
8. ERP   1000s of  tables 1000000s of  records  in  each  table 10000s of  transactions  each  day 1000s of  pages  in  the  system
9. So,  what's  the  problem?
10. So,  what's  the  problem challenge?
11. Challenges when  developing  a   large  scale  application ▸ A  lot  of  pages Tables,  forms,  charts  etc. ▸ A  lot  of  data Visualization ▸ A  variety  of  users Easy  to  use  but  able  to  do  everything ▸ Repetitive  tasks Entering  data  should  be  easy ▸ Business  critical No  bugs  allowed
12. Benefits  of  creating  custom  components ▸ Solve  a  specific  challenge ▸ Development  &  refactoring  in  one  place ▸ Increase  development  speed ▸ Package  and  use  in  other  applications ▸ Easy  to  unit  test
13. Warning My  Cool   Component Page  3 Page  2 Page  1 Page  4 Page  X
14. Warning My  Uncool   Component Page  3 Page  2 Page  1 Page  4 Page  X
15. Warning My  Uncool   Component Page  3 Page  2 Page  1 Page  4 Page  X
16. Precautions ▸ Clean,  readable,  commented  &  testable  code ▸ Don’t  overdo  it ▸ “How  would  Sencha do  it”? ▸ If  3rd party,  choose  wisely ▸ Test,  test  …  and  test
17. Examples  of  custom  components
18. Bison  ERP
19. Customer  index
20. Customer  index
21. Purchase  order
22. 'updatedcontainer'
23. { fieldLabel: 'Updated', xtype: 'fieldcontainer', layout: 'hbox', defaults: { xtype: 'displayfield' }, items: [ { name: 'UDAT', renderer: function (val) { if (val === '0') { return ''; } else { return Ext.Date.format(Ext.Date.parse(val, 'Ymd'), 'Y-m-d'); } } }, { value: 'by', margin: '0 5 0 5' }, { name: 'UUSR' } ] }
24. { xtype: 'updatedcontainer’ }
25. 'tablelookup' CODE TEXT EN English SE Swedish ID USER NAME LASTNAME LANGUAGE 1 Sven Sven   Svensson SE Table:  USERS Table:  LANGUAGE
26. 'tablelookup'
27. 'filter-panel' grid filtercontainer
28. 'filter-panel' grid filtercontainer
29. 'filter-panel'
30. 'filter-panel'
31. 'filter-panel'
32. 'filter-panel'
33. 'filter-panel'
34. 'comparebutton'
35. 'comparebutton'
36. 'comparebutton'
37. 'wizard'
38. 'wizard'
39. 'wizard'
40. 'wizard'
41. 'wizard'
42. 'wizard'
43. 'wizard'
44. Challenges building  a  large  scale  application ▸ A  lot  of  pages Tables,  forms,  charts  etc. ▸ A  lot  of  data Visualization ▸ A  variety  of  users Easy  to  use  but  able  to  do  everything ▸ Repetitive  tasks Entering  data  should  be  easy ▸ Business  critical No  bugs  allowed
45. emil.pennlov@orango.se EmilPennlov Emil  Pennlöv www.meetup.com/The-­‐Oresund-­‐ExtJS-­‐Meetup/