Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jinba - frontendconf.ru/2015

2,139 views

Published on

My talk at http://frontendconf.ru/2015/abstracts/1777

Published in: Engineering
  • Be the first to comment

Jinba - frontendconf.ru/2015

  1. 1. Реалтайм статистика скорости работы нативных и веб-приложений у реальных пользователей Pavel Dovbush @
  2. 2. RUM Real User Monitoring Реальный UX
  3. 3. ● DOMContentLoaded, onLoad ● W3C Navigation Timing ● W3C Resource Timing ● W3C User Timing ● Нативные приложения Что
  4. 4. W3C Navigation Timing
  5. 5. W3C Resource Timing
  6. 6. Load time - 32s
  7. 7. UX vs. onLoad source
  8. 8. Что такое UX? VS.
  9. 9. ● performance.mark(name) ● performance.measure(name, mark1, mark2) W3C User Timing
  10. 10. WebSite hit
  11. 11. WebApp hit
  12. 12. Android hit
  13. 13. Как собрать данные? Специализированные Всё-в-одном
  14. 14. Собираем сами WEB cluster Хранилищ е Графики Приложение
  15. 15. github.com/dpp-name/jinba tiny.cc/jinba Jinba
  16. 16. ● Микро-библиотека ○ JavaScript ○ Android ○ iOS ○ Windows phone ● Набор соглашений ● Инфраструктура ○ Сбор ○ Визуализация ○ Аналитика Jinba
  17. 17. npm install jinba-js-client var Jinba = require('jinba-js-client'); var r = new Jinba.Request(location.pathname, { app_label: 'example' }); r.startMeasurement('some-id', 'init'); doInit(function callback() { r.stopMeasurement('some-id'); }); r.end(); Пример
  18. 18. [ { name: '/', value: 321, tags: { app_label: 'example', errorStatus: 0 }, measurements: [ { name: 'init', value: 275 }, …. { name: 'foo-1', value: 0 }, { name: 'bar-2', value: 17 }, …. Данные
  19. 19. ● Отфильтровать мусор ● Защитить от паразитного трафика ● Записать в хранилище ● Как можно быстрее! Прием данных
  20. 20. ● Быстрая вставка ● Разные “срезы” ● Возможность считать перцентили ● Хранить данные годами Требования к хранилищу
  21. 21. ● MySQL ● Syslog ● Hadoop ● InfluxDB ● StatsD Хранилище
  22. 22. ● MySQL engine ● Данные в памяти (за N минут) ● UDP вставка ● Отчеты по тэгам ● Реалтайм! pinba.org
  23. 23. ● tagN_info - отчеты по многим тэгам ● Перцентили ● Гистограммы ● Фильтрация по тегам реквеста Pinba для Jinba
  24. 24. Pinba 1.4M 25K RPS TPS
  25. 25. CREATE TABLE v2_jinba_country ( ... ) ENGINE=PINBA COMMENT='tagN_info:timer,mode,country::75,95'; pinbaSchema.createReport({ mysqlClient: mysqlClient, tablePrefix: 'v2_jinba', name: 'country', tags: ['timer', 'mode', 'country'] }); Создание отчета
  26. 26. mysql> desc v2_jinba_country; +--------------+--------------+ | Field | Type | +--------------+--------------+ | timer | varchar(64) | | mode | varchar(64) | | country | varchar(64) | | req_count | int(11) | | req_per_sec | float | | hit_count | int(11) | | hit_per_sec | float | | timer_value | float | | timer_median | float | | index_value | varchar(256) | | p75 | float | | p95 | float | +--------------+--------------+ Создание отчета
  27. 27. mysql> select timer, mode, hit_per_sec, timer_value/hit_count as timer_avg, timer_median, p75, p95 from v2_jinba where mode='webapp-badoo' and timer='usable' G *************************** 1. row *************************** timer: usable mode: webapp-badoo hit_per_sec: 739.025 timer_avg: 0.898577200534488 timer_median: 0.589789 p75: 0.854372 p95: 2.18598 Создание отчета
  28. 28. Гистограмма % of hits time
  29. 29. ● Pinba - последние 5 - 10 - 15 минут ● История - RRD (в перспективе InfluxDB) Хранение истории
  30. 30. pinba2influxdb createDB(influxClient, dbName) selectData(mysqlClient, dbName, tags) insertData(influxClient, dbName, result) InfluxDB
  31. 31. Как рисовать?
  32. 32. grafanaUtils createReportDashboard(url, grafanaKey, schema, name) "domain_country": { "rows_by": "timer", "tags": [ "mode", "timer", "domain", "country" ] } Grafana
  33. 33. Как рисовать?
  34. 34. Что получилось ➔ JinbaClient ➔ JinbaServer ➔ Pinba ➔ JinbaScripts ➔ InfluxDB ➔ Grafana
  35. 35. ● Тип запроса ● Таймер ● Страница / Экран ● Страна ● Браузер / Устройство Аналитика
  36. 36. ● Тип запроса ● Таймер ● Страница / Экран ● Страна ● Браузер / Устройство Аналитика 9 31 40 50 10 5.5 M
  37. 37. WebSite
  38. 38. WebApp
  39. 39. Android
  40. 40. Среднее и перцентили
  41. 41. Результаты оптимизации
  42. 42. Последствия редизайна
  43. 43. Сравнение стран
  44. 44. Сравнение браузеров
  45. 45. Сравнение страниц
  46. 46. ● Только вы можете определить `usable` ● Юзабилити важнее технических метрик ● Не смешивайте типы запросов ● Выделяйте общие группы ● Перцентили, а не среднее Итого
  47. 47. Павел Довбуш <dpp@dpp.su> Jinba github.com/dpp-name/jinba Pinba http://pinba.org/ Вопросы?

×