Blog Post

Raman Sharma: Building Metro Style Apps with C++ and JavaScript

Download this episode

Download Video

Description

Creating a Metro style app with Javascript doesn't mean Javascript is the only language you can use. There are several reasons to leverage compiled code as well, which will be covered in this session. Learn how your Metro style app with HTML5 can directly access native code. We'll show you how to access your C++ Windows Runtime components from JavaScript. After this talk, you'll understand how to combine native and script code in order to build the most compelling Metro style apps.

Tags:

C++, JavaScript, Build

Embed

Format

Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    • User profile image
      kindaDev

      This is good but can I use C++ 3D with HTML?

    • User profile image
      Heavens​Revenge

      I love the WinRT stuff, should be able to embed a DirectX game right inside an HTML element and boom.  I hope the DX guys make a similar surface API to get an equivalent for WebGL for GPU computation tasks/graphics embedded in web pages.

    • User profile image
      domin8k

      Yeah, it could be very nice. But it is possible with WinRT to create 3D app engine in C++ and do all game interface in HTML/JS?

    • User profile image
      tommy_2k

      Interesting... Can I create such winrt wrappers for native libraries for which I don't have source code?  

    • User profile image
      johannes

      Although downloaded twice, I cannot play the High Quality MP4 file!?

    • User profile image
      Charles

      @johannes: What application are using to play the file?

      C

    • User profile image
      badpres

      Really bad presentation style for such a revolutionary step in native/JS/.NET integration.
      This presentation has to be renamed as '100 Things That Constitute a Bad Presentation Style'.

    • User profile image
      slinger

      Did this presentation happen at the conference?  At least I didn't see it.  I think this is something they recorded later. I saw at least two talks at the conference that sorta showed the JScript/Native integration.  This guy at least goes into some details.  Having said that, an interview style would have been better for this kind of a topic.

    • User profile image
      Raman_Sharma

      @kindaDev: If you are referring to being able to to render 3D content using C++ on a HTML5 surface, then that is something not supported right now.  Do you have some example of a scenario in which you would want to do that instead of creating the overall application in C++?

    • User profile image
      Raman_Sharma

      @tommy_2k:It is possible to create Windows Runtime wrappers on libraries without source code if the underlying binaries of the libraries fulfill all the requirements of the SDK for Metro style apps.  For more details on this topic, please watch this talk from Ale:

      http://channel9.msdn.com/events/BUILD/BUILD2011/TOOL-789C

    • User profile image
      Raman_Sharma

      @badpres: Sorry you didn't like it.  It was hard talking alone to a camera with no visual feedback whatsoever Smiley.  What specifically would you like to see improved?

    • User profile image
      Raman_Sharma

      @slinger: That's correct.  This talk was recorded here in Redmond and not in the //BUILD conference.  What would you like to see more of?  Samples, Examples, Tutorials?

    • User profile image
      Ted.w

      Very good video - I would like to some WRL examples (creating/consuming WinRT with ISO C++ instead of C++/CX).  Some initial examples here:

      http://www.interact-sw.co.uk/iangblog/2011/09/25/native-winrt-inheritance

    • User profile image
      Raman_Sharma

      @Ted.w: Thanks Ted.  Sure, we would be publishing some WRL examples too.  Please stay tuned to Channel 9 and VCBlog for more details.  Also, great job with that write-up.

    • User profile image
      Glen

      @Ted.w: Hi ted, what value do you get from using the WRL wrappers? As best I can see, using WRL will just makes *a lot* of *not very portable* code out of a arguably a little *non ISO* code. It's all MS specific anyway so making it ISO isn't much of a value in my initial opinions on C++/CX. What I am suggesting is that for the purposes of being "portable" (if that was your goal and it may not be), porting a little non ISO code may be a lot easier to port than a lot of ISO code that is still MS specific.

      I totally respect your desire to stay portable and ISO if that's your motive, but I just wonder if using WRL instead of C++/CX will actually make your code *less* portable practice but just creating more junk wrapper code to port.

      Anyway, just a point of view and you totally may have a good other reasons for your question.

      @other people: Please step in and challenge the views here both ways, it's the best way to get at our collective understanding here.

      There's a lot of good and bad angles on C++/CX and I want to see them to see if we can form a consensus. Please be kind though.

    • User profile image
      Glen

      @Raman, I can't watch this video for some reason. It's probably the computer I'm temporarily using. Since I can't watch the video, please forgive any confusion I may have about the title and your comments here to other people.

      But can you clarify for me. You said to kindadev:

      "If you are referring to being able to to render 3D content using C++ on a HTML5 surface, then that is something not supported right now. Do you have some example of a scenario in which you would want to do that instead of creating the overall application in C++?"

      Some people (possibly kindadev) would like to author C++/CX components and use them to both create new UI style controls as well as set properties on existing HTML controls.

      Can you explicitly state out of these goals which ones are possible and not possible and any other obvious limitations that you know. Thanks.

    • User profile image
      Dave

      @badpres I think you're being a bit harsh...I've endured far worse presentations than this. He did a good job of explaining what he was doing

    • User profile image
      Raman_Sharma

      @Glen:Let me explain what I meant.  You can create HTML controls that are backed by C++/CX components for data-binding.  You can also create HTML/JS apps in which almost all the important processing happens in your engine written using C++/CX.  What you cannot do however is the following: creating an HTML app with a special DOM element whose rendering is entirely controlled by C++ using DirectX calls.  Does that make sense?

    • User profile image
      Glen

      @raman, sorry I'm still not 100% sure what you mean.

      I think you are saying C++/CX objects can be invoked through JS, but that C++/CX can't be actually used to create a new type of DOM element even by deriving from an existing one. Is that right?

      So basically, the browser can't be extended by adding new UI controls in the way companies like Telerik do and as is often done for classic windows line of business apps. Also, browser based games cannot be authored this way either. Is that right?

      My other question, is C++/CX "safe" in the browser in ways that say ActiveX is not and wher Chrome Native Client apps might be?

    • User profile image
      Raman_Sharma

      @Glen:You can create whatever HTML control you want to.  Just that C++ cannot be used to draw to the screen for such controls, since there is no interface that lets native code do that for HTML/JS apps.

      About your second question: All Metro style apps run in their own sandbox and are thus safe to the extent that is afforded by the sandbox.  This sandbox prevents unauthorized access to system resources.  This means your C++/CX code can execute whatever calls it is allowed to by the Metro style SDK.  If your app package (containing all your app contents like HTML, JS, C++/CX DLLs etc.) passes App-Store validation, then it is safe to run on any machine.  In this sense these apps are more secure than ActiveX controls since there never was any validation that ActiveX is doing the right thing.

      For Metro style apps on the other hand, we have three levels of validations: at build time, at package upload time and at runtime.

    • User profile image
      Glen

      I conclude from what you have said these facts:

      1. Can you create NEW C++/CX UI Controls?: No, because they can't owner draw, just compose at best.
      2. Can you write a game in the browser?: No, again because it can't draw anything.
      3. MS "validates" C++/CX aka Metro apps through the app store, but developers will have to pay for that and it's listing now or eventually. So it appears, MS is now making its revenue from developers supporting the platform via - an app tax if you will; as well as customers purchasing the platform directly.

      4. So basically, without the ability to draw, the browser is a non extensible platform and using C++/CX this way nets you an app tax and saves your hoster some processing cycles, maybe.

      5. So, if you don't want this, don't use it but you can't get a metro app onto the platform any other way.

      6. If you want to avoid the app tax compose your controls on your own cloud platform framework (say Linux) and deliver your composted controls that way since that is all you can create locally anyway.

      That's the way it looks to me from the information I've got from you.

      Sorry in advance if I have got any of this wrong. I may well have.

      I'll let others chime in on this on the advantages / disadvantages of this model.

    • User profile image
      Raman_Sharma

      @Glen:Some of those statements make sense, some don't and some are unrelated.  Please feel free to write to me at rasharm_msft@hotmail.com and we can discuss these firther (maybe setup a conf-call).  Maybe you can then post your understanding here Smiley

    • User profile image
      Glen

      @Raman, thanks kindly for the offer but I'd prefer and think it will suffice just to see you answer my questions here.

      The questions could not be simpler and are numbered so you don't miss them and its better you have your words actual words posted here than risk me quoting you incorrectly.

    • User profile image
      PFYB

      I'd like to hear answers to Glen's questions as well.

    • User profile image
      KMNY_a_ha

      And me too. 

    • User profile image
      Raman_Sharma

      @Glen:OK let me try to answer some of those questions to the best of my knowledge.  I work on the team that provides developer tools for building applications.  As such, I will stick to answering questions about that area.  For questions about platform capabilities and competitive offerings, I would urge you to post your questions on Ch9 videos related to those topics.  There are several from the //BUILD conference.

      Now before I answer your questions, let me just ensure that you understand a few things: you can use several tools to build applications for Windows 8.  XAML with C#, XAML with C++, DirectX with C++ and HTML/JavaScript are some of those.  Using compiled languages like C# and C++ you could always tap into the OS.  Now you can do it using JavaScript also.  But do understand that when you are creating application with HTML/JavaScript, you are NOT extending the browser.  The application you write is a standalone application that runs directly on the OS.

      Also, the purpose of this video was very specific.  If you understand and like the concept of building Metro style app (not browser plug-ins) using HTML and JavaScript, then you can use C++/CX for computation intensive jobs that you app may want to perform.

      Now to your questions (those I can answer):

      > Can you create NEW C++/CX UI Controls?

      For apps written using HTML/JS you cannot, but for apps using XAML for the UI, you can.

      > Can you write a game in the browser?

      Once again, the browser doesn't come into the pictire in the traditional sense.  If your question is whether you can create apps that are games using HTML/JS, yes you can.

      Thank you

      Raman Sharma, Visual C++

    • User profile image
      tgoodhew

      @Glen:As Raman said the custom control model for Metro style applications using HTML5/JS is based around JS. This applies to developers using C++, C# & VB.

      Jeff Fisher details the control model for Metro style apps in his talk at BUILD - http://channel9.msdn.com/events/BUILD/BUILD2011/APP-846T

      The second set of questions you posed are around publishing to the store and for now those policies haven't been decided. When they're worked out the details will be published on the Building Windows 8 Blog - http://blogs.msdn.com/b/b8/

      Tony Goodhew

      Microsoft Corp

    • User profile image
      Jasper

      I can not play High Quality MP4 video. I'm using VLC or even Media Player - its stuck after first couple of minutes :( :(

    • User profile image
      Charles

      @Jasper: I'll look into a solution if I can reproduce the problem. Downloading...
      C

    • User profile image
      Charles

      @Charles: Confirmed. Will re-encode.

      C

    • User profile image
      ZeroInfinite

      I'm personally against the whole HTML5/Javascript/CSS3. I would much prefer Silverlight over this. It's a shame since silverlight is so much better. HTML5 is just overhyped.

    • User profile image
      Raman_Sharma

      @ZeroInfinite: And the best part is that Windows 8 lets you create apps with both HTML and XAML.  You can pick whichever suits your taste and requirements best.

    • User profile image
      Raman_Sharma

      Btw, the project that I used in this video can now be downloaded here:

      http://video.ch9.ms/handsonlabs/build2011/707.zip

      Thanks
      Raman

    • User profile image
      daniael

      interesting, this gentleman calls by native code, the c++ managed wrapper, which in fact is using a technology he has no clue about (pinvoke and com with legendary hresults, etc). is this how it works now? managers (obviously almost clueless) present somebody else's work via the clipboard... just my 2 cents. can somebody do something about that? how can somebody represent microsoft by calling c++ managed code by native code? hello?!?

    • User profile image
      daniael

      also, for you information, i know it may be too technical for microsoft product managers...

      by definition, hybrid apps are NOT combining javascript and c++. visual c++ can link native and managed obj(s). that IS what a hybrid app is all about.

      just for your technical information... noticed that you are clueless about the complex technology you got to manage. no hard feelings

    • User profile image
      daniael

      basically, this demo could have been explained as following:

      1. since metro apps are managed apps, obviously they can consume assemblies made by any other managed code family language (e.g. managed c++). just like in life, not all managed languages are born equal!

      2. what is so special, unique and wonderful about the microsoft visual c++ compiler toolset? under the the visual c++ umbrella you get 2 distinct c++ compilers, native and manged. their backends general compatible obj(s) so the linker can create assemblies containing native obj(s) or even native applications containing managed subsystems. and this is exactly what this demo is all about! the referenced assembly contained the mission critical flip geometrical transformation implemented in NATIVE C++

      of course, the microsoft marketing machine would not accept simple things like "fast is good, slow is bad" (talking about native vs managed c++) or that not all their languages are born equal or that c++ toolset is STILL the best language Microsoft (and apple and unix and linux) are using, because it gives you several programming paradigms (structured, oop, generic) so, enough abstraction while being per-formant and scalable. what microsoft added to this is the managed c++ extensions and the wonderful ability of the linker to link managed and native obj(s) into what's called HYBRID APPS.

      of course, like any lost art, the managers have different opinions... once upon a time, when c++ used to be a first class citizen in microsoft and when product managers still had a technical clue about the products they managed, so once upon a time, there was compiler backed project, modular and plugin based, called phoenix. phoenix supposed to allow you create native and managed obj(s) from ANY language (e.g. c#, vb, etc). of course, the upper management found this unacceptable and killed it (because the message to you, the many, supposed to be simple ".net is the best, is safe and fast enough for all your needs"

      what can i say more... who has ears to HEAR ME NOW (for i will not say it again) - this is for Microsoft Sake!!!

    • User profile image
      Raman_Sharma

      @reply to comment:

      • The components you create using C++/CX as shown in this video are fully native components.  There is no managed aspect to them.
      • The fact that underlying technology is COM (not pInvoke btw) is irrelevant.  The whole point is that the developer doesn't need to care about that.  He can write regular C++ language and libraries constructs (with some new additions off course) and he gets language interop for free
      • What's wrong with calling an app that uses both JavaScript and C++, a hybrid app?  Who said that the word "hybrid" is reserved for native+managed interop?
    • User profile image
      Raman_Sharma
    • User profile image
      yr deng

      Hi Raman,
      I like this video very much, it's helpful to let me know how to build "JS + WinRT dll".
      One thing I'm wondering is if this concept is compatible to "C# + WinRT dll" or not?
      Because here I create a C# project and try to add reference of WinRT dll, it tells me "failed to add reference".

      Thanks.
      YR

    • User profile image
      Raman_Sharma

      Yes, the concept is similar.  You can use the same C++ WinRT component in a C# app as well.

      What you are observing is possibly a temporary bug in the Developer Preview.  But if you can send me your app, I can certainly take a look.

      sharma dot raman at microsoft

    • User profile image
      yr deng

      Hi Raman,
      Thanks for your response.
      Because I don't have your email, I put my app on skydrive.

      https://skydrive.live.com/#!/?cid=65de7800e1b1250d&sc=documents&uc=1&nl=1&id=65DE7800E1B1250D%21256

      The file name is DemoCs.zip created by Visual Studio 11 Preview.

      Regards,
      YR

    • User profile image
      Raman_Sharma

      @yr deng:You should try the following:

      1. Clean the Imaging project.
      2. In the DemoCs project, add a reference to platform.winmd.  Browse to "Program Files (x86)\Microsoft Visual Studio 11.0\VC\bin\platform.winmd" and add a reference
      3. Now add a reference to Imaging project.
      4. Try rebuild

      This worked for me using your project.

    • User profile image
      yr_deng

      @Raman_Sharma:

      It's working for me now.
      Another question is how to stop at breakpoint in C++?
      I set a breakpoint in C++, and start debugging, then I found it can not stop at C++ breakpoint.
      And I also can not find "Debugging" option in DemoCs project settings, it's not the same as JS project settings.

      Thanks.

      Regards,
      YR 

    • User profile image
      Raman_Sharma

      @yr_deng: That too seems like a bug in the developer preview.  This has been fixed already in the internal builds and will be available in the next public release.

    • User profile image
      yr_deng

      @Raman_Sharma:
      Got it.
      Thanks. 

    • User profile image
      yr_deng

      @Raman_Sharma:
      I try to set debug "native only" on the sample in your video. (JS + WinRT C++)
      The breakpoint can stop at C++, however I try to use "Immediate Window" or "Watch" to see some variable value, it's failed.
      For example, I set breakpoint in WinRTComponent::FlipImage() function, and try to see variables inFile/outFile/hr in "Watch", but it always told me variables are undefined.
      Do I need some more settings to fix it?

      Regards,
      YR 

    • User profile image
      Raman_Sharma

      @yr_deng:Once again, this was a developer preview.  There were some bugs and incomplete features related to debugging of C++/CX code.  Those issues have now been fixed.

    • User profile image
      yr_deng

      @Raman_Sharma:
      Thanks, I got it. (I just think maybe I set wrong setting on my project.)

      Regards,
      YR 

    • User profile image
      guzeliya

      net

    • User profile image
      guzeliya

      proshu pomagite podklucit java Scrip

    • User profile image
      Raman_Sharma

      @guzeliya:I am not sure I understand the comment.

    • User profile image
      ZeroInfinite

      @Raman_Sharma: I did hear about that. I'm glad they're supporting XAML! Smiley Thanks.

    • User profile image
      Raman_Sharma

      Updated the MSDN code sample to be used with VS11 beta:

      http://code.msdn.microsoft.com/Hybrid-JavaScript-and-C-e6dc77fa

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.