State of theStandardized Web. YaC 2014
-
Upload
yandex -
Category
Technology
-
view
56 -
download
0
description
Transcript of State of theStandardized Web. YaC 2014
![Page 1: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/1.jpg)
State of theStandardized Web
Сергей Константинов, Яндекс, W3C TAG
![Page 2: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/2.jpg)
О себе
В Яндексе с 2008 года
Руковожу разработкой API Яндекс.Карт
С июля 2013 года в W3CTAG
![Page 3: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/3.jpg)
3
Web Standards: этапы развития
(с) http://theoatmeal.com/comics/working_home
![Page 4: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/4.jpg)
4
Web Standards: этапы развития
Нулевые
![Page 5: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/5.jpg)
5
Web Standards: этапы развития
(с) http://theoatmeal.com/comics/working_home
![Page 6: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/6.jpg)
6
Extensible Web Manifesto
› Focus on adding new low-level capabilities to the web platform that are secure and efficient
› Expose low-level capabilities that explain existing features, such as HTML and CSS, allowing authors to understand and replicate them.http://extensiblewebmanifesto.org/
![Page 7: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/7.jpg)
Вкусняшки:уже почти готово
![Page 8: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/8.jpg)
8
WebCrypto
│Привносит в платформу криптографические алгоритмы:
› генерация случайных последовательностей битов
› хэширование
› симметричная и ассиметричная криптография
› цифровые подписи
› клиентские сертификаты
› производные ключи
› использование системного keychain
› … и многое другоеhttp://www.w3.org/TR/WebCryptoAPI/
![Page 9: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/9.jpg)
![Page 10: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/10.jpg)
10
Будущее почти здесь
![Page 11: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/11.jpg)
11
Web Animations
│Low-level API для анимаций, призвано заменить собой:
› CSS Transitions
› CSS Animations
› SVG SMIL Animationshttp://w3c.github.io/web-animations/
![Page 12: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/12.jpg)
Web Animations
Позволяет построить существующие высокоуровневые анимации поверх унифицированного фреймворка
арelem.animate([
{ color: 'blue', offset: 0 },
{ color: 'green', offset: 1/3 },
{ color: 'red', offset: 2/3 },
{ color: 'yellow', offset: 1 }
], 2000);
![Page 13: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/13.jpg)
13
Web Animations
› Статус: Working Draft
› Имплементации: Blink (ограниченный сабсет)
› Stay Tuned
![Page 14: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/14.jpg)
14
Service workers
│ Веб-приложение получает возможность «установить» скрипт, который будет «жить» в браузере независимо от самого приложения и даже если само приложение закрыто.
![Page 15: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/15.jpg)
15
Service Workers
│Может использоваться для:
› работы офлайн
› работы с кэшами
› приёма push-уведомлений
› фоновой геолокации
› … кучи всякогоhttps://slightlyoff.github.io/ServiceWorker/spec/service_worker/
![Page 16: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/16.jpg)
16
Service Workers
› Статус: Editor's Draft
› Планы по имплементации — …
![Page 17: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/17.jpg)
Что дальше?
![Page 18: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/18.jpg)
18
Rendering
│Сейчас рендеринг в браузере выглядит так:
DOM Tree Render Tree
![Page 19: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/19.jpg)
19
Шаг 1: getQuadBoxes
│Возвращает массив четырёхугольников,соответствующих некоторому DOM-объекту
› учитывает CSS Transforms
› относительные позиции элементов
http://dev.w3.org/csswg/cssom-view/#the-geometryutils-interface
![Page 20: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/20.jpg)
20
Шаги 2, 3…
› Работа с CSS в JavaScript:
› псевдоклассы
› css variables
› метрики шрифтов
› положения переносов и переводов строк
![Page 21: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/21.jpg)
21
Шаги 2, 3…
› Работа с системными элементами
› формы
› скроллы
› active/focused
› contenteditable
![Page 22: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/22.jpg)
22
Sensors
› Сейчас: по API на каждый сенсор
› Когда-нибудь: унифицированный интерфейс для разных сенсоров https://github.com/dglazkov/tubeshttps://github.com/rwaldron/sensors/
![Page 23: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/23.jpg)
23
Permissions
› Сейчас: Permission Hell
› Когда-нибудь: система разрешений по запросу, когда доступ будет дан в ответ на действие пользователя, с пояснением, зачем этот доступ нужен.
![Page 24: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/24.jpg)
24
Где мы сейчас
Будущее почти здесь Есть прогрессВсё плохо, но мы работаем над этим
Web Crypto Web Audio Rendering
Web Animations Push Native Elements
Service Workers Shadow DOM Codecs
URL getQuadBoxes Editing
Fetch Intention Events Sensors
<template> Permissions
![Page 25: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/25.jpg)
Когда-нибудь мир станет лучше.Вопросы?
![Page 26: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/26.jpg)
А что насчёт Web Components?
Идея была хороша: раскрыть принципы работы системных компонентов и дать возможность делать свои
![Page 27: State of theStandardized Web. YaC 2014](https://reader034.fdocuments.us/reader034/viewer/2022052621/557f2b97d8b42a00268b4e01/html5/thumbnails/27.jpg)
27
А что насчёт Web Components?
Вторая часть, насчёт «делать свои компоненты», с оговорками, но летит.
Но вот с «объяснить, как работают нативные компоненты» ошибочка вышла.
Написать с помощью Web Components & Shadow DOM свой тэг <input> нельзя.
Поэтому я про них не рассказываю