Практическое применение HTML5 в Я.Почте

1,379 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,379
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Практическое применение HTML5 в Я.Почте

  1. 1. Практическое применениеHTML5 в Я.ПочтеАлексей АндросовСтарший разработчик интерфейсов
  2. 2. Будущее? Реальность!3
  3. 3. Как мы тестируем новыетехнологии?4
  4. 4. Перед внедрением1. После реализации новой фичи в каком-либо браузере смотрим где она может быть полезна в Почте2. Изучаем фичу на живом прототипе, смотрим на границы возможностей, проблемы и баги3. Принимаем решение о внедрении6
  5. 5. После внедрения function errorLog(msg) { new Image().src = /monitoring.txt? + msg= + encodeURIComponent(msg) } window.onerror =function(msg, url, line){ errorLog(msg, url, line) } try { // опасное или непонятное место } catch(e) { errorLog(e) }7
  6. 6. После внедрения8
  7. 7. WebSocket/SSE,или как работаетавтообновление ящика вЯ.Почте9
  8. 8. Автообновление почтыЗадача:— Поддерживать ящик в актуальном состоянии без перезагрузки страницы— Надо ходить за данными в другой домен10
  9. 9. Автообновление почтыРешение:— WebSocket— Server-Sent Events— flash-websocket— В качестве запасного варианта iframe + long- polling + postMessage11
  10. 10. Что передаётся? { "operation": "тип операции", "data": "xml-данные", "lcn": "номер ревизии", "connection_id": "id соединения" }— lcn нужен, чтобы понимать, не пропустили ли мы сообщений, например, при разрыве соединения— connecton_id нужен, чтобы понимать, откуда произошло изменение12
  11. 11. Что получилось?— Простая реализация поддержки ящика в актуальном состоянии на современных клиентских технологиях— Постоянное соединение с сервером, а значит — минимальные задержки в доставке13
  12. 12. WebSocket14
  13. 13. WebSocket— Постоянное соединение— Честный двухсторонний обмен данными без лишних телодвижений— Не учитывается в ограничениях на количество одновременных подключений, т.к. другой протокол— Возможность кроссдоменных запросов— Chrome 4+, Firefox 6+, IE 10, Safari 5+15
  14. 14. Автообновление почтыНедостатки— Протокол и JS API до сих пор не утверждены как стандарт— В JS API нельзя получить заголовки ответа. Например, вместо 403 надо отвечать специальным сообщением— При потере интернета не всегда закрывается соединение. Нужны ping-pong события для проверки соединения— Надо поддерживать много версий протокола: 75, 76 (до принятия в IETF), IETF 07-1716
  15. 15. WebSocketFAIL— В ноябре 2010 года были опубликованы исследования протокола. Из-за багов в реализации прозрачных прокси-серверов с помощью протокола можно подменять кэш сервера— Реализован в Fx 4+ и Opera 11+. По-умолчанию выключен. В Fx 6+ включен по-умолчанию (MozWebSocket)— Блокируется некоторыми антивирусами (например, Avast)17
  16. 16. Server-Sent Events(EventSource)18
  17. 17. Server-Sent Events— Одностороннее постоянное соединение server→client— Простейший text-based протокол поверх HTTP— Обработчики onopen, onmessage, onerror— Умеет сам переустанавливать соединение— Поддержка: Chrome 6+, Fx 6+, Opera 11+, Safari 5+19
  18. 18. Server-Sent Events HTTP/1.1 200 OK Cache-Control: no-cache Content-Type: text/event-stream : this is commentnn data: some textnn data: another messagen data: with two linesnn event: named_eventn data: yet another messagenn20
  19. 19. Server-Sent EventsПроблемы:— Стандарт находится в статусе «черновик»— Нет поддержки CORS— Если сервер не ответил HTTP 200 или Content- type: text/event-stream → onerror без дополнительных сведений— В Fx и Opera onopen случается не сразу, надо отправить фейковые данные. Можно, например, комментарий— Надо следить за readyState, чтобы отличить переподключение от закрытия соединения21
  20. 20. Server-Sent EventsПроблемы:— Именованное событие приходит в обработчик sse.addEventListener(event_name, cb)— Если имени нет, пустое или message, то приходит в sse.addEventListener(message, cb)— Как получать все именованные события в один обработчик - непонятно22
  21. 21. Cross-site XHR + localStorage, или как грузится Я.Почта23
  22. 22. Кэширование статикиПроблема— Для инициализации надо загрузить 1Мб (gzip - 350кб) статики (css+js+xsl)— Браузерное кэширование работает, но возникают задержи, т. к. браузер пытается понять, надо ли обновить файл— Браузерный кэш может вытесниться другими файлами24
  23. 23. Кэширование статикиРешение— Выносим логику инвалидации кэша на сторону JavaScript— Для этого нужны кроссдоменный XHR, чтобы получить содержимое файлов, и localStorage, чтобы их хранить25
  24. 24. Кэширование статикиПолучаем— Данные из localStorage не удалятся, пока мы этого не захотим или пользователь их не очистит— Нет задержек при обращении к кэшу— Разгружаем статический кластер26
  25. 25. localStorage27
  26. 26. localStorage— Локальное постоянное key-value хранилище текстовых данных— Простое API: getItem(), setItem(), key(), clear()— Chrome 4+, Firefox 3.5+, IE8+, Opera 10.5+, Safari 4+.28
  27. 27. localStorageГлавное правило29
  28. 28. localStorageГлавное правило Все обращения к методам и свойствам надо оборачивать в try-catch! github.com/doochik/SafeLS30
  29. 29. localStorage… а в IPad try { ls.setItem(key, data); } catch(e) { ls.removeItem(key); ls.setItem(key, data) }31
  30. 30. localStorageОграничения на домен A mostly arbitrary limit of fve megabytes per origin isrecommended. dev.w3.org/html5/webstorage/#disk-space Все браузеры следуют этой рекомендации, но…32
  31. 31. localStorageОграничения на домен— Chrome, Safari используют SQLite и UTF-16, поэтому записать можно ~2,5 млн. символов— Fx, — SQLite + UTF-8, ~5 млн. символов— IE — xml, ~5 млн. символов— Opera — xml + base64, ~2 млн. символов, появляется сообщение с просьбой увеличить размер— Если сделать hosted app для Chrome, то можно получить разрешение на безлимитный storage :)33
  32. 32. localStorageГлобальные ограничения User agents should guard against sites storing dataunder the origins other afliated sites, e.g. storing up tothe limit in a1.example.com, a2.example.com, etc,circumventing the main example.com storage limit. dev.w3.org/html5/webstorage/#disk-space— Chrome, Safari — нет— Fx, IE ~5 млн. символов на домен 2-го уровня— Opera — ~35 млн. символов на всё34
  33. 33. Кроссдоменный XHR35
  34. 34. Cross-site XHR with CORS— Обычный XMLHtpRequest, но с возможностью делать запросы в другой домен— В ответе сервера должен появиться HTTP- заголовок «Access-Control-Allow-Origin: *»— Chrome 3+, Firefox 3.5+, IE8+ (XDomainRequest), Safari 4+ <!–- Определение поддержки --> !!(window[XDomainRequest] || (window[XMLHttpRequest] && withCredentials in new XMLHttpRequest()));36
  35. 35. Cross-site XHR with CORSПроблемы— Не все прокси-сервера пропускают заголовки Access-Control-Allow-Origin xdr[onerror] = function(){ // fallback до обычный системы загрузки }— XdomainRequest в IE не является полноценной заменой XHR, имеет ограниченный функционал (htp://clck.ru/QBRe)— В IE9 в режиме IE9 виснут запросы xdr[onprogress] = function() {};37
  36. 36. postMessage38
  37. 37. postMessage— Асинхронный обмен данными между разными window и origin (IE8 синхронный sic!)— Поддержка в Chrome 4+, Firefox 3+, IE8+, Opera 9.5+, Safari 4+— В Chrome, Fx 6+, Opera 10.5+, Safari можно отправлять объекты, в остальных — только строки— Быстрее, чем window.setTimeout(cb, 0)39
  38. 38. HTML5 data-* атрибуты40
  39. 39. data-* <div data-name="alexey" data-ids="2080000000089839302"> <!--- ... ---> </div>— element.dataset[name] в 10 раз медленнее element.getAtribute(data-name)— $(div).data(ids) === 2080000000089839400. Потому что слишком большое число :)41
  40. 40. online/offline events42
  41. 41. online/offline— Браузер может говорить, что поддерживает события, а событий отсылать не будет— Браузер может говорить, что поддерживает события, а события отправит только при ручном переключении в «Автономный режим»— События могут быть в window и document— Нужно полить свойство navigator.onLine44
  42. 42. online/offline— Если ofine, значит нет ни одного активного сетевого соединения— Если online, есть хотя бы одно любое активное сетевое соединение. Это не означает, что есть доступ в интернет или до нужного ресурса— Надо проверять реальный доступ до нужного ресурса (ajax, img, ...)46
  43. 43. Cache manifest47
  44. 44. Cache manifest— Нужен для ofine-кэширования веб-приложения— Можно рассказать браузерам, какие именно файлы можно закэшировать, а за какими надо всегда ходить на сайт— Обновили manifest — значит, вышла новая версия— Все бы хорошо, но … Firefox до 4 версии не реагирует на обновление manifest— дальше можно не тестировать :)48
  45. 45. А если серьезно, то...— После обновления версии надо перезагружать страницу— Кэшируется страница, в которой указан manifest. А у нас там логин! Но это можно обойти с помощью Cache-Control: no-store— В Firefox есть предупреждение о том, что сайт собирается что-то кэшировать— Fallback-секция не работает49
  46. 46. Вопросы?50
  47. 47. Алексей АндросовСтарший разработчик интерфейсовaandrosov@yandex-team.ru@doochik

×