Edge, Spartan и приложения на HTML/JS для Windows

Microsoft Developer Tour
Технологическая экспедиция
msdevtour.ru
Microsoft Developer Tour
Технологическая экспедиция
#msdevtour
Edge, Spartan и приложения
на HTML/JS для Windows
Константин Кичинский
Эксперт по стратегическим технологиям, Microsoft
На пути к лучшему вебу
1, 2, 3, 4, 5, вышел зайчик погулять…
Microsoft Developer Tour #MSDevTour
1995
2015
1 2
3
4
4.x
5
5.5
6
7
Trident
8
9
10
11
HTML4, ES3, CSS2
1995
2015
1 2
3
4
4.x
5
5.5
6
7
8
Trident
!DOCTYPE
Quirks
Strict
9
10
11
HTML4, ES3, CSS2
CSS2.1
1995
2015
1 2
3
4
4.x
5
5.5
6
7
8
Trident
!DOCTYPE
x-ua-compatible
IE5
Quirks
IE7
Compatibility
View
IE8
Standards
Mode
9
10
11
HTML4, ES3, CSS2
CSS2.1 HTML5, SVG, ES5
1995
2015
1 2
3
4
4.x
5
5.5
6
7
8
Trident
!DOCTYPE
IE5
Quirks
IE7
Compatibility
View
x-ua-compatible
IE9
Standards
Mode
IE8
Standards
Mode
9
10
11
HTML4, ES3, CSS2
CSS2.1 HTML5, SVG, ES5, CSS3
1995
2015
1 2
3
4
4.x
5
5.5
6
7
8
Trident
!DOCTYPE
IE5
IE7
IE8
Quirks
Compatibility
View
Standards
Mode
IE9
QME
IE10
x-ua-compatible
Standards
Mode
Quirks Mode
Emulation
Standards
Mode
9
10
11
ОХ УЖ ЭТИ IE!
HTML4, ES3, CSS2
Modern Web
Legacy Web
HTML5, SVG, ES5, CSS3
CSS2.1
1995
2015
1 2
3
4
4.x
5
5.5
6
7
8
Trident
!DOCTYPE
IE5
IE7
IE8
EMIE
Quirks
Compat View
Standards
Mode
Enterprise
Mode
IE9
IE10
QME
IE11
x-ua-compatible
Standards
Mode
Standards
Mode
Quirks Mode
Emulation
Standards
Mode
9
10
11
👿 АД ВЕБ-РАЗРАБОТЧИКА
В аду плохого веб-разработчика
заставляют проверять свой сайт
в каждой версии каждого браузера.
МЫ ХОТИМ ОДНУ
ПОСТОЯННО СВEЖУЮ
ВЕРСИЮ ДВИЖКА
Windows
Adaptive
User Interface
Natural
User Inputs
One SDK +
Tooling
One Store +
One Dev Center
Единая Windows-платформа
Cloud
Services
Windows как сервис
Быстрое обновление пользователей
Фрагментация мешает разработчикам радовать пользователей
Добавление новых возможностей по готовности, не дожидаясь следующей
«большой» версии
Windows 10 будет бесплатным обновлением
Доступно через Windows Update
1 миллиард устройств, подключенных к WU и готовых к Windows 10
Windows 7
650M auto-updated to SP1
Windows 8.x
200M auto-updated
to 8.1
WP
Xbox
1.5+ млрд Windows ПК, WP, Xbox
Как помочь все протестировать?
Частые и свежие обновления
Регулярные превью-версии через Windows Insider
Пользователи могут выбрать частоту (“flight ring”)
Постоянная обратная связь
1+ млн отзывов через приложение Windows Feedback
Данные и телеметрия для принятия инженерных решений
Команды нацелены на отзывы пользователей и заказчиков
DEMO
Windows Feedback
Microsoft Developer Tour #MSDevTour
Project Spartan
Проект “Spartan” (это кодовое имя)
Новый браузер для всех устройств на Windows 10
Построен на Universal App Platform
Готовность к будущему
Нет наследия вроде тулбаров и BHO
Современные механизмы защиты (64bit, AppContainer, EPM)
Может запустить IE для совместимости
Продвинутые возможности
Интеграция цифровой помощницы Кортаны
Режим чтения, в т.ч. оффлайн
Встроенный режим заметок и шаринга
DEMO
IE11, Project Spartan
Microsoft Developer Tour #MSDevTour
EDGEHtml
Я смотрел, как Джастин Роджерс, один из наших
инженеров, нажимает “Enter” на коммит, который
форкнет движок. Это займет около 45 минут только на
обработку (просто внесение изменений, не сборку!).
Когда все закончилось, в комнате стояла освобождающая тишина.
Тогда мы могли только представить, что этот шаг позволит нам
сделать: начать удалять код, любимое состояние
катарсиса для каждого разработчика.
Jacob Rosssi
Microsoft EdgeHTML
Microsoft EdgeHTML
Постоянно свежий
Постоянно
свежий
INTEROPERABILITY
COMPATIBILITY
Зачем нужен новый движок?
Приоритеты конкуренции: совместимость и интероперабельность
 Пользователи хотят, чтобы 10-летней давности продолжали работать
 Пользователи хотят, чтобы современный веб «просто работал»
 Разработчики хотят поддержки последних и классных веб-стандартов
Переосмысление предположений
 Версионность режима документов не вписывается в
эволюционирующий веб и быстры цикл обновления
 Список совместимости не масштабируется на длинный хвост сайтов
 Фокус на стандартах не всегда приводит к интероперабельности
Интероперабельность
Interoperability Trident (EdgeHTML)
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML,
like Gecko) Chrome/36.0.1985.143 Safari/537.36 Edge/12.0
Chrome
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML,
like Gecko) Chrome/39.0.2171.95 Safari/537.36
Интероперабельность на практике
IE11 в Windows 8.1
С поддержкой –webkit transitions
Интероперабельность на практике
Windows Phone 8.1
Новый user-agent
Удалена проверка флага
‘installable’ в cross-origin
шрифтах
Интероперабельность на практике
Windows Phone 8.1
С поддержкой –webkit-gradient
НОВЫЕ
ФИШКИ
Новые возможности и обновления
CSS
•
•
•
•
@supports
Flexbox standards update
dppx unit
transform-style: preserve-3d
• Filter effects
Storage & networking
•
•
•
•
HTTP/2
Content security policy
Web Crypto API updates
HSTS (HTTP Strict Transport
Security
•
•
•
•
•
Media capture
HLS
WebAudio
Video Tracks
WAV Audio support
Input & Editing
JavaScript
• ES6 Math, Number, String,
RegExp & Object built-ins
• Arrow functions, Enhanced
object literal, Template strings,
Default, Rest, Spread
• Map, Set, Weakmap, __proto__,
Proxies
• Let, Const, Promises, Classes
Media & RTC
DOM & Graphics
• SVG foreignobject
• SVG attribute animation
• Complete WebGL support
• DOM event constructors
• DOM Level 3 XPath
• Touch events
•
•
•
•
Pointer lock API
Media Queries L4 - Interaction
Selection API
Gamepad API
Shipped
Preview Release
In development
И еще…
2000+ Interoperability Fixes, Preserve-3d, Touch Events, CSS Filter Effects, DOM Clipboard
Support, HTML Drag and Drop, Web Audio, CSS Position Sticky, CSS @supports, CSS Flexbox,
HTML Beacon, WebDriver, IndexedDB, WebCrypto, Internation Mixed Languages Support, CSS
Grid, CSS Variables, srcset, <picture> element, Web Workers Update, DOM4 Events, Font Loading,
BDI, Cross-domain, HLS Manifest, Block Ellipsis, WAV, @rules, CSS Text(), CSS Border Logical,
Logical Box Model, DOM Gamepad API, DOM FileSystem API, HTML <date> element, HTML
<keygen> element, HTML <main> element, HTML <output> element, HTML <summary>
element, HTML <detail> element, HTML <time> element, Native PDF, AppCache, SVG Hosting,
Mutation Observers, HTML bidirectional, HTML Speech API, SVG animations, SVG transitions, SVG
transforms, Canvas Path, Canvas Accessibility API, CSS Select Control, CSS Masking, CSS Clipping,
Navigation Error Logging, CSS element(), CSS Shapes, ORTC, CSS Escape, Shared Workers, ES6
Modules, ES6 Promises, CSS Intrinsic & Extrinsic Sizing, Web Components, CSS Scoped Styles,
HTTP 2.0, CSS Resize, WebGL, Canvas Blend Modes, CSS Interpolation, CSS Line Grid, CSS Line Box
Contain, CSS Ruby, DOM Event Constructors, HTML <ol> Reverse, Server-Sent Events, Viewport
APIs, Quota API, etc.
Windows 8 и ранее
Internet Explorer: MSHTML
Interoperability & compatibility
Versioned “document modes”
For modern HTML websites, intranet & Enterprise Mode
Windows 10 и далее
status.modern.ie
DEMO
Статус платформы
Microsoft Developer Tour #MSDevTour
Что делать?
Убедитесь, что ваш сайт правильно работает с новым UA
Используйте последнюю версию IE/Project Spartan
Удаленный доступ: https://remote.modern.ie
Windows Insider Program: https://insider.windows.com
Внедряйте проверку доступности функциональности
Feature detection
Не ориентируйтесь на UA (по возможности)
Делитесь отзывами
http://uservoice.modern.ie
https://connect.microsoft.com/ie
@IEDevChat
Приложения на HTML/JS
Когда рушатся стены и стираются границы
Microsoft Developer Tour #MSDevTour
Спектр веб-приложений
Упакованное
веб-приложение
Хостинг
веб-приложения
Веб-сайт
• Обнаруживается и
отображается через
браузер
• Большая часть приложения
хостится на сервере
• Доступ к нативным API
• Распространение через
магазин
• Контент внутри
приложения
• Cordova, WebView,
нативная поддержка
• Распространение через
магазин
Хостинг веб-приложений
Когда вы, почти ничего не делая, получаете много всего и сразу. 
Microsoft Developer Tour #MSDevTour
Хостинг приложений сегодня
App Store (iOS, Android, Windows…)
Native app container
WebView
Web Site
custom bridge
Native Code
Hosted Web App in Windows 10
App Store
Native app container
WebView
Web Site
Native Code
Windows APIs
Хостинг веб-приложений
Гибкость и богатство веба с мощностью приложения
Liberty’s Cafe
Перенести опыт работы с вебсайтом в магазин Windows
Обнаружение, интеграция в оболочку,
закрепление, Кортана,…
Использовать текущие
инвестиции и наработки
Сохранить при этом текущий процесс
разработки
Получить доступ к Universal APIs
Уведомления, камера, контакты,
календарь, …
Хостинг веб-приложений
if (typeof Windows != ‘undefined’) {
// Create an appointment with
Windows.ApplicationModel.Appointments.A
ppointment();
}
Native APIs
Native APIs
Хостинг веб-приложений
Используйте текущий процесс обновления сайта
Code
Push
Stage
Release
Манифейст для приложений
<uap:ApplicationContentUriRules>
<uap:Rule Type="include" WindowsRuntimeAccess="all"
Match="https://rjs.azurewebsites.net/" />
<uap:Rule Type="include" WindowsRuntimeAccess="allowForWebOnly"
Match="https://*.facebook.com/" />
<uap:Rule Type="include" WindowsRuntimeAccess="none" Match="http://bing.com/" />
<uap:Rule Type="include" Match="https://*.microsoft.com/" />
</uap:ApplicationContentUriRules>
W3C Standard
{
"name": "Super Web App",
"short_name": "SuperWA",
"start_url": "http://www.example.com",
"icons": [
{
"src": "tiny.png",
"sizes": "70x70"
},
{
"src": "square.png",
"sizes": "150x150"
},
{
"src": "apple-touch-icon-72x72-precomposed.png",
"sizes": "72x72"
},
{
"src": "niceicon.png",
"sizes": "128x128"
}
],
"display": "standalone",
"orientation": "landscape"
Manifest for Web Apps
http://w3c.github.io/manifest/
}
Упакованные (гибридные)
веб-приложений
Ваши врата в мир приложений на HTML/JS
Microsoft Developer Tour #MSDevTour
Улучшенный контрол WebView
Доступ к Windows Runtime
Свежий движок от Project Spartan
Полная поддержка богатых сценариев
AppCache, IndexedDB, Clipboard
Новые API для гибридных сценариев
AddWebAllowedObject, ClearData
Улучшенная производительность
DEMO
Хостинг веб-приложений в Windows 10
Microsoft Developer Tour #MSDevTour
Cordova в Windows 10
Использует движок Project Spartan
Нативная производительность JS
Поддержка Embedded Cordova
Доступ к Cordova API внутри WebView
Разработка для Windows-платформы, используя существующие
CLI или IDE для Cordova
Развитие веб-платформы
Улучшенная интероперабельность
Новый движок в Project Spartan — insider.windows.com
Всегда свежий (3000+ багов совместимости с браузерами исправлено)
Новые возможности
Более 40 новых веб-стандартов (ECMAScript6, HTTP2, WebGL, …)
Открытый процесс: следите на status.modern.ie или спрашивайте в @IEDevChat
Меньше границ между сайтами и приложениями
Разрешить хостящимся веб-приложениям доступ к Universal APIs
Улучшения в WebView и инструментах для Cordova
Edge, Spartan и приложения
на HTML/JS для Windows
Константин Кичинский
Эксперт по стратегическим технологиям, Microsoft
@kichinsky, konkich@microsoft.com
©2015 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or
trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this
presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee
the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN
THIS PRESENTATION.