I will mark this post on the history/melancholic reason I did the projects I will show you, if you want to skip it go ahead
Melancholic stuff starts
Sometimes We love technology, sometimes we just want that technology to take us places where we never imagined! one of those technologies I used to love was the concept Behind Windows
Metro Modern Universal Apps now commonly known as UWP and the promise was
One Common Language Runtime All platforms
yes, targeting web, phones, desktop, tablets, xbox, anything that ran windows cool right!? this will take us t the future where all cars fly and no one is offended by anything....(not even this last sentence)
Well it was easier said than done at the time I remember Windows 8.1 update was almost arriving, On April 8, 2014, Microsoft released the Windows 8.1 Update
It grew good to the point it got to version 4.4.x and you could do basically anything that the UWP Apps let you do at that time, tailored for web experiences, as well because you could use it outside windows apps! it was a cool experience for me, I was still looking at the dream.
WinJS entered in maintenance mode, to the point that today is stale, call it dead, because it feels wrong to call it other way
Melancholic Stuff Ends
I think that's an important reason of why people don't pick up this project for UWP apps, you go there and you are offered nothing but "Good luck boy, there's nothing much to do here", so Since Edge supports ES2015, I thought on myself why don't I mix and Match some ES2015 with older not so mainstream tech from today?
thus these following projects were born
Angel Munoz@daniel_tunaWell I guess I could not let behind @vuejs
yes! at the end I even included some Vue and Aurelia (no React Angular 6 guys sorry) samples including some more conservative even may be called legacy options with anguarjs (1.7.x) and winjs and let me tell you a thing!
the truth is that you have Full access to the WinRT API! that means you are able to do most if not all of the things you can do in C# or Visual Basic or C++ that have access to the WinRT API, no need of WinJS, no need of frameworks... nothing it's there!, and you are targeting a browser environment so if Edge can render it, so can a UWP App
I know it cross compiles to other OS'ses but not everyone needs that, not everyone wants to change to C# and do a windows app, sometimes you already have some web app there and want wish to have a way to better distribute your content, etcetera
So I learned quite a lot doing these projects, I finally feel that I contributed on my part at least to keep a faded dream alive, and I am confident that I will target UWP apps without fear anymore, I've got Vue, Aurelia and even AngularJS (with a transpiler/bundler if necessary) on my back
the ES2015 modules syntax is available BUT you need to do a fully qualified import
import util from ./util' Won't work and fail silently, you need to do something like
import util from '/src/utils/util.js', Yes with extension! that's really important! another one, if any of the imports inside
util fails, it will make the
util script to silently fail to be imported as well!
Use them! you have the OOP'nes of classes at your disposal if you don't feel comfortable enough with prototypes (even though classes are just sugar on them), classes and modules fit all well!, if you want to go full functional using functions as well feel free to do so! as long as it works on edge it will work there!
Security is something that matters and the Electron team realized that very well to the point of including warnings on the console on dev mode, so you will have to work with CSP enabled, no eval, no inline stuff, no new Function, so if your dependency works with this, make sure they have a CSP compliant version else you won't be able to use it, Vue by itself can't be used in a UWP because it uses these things to compile the templates, but once it's compiled it makes no use of such functions! that's why you can use it safely with a bundler! same case with Aurelia
Be ready to load your fonts locally, because since the CSS scripts generally try to pick them from the web, the CSP policies will block these resources
if you are going to use a bundler like webpack, that like to hash the compiled versions, and code split and stuff like that, it will interfere with the visual studio build, the visual studio build likes to statically know what does it has to load and hat is available to it, so your dist names should be consistent to the point that the name doesn't change so you can keep testing, also remember o run their build/watcher scripts on the background so you can keep refreshing your app
these may break your app's navigation if you are not careful, for example in the Aurelia router they use something like this in the html
route-href="route:home" that ends up just adding an href attribute, but this breaks on the UWP app and ends up reloading your app, if the router of your application (wether it's Aurelia or not) does something like this, try to call that router programmatically.
so... quite lengthy! I please hope that you liked this reading (with my typos and grammar stuff along the way and my parenthesis too!) the links to the projects are below, please if you can provide feedback I'd love to hear it, if you can share these also I'd be glad, thanks and have a good weekend!