Analyzing the ROI of JavaScript in Enterprise Software Development

Over the last five years, there has been an explosion of innovation in both web and native technologies. With the rapid release of libraries, frameworks and tools, developers have many options to create applications for this new world. But have design patterns and the general utility of micro-framework stacks really added productive value to full-scale enterprise web development?

Join Arthur Kay, Developer Relations Manager at Sencha, and Abe Elias, CTO of Sencha, as we examine today’s enterprise software development challenges and discuss the ROI and economic impact of JavaScript libraries on development teams.

Transcript

1. Copyright Sencha Inc. 2014 October 2014 Webinar Analyzing the ROI of JavaScript In Enterprise Software Development
2. Copyright Sencha Inc. 2014 Arthur Kay Developer Relations Manager Abraham Elias Chief Technical Officer SENCHA | Presenters
3. Copyright Sencha Inc. 2014 •  Requirements of Client-side Applications •  Potential Solutions •  Measuring ROI •  Q / A ANALYZING THE ROI OF JAVASCRIPT IN ENTERPRISE SOFTWARE DEVELOPMENT
4. Copyright Sencha Inc. 2014 View   System   Interface   Elements   Containers  &  Windows   (panels,  cards,  modals...)   Themes   Compound  Widgets   (trees,  grids,  gauges...)   Visualiza=ons   (charts,infographics)   Styles   Templa=ng   (itera=ons,  condi=onals.)   Visual  Effects   (anima=ons,  filters...)   Accessibility   (focus  manager,  ARIA...)   Drawing   (vector,  bitmap...)   Localiza=on   (RTL,  locale  libraries)   Interac=ons   (gestures,  drag  &  drop)   Theming   (computed  styles)   State  Manager   (history,  undo,  routes...)   Modularity   (components,  modules  )   Data  Binding   (1-­‐way,  2-­‐way)   Tes=ng   (IOC,  test  hooks)   Data  Objects   (queues,  hashtables...)   Persistent  Data   (cache  &  sync)   Data  Models  &  Stores   (group,  sort,  validate)   Mul=-­‐Media   (3D,  Audio,  Video)   Logic  &   Data   Server  Calls   (asynch,  conversion)   Sockets   Server  Method   Invoca=on   Server     No=fica=ons   Server   i/o   ENTERPRISE SOFTWARE | Feature Matrix Basic  Widgets   (buWons,  bars,  fields...)   Layout  Manager   (absolute,  flex...)  
5. Copyright Sencha Inc. 2014 CURRENT APPROACHES Native Apps HTML5 Cross Compilers Server-Side + Performance - Multiple code bases + Broadest device support - Lack of robust tools + One code style - API mismatches + Less client-side development - Degraded client-side experience +/- +/- +/- +/-
6. Copyright Sencha Inc. 2014
7. Copyright Sencha Inc. 2014 HTML5 Frameworks Open Standards Based Supported on More Devices Larger Dev Community Single Code Base More Deployment Options Quicker Updates HTML5 IN THE ENTERPRISE
8. Copyright Sencha Inc. 2014 No Common Architecture Duplication of Functionality Subtly Different Functionality Uncoordinated Release Cycles Varying Source Code Styles Assemble as you Go What about micro-frameworks? Modern Browser Only
9. Copyright Sencha Inc. 2014 1.2M  JavaScript  Repos   200k  CSS  Repos         98%  Abandoned  ~  1  year   MICRO-FRAMEWORKS
10. Copyright Sencha Inc. 2014 Most enterprise software stays in production for 5 to 10 years – or more!
11. Copyright Sencha Inc. 2014 View   System   Interface   Elements   Containers  &  Windows   (panels,  cards,  modals...)   Themes   Compound  Widgets   (trees,  grids,  gauges...)   Visualiza=ons   (charts,infographics)   Styles   Templa=ng   (itera=ons,  condi=onals.)   Visual  Effects   (anima=ons,  filters...)   Accessibility   (focus  manager,  ARIA...)   Drawing   (vector,  bitmap...)   Localiza=on   (RTL,  locale  libraries)   Interac=ons   (gestures,  drag  &  drop)   Theming   (computed  styles)   State  Manager   (history,  undo,  routes...)   Modularity   (components,  modules  )   Data  Binding   (1-­‐way,  2-­‐way)   Tes=ng   (IOC,  test  hooks)   Data  Objects   (queues,  hashtables...)   Persistent  Data   (cache  &  sync)   Data  Models  &  Stores   (group,  sort,  validate)   Mul=-­‐Media   (3D,  Audio,  Video)   Logic  &   Data   Server  Calls   (asynch,  conversion)   Sockets   Server  Method   Invoca=on   Server     No=fica=ons   Server   i/o   ENTERPRISE SOFTWARE | Feature Matrix Basic  Widgets   (buWons,  bars,  fields...)   Layout  Manager   (absolute,  flex...)  
12. Copyright Sencha Inc. 2014 View   System   Interface   Elements   Basic  Widgets   (buWons,  bars,  text  fields...)   Containers  &  Windows   (panels,  cards,  modals...)   Themes   Compound  Widgets   (trees,  grids,  gauges...)   Visualiza=ons   (charts,infographics)   Styles   Layout  Manager   (absolute,  flex...)   Templa=ng   (itera=ons,  condi=onals.)   Visual  Effects   (anima=ons,  filters...)   Accessibility   (focus  manager,  ARIA...)   Drawing   (vector,  bitmap...)   Localiza=on   (RTL,  locale  libraries)   Interac=ons   (gestures,  drag  &  drop)   Theming   (computed  styles)   State  Manager   (history,  undo,  routes...)   Modularity   (components,  modules  )   Data  Binding   (1-­‐way,  2-­‐way)   Tes=ng   (IOC,  test  hooks)   Data  Objects   (queues,  hashtables...)   Persistent  Data   (cache  &  sync)   Data  Models  &  Stores   (group,  sort,  validate)   Mul=-­‐Media   (3D,  Audio,  Video)   Logic  &   Data   Server  Calls   (asynch,  conversion)   Sockets   Server  Method   Invoca=on   Server     No=fica=ons   Server   i/o   Basic  Widgets   (buWons,  bars,  text  fields...)   Containers  &  Windows   (panels,  cards,  modals...)   Themes   Compound  Widgets   (trees,  grids,  gauges...)   Visualiza=ons   (charts,infographics)   Styles   Layout  Manager   (absolute,  flex...)   Visual  Effects   (anima=ons)   Drawing   (vector,  bitmap...)   Interac=ons   (drag  &  drop)   Theming   (computed  styles)   State  Manager   (history,  routes...)   Modularity   (direc=ves,  modules)   Data  Objects   (queues,  hashtables...)   Persistent  Data   (cache  &  sync)   Data  Models  &  Stores   (group,  sort,  validate)   Mul=-­‐Media   (3D,  Audio,  Video)   Sockets   Server  Method   Invoca=on   Server     No=fica=ons   Containers  &  Windows   (panels,  cards,  modals...)   Themes   Compound  Widgets   (trees,  grids,  gauges...)   Visualiza=ons   (charts,infographics)   Styles   Layout  Manager   (absolute,  flex...)   Drawing   (vector,  bitmap...)   Theming   (computed  styles)   Data  Objects   (queues,  hashtables...)   Persistent  Data   (cache  &  sync)   Data  Models  &  Stores   (group,  sort,  validate)   Mul=-­‐Media   (3D,  Audio,  Video)   Sockets   Server  Method   Invoca=on   Server     No=fica=ons   Basic  Widgets   (buWons,  bars,  fields...)   ANGULARJS        Support  Key   None/HTML5   Complete   Par=al  
13. Copyright Sencha Inc. 2014 View   System   Interface   Elements   Basic  Widgets   (buWons,  bars,  text  fields...)   Containers  &  Windows   (panels,  cards,  modals...)   Themes   Compound  Widgets   (trees,  grids,  gauges...)   Visualiza=ons   (charts,infographics)   Styles   Layout  Manager   (absolute,  flex...)   Templa=ng   (itera=ons,  condi=onals.)   Visual  Effects   (anima=ons,  filters...)   Accessibility   (focus  manager,  ARIA...)   Drawing   (vector,  bitmap...)   Localiza=on   (RTL,  locale  libraries)   Interac=ons   (gestures,  drag  &  drop)   Theming   (computed  styles)   State  Manager   (history,  undo,  routes...)   Modularity   (components,  modules  )   Data  Binding   (1-­‐way,  2-­‐way)   Tes=ng   (IOC,  test  hooks)   Data  Objects   (queues,  hashtables...)   Persistent  Data   (cache  &  sync)   Data  Models  &  Stores   (group,  sort,  validate)   Mul=-­‐Media   (3D,  Audio,  Video)   Logic  &   Data   Server  Calls   (asynch,  conversion)   Sockets   Server  Method   Invoca=on   Server     No=fica=ons   Server   i/o   Basic  Widgets   (buWons,  bars,  text  fields...)   Containers  &  Windows   (panels,  cards,  modals...)   Themes   Compound  Widgets   (trees,  grids,  gauges...)   Visualiza=ons   (charts,infographics)   Styles   Layout  Manager   (absolute,  flex...)   Visual  Effects   (anima=ons)   Drawing   (vector,  bitmap...)   Interac=ons   (drag  &  drop)   Theming   (computed  styles)   State  Manager   (history,  routes...)   Modularity   (direc=ves,  modules)   Data  Objects   (queues,  hashtables...)   Persistent  Data   (cache  &  sync)   Data  Models  &  Stores   (group,  sort,  validate)   Mul=-­‐Media   (3D,  Audio,  Video)   Sockets   Server  Method   Invoca=on   Server     No=fica=ons   Containers  &  Windows   (panels,  cards,  modals...)   Themes   Compound  Widgets   (trees,  grids,  gauges...)   Visualiza=ons   (charts,infographics)   Styles   Layout  Manager   (absolute,  flex...)   Drawing   (vector,  bitmap...)   Theming   (computed  styles)   Data  Objects   (queues,  hashtables...)   Persistent  Data   (cache  &  sync)   Data  Models  &  Stores   (group,  sort,  validate)   Mul=-­‐Media   (3D,  Audio,  Video)   Sockets   Server  Method   Invoca=on   Server     No=fica=ons   Basic  Widgets   (buWons,  bars,  fields...)   ANGULARJS        Support  Key   None/HTML5   Complete   Par=al  
14. Copyright Sencha Inc. 2014 View   System   Interface   Elements   Basic  Widgets   (buWons,  bars,  text  fields...)   Containers  &  Windows   (panels,  cards,  modals...)   Themes   Compound  Widgets   (trees,  grids,  gauges...)   Visualiza=ons   (charts,infographics)   Styles   Layout  Manager   (absolute,  flex...)   Templa=ng   (itera=ons,  condi=onals.)   Visual  Effects   (anima=ons,  filters...)   Accessibility   (focus  manager,  ARIA...)   Drawing   (vector,  bitmap...)   Localiza=on   (RTL,  locale  libraries)   Interac=ons   (gestures,  drag  &  drop)   Theming   (computed  styles)   State  Manager   (history,  undo,  routes...)   Modularity   (components,  packages  )   Data  Binding   (1-­‐way,  2-­‐way)   Tes=ng   (IOC,  test  hooks)   Data  Objects   (queues,  hashtables...)   Persistent  Data   (cache  &  sync)   Data  Models  &  Stores   (group,  sort,  validate)   Mul=-­‐Media   (3D,  Audio,  Video)   Logic  &   Data   Server  Calls   (asynch,  conversion)   Sockets   Server  Method   Invoca=on   Server     No=fica=ons   Server   i/o   Layout  Manager   (absolute,  flex...)   Visual  Effects   (anima=ons...)   State  Manager   (history,  routes...)   Tes=ng   (IOC,  test  hooks)   Data  Objects   (queues,  hashtables...)   Persistent  Data   (extension)   Mul=-­‐Media   (3D,  Audio,  Video)   Sockets   (extension)   Server     No=fica=ons   Mul=-­‐Media   (3D,  Audio,  Video)   Server     No=fica=ons   EXT JS 5        Support  Key   None/HTML5   Complete   Par=al  
15. Copyright Sencha Inc. 2014 http://trends.builtwith.com/javascript/jQuery BROWSER SUPPORT
16. Copyright Sencha Inc. 2014 http://arstechnica.com/information-technology/2014/07/windows-8-x-internet-explorer-both-flatline-in-june/ BROWSER SUPPORT
17. Copyright Sencha Inc. 2014 http://blog.angularjs.org/2013/12/angularjs-13-new-release-approaches.html BROWSER SUPPORT
18. Copyright Sencha Inc. 2014 http://blog.angularjs.org/2014/03/angular-20.html BROWSER SUPPORT
19. Copyright Sencha Inc. 2014 http://blog.angularjs.org/2014/03/angular-20.html BROWSER SUPPORT
20. Copyright Sencha Inc. 2014 BROWSER SUPPORT
21. Copyright Sencha Inc. 2014 MEASURING ROI
22. Copyright Sencha Inc. 2014 Multiple Device Development Cross Platform Apps Dependency management Browser Compatibility Multiplying Need for Apps Project abandonment App Performance Demand for UI / UX ! ! ! ! ! ! ! ! ROI | Technical Pain Points
23. Copyright Sencha Inc. 2014 Testing Upgrades Legacy Code Large Teams Training Architecture Spaghetti Code Big Data Multi-Device Multi-Platform Automation Long Turn-Around MAINTENANCE DEVELOPMENT OPERATIONS ROI | Operational Pain Points
24. Copyright Sencha Inc. 2014 ROI | Development System Reliability = ax A (0.9) x B (0.9) = 0.81 //or 0.92 = 81% A (0.9) x B (0.9) x C (0.9) = 0.729 //or 0.93 = 72.9% A (0.9) x B (0.9) x C (0.9) x D (0.9) = 0.6561 //or 0.94 = 65.61% More dependencies = Less Reliability
25. Copyright Sencha Inc. 2014 ROI | Development More dependencies = More Risk Operational Risk= ax + … = a4 (or worse) = a1
26. Copyright Sencha Inc. 2014 ROI | Development
27. Copyright Sencha Inc. 2014 ROI | Software Maintenance
28. Copyright Sencha Inc. 2014 ROI | Operations ?
29. Copyright Sencha Inc. 2014 ENTERPRISE PLATFORM NEEDS
30. Copyright Sencha Inc. 2014 Sencha at a Glance Founded in 2007 Backed by
31. Copyright Sencha Inc. 2014 Leader in Commercial Grade JavaScript and HTML5 Development ‣  More than 60% of the Fortune 100 as clients!
32. Copyright Sencha Inc. 2014 Scalable Architecture Maintainable Desktop and Tablet Support Customizable Themes Widgets and Layouts MVC and MVVM Responsive Design Visualization & Charting SENCHA | WHY EXT JS 5
33. Copyright Sencha Inc. 2014 SENCHA | EXT JS 5 Feature Matrix View   System   Interface   Elements   Basic  Widgets   (buWons,  bars,  text  fields...)   Containers  &  Windows   (panels,  cards,  modals...)   Themes   Compound  Widgets   (trees,  grids,  gauges...)   Visualiza=ons   (charts,infographics)   Styles   Layout  Manager   (absolute,  flex...)   Templa=ng   (itera=ons,  condi=onals.)   Visual  Effects   (anima=ons,  filters...)   Accessibility   (focus  manager,  ARIA...)   Drawing   (vector,  bitmap...)   Localiza=on   (RTL,  locale  libraries)   Interac=ons   (gestures,  drag  &  drop)   Theming   (computed  styles)   State  Manager   (history,  undo,  routes...)   Modularity   (components,  packages  )   Data  Binding   (1-­‐way,  2-­‐way)   Tes=ng   (IOC,  test  hooks)   Data  Objects   (queues,  hashtables...)   Persistent  Data   (cache  &  sync)   Data  Models  &  Stores   (group,  sort,  validate)   Mul=-­‐Media   (3D,  Audio,  Video)   Logic  &   Data   Server  Calls   (asynch,  conversion)   Sockets   Server  Method   Invoca=on   Server     No=fica=ons   Server   i/o   Layout  Manager   (absolute,  flex...)   Visual  Effects   (anima=ons...)   State  Manager   (history,  routes...)   Tes=ng   (IOC,  test  hooks)   Data  Objects   (queues,  hashtables...)   Persistent  Data   (extension)   Mul=-­‐Media   (3D,  Audio,  Video)   Sockets   (extension)   Server     No=fica=ons   Mul=-­‐Media   (3D,  Audio,  Video)   Server     No=fica=ons          Support  Key   None/HTML5   Complete   Par=al  
34. Copyright Sencha Inc. 2014 SENCHA | Platform
35. Copyright Sencha Inc. 2014 SENCHA | Resources WEBINARS WHITE PAPERS SENCHACON
36. Copyright Sencha Inc. 2014 Arthur Kay Developer Relations Manager Abraham Elias Chief Technical Officer SENCHA | Presenters