Support for Office UI Fabric

[danielmeza]

This is for track the Support for Office UI Fabric

I know that the team of OUF accept framework supported from community like ngofficeuifabric @dzearing do you can give to us any guide or resources to get starter with?

@galvesribeiro
microsoft/fluentui#4357

BlazorExtensions/BlazorMaterial#2

[galvesribeiro]

Hey @danielmeza

I honestly don't believe they will assign resources for that as Blazor is not even a formal product yet.

With that said, you have 2 options:

1. Make everything from scratch on both C# code and CSS
2. If the Office team provide all the CSS, just create components that wrap those styles using Blazor

If you want to engage on it have time to commit to, I can create a repo under BlazorExtensions organization and add you there.

As part of the repo, I'll leave the base project structure that is used in all other extension projects and add the CI configured to build it.

Please let me know which path you want to follow.

[danielmeza]

Hi @galvesribeiro you are rigth,
I think the right way is create all controls on native C# and CSS,
I found this https://github.com/OfficeDev/office-ui-fabric-core but I don't know if it containts all the css for the controls.

I will make some experiments and will advise you when I find a good way.

[dzearing]

Fabric core only exposes the typography and some colors/animations/css grid helpers. So i don't think you'll get very far there.

Each component defines css rules in js for the most part. So per component, you'd need to evaluate how this translates. It's possible you could port these functions to C# and define a port of css in js library to Blazor. But that might be complicated.

If you were to pick a few components to port to C#, what would you prioritize? At least I can maybe offer some guidance wrt specifics.

Right now we're going through major design revisions in how we define and theme the components. So we already have a lot to juggle, just in the JavaScript world.

Also on Bl;azor: I don't personally understand Blazor well enough to have a strong opinion here, but I am nervous about deviations from JavaScript. It means that you isolate yourself from the rest of the world. This could be a good thing, because JavaScript sandboxing is essentially non-existent, but it certainly complicates a large number of areas.

For example, how can you share utilities across libraries if they aren't written in the same language? Surely most web pages use some javascript today, so either you need a way to proxy to those dependencies, or, you have to rewrite your entire page, which just isn't an option for most large web apps.

How do you share dependencies? If you use 2 libraries which both depend on different versions of a thing, is it possible to load 2 copies on the page, or are you stuck?

How do you dynamically load things (delayed/ondemand split points.) Maybe in the Blazor case, the answer is that everyone writes in C#... but then what do you end up downloading? Do you end up downloading giant DLLs? Is there an analogy of split points? Can you change the version of a library by simply changing a url?

So I think a question for you; what is the motivating factor here? What is the end goal? Will that result in a 1 meg download to boot up the webpage?

[xlievo]

@dzearing Please take a closer look at the significance of WebAssembly.

[danielmeza]

@galvesribeiro @dzearing Hi guys Sorry about delayed answer.

I will try to answer both, first @galvesribeiro :

I honestly don't believe they will assign resources for that as Blazor is not even a formal product yet.

I understand that they have it own issues and goals to reach but would be great if they can give to us some opinion and suggestions. They already did that so thanks you.

About the 2 options, after see how the framework is build, the only options is to rewrited in C# and offcourse we need the JSInterop for some DOM manipulation due to the lacks on wasm at this point.
So the answer is 2.

I have created a repository here and started to migrate the base of the stiling framework and some utils needed for build the controls, I have decide to start by merge-styles functionality witch is the core of the styling tools, at this point I have rewrite the entire library and have pass all units tests. Would be great if we can put this repo here and you geve me permmision for acept commit from anoter people and mantain the repo.

@dzearing Thanks for you interest, I apreciate you comment, I will try to answer all your point:

Fabric core only exposes the typography and some colors/animations/css grid helpers. So i don't think you'll get very far there.

I realize that after fork the code and study the framework, and that let me with the option 2, as metioned adobe.

Each component defines css rules in js for the most part. So per component, you'd need to evaluate how this translates.

Because of that I started to porting the merge-style and the styling functionalities first, you can guide me if I´m in the right direction whit this.

Right now we're going through major design revisions in how we define and theme the components. So we already have a lot to juggle, just in the JavaScript world.

That put me worried, can you explain more about this? it's a a entire styling change or just the way fo made styles?

About your doudts about Blazor I will say that Blazor is only a framework build on top of .net for wasm right now (Mono Wasm) so many of you inquirings are relate to the wasm world, then wasm is desinned to work side by side with javascript, there is a JSIntereop library to call javascript function and biceversa so:
We have:

• .dll cache.
• Javascript Interop,
• Linking to reduce the dll size,

Other things like DOM manipulations javascript APIS, garbage collector, better debug, assembly versions will come at time, but right now we got all the tools needed to start.

Motivation

Port to the wasm world the Office Ui Control in order to provide to the Blazor developers teirs functionalities, we are talking almost of all the people how love C# and the asp.net world.

End goald

Have the entiere suits of controls functional in Blazor.

Will that result in a 1 meg download to boot up the webpage?

The wasm compilation is very tiny and the linking process work pretty well. Others improvements will appear with the time, such lazy loading or assembly version.

Thanks both again for your comments and time, this is the link to the repo
https://github.com/danielmeza/Blazor.Extensions.OfficeUiFabric

[galvesribeiro]

Hello @danielmeza

I've created https://github.com/BlazorExtensions/Blazor.Extensions.OfficeUIFabric and added you as admin there. Unfortunately I'm out on vacation returning on 23th so I can't provide much help now (on mobile with limited internet). Please feel free to start pushing your code there.

Please try to follow the project struct as in the other projects under this org so it would make also easy to others to make PRs in a standard code way. Also don't forget to create a clear README.md content and state in the end of it that you are the maintainer of the project :)

Just for the sake of information and more on motivation, MSFT announced that Blazor will have somehow its server-side mode merged on ASP.Net Core 3.0 (at least for now, the client-side mode still on experiment mode).

I'll get back to this issue once I get back from the vacation. Sorry about the delay and I hope the repo will at least let you start arranging things. We can polish it, enable CI/CD and nugget publish as soon as I get back just like in all other projects.

Thanks!

[galvesribeiro]

Folks the repo was created a while ago. Did we had any progress since them?

If the repo isn't active, we should drop it. I'm slowly getting back to track on the OSS stuff and I would like to keep everything organized...

[galvesribeiro]

@danielmeza ?

[vertonghenb]

They're doing a major design revision on Fabric UI (Fluent UI). I don't think it would be wise to port to Blazor just before the overhaul.
https://fluentfabric.azurewebsites.net/#/overview

[limefrogyank]

How about rendering React components directly into Blazor apps? I've been playing around with it and it kind of works. I have no idea what the performance implications are, but here's my repo for this test. I have the default React app showing up in an Index.razor page along with a PrimaryButton blazor component that renders the Fabric PrimaryButton react component directly into a div.

https://github.com/limefrogyank/BlazorFabricReact

[limefrogyank]

Demo:
https://blazorfabricreactdemo.azurewebsites.net/

[galvesribeiro]

Yeah it works. It is just JS in the end of the day.

Hoe er it is far from ideal.

I want to add the components myself.

Will start it early next month when i come back from vacation.

[vertonghenb]

@galvesribeiro give me a heads-up if you need help with this one, pretty interessted in getting this going.

[galvesribeiro]

Sure. I'll setup the repo and an issue that will cover all components as soon as I get back.

Thanks

[vertonghenb]

@galvesribeiro I assume we'll be using the CSS in C#? or will we separate it?

[galvesribeiro]

Yeah. I’ll build the project structure and then with an issue we can grab components and everyone contribute to make the whole faster/in parallel.

Just like we’re doing with Material components