JavaScript-driven UWP via VStudio
-
I did not expect this. Create a "Hello, world" app (JS) - UWP app developer | Microsoft Docs[^] This creates a UWP app (which runs natively on your desktop - not in your browser) that is created from HTML and JS. Have you seen this before? Why hasn't anyone spoken of this? Is M$ embarrassed. :laugh: This could be interesting.:~ TypeScript I was trying to see how to add TypeScript to a basic project. Interesting thing is that there doesn't seem to be a nuget* for TypeScript, but you can NPM it. Hello! M$, are you there? Why do you force us to use every technology on the planet for the same thing? EDIT : *Actually this is probably due to using an older version of STudio (2013). EDIT 2 : Seriously annoying!! 1. Searched VSTudio Nuget package manager for "typescript" nothing. 2. Searched Nuget.org site and found Microsoft.typescript.compiler. 3. Okay, back to nuget pkg manager in Studio: search "microsoft.typescript" and found it. Ugh! EDIT 3 I'm amazed! I tested HTML CANVAS in the app and it works also. Here's a snapshot where I drew a quick grid on the Canvas object via JavaScript: https://i.stack.imgur.com/Aa7Oi.png Maybe the UWP just implements the old BrowserControl or something? EDIT 4 - Visual Studio 2017 Here's something additionally interesting. It seems that this project type isn't available under VStudio 2017. I can't seem to get a UWP project that is created entirely from HTML / JS. Microsoft is so confusing...and confused. :confused: EDIT 5 - Visual Studio 2017 pt2 Actually there is a project that allows you to build a UWP / Windows Store app via HTML / JS. However, it is not listed under UWP apps. That would make sense. Instead it is listed under Other Languages...JavaScript...Windows Universal. My bad. I was looking under C#. The project selector is a bit confusing. Here's a snapshot : https://i.stack.imgur.com/3U2IT.png[^]
-
I did not expect this. Create a "Hello, world" app (JS) - UWP app developer | Microsoft Docs[^] This creates a UWP app (which runs natively on your desktop - not in your browser) that is created from HTML and JS. Have you seen this before? Why hasn't anyone spoken of this? Is M$ embarrassed. :laugh: This could be interesting.:~ TypeScript I was trying to see how to add TypeScript to a basic project. Interesting thing is that there doesn't seem to be a nuget* for TypeScript, but you can NPM it. Hello! M$, are you there? Why do you force us to use every technology on the planet for the same thing? EDIT : *Actually this is probably due to using an older version of STudio (2013). EDIT 2 : Seriously annoying!! 1. Searched VSTudio Nuget package manager for "typescript" nothing. 2. Searched Nuget.org site and found Microsoft.typescript.compiler. 3. Okay, back to nuget pkg manager in Studio: search "microsoft.typescript" and found it. Ugh! EDIT 3 I'm amazed! I tested HTML CANVAS in the app and it works also. Here's a snapshot where I drew a quick grid on the Canvas object via JavaScript: https://i.stack.imgur.com/Aa7Oi.png Maybe the UWP just implements the old BrowserControl or something? EDIT 4 - Visual Studio 2017 Here's something additionally interesting. It seems that this project type isn't available under VStudio 2017. I can't seem to get a UWP project that is created entirely from HTML / JS. Microsoft is so confusing...and confused. :confused: EDIT 5 - Visual Studio 2017 pt2 Actually there is a project that allows you to build a UWP / Windows Store app via HTML / JS. However, it is not listed under UWP apps. That would make sense. Instead it is listed under Other Languages...JavaScript...Windows Universal. My bad. I was looking under C#. The project selector is a bit confusing. Here's a snapshot : https://i.stack.imgur.com/3U2IT.png[^]
This is quite old. JS was brought in as a first-class language with Windows 8 (WinRT apps) already. Microsoft just continued it with UWP. UWP does not need to implement the browser control - it is directly using Chakra + Trident. This was one of the reasons why WinJS was formed ([GitHub - winjs/winjs: A UI toolkit for modern browsers](https://github.com/winjs/winjs)) in the first place.
-
I did not expect this. Create a "Hello, world" app (JS) - UWP app developer | Microsoft Docs[^] This creates a UWP app (which runs natively on your desktop - not in your browser) that is created from HTML and JS. Have you seen this before? Why hasn't anyone spoken of this? Is M$ embarrassed. :laugh: This could be interesting.:~ TypeScript I was trying to see how to add TypeScript to a basic project. Interesting thing is that there doesn't seem to be a nuget* for TypeScript, but you can NPM it. Hello! M$, are you there? Why do you force us to use every technology on the planet for the same thing? EDIT : *Actually this is probably due to using an older version of STudio (2013). EDIT 2 : Seriously annoying!! 1. Searched VSTudio Nuget package manager for "typescript" nothing. 2. Searched Nuget.org site and found Microsoft.typescript.compiler. 3. Okay, back to nuget pkg manager in Studio: search "microsoft.typescript" and found it. Ugh! EDIT 3 I'm amazed! I tested HTML CANVAS in the app and it works also. Here's a snapshot where I drew a quick grid on the Canvas object via JavaScript: https://i.stack.imgur.com/Aa7Oi.png Maybe the UWP just implements the old BrowserControl or something? EDIT 4 - Visual Studio 2017 Here's something additionally interesting. It seems that this project type isn't available under VStudio 2017. I can't seem to get a UWP project that is created entirely from HTML / JS. Microsoft is so confusing...and confused. :confused: EDIT 5 - Visual Studio 2017 pt2 Actually there is a project that allows you to build a UWP / Windows Store app via HTML / JS. However, it is not listed under UWP apps. That would make sense. Instead it is listed under Other Languages...JavaScript...Windows Universal. My bad. I was looking under C#. The project selector is a bit confusing. Here's a snapshot : https://i.stack.imgur.com/3U2IT.png[^]
As Florian explained, this is, indeed, old news. However, it did deserved to end-up in that forum one day.... And now you have done it! :laugh:
A new .NET Serializer All in one Menu-Ribbon Bar Taking over the world since 1371!
-
This is quite old. JS was brought in as a first-class language with Windows 8 (WinRT apps) already. Microsoft just continued it with UWP. UWP does not need to implement the browser control - it is directly using Chakra + Trident. This was one of the reasons why WinJS was formed ([GitHub - winjs/winjs: A UI toolkit for modern browsers](https://github.com/winjs/winjs)) in the first place.
-
As Florian explained, this is, indeed, old news. However, it did deserved to end-up in that forum one day.... And now you have done it! :laugh:
A new .NET Serializer All in one Menu-Ribbon Bar Taking over the world since 1371!
Yeah, now I even remember downloading Kraig Brockschmidt's book on WinRT JS apps : Programming Windows Store Apps with HTML, CSS, and JavaScript (Developer Reference) Kindle [^] It's still free on Amazon. :-D I'm sure there are quite a few changes since this is now UWP world.
-
I did not expect this. Create a "Hello, world" app (JS) - UWP app developer | Microsoft Docs[^] This creates a UWP app (which runs natively on your desktop - not in your browser) that is created from HTML and JS. Have you seen this before? Why hasn't anyone spoken of this? Is M$ embarrassed. :laugh: This could be interesting.:~ TypeScript I was trying to see how to add TypeScript to a basic project. Interesting thing is that there doesn't seem to be a nuget* for TypeScript, but you can NPM it. Hello! M$, are you there? Why do you force us to use every technology on the planet for the same thing? EDIT : *Actually this is probably due to using an older version of STudio (2013). EDIT 2 : Seriously annoying!! 1. Searched VSTudio Nuget package manager for "typescript" nothing. 2. Searched Nuget.org site and found Microsoft.typescript.compiler. 3. Okay, back to nuget pkg manager in Studio: search "microsoft.typescript" and found it. Ugh! EDIT 3 I'm amazed! I tested HTML CANVAS in the app and it works also. Here's a snapshot where I drew a quick grid on the Canvas object via JavaScript: https://i.stack.imgur.com/Aa7Oi.png Maybe the UWP just implements the old BrowserControl or something? EDIT 4 - Visual Studio 2017 Here's something additionally interesting. It seems that this project type isn't available under VStudio 2017. I can't seem to get a UWP project that is created entirely from HTML / JS. Microsoft is so confusing...and confused. :confused: EDIT 5 - Visual Studio 2017 pt2 Actually there is a project that allows you to build a UWP / Windows Store app via HTML / JS. However, it is not listed under UWP apps. That would make sense. Instead it is listed under Other Languages...JavaScript...Windows Universal. My bad. I was looking under C#. The project selector is a bit confusing. Here's a snapshot : https://i.stack.imgur.com/3U2IT.png[^]
MS should have just focused on one single language which is C#, than spread all the development efforts over other language/platform like C++/CX and Javascript. C++/CX syntax is definitely not as inituitively as C# API. Take Array class for example,
// C#
byte[] arr = new byte[5];
arr[0] = 12;
byte n = arr[0];// C++/CX
Array^ arr = ref new Array(5);
arr->set(0, 12); // [] operator is not available!
unsigned char n = arr->get(0); // [] operator is not available!C++/CX needlessly expose many implementation details out while C# encapsulates those details. For example, C#
stringis converted to UWP Platform String automatically when calling UWP API, while C++/CX developer has to do this explicit step ourselves. Despite out for 5 years, C++/CX does not have async feature. So when C++/CX dev calls async UWP function, he has to manually spurn a worker thread to call it synchronously. Instead of introducing this half-baked language, efforts could have been better spent on one main language. -
MS should have just focused on one single language which is C#, than spread all the development efforts over other language/platform like C++/CX and Javascript. C++/CX syntax is definitely not as inituitively as C# API. Take Array class for example,
// C#
byte[] arr = new byte[5];
arr[0] = 12;
byte n = arr[0];// C++/CX
Array^ arr = ref new Array(5);
arr->set(0, 12); // [] operator is not available!
unsigned char n = arr->get(0); // [] operator is not available!C++/CX needlessly expose many implementation details out while C# encapsulates those details. For example, C#
stringis converted to UWP Platform String automatically when calling UWP API, while C++/CX developer has to do this explicit step ourselves. Despite out for 5 years, C++/CX does not have async feature. So when C++/CX dev calls async UWP function, he has to manually spurn a worker thread to call it synchronously. Instead of introducing this half-baked language, efforts could have been better spent on one main language. -
Haha, you are right! :doh:
-
MS should have just focused on one single language which is C#, than spread all the development efforts over other language/platform like C++/CX and Javascript. C++/CX syntax is definitely not as inituitively as C# API. Take Array class for example,
// C#
byte[] arr = new byte[5];
arr[0] = 12;
byte n = arr[0];// C++/CX
Array^ arr = ref new Array(5);
arr->set(0, 12); // [] operator is not available!
unsigned char n = arr->get(0); // [] operator is not available!C++/CX needlessly expose many implementation details out while C# encapsulates those details. For example, C#
stringis converted to UWP Platform String automatically when calling UWP API, while C++/CX developer has to do this explicit step ourselves. Despite out for 5 years, C++/CX does not have async feature. So when C++/CX dev calls async UWP function, he has to manually spurn a worker thread to call it synchronously. Instead of introducing this half-baked language, efforts could have been better spent on one main language.You don't sound much like a C++/Cx users... At any rate, what's so wrong with all the UWP async C++ code, seems straightforward enough to me.. [Asynchronous programming in C++ - UWP app developer | Microsoft Docs](https://docs.microsoft.com/en-us/windows/uwp/threading-async/asynchronous-programming-in-cpp-universal-windows-platform-apps)
A new .NET Serializer All in one Menu-Ribbon Bar Taking over the world since 1371!
-
I did not expect this. Create a "Hello, world" app (JS) - UWP app developer | Microsoft Docs[^] This creates a UWP app (which runs natively on your desktop - not in your browser) that is created from HTML and JS. Have you seen this before? Why hasn't anyone spoken of this? Is M$ embarrassed. :laugh: This could be interesting.:~ TypeScript I was trying to see how to add TypeScript to a basic project. Interesting thing is that there doesn't seem to be a nuget* for TypeScript, but you can NPM it. Hello! M$, are you there? Why do you force us to use every technology on the planet for the same thing? EDIT : *Actually this is probably due to using an older version of STudio (2013). EDIT 2 : Seriously annoying!! 1. Searched VSTudio Nuget package manager for "typescript" nothing. 2. Searched Nuget.org site and found Microsoft.typescript.compiler. 3. Okay, back to nuget pkg manager in Studio: search "microsoft.typescript" and found it. Ugh! EDIT 3 I'm amazed! I tested HTML CANVAS in the app and it works also. Here's a snapshot where I drew a quick grid on the Canvas object via JavaScript: https://i.stack.imgur.com/Aa7Oi.png Maybe the UWP just implements the old BrowserControl or something? EDIT 4 - Visual Studio 2017 Here's something additionally interesting. It seems that this project type isn't available under VStudio 2017. I can't seem to get a UWP project that is created entirely from HTML / JS. Microsoft is so confusing...and confused. :confused: EDIT 5 - Visual Studio 2017 pt2 Actually there is a project that allows you to build a UWP / Windows Store app via HTML / JS. However, it is not listed under UWP apps. That would make sense. Instead it is listed under Other Languages...JavaScript...Windows Universal. My bad. I was looking under C#. The project selector is a bit confusing. Here's a snapshot : https://i.stack.imgur.com/3U2IT.png[^]
There's even an official exam for it: Exam 70-480: Programming in HTML5 with JavaScript and CSS3[^]. If you're really interested in writing cross-platform desktop apps with HTML, CSS and JavaScript you might want to check out Electron[^] too. Visual Studio Code, Skype and GitHub Desktop are built on Electron.
Best, Sander sanderrossel.com Continuous Integration, Delivery, and Deployment arrgh.js - Bringing LINQ to JavaScript Object-Oriented Programming in C# Succinctly
-
There's even an official exam for it: Exam 70-480: Programming in HTML5 with JavaScript and CSS3[^]. If you're really interested in writing cross-platform desktop apps with HTML, CSS and JavaScript you might want to check out Electron[^] too. Visual Studio Code, Skype and GitHub Desktop are built on Electron.
Best, Sander sanderrossel.com Continuous Integration, Delivery, and Deployment arrgh.js - Bringing LINQ to JavaScript Object-Oriented Programming in C# Succinctly
Interesting but I didn't notice that they even mention building desktop apps in that course. I just took my web app and converted it directly to UWP by bringing in the HTML,CSS , Bootstrap etc. and it ran perfectly as a desktop app even though it uses localstorage and other web-centric tech. It's quite amazing and quite smooth. But there is a bug in MS project template for UWP Desktop via JS. It doesn't set the document URL properly and then it doesn't want to allow your JS to run. It should be an extremely easy fix for them but they haven't done so yet in the preview 2017 version.
-
You don't sound much like a C++/Cx users... At any rate, what's so wrong with all the UWP async C++ code, seems straightforward enough to me.. [Asynchronous programming in C++ - UWP app developer | Microsoft Docs](https://docs.microsoft.com/en-us/windows/uwp/threading-async/asynchronous-programming-in-cpp-universal-windows-platform-apps)
A new .NET Serializer All in one Menu-Ribbon Bar Taking over the world since 1371!
Let me illustrate with the below code.
mSourceused to be local variable but it is disposed before it can be used in the 4th lambda. So I make this temporary variable as a class member to work around that problem.void ClampImageApp::MainPage::btnOpenImage_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
FileOpenPicker^ fileOpenPicker = ref new FileOpenPicker();
fileOpenPicker->SuggestedStartLocation = PickerLocationId::PicturesLibrary;
fileOpenPicker->FileTypeFilter->Append(L".jpg");
fileOpenPicker->ViewMode = PickerViewMode::Thumbnail;mSource = ref new SoftwareBitmapSource(); concurrency::create\_task(fileOpenPicker->PickSingleFileAsync()) .then(\[&\](StorageFile^ file)->IAsyncOperation<IRandomAccessStream^>^ { if (file) { return file->OpenAsync(FileAccessMode::Read); } else { throw task\_canceled(); } }).then(\[&\](IRandomAccessStream^ stream)->IAsyncOperation<BitmapDecoder^>^ { // Create the decoder from the stream return BitmapDecoder::CreateAsync(stream); }).then(\[&\](BitmapDecoder^ decoder)->IAsyncOperation<SoftwareBitmap^>^ { return decoder->GetSoftwareBitmapAsync(); }).then(\[&\](SoftwareBitmap^ sw\_bmp)->IAsyncAction^ { if (sw\_bmp->BitmapPixelFormat != BitmapPixelFormat::Bgra8 || sw\_bmp->BitmapAlphaMode == BitmapAlphaMode::Straight) { sw\_bmp = SoftwareBitmap::Convert(sw\_bmp, BitmapPixelFormat::Bgra8, BitmapAlphaMode::Premultiplied); } return mSource->SetBitmapAsync(sw\_bmp); }).then(\[&\]()->void { this->imgPhoto->Source = mSource; });}
This is the C# code to use composite value
Windows.Storage.ApplicationDataContainer localSettings = Windows.Storage.ApplicationData.Current.LocalSettings;
// Create a composite setting
Windows.Storage.ApplicationDataCompositeValue composite = new Windows.Storage.ApplicationDataCompositeValue();
composite["intVal"] = 1212;
composite["strVal"] = "string";localSettings.Values["RawCompositeSetting"] = composite;
// Read data from a composite setting
Windows.Storage.ApplicationDataCompositeValue composite2 =
(Windows.Storage.ApplicationDataCompositeValue)localSettings.Values["RawCompositeSetting"];And compared to C++/CX equivalent code
Windows::Storage::ApplicationDataContainer^ localSettings =
Windows::Storage::ApplicationData::Current->LocalSettings;// Create a
-
I did not expect this. Create a "Hello, world" app (JS) - UWP app developer | Microsoft Docs[^] This creates a UWP app (which runs natively on your desktop - not in your browser) that is created from HTML and JS. Have you seen this before? Why hasn't anyone spoken of this? Is M$ embarrassed. :laugh: This could be interesting.:~ TypeScript I was trying to see how to add TypeScript to a basic project. Interesting thing is that there doesn't seem to be a nuget* for TypeScript, but you can NPM it. Hello! M$, are you there? Why do you force us to use every technology on the planet for the same thing? EDIT : *Actually this is probably due to using an older version of STudio (2013). EDIT 2 : Seriously annoying!! 1. Searched VSTudio Nuget package manager for "typescript" nothing. 2. Searched Nuget.org site and found Microsoft.typescript.compiler. 3. Okay, back to nuget pkg manager in Studio: search "microsoft.typescript" and found it. Ugh! EDIT 3 I'm amazed! I tested HTML CANVAS in the app and it works also. Here's a snapshot where I drew a quick grid on the Canvas object via JavaScript: https://i.stack.imgur.com/Aa7Oi.png Maybe the UWP just implements the old BrowserControl or something? EDIT 4 - Visual Studio 2017 Here's something additionally interesting. It seems that this project type isn't available under VStudio 2017. I can't seem to get a UWP project that is created entirely from HTML / JS. Microsoft is so confusing...and confused. :confused: EDIT 5 - Visual Studio 2017 pt2 Actually there is a project that allows you to build a UWP / Windows Store app via HTML / JS. However, it is not listed under UWP apps. That would make sense. Instead it is listed under Other Languages...JavaScript...Windows Universal. My bad. I was looking under C#. The project selector is a bit confusing. Here's a snapshot : https://i.stack.imgur.com/3U2IT.png[^]
It's not the same thing, but MS also develops and supports React Native for Windows, which also lets you write UWP apps using JavaScript or TypeScript. As a bonus, it also includes a WPF back-end, which would potentially allow you to publish both UWP and WPF apps from a single codebase. I think the performance of RN would likely be better than the HTML/CSS/JS UWP app, since RN is using native views for rendering instead of HTML. Heck, without too much work you could also take your UWP/WPF app and run it on MacOS, Linux, Android, and iOS using the versions of React Native for those platforms. You'd probably need a bit of platform specific code here and there, but the majority of your code would be portable.
-
I did not expect this. Create a "Hello, world" app (JS) - UWP app developer | Microsoft Docs[^] This creates a UWP app (which runs natively on your desktop - not in your browser) that is created from HTML and JS. Have you seen this before? Why hasn't anyone spoken of this? Is M$ embarrassed. :laugh: This could be interesting.:~ TypeScript I was trying to see how to add TypeScript to a basic project. Interesting thing is that there doesn't seem to be a nuget* for TypeScript, but you can NPM it. Hello! M$, are you there? Why do you force us to use every technology on the planet for the same thing? EDIT : *Actually this is probably due to using an older version of STudio (2013). EDIT 2 : Seriously annoying!! 1. Searched VSTudio Nuget package manager for "typescript" nothing. 2. Searched Nuget.org site and found Microsoft.typescript.compiler. 3. Okay, back to nuget pkg manager in Studio: search "microsoft.typescript" and found it. Ugh! EDIT 3 I'm amazed! I tested HTML CANVAS in the app and it works also. Here's a snapshot where I drew a quick grid on the Canvas object via JavaScript: https://i.stack.imgur.com/Aa7Oi.png Maybe the UWP just implements the old BrowserControl or something? EDIT 4 - Visual Studio 2017 Here's something additionally interesting. It seems that this project type isn't available under VStudio 2017. I can't seem to get a UWP project that is created entirely from HTML / JS. Microsoft is so confusing...and confused. :confused: EDIT 5 - Visual Studio 2017 pt2 Actually there is a project that allows you to build a UWP / Windows Store app via HTML / JS. However, it is not listed under UWP apps. That would make sense. Instead it is listed under Other Languages...JavaScript...Windows Universal. My bad. I was looking under C#. The project selector is a bit confusing. Here's a snapshot : https://i.stack.imgur.com/3U2IT.png[^]
What's this article doing in the forum? :laugh:
Wout
-
It's not the same thing, but MS also develops and supports React Native for Windows, which also lets you write UWP apps using JavaScript or TypeScript. As a bonus, it also includes a WPF back-end, which would potentially allow you to publish both UWP and WPF apps from a single codebase. I think the performance of RN would likely be better than the HTML/CSS/JS UWP app, since RN is using native views for rendering instead of HTML. Heck, without too much work you could also take your UWP/WPF app and run it on MacOS, Linux, Android, and iOS using the versions of React Native for those platforms. You'd probably need a bit of platform specific code here and there, but the majority of your code would be portable.
-
What's this article doing in the forum? :laugh:
Wout
-
wout de zeeuw wrote:
What's this article doing in the forum?
:laugh: I know... This definitely needs more details to be an article, but this subject has really captured my attention so much that I am planning an article on it.
I hope you write the article ! cheers, Bill
«... thank the gods that they have made you superior to those events which they have not placed within your own control, rendered you accountable for that only which is within you own control For what, then, have they made you responsible? For that which is alone in your own power—a right use of things as they appear.» Discourses of Epictetus Book I:12
-
I did not expect this. Create a "Hello, world" app (JS) - UWP app developer | Microsoft Docs[^] This creates a UWP app (which runs natively on your desktop - not in your browser) that is created from HTML and JS. Have you seen this before? Why hasn't anyone spoken of this? Is M$ embarrassed. :laugh: This could be interesting.:~ TypeScript I was trying to see how to add TypeScript to a basic project. Interesting thing is that there doesn't seem to be a nuget* for TypeScript, but you can NPM it. Hello! M$, are you there? Why do you force us to use every technology on the planet for the same thing? EDIT : *Actually this is probably due to using an older version of STudio (2013). EDIT 2 : Seriously annoying!! 1. Searched VSTudio Nuget package manager for "typescript" nothing. 2. Searched Nuget.org site and found Microsoft.typescript.compiler. 3. Okay, back to nuget pkg manager in Studio: search "microsoft.typescript" and found it. Ugh! EDIT 3 I'm amazed! I tested HTML CANVAS in the app and it works also. Here's a snapshot where I drew a quick grid on the Canvas object via JavaScript: https://i.stack.imgur.com/Aa7Oi.png Maybe the UWP just implements the old BrowserControl or something? EDIT 4 - Visual Studio 2017 Here's something additionally interesting. It seems that this project type isn't available under VStudio 2017. I can't seem to get a UWP project that is created entirely from HTML / JS. Microsoft is so confusing...and confused. :confused: EDIT 5 - Visual Studio 2017 pt2 Actually there is a project that allows you to build a UWP / Windows Store app via HTML / JS. However, it is not listed under UWP apps. That would make sense. Instead it is listed under Other Languages...JavaScript...Windows Universal. My bad. I was looking under C#. The project selector is a bit confusing. Here's a snapshot : https://i.stack.imgur.com/3U2IT.png[^]
Funny seeing enable developer mode in an application intended for developers.
-
Funny seeing enable developer mode in an application intended for developers.
