DEV 212 Whats New for Windows 8 Developers

DEV 212 What’s New for Windows 8 Developers. Nick Hodge Professional Geek, Microsoft Australia

DEV 212 The Cheese Is Moving. Nick Hodge Professional Geek, Microsoft Australia

DEV 212 Keep Calm & Carry On. Nick Hodge Professional Geek, Microsoft Australia

Authentically Digital: UX Design ֍ Shane Morris (11. 30 today) What’s New for Developers Part 2 ֍ David Burela (13: 45 today) What’s New for Developers Part 3 ֍ Lewis Benge (17: 00 today) Design & Layout for Windows 8 Apps ֍ Shane Morris (08: 15 tomorrow) Selling & Deploying Windows 8 Apps ֍ me & guests (11: 30 tomorrow)

Windows 8 App Dev w/HTML/Java. Script ֍★ Aaron Powell (09: 45 tomorrow) Windows 8 with a View ֍ Jordan Knight (13: 45 tomorrow) Windows 8 Games & High Perf Dev ֍ Vaughan Knight (13: 45 Friday)

The Process of Building Windows 8 Apps

Core System Services Model Controller View Windows 8 Apps DX C C++/CX Desktop Apps HTML / CSS XAML C# VB Java. Script (Chakra) HTML C C++ C# VB Internet Explorer Win 32 . NET / SL Java. Script Win. RT APIs Communication & Data Graphics & Media Application Model Devices & Printing Windows Core OS Services

Tools, Debug

demo Tools, Debug

Visual Studio Expression Blend Code editor w/ Intellisense Code Editor UI Designer WYSIGYG designer Debuggers Interactive mode DOM Explorer Animation Javascript Console Smarter Properties Window Simulator Platform window

Visual Studio Expression Blend Code editor w/ Intellisense Code editor UI Designer WYSIGYG designer Debuggers Animation Simulator Better properties window Device window Simulator Blend window

Helpers for Namespaces, Constructor Definition Data binding Controls Promises Animations App Model Templates Navigation Utilities Page & User controls Default CSS Styles

library for building Windows 8 Style apps using Java. Script Make your apps look and feel great Build your apps fast and with high quality Matches the Windows 8 design style Web technologies you’re already familiar with Controls for common user experiences Designed for touch as well as traditional input Scales across form factors Modern patterns for responsive, reliable apps Use interactive design tools

Next up… Patrick Klug ♥ @Patrick. Klug www. patrickklug. com Founder at Greenheart Games, creators of Game Dev Tycoon. Development Manager at Nova. Mind, creators of Nova. Mind Mapping software.

as observed by twitter #WPF What about #WPF? ? ? 03. 12. 2010 I really don't want to be a grumpy and bitter developer but #microsoft doesn't make it easy to stay enthusiastic as a #wpf dev. 03. 02. 2011 @microsoft is king of FUD strategy. causes fear, uncertainty and doubt to devs around the world. pity they do it to *their* own devs #wpf 25. 08. 2011 @Patrick. Klug

not a single mention of #wpf in #bldwin keynote - it's as if it doesn't exist. the XAML thing they talk about is prop closer to #silverlight 12. 09. 2011 @Patrick. Klug

The single biggest opportunity for developers in Windows’ history… … and I don’t want to miss out just because I was grumpy. Finally a platform that really enables impressive applications and innovation! I have waited for this for years!

… first hurdle, pick a technology.

RT @John. Bristowe: Me, attempting to build a Windows 8 app in Java. Script for the past 30 minutes: http: //t. co/Tw. Trw. Zic 09. 03. 2012 @John. Bristowe that's me today as well : ( although all in all JS in Win 8 is surprisingly fun : ) 09. 03. 2012 @Patrick. Klug

implemented my first 3 D transformation animation in CSS yesterday. astonishingly simple. 13. 05. 2012 it constantly surprises me how easy it is to create fluent animations in HTML/JS in all sort of scenarios. simply not possible in WPF. 22. 05. 2012 @Patrick. Klug

Announcement: (Game Dev Tycoon) is the #win 8 game I've been working on the past months. Store review is underway : ) 04. 07. 2012 @Patrick. Klug

Demo Game Dev Tycoon Using the power of HTML 5/JS on Win. RT to create a business simulation game. ♥

Announcement: A new Nova. Mind app is now available on the Windows Store. #mindmapping http: //t. co/a. LSPv 6 b. A 27. 07. 2012 […] I was extremely surprised how pleasant porting code from C# was. JS is also surprisingly fast in IE 10. 27. 07. 2012 @Patrick. Klug

Demo

Metro? Clean Purposeful

Touch first

Innovate

. png -120. png -180. png

plan ahead!

(unsophisticated) + (slow) & HTML Java Script were wrong!

Couple of months ago I switched from C# to Java. Script. Surprisingly, I don't miss C# one bit. Java. Script is bloody amazing. 10. 08. 2012 Using HTML 5/JS on Win. RT is the most rewarding and productive environment I’ve ever worked with – just now @Patrick. Klug

Already available on the Store What’s your app gonna be? Let me know at @Patrick. Klug

Thanks Patrick Klug ♥ @Patrick. Klug www. patrickklug. com Founder at Greenheart Games, creators of Game Dev Tycoon. Development Manager at Nova. Mind, creators of Nova. Mind Mapping software.

Async / Await / Promises

Asynchronous programming is becoming the norm (because fast & fluid)

Advantages then Threadpool

Asynchronous methods automatically transform normal code into a callback state machine

async / await (C#) using Windows. Media. Capture; … async void Get. Picture() { var new Camera. Capture. UI var await new Size Camera. Capture. UIMode if var new Bitmap. Image await File. Access. Mode

Promise (Java. Script)

Java. Script: Promises handle Async Object that is a promise for a later value Hook up to completion with then() or done () method then(completion, error, progress) then() returns another promise Implementation in base. js: Win. JS. Promise Common. js promises/A spec http: //wiki. commonjs. org/wiki/Promises/A

demo Tools, Debug

User Interface HTML 5/CSS XAML Direct. X Controls Data Binding SVG Tiles Input Accessibility Printing Devices Geolocation Portable Sensors Communications & Data NFC Contracts Media Playback Capture Play. To Visual Effects Memory Management Local & Cloud Storage Notifications Streams XML Networking Web SMS Fundamentals Application Services Threading/Timers Memory Management Authentication Cryptography Globalization

Win. RT for the. NET Developer

Projection C++ App Chakra Windows Metadata Projection Written in C++, C#, VB C#/VB App CLR Projection Windows Runtime Object (or Component) HTML App

The C# code you have to write today… Dll. Import "avicap 32. dll" static extern int string int int Dll. Import "avicap 32. dll" static extern bool int Marshal. As Unmanaged. Type int // more and more of the same "cap. Create. Capture. Window" ref string

The C# code you get to write on Windows 8 using Windows. Media. Capture; var new Camera. Capture. UI var await new Size Camera. Capture. UIMode if var new Bitmap. Image await File. Access. Mode

You already have the skills to build Windows 8 style apps with C# and VB

Primitives (strings, numbers, etc) Constructors Interfaces Enums Structs Delegates Static Members Methods Properties Events Classes

Most differences between Windows Runtime and. NET are hidden

IIterable<T> IVector. View<T> IMap<K, V> IMap. View<K, V> IEnumerable<T> IList<T> IRead. Only. List<T> IDictionary<K, V> IRead. Only. Dictionary<K, V>

the App Execution Environment

Windows Store backend Windows Store install Package Manager stage Single instance store register Registration Information Execution Engine Extension Handler

Files / Assets App. XManifest. xml Block. Map Signature Zip Central Directory . appx package

Process. exe Core OS Your App Win. RT APIs Broker App Container + Signed & Validated code App. XManifest

Windows 7 User manages app lifetime Windows 8 System manages app lifetime

App gets 5 seconds to work after suspend message Running Apps are notified before they are terminated Suspended Apps are notified when they have been resumed Terminated App

Process 2 Process 1 Local context App. Data Local Temp Local context Web context App. Data Local Roaming Temp Web context Roaming OS User data Devices Communications Handlers Tiles Cryptography … …

App data Settings Files Session State Local Cache Photos Music Videos User data Documents

App uses data normally Local Storage Data syncs for the user’s Microsoft Account

App Data Roaming: Code

Controls <!– Step 1: declare control --> <div id=“list” data-wincontrol="Win. JS. UI. List. View" data-win-options="{ selection. Mode: 'none' }"></div> /* Step 2: Call Win. JS. UI. process. All() */ /* Step 3: Use the control */ document. get. Element. By. Id(‘list’). win. Control. add. Eve nt. Listener (‘selectionchanged’, on. Sel. Changed );

Everyday widgets

Presenting data List View Grid View Flip View

Data binding <!– Step 1: declare template --> <div class="itemtemplate" data-win-control="Win. JS. Binding. Template"> <div class="item"> <img class="item-image" src="#" data-win-bind="src: background. Image; alt: title" /> <div class="item-overlay"> <h 4 class="item-title" data-win-bind="text. Content: short. Title"></h 4> <div class="item-subtitle" data-win-control="Win. JS. UI. Rating" data-winoptions="{disabled: true}" data-win-bind="win. Control. user. Rating: rating"></div> /* step 2: use the Data Template */ ui. set. Options(list. View, { oniteminvoked: this. item. Invoked });

Commanding surfaces