 All right, so I guess you'll get started So so I'll meet you here. I guess question is kind of moved. I guess this is a JavaScript tank So if you have right web applications for anything All right, that's good because All of you are qualified to write Windows 8 apps So that was kind of by design So, you know, I guess operating some team and they were trying to think of the development Experience for building Windows 8 apps, you know, if it had been purely, you know dot-net Even a native C++ only option then, you know They're basically excluding a major chunk of the developers out there So, you know strategically wanted to kind of make it really really simple or web developers to build desktop applications using web technologies So so that kind of is the is the goal So, you know, just I probably just take 15 minutes to kind of show you how the whole thing works out Right. How do you actually build a desktop app with? with on Windows 8 with Visual Studio Yeah, so as I was saying earlier like if you if you need the bits right if you need Windows 8 to install Visual Studio, so you know, I have it on a USB stick. So it's basically an ISO for both of them So you want to put it on a VM feel free to put it So to build Windows 8 apps, you need Windows 8 So and you need Visual Studio, right? So So this is this is Visual Studio 2012 As to why you would want to build No Windows 8 apps. I guess no Who here is not interested in making money Nobody Because that kind of is a big deal here So on October 26 Windows 8 is you know, going to be launched worldwide He'll be able to buy Windows devices Those devices by the operating system itself and so on The Windows 8 is up the end already So the Windows store is where you would The Windows store is where you would actually publish your you know, it's very similar to App Store or Google Play and so on So you publish your app there Folks can discover it, install it You know the standard things that we expect of a store except here you're looking at you know potentially very very very large number of users You know obviously the operating system is not yet released But if you go by some patterns, you know that we've seen with Windows 7 You know the total number of licensed Windows 7 installations Is over 700 million worldwide, right? This is licensed Not even counting people who install it Less than what he means so just licensed installations over 700 million and you know that is more than You know iOS Android everything combined like iOS from the beginning of from iOS one all the way till now Right if you take Android in the beginning all the way till now Some all the users together up. That's still less than just Windows 7 licensed users. Okay, so Volume is something that I you can probably take you at it. You're gonna have a lot of Windows 8 users, right? And It I think it really It would really matter to be there to be one of the first few people in this So to you know being first really really helps really matters In anything in a whether it's a game or whether it's some Productivity app or social networking app, whatever the case is right being first really makes a difference And now is probably the one of the best times so hey, so You know how you create a app is basically you you know install once you install visual studio The flow is not that pretty You know what you would expect so this is visual studio ultimate so here you can build up with dot net C++ All that you would expect and the new kid on the block You want to call it is this So that's so when you can you do a file you project so JavaScript is one of the options that you see So you can build Windows stored application that if you start a project templates here, I can start with a completely blank app Just from scratch or there are some other standard kind of templates for example, there's a grid There's split layout and things like that just as you know, you want to just see what what does look like So let's say I go ahead and select a grid So so that's the project has been basically created So one of the things I want to kind of draw your attention to is this how this thing has been laid out here So, you know, there is a there's a root HTML page here before html So if you know if you're coming from a background of the structure should look very very familiar So you have all of your UI markup goes into the postman HTML You have your CSS where you basically define your styling the UI and your code goes into script I mean pretty standard kind of structure right for any web application and that's what you do here as well So how you know the way to think about Windows 8 applications with HTML is You know, so you must have heard of single-page web applications. Yeah, SP is they call it And we have a great example of a good SP app Twitter does Gmail is a pretty popular There's only one page that ever loads right everything just is dynamically rendered on the client So Windows 8 apps with HTML you can think of them as Single-page apps right there is only one HTML for the entire app. You can have like 50 pages, but there's only one page It's one physical HTML Document that gets loaded and that's to call it HTML. So it's very So if you notice the markup here, you know, there isn't much here at all Let me just So if you look at the markup here pretty standard HTML 5 right up there You know some JS includes CSS includes and if you look at the core The body tag all it has is is one single tip right and nothing else So basically what happens is every page that you navigate to inside the app basically loads up into this into this one single day Right and so if I just run the app, right? This is just a skeleton kind of template kind of app when you say filing project you see a brilliant icon first and So here, you know, basically it's just a standard tile grouped tile kind of rendering right so basically You know there are what six groups and each group has a very good number of tiles and you can tap on a tile It takes you to a page Here you can can imagine some image being here some text content that you can read in column layout You can come back here and click on these titles and see what are the items under that group You can the resolution is to the way we can snap this to the side the left to the right And on a tablet, you know, this would respond to touch So I have a touch tablet as well Take a look if you want So so all of that right so this so you can actually see the app actually navigating between pages, right? So how does all that happen? So it's ultimately just loading everything into the single day and you'll also see that there are some transitions some nice You know, it's not a it's not an abrupt flip to a new page, right? It's actually transitions on the right There's a little animation in all Right. So all of that is possible because it's a single page right so you can imagine what it does The markup in memory You know adds does the layout and everything and then it removes this and then I mix the new content in into that continuity so So ultimately the dev experience is pretty You know very much similar to how you build a web application So as far as pages are concerned here, you know, there are three pages here The group items pages the page that you saw rendered as soon as the app loaded So if you look at so, you know, you might be wondering wait a minute You said there are there's only one html, right? So when you're developing you do have multiple html files, right? It would be a pretty horrible experience you get with the entire app in one file, right? So that's not the case. So you actually build it in multiple different files So each page, you know the concept of a page here is represented with a with a folder here Right on the pages you have one folder for one sub folder for each page and under that you have, you know one js one css It's just a It doesn't have to be this way. I mean you can structure it however you want There's just the default structure that turns out when you define your project so this is the html for the Landing page and here obviously you have some bit of bit of some more marker. It obviously includes Includes the css for that page includes the js for that page Some common JavaScript file so the structure of this solution is each page specific cs and js goes into that folder Stuff that is common to the entire app can go into the js and cs is the root of the Application. It's a default goes there. This js goes here Now within this Now you will note that you know How many of you here have worked with knockout js? So the model that You know how controls and the UI is rendered here is very it's very heavily inspired by knockout js, right? So in knockout js you have this concept of You know how you so you have idea, you know, you can basically instantiate controls So for example, if you think about it here that group list view that you saw is actually Is a list view control So that is basically this view here, right? So All these area tags are all for accessibility so a couple of Attributes are here, right so Data dash attributes. So this is actually a w3c specification like if you want to Extend any html element with some custom attributes that you want to attach with that even then you can do that by Prefixing your custom attribute with data dash right and then you can do whatever you want to do with it So that's the same. You know, we've just used that here. So there are a couple of Custom attributes that's called win-dash control and win-dash options So here, you know, basically by simply marking this particular div with this particular attribute saying that this is a winjs.uio.list view turns transforms this You know very harmless little div into a full-fledged list view control, right? so You know as far as you know things like you know best practice like all the you know industry best practices for JavaScript Kind of all over here. So when you say winjs.uio.list view It's basically can think of it as there is a namespace called winjs.uio inside which there is a Constructor function called list view, right? So if you look at the jays for this particular page You know, there is this idea of a page here, you know It might sound a little confusing because I'm going really fast and we're coming through a lot of concepts But think of it this way, right? So you have a page and each page has a corresponding, you know object Providing Providing handlers to events providing data binding And so so basically here you save in jays.uio. So ui is simply an alias for this namespace And save in jays page will define and then you point it to the corresponding html And then the second parameter here is a is where you put all the logic for that page, right? So for example, there is a function called ready So you can think of this as being the equivalent of an onload for that page So we here we can't rely on on load because there is only one page that gets loaded and that on load is going to Compire only once to the entire app, right? So what if you want to do some initialization for every page that you that you navigate to you put that in the ready for for that page so So here for example, you know that that list view control is being Is being initialized so here you can see that it acquires a reference to that That list view control that view that you saw here. So this has the group items list class associated and No, you see that so this basically runs on the IE 10 platform, right? So all the capabilities of IE 10 are available on the windows 8 app as well So the query selector is a you know as far as is part of the html 5 Specification where you can use CSS 3 selector syntax to you know select html elements. So query selector is Is this going to give you can give a CSS 3 selector and it's going to return one element, right? There is a query selector all where if your selector matches multiple elements and it's going to give a collection of those So just like how you do jquery, dollar and provider selector it's the same thing So here this basically Acquires a reference to that element html element and then the dot win control refers to that list view control so So, you know here So this this win control bit is what is the you know is the list view control. So here we are saying that This is a winjs or divi.listView, right? So the dot win control expando property Will give you that list view object So any div which has been transformed into a control the controlled reference can be acquired by dot win control, right? and then you can Act you know initialize it do data winding things like that So in all of this is documented you can go to dev.windows.com dev.windows.com and then you'll find a full documentation for windows 8 development So one of the things that you will notice here is you know it's all template driven, right? So you have the you have the list view here Now how do we want each of these elements in that list view render, right? So up here if you see that there's another dev defined and the class you know with item template as a class and this is also a win control Right only this is a different one. This is an njs.binding.template and then we associate this template as the item template on the list view control And that's what so for example right here if I say Jing Then basically That doesn't get under anywhere Let's say put something here and it's getting rendered on top of the title. I don't know if you can see it Yeah, so I successfully made it so that you cannot read the title anymore so It's not really clever But you know basically the point here is this this dev is basically used to you know Define how each item in the list view should get rendered, right? This is a template for that So the concept is very simple. You have the list view control You hook it up with a data source and the data source basically has the collection of information that you want to render on screen And then you hook it up with a template which defines how each item in that data source should get rendered on the screen, right? so and that's pretty much it so here when you If you go through this there's an initialized layout method here initialized layout is where the The data source is set up right so the item data source is set up here So it says data dot items dot data source If you're wondering what is data, so, you know If you want to explore this yourself, right? Some of the key things to remember are whenever you see something like data here You know, where is that defined data is defined in JS That's data. Yes, if you are doing if you're using visual studio then Then you can typically hit just F2L right so you can just go on you know this groups and Just hit F2L it takes you to wherever that has been defined You can see that this has been defined in in data and So nothing that you would want to get familiar with is a library called as winjs, right? so winjs is simply a JavaScript library that helps you helps it helps Windows 8 app development easy or simpler in fact the list view the binding template all that you saw where all part of the winjs library so When you say you know winjs.namespace.define and you provide a namespace like this data.food.bar something right data.food.bar then basically that creates a namespace where you can throw out the application now Wherever you include this JS you can say data.food.bar.items.groups.group.getitemreference and so on and so forth right so this is how you basically kind of you know JavaScript is kind of notorious for quickly running out of you know you lose control of all your code, right? Unless you're very very disciplined about how you structure your code and especially if you're talking about building application scale JavaScript and that is if you're adding 100 lines of JavaScript you can probably keep everything in your head. That's great. No problem Whereas if you're building something non-trivial you need to be able to make sure that your code is structured in a more disciplined way So if you notice, you know some of the things some of the illustrious practices that I've described are all followed For example, there is an immediate from the entire code in a particular JavaScript is encapsulated inside an immediate function So this function is there and that gets called so that you know There is no accidental leakage of objects into the global score. It's like that and you can see that by default you know use strict mode is specified for that function and Whatever symbols you define inside this immediate function if you have to export it for access outside then you basically use the namespace thing, right? So when you save NJs, when it's 25 then now you're able to access data outside of outside of that function as well so No, that was very you know a brief kind of rundown of what it what it looks like to build a data app I know that you'll probably have more questions than have It's probably kind of confusing, but what I encourage you to do is kind of install and explore and see what it is If you want you can just completely forget about all this and build this like a web application Right nothing stops you from doing that because this is the web platform and people have done that too For example, if you see there is a there's a game called cut the rope, right? It's a very popular game on I over the Android everywhere. Now it's available for Windows 8 as well so there is a the cut the rope game is actually available for For the browser as well, right? You can go to cut the rope.ie and you can play it on IE on Pro So this game has been completely written with JavaScript HTML CSS Right and pretty the only thing they have done is they have taken their web implementation We're into a project build what a Windows 8 app out of it, right? So you can do that know if it makes sense for your app on the other hand if you want to kind of You know kind of implement the Windows 8 UI paradigms, then you know you might want to go through J's controls and so forth So that's that's pretty much it. There are some very, you know compelling apps already out there You know, for example Dinga now is a nice music app out there So you'll see all of these are coming out. So in fact, this is my day job No, you know working with customers to get these apps into the store So some pretty pretty interesting innovative stuff people are doing. For example, I work with Like it's Ovi. I don't know me if you use Ovi Side so we can buy t-shirts and shirts and stuff like that They put a very very good-looking Windows 8 app together So, you know, if you want to draw inspiration, you know, take a look at the store There are already some pretty cool apps out there already and you know It really doesn't have to be boxes and groups and stuff. That's just the default template that I get in the studio Look at the fast track app, right? They have done a completely unconventional very different kind of in terms of user experience. So Right, so that's setting that's pretty much if you have questions Yeah So And this is a desktop app, this is a Windows 8 desktop app built with that technology Right, so app as this would run only on Windows 8. Now you can so that's a very common question Right people want to build code bases, which they can reuse across platforms, right? People build phone gap apps. They are building that I want my at least my business logic to be able to definitely do that, right? So as long as you design it well, you should be able to reuse stuff across the cross-platforms, right? The UI is probably the only thing that you'd have to build and customize for every product The data thing can be common across So What's the gap between the out-of-the-box provided controls versus you want to build your own custom control? How difficult is that so? Like I was saying right like if you want to talk about the list view controls completely template-based, right? So you completely define how each individual tile gets rendered all it implements is some You can think of it some large directions So a list view implements a group tile interface now how each of those tiles get rendered You know whether the group whether there's a group at all or not How does your group render in snap you all of that you have complete control over completely control through CSS basically? so all of these controls are like that and The benefit you get is for example, right windows 8. See if you're building for iPad, right? As far as display resolution is concerned. There is no confusion One resolution right now windows 8. That's not this that's not the case Windows 8 is going to run from you know a small tablet all the way to gigantic 18 screens right all day and all the screen sizes in Between there you can imagine so how do you make your app so that it looks good across all these resolutions, right? So that's some of the things that you benefit from by using engines controls So for example here you can see that this renders this data source with two columns here, right? I mean two rows and two columns and two rows now on a Imagine that this is a really really high resolution screen then if you render the same way, right? You'll just have this thing sitting at the top in one corner, right? So in the list you control would relay out to kind of fill out the available screen space I do to dynamically adjust based on the screen space So it does some smart things like that So that's why you would want to use list here, but there's no need if you want to use your own thing If you do that you want to use your own libraries jQuery product Just add the JS to the project and use it So So one thing that you have to think about when using third party libraries is that the sandbox here is a little different from the sandbox That is there on the web, right? And that's for a good reason because the web is a more restrictive environment now here This is a desktop app, right? So you can access the file system. You can access devices much more permissive Now what that means is the script that you run has to be Has to be script that you have authorized to run the sense that you know It shouldn't be script injection is a very very dangerous thing here, right? And most of these apps are some kind of front-ends for some web property I think I have has they have a website and this is basically a windows 8 front-end for that and they are getting stuff off the web, right? So it's super important that you know, we don't Accidentally, for example download script and run it here That's a recipe for disaster because you know that script doesn't necessarily have to come from yourselves No hacker can get in the middle and push some script and now that script runs with full privileges of the user, right? So that's very very dangerous So one of the things that you will run into when you're using third-party libraries is for example jQuery, right? Now if you are inserting some script or something or inserting some dynamically some elements into a DOM JQuery might put some script tags inside it, right? And that will by default be blocked So when you say some element dot inner HTML equals some string and the string happens to have a script tag inside it That will get blocked, right? That's and that's deliberate, right? Because that's a dangerous thing So there is an API for that. You can say if you want to, you know, work around it There's binges dot utilities dot set inner HTML unsafe Right, the API is called so that it's kind of making it very explicit that you're doing something unsafe and you're saying that you know What you're doing, right? So you have sanitized it, you know that this is not malicious You can do that, but obviously jQuery wouldn't call that API, right? Because it doesn't know what that is So those are some of the things that you might run into The sandbox differences But otherwise it just works One question, is there any difference on the Windows Store between a native Windows app and a web app in the distribution? No, there isn't. Does the user see any difference between a native app or not? Absolutely not, right? So by just by looking at the apps, there's no way to tell the difference And another follow-up question, how difficult would be to port this to a Windows Phone 8 app? So for Windows Phone 8, right? It's the core, it's the same core operating system, like the operating system runtime and the core You know kernel and everything is the same across the desktop and the phone OS for Windows Phone 8, not 7 So if you want to achieve code reels or even UI re-use Then you are going to have to build it in either C++ or in .NET because the Phone 8 UI does not have a HTML Option there, as in you know, you cannot use web technologies to build a Windows Phone 8 user interface So you can still achieve code re-use So only through, you'll have to build your common code in either .NET or in C++ And then you can share that across the phone platform and the Windows 8 platform Or of course you can build your Windows 8 with .NET and SAML, then you can Potentially re-use even SAML, but then obviously there's a screen difference. It's a very small screen here You're building for a big screen So you know UI I think you will anyway have to re-build. If you want to re-use code and stuff You'll have to make sure make sure that you build that in C++ or .NET. JavaScript code is going to run only on Windows 8 Yeah Also people have concerns about you know, how does how does it how does the performance, right? So are you a second-class citizen in the platform because you're building with web takeouts? It's absolutely not like if you you know if you look at the Kaderov game or Pirates Love, Daisy's or many other games here They're all built with HTML and they have a physics engine. They have you know pretty you know fancy graphics. It's a simple game But you know, I'm pretty sure it's pretty incredibly hard to build it You know some pretty complicated stuff is happening there and it's happening all the JavaScript in the web platform So from performance point of view, I was pretty surprised when I saw You know the kind of performance like you can can really get 60 frames per second rendering for you Even if you're building a fairly complicated game you can can do that in fact there is a What is that? Have you guys seen this? It's pretty mind-boggling actually I don't know if there's no connectivity But there is connectivity So this is a How you played this is a pretty popular game on iOS Contrajo And if you look at the quality of the graphics, right? It's pretty incredible No credits So you can basically mutate the This thing the idea is to get it to that glowing blue thing Let's see there's some graphics for the I mean some physics engine for the rope physics, right? Then you tap this and then you take that oops Let it go So You know this again fully JavaScript CSS So from the web platform and this is 60 frames per second, right? So It's pretty amazing how far people have come I was just seeing a video the other day about what typescript and all that and nobody probably even imagined that you know HTML JavaScript CSS would be used to these kinds of things at one point in time, right? So it's pretty incredible Everybody know about Atwood's law? Yeah, the law states that you know if anything that can be written in JavaScript will eventually be written in JavaScript So there's a server framework Now there's you can build desktop applications You can write database query triggers on Windows Azure like just everywhere JavaScript Right Yes So when you do this native development on Windows 8 using JavaScript Is it some sort of IE layer below it which is running it or is it like a directly need to be compiled into it So it runs on the web like it runs on it's basically an IE frame in which you're In fact when you deploy it you actually deploy it as HTML CSS in JavaScript JavaScript gets pre-compiled and optimized and things like that but it's ultimately script and CSS in HTML Same script we can take it and you know we can run in Chrome also Yeah, so the windows library Correct, so any Windows 8 specific stuff obviously you do it in a few days but you can design your code in such a way that you know your core business logic is generic enough and you can just lift and shift across platforms So even the windows library is written So So can we not like this parallel because it's still just HTML and CSS So it looks very window-ish but would it not run on the outside of the... I mean see there are parts of it that you potentially could reuse for example winjs.xhr is basically a little wrapper around xml8p request Now if you wanted you can take that and use it across platforms but things like the control framework and all that See ultimately this runs on Windows and there is something called as a windows run time or the winrp It's probably my cab guy So there is something called as a windows run time and the windows run time is a windows specific thing If you are making a call into windows run time then that wouldn't work on other platforms So winjs is something that defined explicitly for building windows 8 apps So I'm not even sure why you would want to use it in other... Because you just get a good looking app built on windows 8 platform and you would want to use it as well So you would not be able to do this and you would not be able to write it on the same things and check where you are on the So I just was hoping that you would not have to do that in a possible way to support it Yeah, Metro outside windows Yeah that's a good point and I'm not sure how difficult or easy it would be to just support it because it's just for example if you control it's just bills and just JavaScript So it should potentially technically be able to do that So are there any MSIs in one? How is this... I know it's through the windows app store Right So basically when you build this application what you produce is like once you're ready to open the store what you produce is a .appx file just compresses all your package into one zip file and that's what you put into the store It's like a Chrome CRX I mean this app is just a zip compression It's like a jar CRX has a different header though So in fact you can even open it in any compression tool So it's just a and the installation everything is managed by the store app So this manages that So how does updating the app work for this kind of app So if I want to change something I need to push it to windows store and then it will go up pretty directly as an iOS app So this is an app So just like how it is on iOS and Android So on the store you would see a little badge here telling you that these many of your apps have updates Open it and go to the updates place How? Where we will specify the version or something There is a configuration file or something So there is a manifest file where you specify the version What about the performance What about the games Those are mostly like Canvas, Beersh and Android Accelerator What about the transition Because when I do iOS development When I use anything which is like a WebView, Beersh and JavaScript The performance is hard at all It has to go native for getting the good transition Canvas Beersh is totally different because it's all Android Accelerator On the web platform Everything is hardware Whether it's through a HTML element Whether it's through SPG, Canvas Everything gets hardware Even transitions Anything at all that you do on the screen That's what 60 FPS is something that is very simple to achieve So that is the advantage of developing using XAML and C++ You would have So let's say you are building a first-person shooter Pretty much There is no reason to not use The first app is a front-end for a web property Is there any advantage for doing C++.NET based Any benchmarks? Yeah, I mean Technology choice to a large extent depends on skill set So what are you comfortable with You can go with that So if you are a native developer Then probably C++ is the natural choice Managed guy will go to .NET So that really doesn't make a difference For a vast majority of the apps Except for some small use cases Like a very high performance simulation Or a demo or a game Would probably be a good choice to build it in C++ You run on the metal maximum performance You can access DirectX Your GPU, everything So that would be a good scenario for C++ Pretty much every other kind of app It really doesn't make a difference