Tweet
Tweet

Slide 1

Slide 1 text

Copyright Sencha Inc. 2014 October 2014 Webinar Analyzing the ROI of JavaScript In Enterprise Software Development

Slide 2

Slide 2 text

Copyright Sencha Inc. 2014 Arthur Kay Developer Relations Manager Abraham Elias Chief Technical Officer SENCHA | Presenters

Slide 3

Slide 3 text

Copyright Sencha Inc. 2014 •  Requirements of Client-side Applications •  Potential Solutions •  Measuring ROI •  Q / A ANALYZING THE ROI OF JAVASCRIPT IN ENTERPRISE SOFTWARE DEVELOPMENT

Slide 4

Slide 4 text

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...)  

Slide 5

Slide 5 text

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 +/- +/- +/- +/-

Slide 6

Slide 6 text

Copyright Sencha Inc. 2014

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Copyright Sencha Inc. 2014 1.2M  JavaScript  Repos   200k  CSS  Repos         98%  Abandoned  ~  1  year   MICRO-FRAMEWORKS

Slide 10

Slide 10 text

Copyright Sencha Inc. 2014 Most enterprise software stays in production for 5 to 10 years – or more!

Slide 11

Slide 11 text

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...)  

Slide 12

Slide 12 text

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  

Slide 13

Slide 13 text

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  

Slide 14

Slide 14 text

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  

Slide 15

Slide 15 text

Copyright Sencha Inc. 2014 http://trends.builtwith.com/javascript/jQuery BROWSER SUPPORT

Slide 16

Slide 16 text

Copyright Sencha Inc. 2014 http://arstechnica.com/information-technology/2014/07/windows-8-x-internet-explorer-both-flatline-in-june/ BROWSER SUPPORT

Slide 17

Slide 17 text

Copyright Sencha Inc. 2014 http://blog.angularjs.org/2013/12/angularjs-13-new-release-approaches.html BROWSER SUPPORT

Slide 18

Slide 18 text

Copyright Sencha Inc. 2014 http://blog.angularjs.org/2014/03/angular-20.html BROWSER SUPPORT

Slide 19

Slide 19 text

Copyright Sencha Inc. 2014 http://blog.angularjs.org/2014/03/angular-20.html BROWSER SUPPORT

Slide 20

Slide 20 text

Copyright Sencha Inc. 2014 BROWSER SUPPORT

Slide 21

Slide 21 text

Copyright Sencha Inc. 2014 MEASURING ROI

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Copyright Sencha Inc. 2014 ROI | Development More dependencies = More Risk Operational Risk= ax + … = a4 (or worse) = a1

Slide 26

Slide 26 text

Copyright Sencha Inc. 2014 ROI | Development

Slide 27

Slide 27 text

Copyright Sencha Inc. 2014 ROI | Software Maintenance

Slide 28

Slide 28 text

Copyright Sencha Inc. 2014 ROI | Operations ?

Slide 29

Slide 29 text

Copyright Sencha Inc. 2014 ENTERPRISE PLATFORM NEEDS

Slide 30

Slide 30 text

Copyright Sencha Inc. 2014 Sencha at a Glance Founded in 2007 Backed by

Slide 31

Slide 31 text

Copyright Sencha Inc. 2014 Leader in Commercial Grade JavaScript and HTML5 Development ‣  More than 60% of the Fortune 100 as clients!

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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  

Slide 34

Slide 34 text

Copyright Sencha Inc. 2014 SENCHA | Platform

Slide 35

Slide 35 text

Copyright Sencha Inc. 2014 SENCHA | Resources WEBINARS WHITE PAPERS SENCHACON

Slide 36

Slide 36 text

Copyright Sencha Inc. 2014 Arthur Kay Developer Relations Manager Abraham Elias Chief Technical Officer SENCHA | Presenters