Slide 1

Slide 1 text

BUILDING  AN  AD-­‐HOC  REPORTING   APPLICATION  WITH  EXTJS  AND  COUCHBASE   OUT  WITH  FLEX,  IN  WITH  JS           DARRELL  PRATT   ARCHITECTURE  LEADER    

Slide 2

Slide 2 text

ABOUT  NIELSEN  

Slide 3

Slide 3 text

Help  our  clients  have  the  most   complete  understanding  of   consumers  worldwide.     OUR  MISSION    

Slide 4

Slide 4 text

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    

Slide 5

Slide 5 text

Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   5   OUR  ECOSYSTEM   COLLABORATIVE  DATA  

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Consumer  foresight     for  faster,  smarter,     more  confident  decisions   OUR  PROMISE   to  drive  growth  

Slide 8

Slide 8 text

WHERE  WE  WERE  

Slide 9

Slide 9 text

Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   9   FLEX  BASED  APPLICATION  

Slide 10

Slide 10 text

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  

Slide 11

Slide 11 text

OUR  NEW  APPLICATION  

Slide 12

Slide 12 text

Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   12   REPORT  BUILDER  

Slide 13

Slide 13 text

Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   13   REPORT  PLAYER  

Slide 14

Slide 14 text

Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   14   REPORT  PLAYER  

Slide 15

Slide 15 text

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  

Slide 16

Slide 16 text

APPLICATION  SPECIFICS  

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   18   APPLICATION  VIEW   Report'Builder'UI <> 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

Slide 19

Slide 19 text

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  

Slide 20

Slide 20 text

COUCHBASE  DETAILS  

Slide 21

Slide 21 text

Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   21   COUCHBASE  SERVER  -­‐  COMPONENTS  

Slide 22

Slide 22 text

Copyright  ©2012  The  Nielsen  Company.  ConfidenSal  and  proprietary.   22   COUCHBASE  SERVER  -­‐  CLUSTERING  

Slide 23

Slide 23 text

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  

Slide 24

Slide 24 text

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  

Slide 25

Slide 25 text

DEALING  WITH  REPORTING  DATA  

Slide 26

Slide 26 text

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  

Slide 27

Slide 27 text

ISSUES  &  IMPROVEMENTS  

Slide 28

Slide 28 text

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  

Slide 29

Slide 29 text

LOOKING  FORWARD  

Slide 30

Slide 30 text

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  

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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!