0
Работает?Стабильно?Эффективно?Михаил Давыдов,Яндекс
Error on line 1 column57841. Ololo is notdefined…
Воспроизводится! В норм. браузере!
4Эта проблема легко решается•Это уже воспроизвелось!•Reformat Code•SourceMap
5Reformat Code
6SourceMap•Сопоставляет код коду•UglifyJS•Chromium browser•CoffeeScript, TypeScript, JSСтатья - http://clck.ru/8bjOIВизуал...
7Воспроизводится! Только в IE < 8 
8Дебаг IE – это весело!•Любимые ошибки–Unexpected call to method or property access–Error: z is null or not an object
9И эта проблема легко решается•Это уже воспроизвелось!•console.log – не поможет…•F12 – не поможет…•Visual Studio Express –...
10Visual Studio Express for WebКак дебажить - http://clck.ru/8bjPG
Ошибка нигде невоспроизводится…
12И проблема решается•Связаться с пользователем•Попросить описать шаги•Скриншоты•Информация о браузере
Отслеживаниеошибок
14Отслеживаем ошибки•Собираем все данные•Хорошая форма репорта•Отлов ошибок в фоне
15Собираем все данные•User Agent•OS•Список все плагинов
16Хорошая форма репорта•Все данные браузера•Скриншот•Пошаговое воспроизведение
17Распространѐнные формы репорта•User Voice•Get Satisfaction•UserEchо
18Отлов ошибок в фоне•Ловим– window.onerror + jQuery.error•Интерпретируем– библиотека stacktracejs•Отправляем– Google Anal...
19Отлов ошибок в фоне•Raven.js– Клиент для Sentry– window.onerror = Raven.process;– Open-Sourcehttps://github.com/getsentr...
20Сервисы для отлова ошибок•Qbaka•Proxino•Errorception
Предотвращениеошибок, как?
22Как предотвратить•Хороший IDE– Ловит 95% проблем•Статический анализ– Автоматический!– JSLint– JSHint•Тестированиеhttp://...
Код долгозагружается
24Как оптимизировать•Вынести максимум в CDN•Найти холодный код•Найти мертвый код•Сделать ленивую загрузку
25Вынести максимум в CDN•http://yandex.st/•http://cdnjs.com/•Google – http://clck.ru/8bjZK•Держать запаснуюбиблиотеку!
26Найти холодный и мертвый код•Аналитически– Своим умом– С помощью IDE•Счетчики для "фичей"– Google Analytics– Яндекс.Метр...
27Счетчики для "фичей"•Это дешево– Сервисы аналитики есть везде•Нужно вешать счетчики•Отчет слишком общий
28Статистический Code Coverage•СС – не только для тестов•Пользователь – лучший тестер•Дешево и надежно•Можно управлять пок...
29Статистический Code Coveragehttps://github.com/azproduction/lmd
30Косвенная прибыль Code Coverage•Знаем что не интересно•Знаем горячие фичи
Загружаемлениво
32Как использовать•Выделяем холодный код•Делим код на модули•Загружаем по требованию
33Библиотеки для ленивой загрузки•RequireJS + r.js•LABjs, YepNope, Headjs•LMD
Деградацияпроекта. Как недопустить?
35Деградация происходит из-за•Не соблюдается Code Style•Децентрализация•Отсутствие документации
36Способы предотвращения деградации•Единый Code Style•Коммит через Code Review•Проверка кода c JSHint•Автотесты•Плановые р...
Что нужнопользователю?
38Что нужно пользователю•Стабильная работа•Быстрая загрузка•"Прикольные фичи!!11"
39Как узнатькакие фичинужны/не нужны?
40Что нужно пользователю•Опросники•Счетчики•Code Coverage•Анализ конкурентов
41Холодная фича –не нужная фича?
42Проблемы Холодной фичи•Не знают о ней•Не могут найти•Не удобная/не привыкли•Не нужна
Оптимизируемзатраты
44На что нужно обратить внимание•Максимум автоматизации– Отлов ошибок– Хороший IDE– Статический анализ кода с JSHint•Не пи...
Михаил ДавыдовЯндексi@azproduction.ruazproductionСпасибо
Upcoming SlideShare
Loading in...5
×

CodeFest 2013. Давыдов М. — Проект на бою. Работает? Стабильно? Эффективно? Мониторим, анализируем, делаем лучше!

303

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
303
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "CodeFest 2013. Давыдов М. — Проект на бою. Работает? Стабильно? Эффективно? Мониторим, анализируем, делаем лучше!"

  1. 1. Работает?Стабильно?Эффективно?Михаил Давыдов,Яндекс
  2. 2. Error on line 1 column57841. Ololo is notdefined…
  3. 3. Воспроизводится! В норм. браузере!
  4. 4. 4Эта проблема легко решается•Это уже воспроизвелось!•Reformat Code•SourceMap
  5. 5. 5Reformat Code
  6. 6. 6SourceMap•Сопоставляет код коду•UglifyJS•Chromium browser•CoffeeScript, TypeScript, JSСтатья - http://clck.ru/8bjOIВизуализатор - http://clck.ru/8bjOQ
  7. 7. 7Воспроизводится! Только в IE < 8 
  8. 8. 8Дебаг IE – это весело!•Любимые ошибки–Unexpected call to method or property access–Error: z is null or not an object
  9. 9. 9И эта проблема легко решается•Это уже воспроизвелось!•console.log – не поможет…•F12 – не поможет…•Visual Studio Express – FTW!
  10. 10. 10Visual Studio Express for WebКак дебажить - http://clck.ru/8bjPG
  11. 11. Ошибка нигде невоспроизводится…
  12. 12. 12И проблема решается•Связаться с пользователем•Попросить описать шаги•Скриншоты•Информация о браузере
  13. 13. Отслеживаниеошибок
  14. 14. 14Отслеживаем ошибки•Собираем все данные•Хорошая форма репорта•Отлов ошибок в фоне
  15. 15. 15Собираем все данные•User Agent•OS•Список все плагинов
  16. 16. 16Хорошая форма репорта•Все данные браузера•Скриншот•Пошаговое воспроизведение
  17. 17. 17Распространѐнные формы репорта•User Voice•Get Satisfaction•UserEchо
  18. 18. 18Отлов ошибок в фоне•Ловим– window.onerror + jQuery.error•Интерпретируем– библиотека stacktracejs•Отправляем– Google Analytics– Яндекс.Метрикаhttp://stacktracejs.com/
  19. 19. 19Отлов ошибок в фоне•Raven.js– Клиент для Sentry– window.onerror = Raven.process;– Open-Sourcehttps://github.com/getsentry/raven-js
  20. 20. 20Сервисы для отлова ошибок•Qbaka•Proxino•Errorception
  21. 21. Предотвращениеошибок, как?
  22. 22. 22Как предотвратить•Хороший IDE– Ловит 95% проблем•Статический анализ– Автоматический!– JSLint– JSHint•Тестированиеhttp://www.jshint.com/Хороший IDE – http://clck.ru/8bosY
  23. 23. Код долгозагружается
  24. 24. 24Как оптимизировать•Вынести максимум в CDN•Найти холодный код•Найти мертвый код•Сделать ленивую загрузку
  25. 25. 25Вынести максимум в CDN•http://yandex.st/•http://cdnjs.com/•Google – http://clck.ru/8bjZK•Держать запаснуюбиблиотеку!
  26. 26. 26Найти холодный и мертвый код•Аналитически– Своим умом– С помощью IDE•Счетчики для "фичей"– Google Analytics– Яндекс.Метрика•Code Coverage
  27. 27. 27Счетчики для "фичей"•Это дешево– Сервисы аналитики есть везде•Нужно вешать счетчики•Отчет слишком общий
  28. 28. 28Статистический Code Coverage•СС – не только для тестов•Пользователь – лучший тестер•Дешево и надежно•Можно управлять покрытием•Мониторится все
  29. 29. 29Статистический Code Coveragehttps://github.com/azproduction/lmd
  30. 30. 30Косвенная прибыль Code Coverage•Знаем что не интересно•Знаем горячие фичи
  31. 31. Загружаемлениво
  32. 32. 32Как использовать•Выделяем холодный код•Делим код на модули•Загружаем по требованию
  33. 33. 33Библиотеки для ленивой загрузки•RequireJS + r.js•LABjs, YepNope, Headjs•LMD
  34. 34. Деградацияпроекта. Как недопустить?
  35. 35. 35Деградация происходит из-за•Не соблюдается Code Style•Децентрализация•Отсутствие документации
  36. 36. 36Способы предотвращения деградации•Единый Code Style•Коммит через Code Review•Проверка кода c JSHint•Автотесты•Плановые рефакторинги
  37. 37. Что нужнопользователю?
  38. 38. 38Что нужно пользователю•Стабильная работа•Быстрая загрузка•"Прикольные фичи!!11"
  39. 39. 39Как узнатькакие фичинужны/не нужны?
  40. 40. 40Что нужно пользователю•Опросники•Счетчики•Code Coverage•Анализ конкурентов
  41. 41. 41Холодная фича –не нужная фича?
  42. 42. 42Проблемы Холодной фичи•Не знают о ней•Не могут найти•Не удобная/не привыкли•Не нужна
  43. 43. Оптимизируемзатраты
  44. 44. 44На что нужно обратить внимание•Максимум автоматизации– Отлов ошибок– Хороший IDE– Статический анализ кода с JSHint•Не пишем лишнее– Формы с обсуждением фичей– Взвешиваем каждую фичу– Code Coverage для анализа кода
  45. 45. Михаил ДавыдовЯндексi@azproduction.ruazproductionСпасибо
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×