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

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

B827d6cfdfbcfce33700b0e6cc03e344?s=128

Mikhail Davydov

September 23, 2013
Tweet

Transcript

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

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

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

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

    • SourceMap
  5. 5 Reformat Code

  6. 6 SourceMap • Сопоставляет код коду • UglifyJS • Chromium browser • CoffeeScript, TypeScript,

    JS Статья - http://clck.ru/8bjOI Визуализатор - http://clck.ru/8bjOQ
  7. 7 Воспроизводится! Только в IE < 8 L

  8. 8 Дебаг IE – это весело! • Любимые ошибки – Unexpected call

    to method or property access – Error: 'z' is null or not an object
  9. 9 И эта проблема легко решается • Это уже воспроизвелось! • console.log

    – не поможет… • F12 – не поможет… • Visual Studio Express – FTW!
  10. 10 Visual Studio Express for Web Как дебажить - http://clck.ru/8bjPG

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

  12. 12 И проблема решается • Связаться с пользователем • Попросить описать шаги

    • Скриншоты • Информация о браузере
  13. Отслеживание ошибок

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

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

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

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

  18. 18 Отлов ошибок в фоне • Ловим –  window.onerror + jQuery.error

    • Интерпретируем –  библиотека stacktracejs • Отправляем –  Google Analytics –  Яндекс.Метрика http://stacktracejs.com/
  19. 19 Отлов ошибок в фоне • Raven.js –  Клиент для Sentry

    –  window.onerror = Raven.process; –  Open-Source https://github.com/getsentry/raven-js
  20. 20 Сервисы для отлова ошибок • Qbaka • Proxino • Errorception

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

  22. 22 Как предотвратить • Хороший IDE –  Ловит 95% проблем • Статический

    анализ –  Автоматический! –  JSLint –  JSHint • Тестирование http://www.jshint.com/ Хороший IDE – http://clck.ru/8bosY
  23. Код долго загружается

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

    • Найти мертвый код • Сделать ленивую загрузку
  25. 25 Вынести максимум в CDN • http://yandex.st/ • http://cdnjs.com/ • Google – http://clck.ru/8bjZK

    • Держать запасную библиотеку!
  26. 26 Найти холодный и мертвый код • Аналитически –  Своим умом

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

    везде • Нужно вешать счетчики • Отчет слишком общий
  28. 28 Статистический Code Coverage • СС – не только для тестов

    • Пользователь – лучший тестер • Дешево и надежно • Можно управлять покрытием • Мониторится все
  29. 29 Статистический Code Coverage https://github.com/azproduction/lmd

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

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

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

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

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

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

    документации
  36. 36 Способы предотвращения деградации • Единый Code Style • Коммит через Code

    Review • Проверка кода c JSHint • Автотесты • Плановые рефакторинги
  37. Что нужно пользователю?

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

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

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

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

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

    найти • Не удобная/не привыкли • Не нужна
  43. Оптимизируем затраты

  44. 44 На что нужно обратить внимание • Максимум автоматизации –  Отлов

    ошибок –  Хороший IDE –  Статический анализ кода с JSHint • Не пишем лишнее –  Формы с обсуждением фичей –  Взвешиваем каждую фичу –  Code Coverage для анализа кода
  45. Михаил Давыдов Яндекс i@azproduction.ru azproduction Спасибо