codefest 2013. Давыдов М. — Проект на бою. Работает?...

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

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

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

4

Эта проблема легко решается

•Это уже воспроизвелось!•Reformat Code•SourceMap

5

Reformat Code

6

SourceMap

•Сопоставляет код коду•UglifyJS•Chromium browser•CoffeeScript, TypeScript, JS

Статья - http://clck.ru/8bjOIВизуализатор - http://clck.ru/8bjOQ

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 – FTW!

10

Visual 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 Analytics– Яндекс.Метрика

http://stacktracejs.com/

19

Отлов ошибок в фоне

•Raven.js– Клиент для Sentry– window.onerror = Raven.process;– Open-Source

https://github.com/getsentry/raven-js

20

Сервисы для отлова ошибок

•Qbaka•Proxino•Errorception

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

22

Как предотвратить

•Хороший IDE– Ловит 95% проблем

•Статический анализ– Автоматический!– JSLint– JSHint

•Тестированиеhttp://www.jshint.com/

Хороший IDE – http://clck.ru/8bosY

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

24

Как оптимизировать

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

25

Вынести максимум в CDN

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

26

Найти холодный и мертвый код

•Аналитически– Своим умом– С помощью IDE

•Счетчики для "фичей"– Google Analytics– Яндекс.Метрика

•Code Coverage

27

Счетчики для "фичей"

•Это дешево– Сервисы аналитики есть везде

•Нужно вешать счетчики•Отчет слишком общий

28

Статистический Code Coverage

•СС – не только для тестов•Пользователь – лучший тестер

•Дешево и надежно•Можно управлять покрытием•Мониторится все

29

Статистический Code Coverage

https://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

•Не пишем лишнее– Формы с обсуждением фичей– Взвешиваем каждую фичу– Code Coverage для анализа кода

Михаил ДавыдовЯндекс

i@azproduction.ruazproduction

Спасибо