Im really excited at what WebAssembly can bring to us web UI developers.
Now correct me if im wrong, but a web assembly / blazor project can easily and happily coexist with javascript. The script might handle all the http web requests and various clientside manipulations.
Your thoughts?
Yes, you could do that, as of version 0.4 it is easy to interop between c# and javascript and vise versa.
But you don't have to, the beauty of blazor is that you can just use the HttpClient class from .net framework System.Net.Http namespace for calls to your backend.
And make razor cshtml components for DOM manipulation.
More on http calls from blazor
More on js interop
Related
We have a large ecosystem of Javascript websites, actually Angular, that we don't plan to rewrite in c# any time soon. So the goal here is to be able to use a vendor dll in our javascript to add new features. This is a proprietary system, we don't have any alternative, either we use their dll, either we don't have the feature. I'm putting a lot of hope in webassembly here because this looked like the silver bullet to use that dll without having to rewrite the whole project in a new language.
Problem: all the examples I can find are more about using Blazor to write a website or call javascript from Blazor, I can't find anything to include some ad-hoc C# code into an existing project. I would have thought it would be a great use case though because being able to leverage C# threadpool on a webpage sounds pretty good to me!
Anyone has done something similar or know some examples/tutorials I could follow?
As Tuan says Angular and C# don't really live together in the way you suggest.
I would say there are 2 separate approaches here.
Have an C#.NET MVC app but adjust the routing so the Angular App Handles some pages and the .NET app handles others. This is OK but there are so many pitfalls such as the fact that you can not share bundled CSS and JS or maintain the structure of your Angular controllers (amongst others).
A better way would be keep your lovely Angular app the way it is but have a separate Web API application/project and use the angular app to call the dll (reference in the project) within the correct context as a REST API (via a simple POST or GET call).
It's not too clear exactly what you want to do when you say "... able to use a vendor dll in our javascript to add new features ..." but you can find info on writing and implementing C# as a Web API in .NET core here
https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-3.1&tabs=visual-studio
I went through below article
https://medium.freecodecamp.org/get-started-with-webassembly-using-only-14-lines-of-javascript-b37b6aaca1e4
and very impressed that we can use c++ code in javascript using web assembly.
Do we have any option to create such web assembly using c# where we can create web assembly and use in javascript like angular or react.
went through
https://learn.microsoft.com/en-us/aspnet/core/client-side/spa/blazor/get-started?view=aspnetcore-3.0&tabs=visual-studio
But that does not look like creating an assembly that can be used in a separate angular only project with by importing
Thanks
From msdn:
JavaScript interop
For apps that require third-party JavaScript libraries and browser APIs, Blazor interoperates with JavaScript. Components are capable of using any library or API that JavaScript is able to use. C# code can call into JavaScript code, and JavaScript code can call into C# code. For more information, see JavaScript interop.
[https://learn.microsoft.com/en-us/aspnet/core/client-side/spa/blazor/?view=aspnetcore-3.0][1]
Ithink looking to Blazor source code can help you to.
I think what you're looking for isn't Blazor, because it's a complete UI framework for ASP.NET client/server stuff using SignalR, that uses WASM at the client side. Maybe too much for your purposes, even if you're able to use any JavaScript framework together with Blazor, too.
But you're looking for a simple way to create just a WASM that exports methods to JavaScript that you can write using C#, right? Well, then I suggest you to have a look here:
https://itnext.io/run-c-natively-in-the-browser-through-the-web-assembly-via-mono-wasm-60f3d55dd05a
It seems the Mono way is working as you'd expect: You write methods in C#, compile a WASM and then you're ready to load and call them from any JavaScript client app, and you don't have to deal with ASP.NET stuff at all.
Compared to a WASM that has been created using lower level C++, you'll have a big bunch of DLLs for the Mono runtime, that need to be loaded to the client browser (!). That's a huge overhead, if you plan only a small feature set to be exported by the WASM. The best argument for creating WASM using Mono for me is, that I can use my existing codebase with all the algorithms and business logic for a really complex app, so I don't have to write and maintenance the same code twice in different languages.
I'm building and application that has the backend in j2ee (ejb, hibernate, mysql). The web application front end was initially designed to be in jsf (primefaces) with backing beans.
Also, it has been decided to use cordove / html5 pages in he future for the mobile app.
I'm very new to this and have a couple of questions in reusing the code for both web and mobile app and integration of these different technologies. Instead of developing separately for the mobile
If I use pure html5 / javascript can the same page be used in the web application as well as the codova mobile app.
If so, What about the normal backing bean logic. Where do I put that now? Can the backing bean be accessed by the cordova html5 page? Also jsf binding, How do I receive data in the web page
Is javascript the only way to access the rest webservices? Will I be accessing these from the web app as well as the mobile
All in all, does developing with cordova html5 / js / css means staying away from jsf 100%. And this means no access to jsf components or frameworks like primefaces. Is there anything else to replace these technologies to be compatible for both
If I use pure html5 / javascript can the same page be used in the web
application as well as the codova mobile app.
Yes, that's kind of the whole point, you can even use jquery etc inside a cordova app.
If so, What about the normal backing bean logic. Where do I put that
now? Can the backing bean be accessed by the cordova html5 page? Also
jsf binding, How do I receive data in the web page
Any backing logic can be served by anything, Node.js, PHP, etc etc..
Is javascript the only way to access the rest webservices? Will I be
accessing these from the web app as well as the mobile
There should be no change in logic here, both can use ajax to access your webservices.
All in all, does developing with cordova html5 / js / css means
staying away from jsf 100%. And this means no access to jsf components
or frameworks like primefaces. Is there anything else to replace these
technologies to be compatible for both
Anything backend, can stay as is. So if you have any REST API's, they will still work.. Anything client side is going to be new,.. Primefaces you mentions -> PrimeUI is a pure CSS-JS library designed to work with any server side and client side technology, so you should be able to use that, they also have an Anglular2 bindings that should also work.
Ok, I'm updating this to explain what backend is,. If your backend has any logic, eg. Say you had some logic that posted invoices, if this was all self contained, and didn't depend on anything visual / interaction, this could easily be exposed and re-used. You would just need to expose this, by providing some sort of IPC, wherever that's a simple REST api, or even websocket based API, doing this means the only part you need to rewrite is the front-end (Visual stuff) & some sort of IPC for your backend services..
Now I'm working with asp.net mvc, it's good framework. But, in future, I want to work with php or ruby to develop views for my asp.net MVC site.
I am not sure what this concept is called but I know something exists.
I think, I must generate pages with clear html, javascript and use json for transfer data. What patterns I can use and how implement navigation?
Any other thing exists to do this?
Well in case if you wish to create your VIEWS for asp.net MVC site using PHP code you can opt for PHP View Engine.
It allows you to write ASP.NET MVC views in the PHP language.
http://phpviewengine.codeplex.com/ is link you can follow.
This way all your ASP.NET code for Controller And Model will be intact and you can create your views in PHP.
I hope this is what you would be looking for.
Another view engine for php is sharpy I hope this also could be one for you. On top of that I am not sure anything is there for ruby.
I want maximum unbounded from C# for quick implement on server-side
php or ruby.
Based on this comment, your only option to have server-side code return data in a standard format (like JSON) and rely heavily on client side templating to turn data into HTML.
LinkedIn had a similar problem. They had three different server side technologies and had a hard time re-using components. There is a good write-up about their experience here and a pretty through comparison of different templating technologies here.
Consider using Mustache (http://mustache.github.com/) as your view engine. It will allow both PHP, .NET and JS to consume the views and render with server-generated content. Nustache has a library for ASP.NET MVC as well to make the transition easy.
I'm trying to find an HTML templating solution that will work both on my ASP.NET MVC application (.NET 4, IIS 7.5) and in the browser. The reason is to the the same code to render HTML both on the server (performance, outputting to mobile, etc) or on the browser (refreshing data via AJAX). This is not a new problem, but I am wondering if current technology trends have changed the answer.
A couple of ideas I am considering:
Use mustache templates with are available in both
JavaScript and .NET.
Use a port of the Razor View Engine to
JavaScript like considered in Javascript + Razor == Jazor?.
Take a position like Micro Templates Are Dead... forget about it and
just use JavaScript (IronJS?) and the DOM (jsdom)
ASP.NET MVC View Engine Comparison looked relavent, but there is no mention of mustache.
Update: The client-side templating throwdown: mustache, handlebars, dust.js, and more from LinkedIn Engineering rates mustache in it's top four, with it being the only one with native .NET rendering (vs requiring server-side JavaScript to render on the server).
I would highly recommend mustache for your application. You have already mentioned abt the fact that it has a server side rendering engine and also a strong community backing. Apart from this the major reason why I would recommend mustache is for Performance of the templating engine. I have played around with the same and none of the other JS templating solution could match the performance of mustache.
What I would like more is documentation around the library but you should be able to work around this.
I have done that using Spark view engine, it is quite good with the template where you can use it from .net and js.