Windows 10 и Project Westminster: когда сайты превращаются в приложения, а JavaScript получает доступ в систему Запись: https://www.youtube.com/watch?v=PQa9UyiETmU

1. 1
Константин Кичинский
Эксперт по стратегическим технологиям, Microsoft
@kichinsky, konkich@microsoft.com
Windows 10 и Project
Westminster: когда
сайты превращаются в
приложения, а JavaScript
получает доступ в систему

2. 2

3. 3
dev.modern.ie

4. 4
Preview/Release Planned/Under Discussion

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

6. 6
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

7. 7
about:flags

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

9. EdgeHTML.dll Chakra

10. 10
Зачем это нужно
Магазины + веб
Адаптивность (форм-факторы)
Экономия
Новые сценарии

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

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

13. 13
HTML
CSS
JS
ОС
app
HTA (1999)
Prizm (2007)
CEF (2009)
WinRT + UWP
Electron
NW.js
Это началось не сегодня…

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

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

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

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

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

19. 19
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.exampl
"icons": [
{
"src": "tiny.png",
"sizes": "70x70"
},
{
"src": "square.png",
"sizes": "150x150"
}
],
"display": "standalone",
"orientation": "landscape"
}

20. 20
Веб-сайт
HTML
CSS
JS ОС
Manifest for Web Apps
http://w3c.github.io/manifest/
Сдвиг границы

21. 21
Веб-сайт
HTML
CSS
JS ОС
Manifest for Web Apps
http://w3c.github.io/manifest/
Сдвиг границы

22. 22
Веб-сайт
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/
WAT

23. 23
Веб-сайт
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/
WAT

24. 24
Веб-сайт
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
WAT

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

26. 26
HTML
CSS
JS
.appx
ОС
Manifest for Web Apps
http://w3c.github.io/manifest/
Windows 10 (UWP)
🗓
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
Project
Westminster

27. 27
Мозговые волны 

28. 28
Как это работает

29. 29
Манифест приложения
<Application
Id="App"
StartPage="http://codepen.io/kichinsky/pen/rVMBOm">
…
</Application>

30. 30
Манифест приложения
<uap:ApplicationContentUriRules>
<uap:Rule Type="include"
WindowsRuntimeAccess="allowForWebOnly"
Match="http://codepen.io/kichinsky/"/>
<uap:Rule Type="include"
WindowsRuntimeAccess="allowForWebOnly"
Match="http://s.codepen.io/"/>
</uap:ApplicationContentUriRules>

31. 31
Проверка доступности API на сайте
// Feature Detection
if (window.Windows != undefined &&
window.MindWaveController != undefined)
{
log("Windows context + MindWave");
} else {
log("No Windows context");
}

32. 32
Как это работает

33. 33
Доступ к API
MindWaveController.MindWaveDevice
.getFirstConnectedMindDeviceAsync()
.then(function (foundDevice) {
mindDevice = foundDevice;
mindDevice.onstatechangedevent =
stateChangedHandler;
mindDevice.onvaluechangedevent =
valueChangedHandler;
});

34. 34
Обработка данных
function valueChangedHandler(reading) {
if (mindDevice.currentState == "ConnectedWithData") {
attentionBar.value = reading.attention;
meditationBar.value = reading.meditation;
…
}
}

35. 35
Веб-сайт
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"

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

37. 37
Веб-сайт
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

38. 38
Текущий процесс для обновления контента
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

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

40. EdgeHTML.dll Chakra

41. EdgeHTML.dll Chakraweb-технологии
Нативное
приложение
на HTML/JS
Веб-приложение
с нативными
возможностями
«Сервер + браузер» «Собственный User Agent»

42. 42
Ресурсы
Windows 10 Preview (Microsoft Edge)
Windows Insider insider.windows.com
Visual Studio (incl. Cordova)
visualstudio.com
Microsoft Edge
Портал для разработчиков dev.modern.ie
Твиттер @MSEdgeDev
Блог Microsoft Edge Dev Blog
Hosted Web Apps
Hosted web apps and web platform innovations
СЛАЙДЫ

43. 43
Константин Кичинский
Эксперт по стратегическим технологиям, Microsoft
@kichinsky, konkich@microsoft.com
Windows 10 и
Project Westminster:
когда сайты превращаются
в приложения, а JavaScript
получает доступ в систему

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