Доклад с конференции FronEndConf 2015. Microsoft Edge и платформа веб-приложений в Windows 10. Константин Кичинский, Microsoft

1. Константин Кичинский
Эксперт по стратегическим технологиям
Microsoft
Microsoft Edge и
платформа веб-
приложений в
Windows 10

2. MICROSOFT
EDGE
EDGEHTML
CHAKRA
WEB APPS
BRIDGE
Новый движок Windows 10Новый браузер

3. Все меняется
Новый Microsoft

4. НОВЫЙ
CEO
УМНОЕ
ОБЛАКО
ДЛЯ ВСЕГО
ПЕРЕНОСИМЫЙ
МОБИЛЬНЫЙ
ОПЫТ
НОВЫЙ
ВЗГЛЯД

5. ПОМОЧЬ
ЛЮДЯМ
ДЕЛАТЬ
БОЛЬШЕ И
ДОСТИГАТЬ
БОЛЬШЕГО

6. НОВЫЙ
ПОДХОД
ОТКРЫТОСТЬ
И ПРОЗРАЧНОСТЬ
ШИРОКОЕ
ВЗАИМОДЕЙСТВИЕ
ИННОВАЦИИ
И ЭКСПЕРИМЕНТЫ

7. Новый браузер
Microsoft Edge

10. …🗟🖊

11. 👇
Чего люди ожидают от браузера?
🏥 🚀 🔋 🗪 🎓

12. Правильное время двигаться дальше!
Тяжкое наследие прошлого

13. 1995
3 41 2 5.5 65 7 84.x 9
2015
9 10 11
КЛАССНЫЙ
СОВРЕМЕННЫЙ
ПРОРЫВНОЙ
БРАУЗЕР

14. 1995
3 41 2 5.5 65 7 84.x 9
2015
9 10 11
HTML4, ES3, CSS2
!DOCTYPE
QUIRKS STRICT

15. 1995
3 41 2 5.5 65 7 84.x 9
2015
9 10 11
IE5
QUIRKS
IE7
COMPATIBILITY
VIEW
IE8
STANDARDS
MODE
CSS2.1HTML4, ES3, CSS2
!DOCTYPE
x-ua-compatible
content="edge"

16. 1995
3 41 2 5.5 65 7 84.x 9
2015
9 10 11
IE8
STANDARDS
MODE
IE9
STANDARDS
MODE
CSS2.1HTML4, ES3, CSS2 HTML5, SVG, ES5
!DOCTYPE
x-ua-compatible
content="edge"
IE5
QUIRKS
IE7
COMPATIBILITY
VIEW

17. 1995
3 41 2 5.5 65 7 84.x 9
2015
9 10 11
IE5
QUIRKS
IE8
STANDARDS
MODE
IE9
STANDARDS
MODE
CSS2.1HTML4, ES3, CSS2 HTML5, SVG, ES5
IE7
COMPATIBILITY
VIEW
!DOCTYPE
x-ua-compatible
content="edge"
QME
Quirks Mode
Emulation
IE10
STANDARDS
MODE

18. 1995
3 41 2 5.5 65 7 84.x 9
2015
9 10 11
IE5
QUIRKS
IE8
STANDARDS
MODE
IE9
STANDARDS
MODE
IE7
COMPAT.
VIEW
!DOCTYPE
x-ua-compatible
content="edge"
QME
Quirks Mode
Emulation
IE10
STANDARDS
MODE
Legacy Web
CSS2.1
Modern Web
HTML5, SVG, ES5, CSS3HTML4, ES3, CSS2
EMIE
Enterprise Mode
IE11
STANDARDS
MODE

19. 👿 АД ВЕБ-РАЗРАБОТЧИКА
В аду плохого веб-разработчика
заставляют проверять свой сайт
в каждой версии каждого браузера.
Включая мобильные!

20. 1995
3 41 2 5.5 65 7 84.x 9
2015
9 10 11
КЛАССНЫЙ
СОВРЕМЕННЫЙ
ПРОРЫВНОЙ
БРАУЗЕР
ActiveX (COM/OLE)
BHOs (Actions)
DX Filters/Transitions
VML
VBScript
Режимы документов (IE8)
Условные комментарии
…

21. 1995
3 41 2 5.5 65 7 84.x 9
2015
9 10 11
КЛАССНЫЙ
СОВРЕМЕННЫЙ
ПРОРЫВНОЙ
БРАУЗЕР
ActiveX (COM/OLE)
BHOs (Actions)
DX Filters/Transitions
VML
VBScript
Режимы документов (IE8)
Условные комментарии
…

22. 1995
3 41 2 5.5 65 7 84.x 9
2015
9 10 11
КЛАССНЫЙ
СОВРЕМЕННЫЙ
ПРОРЫВНОЙ
БРАУЗЕР
ActiveX (COM/OLE)
BHOs (Actions)
DX Filters/Transitions
VML
VBScript
Режимы документов (IE8)
Условные комментарии
…
УДАЛЕНО
220k+
Уникальных
строчек кода
6 режимов
документов
300+ APIs

23. Я смотрел, как Джастин Роджерс, один из наших
инженеров, нажимает “Enter” на коммит, который
форкнет движок. Это займет около 45 минут только на
обработку (просто внесение изменений, не сборку!).
Когда все закончилось, в комнате стояла освобождающая тишина.
Тогда мы могли только представить, что этот шаг позволит нам
сделать: начать удалять код, любимое состояние
катарсиса для каждого разработчика.
Jacob Rossi

24. 1995
3 41 2 5.5 65 7 84.x 9
2015
9 10 11
КЛАССНЫЙ
СОВРЕМЕННЫЙ
ПРОРЫВНОЙ
БРАУЗЕР
БОЛЬШЕ ВЕБ-СТАНДАРТОВ
БОЛЬШЕ СКОРОСТИ
БОЛЬШЕ НАДЕЖНОСТИ
БОЛЬШЕ ПРОДУКТИВНОСТИ
БОЛЬШЕ ПЕРСОНАЛЬНОСТИ
БОЛЬШЕ СВЕЖЕСТИ

25. 1995
3 41 2 5.5 65 7 84.x 9
2015
9 10 11
КЛАССНЫЙ
СОВРЕМЕННЫЙ
ПРОРЫВНОЙ
БРАУЗЕР
БОЛЬШЕ ВЕБ-СТАНДАРТОВ
БОЛЬШЕ СКОРОСТИ
БОЛЬШЕ НАДЕЖНОСТИ
БОЛЬШЕ ПРОДУКТИВНОСТИ
БОЛЬШЕ ПЕРСОНАЛЬНОСТИ
БОЛЬШЕ СВЕЖЕСТИ
И РАСШИРЕНИЯ…

26. MSHTML
СОВМЕСТИМОСТЬ
СО СТАРЫМИ ВЕРСИЯМИ
И ДРУГИМИ БРАУЗЕРАМИ
Веб, интранет, корпоративный режим
Наследие прошлого: ActiveX, BHO, …
WINDOWS 8 и ранее

27. Internet Explorer 11: MSHTML
СОВМЕСТИМОСТЬ
СО СТАРЫМИ ВЕРСИЯМИ
Веб, интранет, корпоративный режим
Наследие прошлого: ActiveX, BHO, …
Microsoft Edge: EdgeHTML
СОВМЕСТИМОСТЬ
С ДРУГИМИ БРАУЗЕРАМИ
Постоянно обновляемый движок
Свежий браузер для современных сайтов
Без бинарных расширений (безопасность++)
WINDOWS 10 и далее

28. Новый движок
EdgeHTML, Chakra

29. КЛАССНЫЙ
СОВРЕМЕННЫЙ
СОВМЕСТИМЫЙ
БРАУЗЕР
ДОБАВЛЕНО
300k+
Уникальных
строчек кода
49 новых больших
возможностей
4200+ исправлений
совместимости
EdgeHTML

30. Когда просто следовать стандартам не достаточно
Совместимость
с другими браузерами

33. Совместимость не так проста
Мобильныйвеб

34. Совместимость не так проста
Мобильныйвеб

35. Microsoft Edge (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
EdgeHTML

36. User-Agent String
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/39.0.2171.71 Safari/537.36 Edge/12.0
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko)
Version/8.0 Safari/600.1.25
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/40.0.2214.93 Safari/537.36
Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0

37. User-Agent String
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/39.0.2171.71 Safari/537.36 Edge/12.0
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_1) AppleWebKit/600.1.25 (KHTML, like Gecko)
Version/8.0 Safari/600.1.25
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/40.0.2214.93 Safari/537.36
Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0

39. Interop2
Interop1
Interop3
Interop0
Работало в IE11
Используется на
реальных сайтах
Работает в других
браузерах
Мы считаем, что
сайты скоро
начнут это
использовать
Реальное
использование не
скоро или никогда
Приоритеты совместимости
Запрос новых
возможностей
через UserVoice

40. dev.modern.ie

41. Новые возможности и обновления
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 & RTC
• Media capture
• HLS
• WebAudio
• Video Tracks
• WAV Audio support
Input & Editing
• Touch events
• Pointer lock API
• Media Queries L4 - Interaction
• Selection API
• Gamepad API
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
DOM & Graphics
• SVG foreignobject
• SVG attribute animation
• Complete WebGL support
• DOM event constructors
• DOM Level 3 XPath
Shipped
Preview Release
In development

42. Chakra
Возможности железа
Многопоточность JIT
Многоуровневая компиляция
Оптимизация
Реальные сценарии (минификация)
Встраивание функций
Работа с массивами
Сборка мусора
Asm.js
ES’15 I18N
SIMD
ES’16

43. Benchmarks
0
20
40
60
80
100
120
140
160
Internet Explorer
11
Microsoft Edge Chrome Canary
43.0.2369.0
Firefox Alpha
40.0a1(04-14)
JetStream
0
5000
10000
15000
20000
25000
Internet Explorer
11
Microsoft Edge Chrome Canary
43.0.2369.0
Firefox Alpha
40.0a1(04-14)
Octane 2.0

44. about:flags

45. MSHTML.dll
JSCRIPT9.dll
СОВМЕСТИМОСТЬ
СО СТАРЫМИ ВЕРСИЯМИ
EdgeHTML.dll
Chakra.dll
СОВМЕСТИМОСТЬ
С ДРУГИМИ БРАУЗЕРАМИ
WINDOWS 10 и далее

46. User Agent
String
Избавляйтесь от
детектирования
браузера
Тесты
Ставьте Windows 10
или используйте
виртуальные
машины
Пожелания
Используйте
UserVoice, Twitter,
Connect

47. Сайты превращаются…
Веб-приложения

48. VS.
Как люди получают доступ к сервису?

49. +
Как люди получают доступ к сервису?

50. VS.
Откуда люди получают доступ к сервисам?

51. Откуда люди получают доступ к сервисам?
+

52. Веб-сайт
HTML
CSS
JS ОС

53. Упакованные приложения
Packaged Apps

54. HTML
CSS
JS
ОС
app
HTA (1999)
Prizm (2007)
CEF (2009)
WinRT + UWP
Electron
NW.js

55. HTML
CSS
JS
ОС
app
HTA (1999)
Prizm (2007)
CEF (2009)
WinRT + UWP
Electron
NW.js
Windows
FirefoxOS
ChromeOS
…TV
Apache
Cordova

56. HTML
CSS
JS
ОС
app
HTA (1999)
Prizm (2007)
CEF (2009)
WinRT + UWP
Electron
NW.js
Windows
FirefoxOS
ChromeOS
…TV
Apache
Cordova

57. Хостящиеся приложения
Hosted Apps

58. Веб-сайт
HTML
CSS
JS ОС
Веб-стандарты
Закрепление сайтов
Расширения

59. Веб-сайт
HTML
CSS
JS ОС
Веб-стандарты
Закрепление сайтов
Расширения
Manifest for Web Apps
http://w3c.github.io/manifest/

60. W3C Standard
Manifest for Web Apps
Единое место для описания
метаданных, связанных с веб-
приложением
<link rel="manifest" href="manifest.json">
Спецификация
http://w3c.github.io/manifest/
{
"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"
}

61. Веб-сайт
HTML
CSS
JS ОС
Manifest for Web Apps
http://w3c.github.io/manifest/

62. Веб-сайт
HTML
CSS
JS ОС
Manifest for Web Apps
http://w3c.github.io/manifest/

63. Веб-сайт
HTML
CSS
JS
.appx
ОС
Manifest for Web Apps
http://w3c.github.io/manifest/
Windows 8.1 & Windows Phone 8.1
Web Application Template (WAT)
http://wat.codeplex.com/

64. Веб-сайт
HTML
CSS
JS
.appx
ОС
Manifest for Web Apps
http://w3c.github.io/manifest/
Windows 8.1 & Windows Phone 8.1 + Android
Web Application Template (WAT)
http://wat.codeplex.com/

65. Веб-сайт
HTML
CSS
JS
.appx
ОС
Manifest for Web Apps
http://w3c.github.io/manifest/
Windows 8.1 & Windows Phone 8.1 + Android
Web Application Template (WAT)
http://wat.codeplex.com/
WebView
Custom Bridge
Native Code
Ограниченный
доступ к WinRT

66. Веб-сайт
HTML
CSS
JS
.appx
ОС
Manifest for Web Apps
http://w3c.github.io/manifest/
Windows 10
Universal Windows Platform
“Project Westminster”
Безопасный прямой
доступ к WinRT
CSP, Manifest Rules
WebView
Native Code Windows APIs

67. HTML
CSS
JS
.appx
ОС
Manifest for Web Apps
http://w3c.github.io/manifest/
Windows 10 (UWP)
“Project Westminster”
🗓
Windows APIs
if (window.Windows) {
// Create an appointment
Windows.ApplicationModel.Appointments.Appointment();
}
Trip to Barcelona
3/25/2015 All Day
Notes: Return to work
Безопасный прямой
доступ к WinRT
CSP, Manifest Rules

68. DEMO
Хостящееся веб-приложение

69. Веб-сайт
HTML
CSS
JS
.appx
ОС
Manifest for Web Apps
http://w3c.github.io/manifest/
Windows 10 (UWP)
WebView API
addWebAllowedObject
clearTemporaryWebDataAsync
Безопасный прямой
доступ к WinRT
CSP, Manifest Rules
WebView
Native Code Windows APIs
"MSWebViewNewWindowRequested"
"MSWebViewPermissionRequested"

70. Я не хочу завязываться на WinRT?
И как же веб-стандарты?
Что если…

71. Веб-сайт
HTML
CSS
JS
.appx
ОС
Manifest for Web Apps
http://w3c.github.io/manifest/
Windows 10
Apache Cordova + UWP
“Project Westminster”
Безопасный прямой
доступ к WinRT
CSP, Manifest Rules
Native
Code
Windows
APIs

72. Текущий процесс для обновления контента
Code
Visual Studio
Notepad++
Brackets
Vim
ATOM
Sublime Text
Emacs
Push
Git
SVN
Visual Studio Online
GitHub
Bitbucket
Gitlab
Host
Amazon WS
Heroku
Parse
Private Cloud
Microsoft Azure
Release

73. В ОСНОВЕ
ВАШ САЙТ
РАСШИРЕНИЕ
ОПЫТА
ПРОЦЕСС
РАЗРАБОТКИ
Доступ к UWP APIs
и нативному коду
в «оболочке»
Практически без
изменений
Вы управляете
кодом приложения
в любой момент

74. EdgeHTML.dll Chakra

75. MICROSOFT
EDGE
EDGEHTML
CHAKRA
WEB APPS
BRIDGE
Новый движок Windows 10Новый браузер

76. Развитие веб-платформы
Улучшенная интероперабельность
Новый движок в Microsoft Edge — insider.windows.com
Всегда свежий (4200+ багов совместимости с браузерами исправлено)
Новые возможности
Более 40 новых веб-стандартов (ECMAScript6, HTTP2, WebGL, …)
Открытый процесс: следите на dev.modern.ie или спрашивайте в @MSEdgeDev
Меньше границ между сайтами и приложениями
Разрешить хостящимся веб-приложениям доступ к Universal APIs
Улучшения в WebView и инструментах для Cordova

77. RoadMap
Windows 10 как сервис
3млн.+ Windows Insiders
Запуск Windows 10 RTM – летом 2015
1млрд. устройств через 2-3 года
Microsoft Edge
Независимое регулярное обновление
После RTM Windows 10:
 Расширения
 Дополнительные сценарии с Cortana
 Object RTC, Pointer lock
 Новые технологии

78. Константин Кичинский
Эксперт по стратегическим технологиям, Microsoft
@kichinsky, konkich@microsoft.com
Microsoft Edge и платформа
веб-приложений в Windows 10

79. ©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.