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

Building an Ad-hoc Reporting Application with Extjs and Couchbase

Building an Ad-hoc Reporting Application with Extjs and Couchbase

Darrell Pratt

July 18, 2013
Tweet

More Decks by Darrell Pratt

Other Decks in Technology

Transcript

  1. BUILDING  AN  AD-­‐HOC  REPORTING   APPLICATION  WITH  EXTJS  AND  COUCHBASE

      OUT  WITH  FLEX,  IN  WITH  JS           DARRELL  PRATT   ARCHITECTURE  LEADER    
  2. Help  our  clients  have  the  most   complete  understanding  of

      consumers  worldwide.     OUR  MISSION    
  3. Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   4

      OUR  HERITAGE     global   servicing  model     96  countries   in  tradiSonal  and  modern  trade     comparable   metrics  across  all  media     world-­‐class   analyScs     leading   innovaSon     global   servicing  model     100+  countries   in  tradiSonal  and  modern  trade     comparable   metrics  across  all  media     world-­‐class   analyScs     leading   innovaSon    
  4. Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   6

      NIELSEN  ANSWERS  ON  DEMAND   Flexibility • Dynamic “on-the-fly” processing engine • On-Demand products, markets, periods, buyer groups • User role-based reporting • Custom product definitions, hierarchies and characteristics Speed to Insights • Expedited reporting • Roadmaps and guided analysis • Dynamic reporting Integration • Consistent access channel • Internal and external data sources • Support for client business processes
  5. Consumer  foresight     for  faster,  smarter,     more

     confident  decisions   OUR  PROMISE   to  drive  growth  
  6. Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   10

      ISSUES  WITH  FLEX   •  Mobile  support   •  Support     •  Microso\  plugin  statement  direcSon   •  Adobe  open  sources  Flex   •  Not  inline  with  HTML5  direcSon   •  Technology     •  Complexity   •  Time  to  add  features  steadily  increasing   •  Basic  behavior  easy  to  code,  but  complex  features  not   •  Blaze  DS     •  ProliferaSon  of  DTOs  and  duplicate  code   •  Non-­‐standard,  no  schema   •  CompilaSon  and  Build  issues  
  7. Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   15

      FEATURES   •  Full  drag  and  drop  of  reporSng  objects   •  Objects  know  what  they  are  and  how  to  interact  with  others   •  “Where  to  drop?”  assistance   •  Full  “Undo”  of  acSons     •  LocalStorage  browser  cache  backup   •  Responsive  design  adapts  to  client  hardware   •  Improved  BI  capabiliSes   •  User  expressions   •  CondiSonal  formaeng   •  Smart  text   •  Smart  linking  of  report  objects  
  8. Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   17

      HIGH  LEVEL  VIEW   Presenta(on Logic Storage Service Builder Player Data6Selector Spring6MVC Spring6IOC Couchbase Oracle Job6 Management Data66Access6 Service Caching PorBolio6 Manager
  9. Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   18

      APPLICATION  VIEW   Report'Builder'UI <<ExtJS>> Progress'Queue' Manager Applica2on'Model Report'Model Applica2on'Controller Naviga2on'Manager Model Layer Controller Layer View'(n) View Layer View'Controller De>.JS Data'Selec2on'Model
  10. Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   19

      TECHNOLOGY  STACK   •  UI  built  on  Ext  JS  4.2.0   •  Extensive  use  of  MVC  Architecture   •  De\  JS  used  for  managing  mulSple  instances  of  same  views  ,IOC,  Promises   •  AM  Charts  used  for  charSng   •  D3  used  in  some  edge  case  chart  types   •  AM  Charts  used  as  we  had  experience  with  it  on  Flex  applicaSon   •  Middle  Ser  composed  of  Spring  MVC  and  Spring  IOC   •  JSON  REST  endpoints  through  configuraSon   •  XML  to  JSON  conversion  where  needed   •  Report  Player  using  Ext  Direct   •  SOA  Tier  using  Tibco  AMX  3.2   •  Couchbase  2.x  –  Storage,  Caching  and  Search   •  Hudson,  ArSfactory,  Gradle,  Jasmine,  JS  Duck  
  11. Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   23

      COUCHBASE  –  CACHE,  STORAGE  AND  SEARCH   •  Couchbase  2.x   •  Schema-­‐less  clustered  JSON  storage   •  Key/value  cache  based  on  memcached   •  Full  text  search  with  integraSon  to  ElasSc  Search   •  JSON   •  NaSve  JSON  encoding  down  the  stack   •  No  transforms   •  No  tables   •  Incremental  Map  Reduce   •  Views  on  data   •  Full  Text  Search   •  IntegraSon  with  ElasScSearch  
  12. Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   24

      COUCHBASE  –  USAGE   •  Storage  of  naSve  JSON  data  from  applicaSon   •  User  customizaSons  of  reports   •  Report  definiSons   •  Request  instances  –  Data  selecSons   •  BI  Responses  
  13. Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   26

      MAKE  IT  RESPONSIVE   •  Asynchronous  UI     •  ProgressQueueManager  class  with  Promises  and  Deffereds   •  Uses  De\.js   •  Controllers  extend  base  controller   •  Incorporates  access  to  PQM   •  Data  fetches  can  be  truly  asynchronous   •  ReporSng  data  gets  BIG   •  Breaking  up  a  report  into  objects   •  Asynchronously  store  chunked  data  in  Couchbase   •  UI  only  requests  chunk  needed  
  14. Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   28

      ISSUES     •  IE  8!!!!    Do  people  really  sSll  use  this?   •  Load  Smes  sSll  high   •  How  to  be  more  responsive,  with  more  incremental  data  loading   •  Are  we  componenSzed  enough  for  future  feature  expansion?   •  Move  to  Sencha  CharSng  to  remove  our  external  dependencies  
  15. Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   30

      WHAT’S  NEXT     •  Increase  the  visualizaSons  we  support   •  Deep  linking  from  one  report  to  another   •  ComponenSze  for  sharing  across  the  enterprise  
  16. Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   32

      TAKE  THE  SURVEY!   •  Session Survey •  Available on the SenchaCon mobile app •  http://app.senchacon.com •  Be Social! •  @SenchaCon •  #SenchaCon •  @darrellpratt •  Hackathon!