Code Fest - Работает? Стабильно? Эффективно?

Transcript

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 L

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