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

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

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

Mikhail Davydov

September 23, 2013
Tweet

More Decks by Mikhail Davydov

Other Decks in Education

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. 5
    Reformat Code

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. Михаил Давыдов
    Яндекс
    [email protected]
    azproduction
    Спасибо

    View full-size slide