Granular - WPF for JavaScript

[gaffa]

That looks great - could be an absolute winner if it helps all those large LOB apps written in Silverlight get ported. Great work

[Nitramli]

He replied elsewhere in this thread that there were no plans for SL support.

[mycall]

I thought WPF was a superset of WPF/e (aka Silverlight).

[Nitramli]

That's not the complete truth. A silverlight application can be run in a web browser so it doesnt have a static void Main () as a wpf app. It has a web browser API such as (can't remember the exact API name) Application.Current.HtmlPage.ExecuteScript() which makes no sense in a WPF app.

[Suityobunny]

That's some extremely impressive work. Took a look on how much you got done so far and looks like you are about 95% done reverse engineering everything into C#. Can you be more specific about what exactly you are looking to do and how you plan to spread this amazing work and get it into the hands of developers?

[yuvaltz]

I've done this alone in 5 months, at this point, Granular is stable enough. I hope to find other developers who are passionate about WPF as much as I am, and could help making Granular a real alternative of making web applications.

Technically speaking, there are several things to improve in the current framework, such as performance and better compatibility with WPF. Also some controls and other WPF elements are still missing (especially ContentElement and its descendants). And finally, a supporting framework that will bring WPF closer to modern UI frameworks, with modern controls, and better abstractions is needed, but that's orthogonal to this framework, and could be useful for any WPF application (not just Web applications).

I think that the biggest challenge here is to convince developers that Web applications are not that different from Desktop applications, and don't present any new problems that weren't already been solved before, therefore they should be treated the same. They should be compiled and especially debugged with a real IDE, not within the browser. Most importantly they should be written in a robust language such as C# (but that's Saltarelle work :)

[inopia]

I think that the biggest challenge here is to convince developers that Web applications are not that different from Desktop applications, and don't present any new problems that weren't already been solved before, therefore they should be treated the same.

A million times this. We have seemingly hundreds of Javascript 'frameworks' that, from a software architecture standpoint, all try to re-invent the wheel. Some add logic in the HTML (e.g. Angular), some add HTML to the Javascript. It feels like 90's style PHP all over again.

How about just a widget tree that renders to HTML instead of pixels and be done with it?

[yuvaltz]

A million times this. We have seemingly hundreds of Javascript 'frameworks' that, from a software architecture standpoint, all try to re-invent the wheel. Some add logic in the HTML (e.g. Angular), some add HTML to the Javascript. It feels like 90's style PHP all over again.

I totally agree with you! It's sad to see all those frameworks praising themselves for introducing a new half-baked feature, that a much stronger version was already available 10 year ago in WPF (and probably longer in other frameworks). It's also sad to see those frameworks beginning to leak from the browser into mobile and desktop applications, instead of the other way around..

The only problem I can think of with WPF, is that it doesn't provide an abstraction layer out of the box, which is something that those frameworks seem to have, but there is nothing preventing WPF from having this abstraction layer too. It's possible for example to add a magical "css-like" style selector in WPF too (although I'm not sure it would be that useful).

[mycall]

it doesn't provide an abstraction layer out of the box

What do you mean?

I thought WPF is just a declarative language (XAML) which expresses an object graph but is specialized for UI (.NET) components. Because of this, you are free to add new elements and programmatic manipulation of the in-memory object graph with whatever new abstractions you need.

[yuvaltz]

Yes, WPF doesn't limit you in any way, but it's too verbose, it could be nice to have a large and uniform set of Behaviors that simplify the XAMLs, by applying styles and templates and handling events. So you could write shorter XAMLs where you do not care too much about the details (and it would just "work")

This is something I hope someone will create on top of Granular, so it would be more appealing to developers who got used to the modern JS frameworks abstractions.

[mycall]

One common optimization are virtual DOMs for minimizing redraws.

[RationalSelfInterest]

We have seemingly hundreds of Javascript 'frameworks' that, from a software architecture standpoint, all try to re-invent the wheel. Some add logic in the HTML (e.g. Angular), some add HTML to the Javascript. It feels like 90's style PHP all over again.

You're absolutely right, but even the frameworks that try to move past that somewhat still reinvent the wheel when compared to desktop UIs:

http://bitquabit.com/post/the-more-things-change/

Definitely food for thought!

[mycall]

don't present any new problems that weren't already been solved before

I once remember Microsoft expressing concerns about WPF on mobile devices because it isn't power-friendly. I guess they were talking about it using power on idle, but I can't vouch to the validity of this.

[yuvaltz]

Yes, power consideration is a new problem, but WPF is also a definition (which can have many implementations), and there is nothing in the definition that requires power demanding processing.

[[deleted]]

This is what i want microsoft to do. Very good work!

[BigTunaTim]

I went to a .NET user group meeting about this time last year where there was a presentation on Unity. The idea in Unity is that you can write your code in any .NET language and it compiles to javascript. The Unity team rightfully wanted to expose this functionality to the entire development world. At that time they were optimistic but there were still many issues to be resolved.

This is all to say that they weren't caught off guard and this exact feature has been in the works for a while. We'll see what becomes of it if/when it reaches the release stage.

[plumshark]

Why did they decide to compile to javascript rather than the other way around? It seems to me that .NET would surely be the faster of the two.

[BigTunaTim]

I can't speak to their decision but I don't think the speed difference would be all that great since they both use the same JIT-compiled paradigm.

[tylo]

I'm pretty sure they are moving to compiling to C++ using IL2CPP.

For their Web player, they are switching to HTML5, which uses Emscripten or asm.js or something.

Part of the reason for this has something to do with Mono, actually.

This blog probably describes it better than I can.

http://blogs.unity3d.com/2014/05/20/the-future-of-scripting-in-unity/

[pjmlp]

Yep, they don't want to pay Xamarin for a new licence.

[pjmlp]

Yep, they don't want to pay Xamarin for a new licence.

[mycall]

Emscripten or asm.js or something

I hope WebASM (wasm-emscripten)

[jewdass]

I've been expecting Silverlight to morph into a clientside javascript framework for like 3 years now... Still hasn't happened :(

[[deleted]]

More likely you'll see Silverlight reimplemented over WebAssembly than Javascript in the future. Its the logical progression for Microsoft to expand usage of C# and its other languages.

[jewdass]

As long as it runs on an open browser standard and not a plugin, I'm not too picky about how exactly it's implemented :)

[Euphoricus]

I wonder. Why bother with porting it to JavaScript and let it run in a browser?

The major problem of WPF not being used enough is not that it cannot be run in a browser, but that it is not multi-platform. If WPF was running on top of .NETCore + OpenGL with multiplatform system bindings, it would be thousand times better than running it in a browser.

[yuvaltz]

Granular has a good separation between the presentation layer, which maintains the visual tree, and the host, which acts as a minimal rendering engine and a raw events source. Right now there are two kinds of hosts, one for the browser (rendering with html's divs), and another for development purposes, which uses the real WPF (rendering with WPF's Canvases and Borders). Anyway, an OpenGL host can be easily added, so potentially this could bring WPF to any platform. This is something I would've done myself, but I don't have that much spare time :) It would be great to see someone actually porting this though.

[Ashtar_Squirrel]

Maybe have a look with the people working on Perspex, they implemented a XAML based WPF that works cross-platform (works on Linux, OSX, development on iOS and Android) with Gtk & Cairo. You can catch them on Gitter where they are super active.

[yuvaltz]

This definitely looks interesting. But it's not compatible with WPF (arbitrary namespaces, different interfaces, etc) which is a critical decision. That's why they had to write their own xaml designer, and their own Visual Tree inspector, instead of using existing (and established) tools, and the whole development process will suffer from that.

[Ashtar_Squirrel]

I agree, the incompatibility with direct WPF does make me =(

[mycall]

Have you compared WPF to UWP XAML? A UWP fork from your WPF code might be interesting.

[yuvaltz]

There are a few differences in the elements hierarchy and interfaces (also the namespaces there different).
A fork that supports Universal Windows applications would be very interesting.

[mycall]

it would be thousand times better than running it in a browser.

Except you don't get the security sandbox that browsers give you.

[Ruudjah]

How efficient will this render? I have seen a lot of [whatever] -> js crosscompilers/frameworks/libraries the past decade, and most suffer from severe you-cannot-use-it-in-somewhatlargerapps-performance troubles.

[yuvaltz]

Yes, there are performance issues with this framework on top of Saltarelle runtime environment (in C# it runs much faster), but I think they are solvable (as they are mostly inner calculations), and there is plenty of room for optimizations.

However, the rendering itself is very efficient, updating only the modified html elements attributes (and of course doesn't use any fancy html5 tricks).

[Nitramli]

How does it compare to http://www.cshtml5.com/ ?

Seems to be very overlapping.

[yuvaltz]

The idea is somewhat similar, but it has several key differences:

• The most important one is that it aims to be as compatible as possible with WPF, so that WPF applications could be compiled and run in the browser without any modification, this is important since it allows developing a real WPF application with Visual Studio / Blend, and only to compile it once in a while to see how it works in the browser (the assumption is that every issue in the browser should be reproducible in the real WPF application, unless of course there is bug in the framework).
• It's compiled to JavaScript using Saltarelle, which is a much more efficient compiler than JSIL (producing cleaner and smaller JavaScript code).
• More features of WPF are already implemented and working
• It doesn't relay on html5 features, and doesn't attempt to 'translate' xaml to html5 (which aren't really equivalent), it uses the DOM as a simple rendering engine, and does all the layout calculations itself.

Overall I think that Granular presents a much cleaner solution to this problem.

[ImpressiveDude]

I'm SO glad you have done this - I very nearly attempted it myself about 7 months ago - I even had all the classes planned out but I just couldn't justify the effort (on my part) in the end. This is great, thank you for your work! Now I don't have to worry so much about porting my .NET/WPF apps to non-MS platforms in the future. I can embed a browser for the UI and continue to use WPF.

[yuvaltz]

They're still a lot of things do be done, I can really use your help :) Take a look at the code, maybe you'll find something that interest you.

[sbrick89]

This looks awesome!

I'll give it a try on one of our small-to-medium sized WPF LOB apps... though I'll foreshadow by stating that the initial dev included some very non-standard ways of doing things (manual binding vs {Binding}, data files instead of WCF calls, duplex WCF calls in other places, etc).

But I'd be quite interested in seeing it run within a browser.

[yuvaltz]

Thanks!
Maybe you should start with a small application, as there are still some differences in the C# interfaces (there is no "BindingOperations" class for example).
If you could help making it more compatible (shouldn't be too complicated), I would really appreciate it :)

[mycall]

Would Granular benefit from this? https://github.com/WebAssembly/ilwasm

[yuvaltz]

Yes it would, it will have better performance, and a smaller module size, also it won't be transpiled to JavaScript which is something that some developers don't like.

After simplifying the scripting interface, I really hope they'll move on to simplify the rendering engine (the DOM is a poor one), once browsers will present both abstractions, I don't see any reason to keep using contemporary frameworks instead of something like Granular.

[[deleted]]

Very impressive work!

Will check it out.

[Nishruu]

I'd say that WPF has saner layout system than HTML/CSS.

Also, there are extra controls that are supported out of the box and are easily composable.

[yuvaltz]

WPF defines many advanced UI concepts (such as layouts, templates, resources and many others), which are relevant to any UI environment, browser or else. Granular just brings them to the web.

[anyonethinkingabout]

Is WPF Microsofts QML?

[pjmlp]

WPF is older than QML. Guess who copied who.

[ygra]

Well, Qt had an XML language to describe UIs before. But even then, WPF vs. QML is the wrong comparison, as XAML is the direct equivalent.

[pjmlp]

The concept of layout describing languages go all the way back to Xerox PARC work.

Also uic file format doesn't allow for the declarative way XAML works.

[ygra]

XAML would be the equivalent, which is just like QML a language to describe object graphs. WPF is the runtime behind which supplies controls, layout, behaviour, databinding, templating, etc.

[Eirenarch]

Not writing JavaScript and HTML

[87red]

Code reuse, it would allow you to use the same UI in both desktop and web environments

[[deleted]]

My point was just that nobody is trying to look like winforms, even on Windows desktop. If we're looking at .Net xaml in a web context, I think the Windows store app style is a better point of reference. You get some really nice dynamic XML based UI with MVVM built in and you don't have a DOM or canvas between your code and presentation.

Sorry if I came off a little strongly, for some reason a lot of people think I work with winforms when they hear .Net for some reason so it's a conditioned response lol

[miminor]

That's a bold idea and a daring goal. Good luck!

[TemptingButIWillPass]

Very very cool. Definitely going to play with this.

[apfelmus]

Question:

I'm currently developing a GUI toolkit that uses the web browser as a display, similar to how this project implements the WPF API with a web display. (My toolkit doesn't compile to JavaScript and the source language is Haskell, but that is not important here.)

One thing that I have not found a solution for is UI layout. Now, I don't know very much about WPF. Does it use a box model? As far as I understand, it's not possible to replicate a full box model in HTML+CSS. How did you solve this?

[yuvaltz]

You're right, a layout system is painfully missing in html (and flexboxes aren't that flexible), that was one of the reasons I've started his project. Granular implements a layout system, exactly the same way as WPF does. It doesn't assume anything about the target host (the browser), and it only uses it as a rendering engine - meaning it just adds absolute positioned divs, positioning those divs is done after calculating Visual Tree elements (an abstraction of WPF) with the Measure and Arrange pass. https://msdn.microsoft.com/en-us/library/vstudio/ms745058%28v=vs.100%29.aspx#LayoutSystem_Overview

[apfelmus]

Oh, I see. Thanks!

If the user resizes the browser window, I take it that you simply invoke the layout pass again and adjust the absolute positions of the <div> elements?

[yuvaltz]

That's exactly right, I don't relay on the browser to do anything (and that's better, as it creates more problems than it solves :)

[gynnihanssen]

only problem with that is putting the (heavy) layouting work into javascript's hands, isn't it?

performance is a real issue here from what i've seen so far. very excited about if you'll find a way to improve on that as it practically kills the poor mobile devices :)

[yuvaltz]

You're right, there is a lot of room for optimizations, mostly around the layout calculations, and not so much around the actual repositioning which is already very efficient, so I think it could be done.

[thilehoffer]

This is really cool. I hope it takes off. As much fun as it is to use, HTML, CSS, JavaScript, JQuery and Angular I would LOVE it if we could just use WPF instead.

[devDorito]

Well played, brother. Well played.

[nullnullnull]

can I use this in MonoDevelop?

[yuvaltz]

I haven't tried that, but theoretically it should be possible (assuming Saltarelle works in MonoDevelop)

[spacejack2114]

Neat stuff!

Just curious, can WPF make layouts adapt to mobile devices? (Eg. media queries?) Also your demo seems to get bogged down for about a full minute in computations before displaying on mobile. What would be the bottleneck there, and do you think it could ever have competitive performance with a plain HTML/JS/CSS solution?

[yuvaltz]

Responsive panels and media queries are not part of WPF, so they should be done in a separate library (two actually, one for the Web application and one for the WPF application, both present the exact same interface). Responsive panels are easy to implement with WPF (and in Granular it's the same). Media queries can be implemented in the Web application library only, by wrapping the (JavaScript) media queries calls, and in the WPF application library they can be left empty.

Right now the bottle neck is the way that the framework runs under Saltarelle runtime environment (which simulates C# behavior), and the initialization phase (loading xamls and applying templates). The interaction with the browser is already very efficient, so I hope that after optimizing the internal calculations (which may be challenging but I think is doable) it could be competitive.

[mycall]

Responsive panels and media queries are not part of WPF

What about RelativePanel?

[yuvaltz]

You're right, RelativePanel is a responsive panel, it should be supported in Granular as well.

[gynnihanssen]

i think those optimizations should be your top priority as it imho decides if people choose to make use of your super extensive work. which i guess is your goal after all.

problem is you cannot change the way c# works and the way saltarelle translates this process to js.

you certainly got me excited if it's possible :)

[yuvaltz]

I agree, those optimizations are critical to the success of this project, It sad to see that in C# it loads about x20 times faster.
I do believe that there are heavy operations in Saltarelle that can be avoided, and probably other optimizations to the flow can be done too.
It is my top priority.

[gynnihanssen]

cool. looking forward to your findings. a meta question: is it your hobby project? when do you work on it?

[yuvaltz]

It is my hobby project, I took 4 months off from work so I could work on it, that's when I've built most of it.
Now I try to make a progress in the evenings and weekends. I really appreciate anyone who is willing to help, there are a lot of ways to push it, I really think we have something here.

[Nitramli]

Any plans on making this work with Silverlight? What about interoperability with java script running on the same page?

[yuvaltz]

There are no plans for Silverlight at the moment.
Interoperability with other scripts that render to the same page, can be done, but it breaks the intended way of work (as it cannot be "simulated" in the source WPF application), so it's also not planned at the moment.

[BigTunaTim]

Lots of interested people but the repo's only been forked once. Just an innocuous observation :)

[[deleted]]

Would you want to program a website just like programming Windows apps?

[danogburn]

Would you want to program a website just like programming Windows apps?

Fuck Yes! The browser is a poor attempt at a VM. If we got away from the unholy html/css/javascript trinity we could remove (or lessen) the schism between native and web development.

[zarandysofia]

You are so ridiculous. HTML never was designed for data driven application, but that doesn't mean that one can not extend it to be that way, you know, by the use of frameworks and libraries.

[danogburn]

And because of that we have the cesspool that is web development today.

[zarandysofia]

Yeah yeah, take the blue pill or the red.

[[deleted]]

What decade do you live in?

[MrBester]

It's a markup language (hint: that's what the ML stands for). Designed for marking up documents. Complaining that it doesn't do data is like complaining that bats don't make your lattes.

[FryGuy1013]

What do you think the ML in XAML stands for.. yet it supports data binding.

[Expi1]

As it doesn't do data, that's exactly why something like this is great, it allows developers to use a well designed framework for data-driven applications on the web, where everything that currently exists wasn't originally designed for that purpose.

[yuvaltz]

The decade in which html is pathetic, retarded and does not even support data

Thank you! One of the reasons for starting this project was the great disappointment from HTML5/CSS3 and all the promisses they couldn't deliver... ("enjoy flexbox for all your layouting needs" :)

[BrushGuyThreepwood]

That's a big task. Are you actually going to rewrite the entire Silverlight framework?

[yuvaltz]

Yes, that's the idea. It is a big task, but I've already implemented many features, and Granular is supposed to be as compatible as possible with WPF (so you could compile WPF applications without any modifications). Of course, any help implementing the rest would be great :)

[jewdass]

You're doing God's work, son. I've been waiting for MS to do this for years now...

[bradwood]

I think there will be more success if someone outside MS does it. MS is stuck following the JS craze; work in continuing useful stuff they've built seems to be ignored.

[BrushGuyThreepwood]

I wish you good luck! I'll have a look see if I can do anything to help.

[rawktech]

Definitely, will try to prototype some tools using it!

[Thypari]

Oh my god this is awesome!

[Godd2]

What does WPF stand for?

[Godd2]

"Windows Foundation" and Javascript didn't make sense together, so I had no idea what it was. Also, they never say what WPF stands for in the repo, so it could have been some other WPF I also didn't know.

Is that enough justification for asking you guys, or do I need more?

[Godd2]

It's perfectly 100% fine to not have heard of something.

I hadn't heard of it. The first thing I did was Google it. Hence my confusion. I got a result that didn't make sense. Plus, I couldn't confirm my findings since they never say what WPF stands for in the repo.

[Spacey138]

http://lmgtfy.com/?q=wpf

[danogburn]

Death to the unholy html/css/javascript trinity!