Code Fest - Работает? Стабильно? Эффективно?

Transcript

1. Работает?
   Стабильно?
   Эффективно?
   Михаил Давыдов,
   Яндекс
   

   View Slide

2. Error on line 1 column
   57841. Ololo is not
   defined…
   

   View Slide

3. Воспроизводится! В норм. браузере!
   

   View Slide

4. 4
   Эта проблема легко решается
   • Это уже воспроизвелось!
   • Reformat Code
   • SourceMap
   

   View Slide

5. 5
   Reformat Code
   

   View Slide

6. 6
   SourceMap
   • Сопоставляет код коду
   • UglifyJS
   • Chromium browser
   • CoffeeScript, TypeScript, JS
   Статья - http://clck.ru/8bjOI
   Визуализатор - http://clck.ru/8bjOQ
   

   View Slide

7. 7
   Воспроизводится! Только в IE < 8 L
   

   View Slide

8. 8
   Дебаг IE – это весело!
   • Любимые ошибки
   – Unexpected call to method or property access
   – Error: 'z' is null or not an object
   

   View Slide

9. 9
   И эта проблема легко решается
   • Это уже воспроизвелось!
   • console.log – не поможет…
   • F12 – не поможет…
   • Visual Studio Express – FTW!
   

   View Slide

10. 10
    Visual Studio Express for Web
    Как дебажить - http://clck.ru/8bjPG
    

    View Slide

11. Ошибка нигде не
    воспроизводится…
    

    View Slide

12. 12
    И проблема решается
    • Связаться с пользователем
    • Попросить описать шаги
    • Скриншоты
    • Информация о браузере
    

    View Slide

13. Отслеживание
    ошибок
    

    View Slide

14. 14
    Отслеживаем ошибки
    • Собираем все данные
    • Хорошая форма репорта
    • Отлов ошибок в фоне
    

    View Slide

15. 15
    Собираем все данные
    • User Agent
    • OS
    • Список все плагинов
    

    View Slide

16. 16
    Хорошая форма репорта
    • Все данные браузера
    • Скриншот
    • Пошаговое воспроизведение
    

    View Slide

17. 17
    Распространённые формы репорта
    • User Voice
    • Get Satisfaction
    • UserEchо
    

    View Slide

18. 18
    Отлов ошибок в фоне
    • Ловим
    –  window.onerror + jQuery.error
    • Интерпретируем
    –  библиотека stacktracejs
    • Отправляем
    –  Google Analytics
    –  Яндекс.Метрика
    http://stacktracejs.com/
    

    View Slide

19. 19
    Отлов ошибок в фоне
    • Raven.js
    –  Клиент для Sentry
    –  window.onerror = Raven.process;
    –  Open-Source
    https://github.com/getsentry/raven-js
    

    View Slide

20. 20
    Сервисы для отлова ошибок
    • Qbaka
    • Proxino
    • Errorception
    

    View Slide

21. Предотвращение
    ошибок, как?
    

    View Slide

22. 22
    Как предотвратить
    • Хороший IDE
    –  Ловит 95% проблем
    • Статический анализ
    –  Автоматический!
    –  JSLint
    –  JSHint
    • Тестирование
    http://www.jshint.com/
    Хороший IDE – http://clck.ru/8bosY
    

    View Slide

23. Код долго
    загружается
    

    View Slide

24. 24
    Как оптимизировать
    • Вынести максимум в CDN
    • Найти холодный код
    • Найти мертвый код
    • Сделать ленивую загрузку
    

    View Slide

25. 25
    Вынести максимум в CDN
    • http://yandex.st/
    • http://cdnjs.com/
    • Google – http://clck.ru/8bjZK
    • Держать запасную
    библиотеку!
    

    View Slide

26. 26
    Найти холодный и мертвый код
    • Аналитически
    –  Своим умом
    –  С помощью IDE
    • Счетчики для "фичей"
    –  Google Analytics
    –  Яндекс.Метрика
    • Code Coverage
    

    View Slide

27. 27
    Счетчики для "фичей"
    • Это дешево
    –  Сервисы аналитики есть везде
    • Нужно вешать счетчики
    • Отчет слишком общий
    

    View Slide

28. 28
    Статистический Code Coverage
    • СС – не только для тестов
    • Пользователь – лучший тестер
    • Дешево и надежно
    • Можно управлять покрытием
    • Мониторится все
    

    View Slide

29. 29
    Статистический Code Coverage
    https://github.com/azproduction/lmd
    

    View Slide

30. 30
    Косвенная прибыль Code Coverage
    • Знаем что не интересно
    • Знаем горячие фичи
    

    View Slide

31. Загружаем
    лениво
    

    View Slide

32. 32
    Как использовать
    • Выделяем холодный код
    • Делим код на модули
    • Загружаем по требованию
    

    View Slide

33. 33
    Библиотеки для ленивой загрузки
    • RequireJS + r.js
    • LABjs, YepNope, Headjs
    • LMD
    

    View Slide

34. Деградация
    проекта. Как не
    допустить?
    

    View Slide

35. 35
    Деградация происходит из-за
    • Не соблюдается Code Style
    • Децентрализация
    • Отсутствие документации
    

    View Slide

36. 36
    Способы предотвращения деградации
    • Единый Code Style
    • Коммит через Code Review
    • Проверка кода c JSHint
    • Автотесты
    • Плановые рефакторинги
    

    View Slide

37. Что нужно
    пользователю?
    

    View Slide

38. 38
    Что нужно пользователю
    • Стабильная работа
    • Быстрая загрузка
    • "Прикольные фичи!!11"
    

    View Slide

39. 39
    Как узнать
    какие фичи
    нужны/не нужны?
    

    View Slide

40. 40
    Что нужно пользователю
    • Опросники
    • Счетчики
    • Code Coverage
    • Анализ конкурентов
    

    View Slide

41. 41
    Холодная фича –
    не нужная фича?
    

    View Slide

42. 42
    Проблемы Холодной фичи
    • Не знают о ней
    • Не могут найти
    • Не удобная/не привыкли
    • Не нужна
    

    View Slide

43. Оптимизируем
    затраты
    

    View Slide

44. 44
    На что нужно обратить внимание
    • Максимум автоматизации
    –  Отлов ошибок
    –  Хороший IDE
    –  Статический анализ кода с JSHint
    • Не пишем лишнее
    –  Формы с обсуждением фичей
    –  Взвешиваем каждую фичу
    –  Code Coverage для анализа кода
    

    View Slide

45. Михаил Давыдов
    Яндекс
    i@azproduction.ru
    azproduction
    Спасибо
    

    View Slide