moscow.js windows 10 и project westminster

1

Константин КичинскийЭксперт по стратегическим технологиям, Microsoft

@kichinsky, konkich@microsoft.com

Windows 10 и Project Westminster: когда сайты превращаются в приложения, а JavaScript получает доступ в систему

2

3

dev.modern.ie

4

Preview/Release Planned/Under Discussion

5

Chakra

Возможности железаМногопоточность JITМногоуровневая компиляцияОптимизацияРеальные сценарии (минификация)Встраивание функцийРабота с массивамиСборка мусора

Asm.js

ES’15

I18N

SIMD

ES’16

6

Benchmarks

Internet Explorer 11

Microsoft Edge

Chrome Canary

43.0.2369.0

Firefox Alpha 40.0a1(04-14)

0

20

40

60

80

100

120

140

160JetStream

Internet Explorer 11

Microsoft Edge

Chrome Canary

43.0.2369.0

Firefox Alpha 40.0a1(04-14)

0

5000

10000

15000

20000

25000 Octane 2.0

7about:flags

8

Сайты превращаются…

Веб-приложения

EdgeHTML.dll Chakra

Контент на сайтеВсегда свежий

Упакованный контент

Сначала оффлайн

10

Зачем это нужно

Магазины + веб

Адаптивность (форм-факторы)

ЭкономияНовые сценарии

11

Веб-сайтHTMLCSSJS

ОС

12

Упакованные приложения

Packaged Apps

13

HTMLCSSJS

ОС

app

HTA (1999)Prizm (2007)CEF (2009)

WinRT + UWPElectronNW.js

Это началось не сегодня…

14

HTMLCSSJS

ОС

app

HTA (1999)Prizm (2007)CEF (2009)

WinRT + UWPElectronNW.js

WindowsFirefoxOSChromeOS…TV

Apache Cordova

Store

15

HTMLCSSJS

ОС

app

HTA (1999)Prizm (2007)CEF (2009)

WinRT + UWPElectronNW.js

WindowsFirefoxOSChromeOS…TV

Apache Cordova

Windows

16

Хостящиеся приложения

Hosted Apps

17

Веб-сайтHTMLCSSJS

ОС

Веб-стандарты

Закрепление сайтовРасширения

Плагины и т.п.

18

Веб-сайтHTMLCSSJS

ОС

Веб-стандарты

Закрепление сайтовРасширения

Manifest for Web Appshttp://w3c.github.io/manifest/

Лобби веб-стандартов

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

20

Веб-сайтHTMLCSSJS

ОС

Manifest for Web Appshttp://w3c.github.io/manifest/

Сдвиг границы

21

Веб-сайтHTMLCSSJS

ОС

Manifest for Web Appshttp://w3c.github.io/manifest/

Сдвиг границы

22

Веб-сайтHTMLCSSJS

.appx

ОС

Manifest for Web Appshttp://w3c.github.io/manifest/

Windows 8.1 & Windows Phone 8.1Web Application Template (WAT)http://wat.codeplex.com/

WAT

23

Веб-сайтHTMLCSSJS

.appx

ОС

Manifest for Web Appshttp://w3c.github.io/manifest/

Windows 8.1 & Windows Phone 8.1 + AndroidWeb Application Template (WAT)http://wat.codeplex.com/

WAT

24

Веб-сайтHTMLCSSJS

.appx

ОС

Manifest for Web Appshttp://w3c.github.io/manifest/

Windows 8.1 & Windows Phone 8.1 + AndroidWeb Application Template (WAT)http://wat.codeplex.com/

WebView

Custom BridgeNative Code

Ограниченный доступ к WinRT

WAT

25

Веб-сайтHTMLCSSJS

.appx

ОС

Manifest for Web Appshttp://w3c.github.io/manifest/

Windows 10Universal Windows Platform

Безопасный прямой доступ к WinRTCSP, Manifest Rules

WebView

Native Code Windows APIs

Project Westminster

26

HTMLCSSJS

.appx

ОС

Manifest for Web Appshttp://w3c.github.io/manifest/

Windows 10 (UWP)

🗓

Windows APIs

if (window.Windows) {// Create an appointment Windows.ApplicationModel.Appointments.Appointment();

}

Trip to Barcelona3/25/2015 All Day

Notes: Return to work

Безопасный прямой доступ к WinRTCSP, Manifest Rules

Project Westminster

27

Мозговые волны

28

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

29

Манифест приложения

<Application

Id="App"

StartPage="http://codepen.io/kichinsky/pen/rVMBOm">

…

</Application>

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

Проверка доступности API на сайте// Feature Detectionif (window.Windows != undefined && window.MindWaveController != undefined) {

log("Windows context + MindWave");} else { log("No Windows context");}

32

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

33

Доступ к API

MindWaveController.MindWaveDevice.getFirstConnectedMindDeviceAsync().then(function (foundDevice) {

mindDevice = foundDevice; mindDevice.onstatechangedevent =

stateChangedHandler; mindDevice.onvaluechangedevent =

valueChangedHandler;});

34

Обработка данных

function valueChangedHandler(reading) {

if (mindDevice.currentState == "ConnectedWithData") {

attentionBar.value = reading.attention;

meditationBar.value = reading.meditation;

…

}

}

35

Веб-сайтHTMLCSSJS

.appx

ОС

Manifest for Web Appshttp://w3c.github.io/manifest/

Windows 10 (UWP)WebView APIaddWebAllowedObjectclearTemporaryWebDataAsync

Безопасный прямой доступ к WinRTCSP, Manifest Rules

WebView

Native Code Windows APIs

"MSWebViewNewWindowRequested""MSWebViewPermissionRequested"

36

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

Что если…

37

Веб-сайтHTMLCSSJS

.appx

ОС

Manifest for Web Appshttp://w3c.github.io/manifest/

Windows 10Apache Cordova + UWP

“Project Westminster”

Безопасный прямой доступ к WinRTCSP, Manifest Rules

Native Code

Windows APIs

38

Текущий процесс для обновления контента

Code

Visual StudioNotepad++

BracketsVim

ATOMSublime Text

Emacs

Push

GitSVN

Visual Studio OnlineGitHub

BitbucketGitlab

Host

Amazon WSHerokuParse

Private CloudMicrosoft Azure

Release

39

В ОСНОВЕ ВАШ САЙТ

РАСШИРЕНИЕ ОПЫТА

ПРОЦЕСС РАЗРАБОТК

И

Доступ к UWP APIs и

нативному коду в

«оболочке»

Практически без изменений

Вы управляете кодом

приложения в любой момент

EdgeHTML.dll Chakra

Контент на сайтеВсегда свежий

Упакованный контент

Сначала оффлайн

EdgeHTML.dll Chakra

Контент на сайтеВсегда свежий

Упакованный контент

Сначала оффлайн

web-технологии

Нативноеприложение

на HTML/JS

Веб-приложениес нативными

возможностями

«Сервер + браузер» «Собственный User Agent»

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 AppsHosted web apps and web platform innovations

СЛАЙДЫ

43

Константин КичинскийЭксперт по стратегическим технологиям, Microsoft@kichinsky, konkich@microsoft.com

Windows 10 и Project Westminster: когда сайты превращаются в приложения, а JavaScript получает доступ в систему

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.