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

Like this? Share it with your network

Share

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

  • 569 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
569
On Slideshare
474
From Embeds
95
Number of Embeds
2

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 95

http://2013.codefest.ru 92
http://2014.codefest.ru 3

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Работает?Стабильно?Эффективно?Михаил Давыдов,Яндекс
  • 2. Error on line 1 column57841. Ololo is notdefined…
  • 3. Воспроизводится! В норм. браузере!
  • 4. 4Эта проблема легко решается•Это уже воспроизвелось!•Reformat Code•SourceMap
  • 5. 5Reformat Code
  • 6. 6SourceMap•Сопоставляет код коду•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. 10Visual 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-Sourcehttps://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 Coveragehttps://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.ruazproductionСпасибо