Embed Size (px)
Citation preview
Developing Windows 10 Hosted Web AppsChris Dufour, ASP .NET MVPSoftware Architect
Follow me @chrdufhttp://www.linkedin.com/in/cdufour
Agenda• Windows 10• The convergence journey• Universal Windows Platform (UWP)• New browser for Windows 10• Hosted Web App
Windows 10Newest version of Windows… of courseFree upgrade to genuine Windows 7, Windows 8.1 and Windows Phone 8.1 devicesWindows as a serviceReinvigoration of the Windows desktopOne OS for a universe of device typesUniversal Windows Platform
One Windows Store• One catalog
– Apps (Including WIn32)– Music– Video– Xbox Games
• One app submission for every device family
• 8x increase in purchases through carrier billing
• Updated ad SDK with video ads and install tracking
Windows 10 on One Billion Devices
Desktop Operating System Market Share
Source: NetMarketShare – September 21, 2015
Easy for users to get & stay
current
Unified core and app platform
The convergence journey
Windows Phone 7.5
Windows Phone 8Windows Phone 8.1
Windows 8
Xbox One
Windows on Devices
Xbox 360
Windows 8.1
Windows 10
ConvergedOS kernel
Convergedapp model
Phone Small Tablet
2-in-1s(Tablet or Laptop)
Desktops & All-in-OnesPhablet Large Tablet
Classic Laptop
Xbox IoTSurface Hub
Holographic
Windows 10
Multiple device families
PC XBoxMobile Surface Hub
HoloLensDevices +IoT
Universal Windows Apps
One Store +One Dev Center
Reuse Existing CodeOne SDK +
Tooling
Adaptive User Interface Natural
User Inputs
One Universal Windows Platform
Windows 10operating system
Bridging technologies
Win32desktop
Webhosted
JavaAndroid
Obj.CiOS
Universal Windows Platform
WWAC++& CX
.Netlanguages
HTMLDirectX
XAML
C++
.Netlanguages
MFCWFWPF
.Netruntime
Introducing theUniversal Windows Platform (UWP)
Universal Windows Platform• A single API surface
– A guaranteed API surface– The same on all devices
PhoneDevice
XboxDevice
DesktopDevice
Windows Core
Universal Windows Platform
Mobile
Holographic Surface
Hub
XboxIoT
Desktop
Windows Core• One Windows kernel• One hardware platform• Universal hardware driver• Standard network and I/O• One App Model
Apps don't target Windows 10, apps target the UWP
<Dependencies> <TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.10240.0"
MaxVersionTested="10.5.0.0"/></Dependencies>
The Universal Windows Platform can update at its own cadence
Each family of devices adds features that are appropriate for that device
Platform extensions• Device-specific API
– Family-specific capabilities– Compatible across devices– Unique update cadence
PhoneDevice
XboxDevice
DesktopDevice
Windows Core
Universal Windows Platform
Windows App
Phoneextension
Xboxextension
Desktop
extension
Extensions don't invalidate binaries on other devices
UWP
Windows Core Windows Core Windows Core Windows Core
UWP UWP UWP
Desktop Mobile Xbox More…
Universal Windows Platform• One Operating System
– One Windows core for all devices
• One App Platform– Apps run across every family
• One Dev Center– Single submission flow and dashboard
• One Store – Global reach, local monetization
Consumers, Business & Education
Microsoft EdgeNew browser for Windows 10
Trident
1995
3 41 2 5.5 65 7 84.x 9
2015
9 10 11
Trident
!DOCTYPE
1995
3 41 2 5.5 65 7 84.x 9
2015
9 10 11
Quirks Strict
1995
HTML4, ES3, CSS2
Trident
IE5 Quirks
IE7 Compatibilit
y View
IE8Standards
Mode
x-ua-compatible!DOCTYPE
1995
3 41 2 5.5 65 7 84.x 9
2015
9 10 11
CSS2.1HTML4, ES3, CSS2
3
Trident
IE5 Quirks
IE7 Compatibilit
y View
IE8Standards
Mode
IE9Standards
Mode
x-ua-compatible!DOCTYPE
1995
41 2 5.5 65 7 84.x 9
2015
9 10 11
CSS2.1 HTML5, SVG, ES5HTML4, ES3, CSS2
Trident
IE5 Quirks
IE7 Compatibilit
y View
IE8Standards
Mode
IE9Standards
Mode
QMEQuirks Mode
Emulation
IE10Standards
Mode
x-ua-compatible!DOCTYPE
1995
3 41 2 5.5 65 7 84.x 9
2015
9 10 11
CSS2.1 HTML5, SVG, ES5, CSS3HTML4, ES3, CSS2
1995
3 41 2 5.5 65 7 84.x
Trident
IE5 Quirks
IE7 Compat
View
IE8Standards Mode
9
IE9Standards Mode
IE10Standards Mode
QMEQuirks Mode
Emulation
2015
9 10 11
x-ua-compatible!DOCTYPE
IE11Standards Mode
EMIEEnterprise Mode
Legacy WebCSS2.1
Modern WebHTML5, SVG, ES5, CSS3HTML4, ES3, CSS2
Mobile Chromium usage across forks
Chromium versions
<10
Chromium 18 - 2%Chromium 30 – 18%
Chromium 30 – 1%Chromium 37 – 2%
Chromium 39 – 3%
Chromium 40 – 39%Chromium 38 – 1%
Chromium 35 – 1%Chromium 33 – 6%
Chromium 28 – 27%
Source: www.quirksmode.org/blog/archives/2015/02/counting_chromi.html
EdgeHTML.dll Chakra
Hosted contentAlways up-to-date
Packaged contentOffline first
Web
View
What about IE?• IE11 will still be available for those
cases where you need to access legacy web content, or for sites that use plug-ins such as ActiveX or Silverlight.
• But for the modern web, for the most up to date features such as HTML5, ECMAScript 6 and CSS3 or 4, you’ll want to use Edge.
Hosted Web Apps
Microsoft Edge NEW: Hosted Web Apps
Bring your website experience to the Windows Store
Leverage your web investments and developer workflow
Full access to Universal APIs likeTiles, Notifications, Camera, Contact List, CalendarUniversal Windows Platform
.appx
HTMLCSSJS
Keep your web workflow for updating content
Code
Visual StudioNotepad++
BracketsVim
ATOMSublime Text
Emacs
Use your editor
Push
GitSVN
Visual Studio OnlineGitHub
BitbucketGitlab
Push to your repo’s Host
Amazon WSHerokuParse
Private CloudMicrosoft
Azure
Deploy
on your
serviceRelease
Reach Windows users
Demo: Hosted Web App
XML Manifest URI Allow ListWindowsRuntimeAccess=• "all" Match="https://*.websites.net/"• "allowForWebOnly" Match=https://*.website.net/
• Developers can control the Universal APIs they want to expose
• "none" Match="http://ads.website.net/"• Default is no access
JavaScript Universal APIfunction pickContact() { if (typeof Windows != 'undefined') { // Create the picker var picker = new Windows.ApplicationModel.Contacts.ContactPicker(); picker.desiredFieldsWithContactFieldType.append(Windows.ApplicationModel.Contacts.ContactFieldType.email); // Open the picker for the user to select a contact picker.pickContactAsync().done(function (contact) { if (contact !== null) { var output = "Selected contact:\n" + contact.displayName; console.log(output); } else { // The picker was dismissed without selecting a contact console("No contact was selected"); } }); } else { console.log("ERROR: No Windows namespace was detected"); }};
Demo: Hosted Web App that uses Universal APIs
Summary• Windows 10• The convergence journey• Universal Windows Platform (UWP)• New browser for Windows 10• Hosted Web App
Resources• Windows Dev Center
https://dev.windows.com • Hosted Web Apps
https://microsoftedge.github.io/WebAppsDocs/en-US/win10/HWA.htm
• Visual Studiohttps://www.visualstudio.com
• Microsoft Virtual Academyhttp://www.microsoftvirtualacademy.com
Thank You
