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