BUILD keynote day 1–Metro experience with Jupiter, XAML and HTML5/JS

Highlights

  • You can download the developer preview of Windows 8
    http://dev.windows.com/
    http://blogs.msdn.com/b/b8/archive/2011/09/13/welcome-to-windows-8-the-developer-preview.aspx
  • The confusion around HTML5, xaml and Jupiter is finally cleared up.
    The new immersive apps (full screen, metro style apps which are launched from the tile based interface) can be built in either C#/XAML or HTML5/JS. Under the covers it reflects into the WinRT APIs. Apps built like this will run on ANY Win8 machine (x86, ARM, etc)
    clip_image001[4]
  • Silverlight & WPF are “legacy”. They put it onto the slide for show. The Win8 xaml looks to be 90% compatible with Silverlight. Demos are shown where they take a Silverlight app, copy/paste the code into a new Win8 XAML app, and only a few namespaces need to be changed. A silverlight grid is then changed to use the native WinRT grid to make it touch enabled and “Metro-y”
  • The Win8 XAML app is ported to Windows Phone 7 with only 1 line changed.
  • New version of Visual Studio available to help build apps for Win 8 “Microsoft Visual Studio 11 Express for Windows Developer Preview” (got to love Microsoft product names)
  • Expression blend works for editing the HTML5/JS apps
  • The native WinRT controls work in XAML and HTML5
  • New windows 8 app store. Store & submission process VERY similar to Windows Phone 7. Can submit via Visual Studio
    Paul Thurrott: “Biggest point of Windows Store: Microsoft is NOT taking a 30 percent cut. It will take a ZERO percent cut.”
  • Win8 machines can be easily restored back to a “clean base image” that developer can specify. Keeps all files, just reverts apps. (Reset/Refresh)
  • Windows Live application integration. Nice support for photos, calendar, mail, people. Very similar to Windows Phone 7 built in features.
    Windows user account settings Synced across PCs via the cloud (profile photo, etc)
  • Win8 specs are the same as Win 7. Consumes less memory after startup.
    Boot times have been massively reduced. Cold boot demo shows the PC almost starting faster than the monitor can turn on.

Useful articles

Conference notes

Steven Sinofsky comes on stage

Today we are going to be talking about Windows 8
We are launching a new opportunity for developers. No matter what the size or shape of the PC.

Starts off by talking about Windows 7
Approaching 450mil copies of Win7 sold.
Win7 usage is FINALLY greater than WinXP
Delivered over 1,500 product changes to Win7 (through patches) since RTM
clip_image002

Form factors for PCs have been changing.
Win7 started delivering touch.
Steve thinks that once you start using touch in Win8, that you will want touch on EVERY PC you own.
clip_image003

“What is Windows 8?”
Everything that was great with Win7, they took that and made it “better”
“you get to build on top of all of that success of Windows 7, with Windows 8″
“Windows 8 reimagines what windows should be”. In reference to quick boot, better touch, system on a chip.
Win8 reimagines what hardware windows can run on.
Everything they are showing today work on x86 and ARM
clip_image004

They are going to do 4 main demonstrations today

  • Basics of starting windows, switching programs, etc.
  • How to build Metro style applications from the ground up.
  • What is the hardware platforms that Win8 can run on
  • Then showing how all of it works and connects with “cloud based services” like Windows Live

They are going to have big session later on the day with deep dives into these features
clip_image005

To show off that Win8 is more efficient, he brings on stage a 3 year old netbook with 1GB of ram.
He first shows it with Win7 SP1 installed
clip_image006
And then demonstrates what the task manager looks like with Windows 8. A lot less memory usage
clip_image007
clip_image008

It is important to understand that everything they are showing is a part of windows. It is all built natively in windows, and not as “layers”.

Steve invites Julie on stage – Corporate Vice President, Windows experience

Shows the new “lock screen”
Has all of the “at a glance” information
Next calendar appointment.
Battery level, messages, etc.
clip_image009

The new login screen
It is a “picture password” to save you from having to type passwords in a “touch centric” interface.
She touches her daughters nose, then the lemonade, then draws a line along the railing to log in.

clip_image010

The new start screen.
Live tiles EVERYWHERE!
Can pan to the left and right to see more tiles
Each tile represents an application.
Can see calendar, rss feed, paused music
clip_image011
clip_image012

The start screen is an integration/unification of all application functionality.
One place to integrate your applications in with.
Can drag tiles around (like WP7)
clip_image013

Can pinch zoom out to see all the groups quickly
clip_image014

New “users” section in the control panel
clip_image015

Immersive applications

Applications have a new menu bar along the bottom
clip_image016
clip_image017

System settings while inside an immersive application. Swipe from the right hand side
clip_image018

Multi tasking applications by docking them
clip_image019

IE10. Chromless viewing
clip_image020

IE10: Tabs
clip_image021

IE10: Frequent / pinned
clip_image022

IE10: text selection similar to how Windows Phone 7 does it
clip_image023

When in an application you have application “tasks” you can do, called “Charms”
clip_image024

She clicks “share” and it then shows all the applications that support that function
clip_image025

The content that she had selected, has been copied into the “Friend Send” application.
Spellchecking is integrated into windows, so EVERY application gets it
clip_image026

Built in search. Can search inside applications or bing
clip_image027
clip_image028
clip_image029

Earlier in the demo she changed her user profile.
They picked up another PC, and showed that ALL of the changes that she’d made to her profile (changed her user pic, etc) was synced across to the other PCs on stage!

Julie leaves. Steve back on stage

clip_image030

All the apps that you can create are “Metro and full screen”. These are the “immersive apps”
When you add applications to your PC, your machine will be getting “richer and richer” as the apps add their functionality to the machine (share, etc.)

How apps are to be built.

clip_image001[5]

Standard desktop apps can be built with the traditional stack.
The new Metro style apps let you choose the development platform you want to use.
All of the fundamentals are built into the kernel. (multitasking, memory management, etc.)

Windows Runtime (WinRT) 18,000 objects for you to use. Use of “objects” here means modern C++. Trumps Win32’s C API.
The WinRT APIs are the new low level libraries built into windows. All the languages on top reflect onto WinRT to invoke them.

Steve invites Antoine Lebond on stage to build an app. Senior Vice president of Windows app store

Opens Visual Studio Express 11

Can select which language you want. Under the covers it is all the same as they all reflect into WinRT
clip_image031
clip_image032

Writing an app with HTML5/JS

clip_image033

The application template has a CSS file to define the styles, etc
clip_image034

Adds some “HTML5 code”. That would also run in a web browser.
The code lets him draw lines in a canvas
clip_image035
clip_image036

Adds a javascript click event to the button. Wants it to display a file picker dialog.
Under the covers it is a native control, but Javascript can call into it
clip_image037
Adds functionality to integrate “share” into his application, so that other apps can share files into it. So that you can retrieve photos from Facebook.
The entire app is 58 lines of code

Expression blend

He then opens the application in Expression blend.
clip_image038
clip_image039

Prebuilt controls with “metro looks”
The same set of controls work with XAML based applications
clip_image040

The “app bar” is just a DIV in the HTML application
Using the CSS layouts with grids, etc. allow all of the additional system features. Like screen orientation.
Expression blend allows you to see what your app looks like with different screen resolutions, orientations, etc.
clip_image041

Windows Store

Now that the application is built, he wants to upload it to the Windows store.
There is a menu built into Visual Studio that lets you upload directly to the store
clip_image042
clip_image043
clip_image044
clip_image045

He then loads the store to show one that he submitted earlier.
It looks a lot like the Windows Phone 7 store
clip_image046
clip_image047

(Note: Notice that there are Windows Phone 7 games in the games store!)
clip_image048

What about Win32 apps?
Win32 apps are able to be listed in the store. An example is Quicken
clip_image049

XAML based applications

Moves onto talking about XAML
He took a sample Silverlight app and compiled it on Windows 8.
clip_image050

IE10 launches. As it is still just a Silverlight app
clip_image051

He then takes the app and creates a Windows 8 XAML based app.
He pastes it all into Visual Studio and it almost works without any modifications.
He just needs to make some namespace changes and it all works.
Win8 has a LOT richer networking functionality than Silverlight has.

The application does not look “Metro”
So he modifies the grid to use the native WinRT grid instead
clip_image052
clip_image053

He then enables the charms through a few lines of code
clip_image054
clip_image055

This is all mostly compatible with Windows Phone 7.
Took all of the code, changed 1 line of code, and it compiled and worked
clip_image056

Steve comes back on stage

clip_image057

If you build your app in C#/XAML or HTML5/JS, then it will run on ALL hardware that Windows 8 supports
If you want to write native code…. You can… they will help you cross compile it.
Every Windows 8 PC is your target customer (Desktops, laptops, netbooks, slates, etc.)

Steve invites Michael Angiulo – Windows ecosystem

Note: there are lots of cool hardware demos given, like per pixel touch. But they don’t translate well when written down, so were mostly skipped in there notes)

Win8 supports the widest range of hardware.
UEFI helps windows boot quickly
A cold boot takes less than 8 seconds. The demo they showed, it almost booted quicker than the monitor could turn on.
clip_image058

Win8 has a LOT lower power requirements for SOC (System On a Chip). There is a new super low powered state that leaves the network connected, and instantly turns on.
There are now ARM SOC systems, and a new Intel Atom based SOC.
All the application transitions, transforms, etc. are all hardware accelerated

Once you go 1024×768 resolution, you can have metro apps run
Once you get up to 1366 then you can dock
clip_image059

Has a new “sensor fusion” api that combines all of the sensors together. Takes 3 lines of code
clip_image060

NFC (Near Field Communication) lets you tap computers or cards to share data. He taps a BUILD card onto his PC, and it launches the BUILD website.
clip_image061

Built in functionality for 3G connectivity
clip_image062
clip_image063

New “Ultra books” have desktop chipsets in it. But are thin
clip_image064
clip_image065
http://www.flickr.com/photos/longzheng/6144647726/sizes/z/in/photostream/

It is thinner than the ethernet & VGA ports. They had to let those 2 ports bump out
Machines are now mostly batteries
clip_image066

Every attendee gets a developer tablet PC
More details about the device can be found at http://www.istartedsomething.com/20110914/build-attendees-take-home-samsung-windows-developer-preview-pcslate/
http://www.winsupersite.com/article/windows8/windows-8-developer-preview-samsung-700t-photo-gallery-140547
clip_image067
clip_image068

Steve back on stage, giving a demo of how a dev can use win8 day to day

clip_image069

No more constant popup nagging about restarting for security patches
clip_image070

Task manager

Immersive apps can be put into a suspended state where they don’t take up any CPU cycles (sounds like Windows Phone 7 lifecycle. Except they stay in memory)
clip_image071
clip_image072
clip_image073
clip_image074
clip_image075

Refresh / reset

Ability to clean a system and restore it back to a clean state.
clip_image076
clip_image077

Can create a baseline for your PC after you have installed Visual Studio, etc. Then you can restore your PC to that state easily.
clip_image078
clip_image079

Can create performance benchmarks. Then you can watch the health of your PC over time and see if it degrades.
clip_image080
clip_image081
clip_image082

Hyper-V is now built into Windows 8

clip_image083

Remote desktop

Remote desktop allows all of the touch centric interaction. Steve was able to easily pan around the new tile based start screen with the touch screen on the tablet, to control the remote desktop

Demonstrated how a tablet could remote desktop into a desktop.

Personally this excites me. You can take your new Win8 tablet around with you, and easily remote into your home PC and interact with it directly with your built in 3G connections. With all the touch features working.

Multi monitor support

Desktop backgrounds can now span over multiple monitors
clip_image084
clip_image085

New multi monitor support for the task bar.
You can make it so that the taskbar on each monitor just shows the apps that are on that monitor
clip_image086
clip_image087
clip_image088

Typing in the live tile view, automatically brings up search
clip_image089

Application bar

clip_image090

You can run IE10 chromeless in an “immersive app” but you can also run it in a standard window
clip_image091
clip_image092

New accessibility options

clip_image093
clip_image094

Different keyboard layouts
clip_image095

Sync

Personal settings Syncing. If you log into your windows 8 PC with a Windows Live account, then your account settings can be synced.
clip_image096
clip_image097

Steve invites Chris Jones on stage to talk about Cloud based services with windows 8 & Windows Live

They rewrote all the Live applications to have a metro experience for Windows 8
Once you sign in with your LiveId, then it is all integrated in

Live Mail

Written in HTML 5 and Javascript.
clip_image098
clip_image099
clip_image100

Calendar

Written in HTML5 + JS
Can see multiple calendars that are shared with you
clip_image101
clip_image102

People

clip_image103
clip_image104

Photos

Written in HTML5 + JS
Is like Windows Phone 7, brings in all of the services that you have linked in to your LiveId
clip_image105

Sky Drive

Every Win8 user has a skydrive for cloud storage.

clip_image106

Connect your PCs together via live

You can browse the photos from another of your PCs, in another location, behind firewalls, directly from within the application. Live does some funky network routing for you.

Can go and browse all of the files on your remote PC via skydrive.com in a web browser
clip_image107
clip_image108

Steve back on stage

clip_image109
clip_image110
clip_image111

Driven by “quality and not by date”.
clip_image112

No activation. Just download and install
clip_image113

By David Burela

16 Responses to “BUILD keynote day 1–Metro experience with Jupiter, XAML and HTML5/JS”

  1. Premature cries of Silverlight / WPF skill loss. Windows 8 supports all programming models « Burela's house-o-blog Says:

    [...] UPDATE: The BUILD keynote cleared up a LOT of these concerns http://davidburela.wordpress.com/2011/09/14/build-keynote-day-1metro-experience-with-jupiter-xaml-an… [...]

  2. Pablo Alarcón Says:

    Thx David, best overview of the keynote I’ve found

  3. Zubin Appoo Says:

    Fascinating stuff. Great overview of the presentation and very valuable info. Thanks.

  4. sylvain + whissell = geek » Blog Archive » Windows 8 Links Says:

    [...] Burela – BUILD keynote day 1–Metro experience with Jupiter, XAML and HTML5/JSThe best Day 1 summary of the Build conference that I’ve [...]

  5. Steve Gray Says:

    Thanks David, a great overview for us guys that couldn’t make the conference.

    Cheers!

  6. Rod Mac Says:

    Thank you for your article. At last I’m beginning to see what this is all about. Very helpful about SL vs. Windows 8 XAML and WinRT controls. Two things I’m keen to find out about: I assume the fundamental Windows 8 screens e.g. Windows Explorer, Control Panel etc. render ‘native WinRT controls’, it seems strange that they look more like Win32 desktop apps i.e. they appear ‘non-metro’ – how might the two differ visually; what data access technologies will WinRT (AKA Metro) apps use?

  7. Rod Mac Says:

    I suppose I should have said how do products like VS11 Express preview render in Metro, there seems to be loads of ‘chrome’ there.

  8. Windows 8 and WinRT: On the Cusp of Platform Unification. | The Refined Geek Says:

    [...] of Windows however applications written on the WinRT framework will run on every platform with only minor code changes (we’re talking single digit lines here). Those legacy applications will still run perfectly [...]

  9. Here's the one Microsoft Windows 8 slide that everyone wants to redo | ZDNet Says:

    [...] There was one architectural diagram slide that stole the show at last week’s Build conference in Anaheim. Microsoft execs showed it repeatedly during last week’s Build developers conference to explain Windows 8. Here it is (courtesy of independent consultant and Senior .Net developer David Burela): [...]

  10. ibooth Says:

    GREAT post. Thanks much for putting this together. Cheers.

  11. Here’s the one Microsoft Windows 8 slide that everyone wants to redo « Kuwait Info. Says:

    [...] There was one architectural diagram slide that stole the show at last week’s Build conference in Anaheim. Microsoft execs showed it repeatedly during last week’s Build developers conference to explain Windows 8. Here it is (courtesy of independent consultant and Senior .Net developer David Burela): [...]

  12. yugie Says:

    Great Article! thank you so much david! :D

  13. Microsoft’s Visual Studio update addresses the connected app | TabletPCTrend.com Says:

    […] the future of .Net, due in no small part to how little the platform was mentioned in Microsoft’s initial instructions on building Windows 8 modern […]

  14. Microsoft’s Visual Studio update addresses the connected app – PCWorld | Everyday News Update Says:

    […] the future of .Net, due in no small part to how little the platform was mentioned in Microsoft’s initial instructions on building Windows 8 modern […]

  15. Microsoft’s Visual Studio update addresses the connected app | Newslandija Says:

    […] a destiny of .Net, due in no tiny partial to how small a height was mentioned in Microsoft’s initial instructions on building Windows 8 complicated […]

  16. Microsoft’s Visual Studio update addresses the connected app » | Says:

    […] the future of .Net, due in no small part to how little the platform was mentioned in Microsoft’s initial instructions on building Windows 8 modern […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: