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 

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
Спасибо