Apps That Talk Back

Front End Ops Conference, San Francisco, 2014

Transcript

1. Front End Ops Conf 2014
   San Francisco • @rmurphey
   apps that 

   talk back
   

   View Slide

2. View Slide

3. ˒˒˒ ➞ $$$
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. ˒˒˒ ➞ $$$
   

   View Slide

8. apps that talk back
   

   View Slide

9. keep you from 

   doing a bad thing
   

   View Slide

10. View Slide

11. var  spawn  =  require('child_process').spawn;  
    var  command  =  'grunt';  
    var  commandOpts  =  ['check:push'];  
    !
    function  onExit  (code)  {  
       if  (code  !==  0)  {  
           throw  new  Error('Prepush  check  failed  with  exit  code:  '  +  code);  
       }  
       process.exit(code);  
    }  
    !
    //  Run  it  !!  
    var  child  =  spawn(  command,  commandOpts,  {  stdio  :  'inherit'  }  );  
    child.on('exit',  onExit);  
    

    View Slide

12. BVReporter.assert(  
       this.componentId,    
       'View  '  +  this.name  +  '  must  have  componentId'  
    );
    

    View Slide

13. View Slide

14. View Slide

15. View Slide

16. tell you when

    you did a bad thing
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. BVTracker.error('No  productId  is  defined');
    

    View Slide

21. BVTracker.error({  
       name  :  errorMessages.IMPLEMENTATION,  
       detail1  :  'No  productId  is  defined',  
       detail2  :  component.name  
    });
    

    View Slide

22. define({  
       errors  :  {  
           IMPLEMENTATION  :  'Implementation  Error',  
           API  :  'API  Error',  
           UNCAUGHT  :  'Uncaught  Exception',  
           CONFIG  :  'Configuration  Error',  
           THIRD_PARTY  :  'Third  Party  Service  Error',  
           TIMEOUT  :  'Request  Timeout',  
           UI  :  'User  Interface  Error',  
           FRAMEWORK  :  'Framework  Error'  
       }  
    });
    

    View Slide

23. View Slide

24. View Slide

25. View Slide

26. “scout”  file
    customer  requests  component(s)
    core  application  file
    data
    render  of  component  1
    render  of  component  2
    submission  

    interaction
    submission

    resources
    submission  
    render
    *  not  to  scale  (i  hope)
    

    View Slide

27. “scout”  file
    customer  requests  component(s)
    core  application  file
    data
    render  of  component  1
    render  of  component  2
    submission  

    interaction
    submission

    resources
    submission  
    render
    

    View Slide

28. identify things before
    they are things
    

    View Slide

29. View Slide

30. View Slide

31. View Slide

32. help fix the things
    

    View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. priorities
    

    View Slide

38. ✅ assertions
    ✅ git hooks (jshint, jscs, unit tests)
    ✅ error classification & reporting
    ✅ production monitoring
    ⬆️ production debugging
    ⬆️ build optimization via coverage analysis
    ⬆️ build size monitoring
    ⬆️ performance instrumentation
    ❌ error alerting
    ❌ performance monitoring
    

    View Slide

39. @rmurphey • rmurphey.com
    bazaarvoice.com
    

    View Slide