Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Code Fest - Работает? Стабильно? Эффективно?
Mikhail Davydov
September 23, 2013
Education
0
75
Code Fest - Работает? Стабильно? Эффективно?
Mikhail Davydov
September 23, 2013
Tweet
Share
More Decks by Mikhail Davydov
See All by Mikhail Davydov
Back To Text UI
azproduction
3
200
Promise – это не больно
azproduction
0
140
Components Now!
azproduction
3
89
ШРИ - JavaScript Event Model
azproduction
0
150
ШРИ - Code Style
azproduction
0
75
HTML5 Camp - JavaScript на фронте и в тылу
azproduction
0
180
UWDC - Модули и сборка JavaScript
azproduction
0
96
Шаблонизация
azproduction
0
78
КРиПИ - Node.js – серверный JavaScript
azproduction
0
88
Other Decks in Education
See All in Education
Rails Girls Gathering Japan 2022 GMO Pepabo Sponsor Talk
yutokyokutyo
0
210
Statistical Rethinking 2023 - Lecture 05
rmcelreath
0
230
27日間で Google Cloud 認定資格を5つ取得した勉強法
shnakamura
0
110
HCL Notes で管理する AWS リソース
harunakano
0
1.3k
リストやタプルの使い方 / Python List
kaityo256
PRO
0
1.2k
共テ前日からでも間に合う確率分布
cp20
0
280
Adobe Express
matleenalaakso
1
6.2k
Hololens2と 小中高プログラミング教育の利用にむけた試行 / XRMTG 2023-1-18
gishi_yama
0
130
Kullback-Leibler 距離のあれこれ / KL Divergence
kaityo256
PRO
0
550
クラスとオブジェクト指向 / Python Class
kaityo256
PRO
3
2.5k
Web 2.0 Patterns and Technologies - Lecture 8 - Web Technologies (1019888BNR)
signer
PRO
0
1.3k
Animaatiot opetuksessa
matleenalaakso
0
2.2k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
346
17k
In The Pink: A Labor of Love
frogandcode
132
21k
Web development in the modern age
philhawksworth
197
9.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Making the Leap to Tech Lead
cromwellryan
116
7.6k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
Documentation Writing (for coders)
carmenintech
51
2.9k
5 minutes of I Can Smell Your CMS
philhawksworth
198
18k
KATA
mclloyd
12
9.7k
A Modern Web Designer's Workflow
chriscoyier
690
180k
Docker and Python
trallard
30
1.9k
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
Transcript
Работает? Стабильно? Эффективно? Михаил Давыдов, Яндекс
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 L
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 для анализа кода
Михаил Давыдов Яндекс
[email protected]
azproduction Спасибо