Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Analyzing the ROI of JavaScript in Enterprise S...

Arthur Kay
October 14, 2014

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.

Arthur Kay

October 14, 2014
Tweet

More Decks by Arthur Kay

Other Decks in Programming

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 HTML5 Frameworks Open Standards Based Supported

    on More Devices Larger Dev Community Single Code Base More Deployment Options Quicker Updates HTML5 IN THE ENTERPRISE
  7. 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
  8. Copyright Sencha Inc. 2014 1.2M  JavaScript  Repos   200k  CSS

     Repos         98%  Abandoned  ~  1  year   MICRO-FRAMEWORKS
  9. 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...)  
  10. 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  
  11. 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  
  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,  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  
  13. 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
  14. 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
  15. 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
  16. Copyright Sencha Inc. 2014 ROI | Development More dependencies =

    More Risk Operational Risk= ax + … = a4 (or worse) = a1
  17. Copyright Sencha Inc. 2014 Leader in Commercial Grade JavaScript and

    HTML5 Development ‣  More than 60% of the Fortune 100 as clients!
  18. 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
  19. 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  
  20. Copyright Sencha Inc. 2014 Arthur Kay Developer Relations Manager Abraham

    Elias Chief Technical Officer SENCHA | Presenters