SmartClient UI

​Possible UI Frameworks

---

React ( Facebook )

​React is a popular frontend open-source JavaScript library that aids in the development of extremely responsive web projects. Its primary goal is to design interactive User Interfaces (UI) that increase the speed of your software.

Advantage

• Time savings while repurposing components
• An open-source library that includes a wide range of tools
• One way data movement provides stable code.
• Virtual DOM improves both the user’s experience and the developer’s labor.
• Its reusable components make app development and maintenance easier.
• It upgrades and releases fresh versions of the framework on a regular basis. You’ll obtain bug patches and improvisations in a timely manner.

Disadvantage

• The learning curve is rather steep.
• The complexities of JSX are difficult for developers to grasp.
• Due to the rapid rate of development, there is a lack of documentation.
• You could lose the “flow and data components” as the project expands.

When Should You Use It?

​React is a programming language that is used to create sophisticated user interfaces, especially single-page apps. Because it allows reusable components, it is the most robust front-end framework when you need to create an interactive interface in a short amount of time.

When To Avoid Using It:

​When you don’t have much experience with JavaScript, React is not the best option. Similarly, the JSX learning curve is steep for new developers.

In short

RIZIV-INAMI

• Lack of experience with React
• JSX learning curve is steep
• Knowledge found is still rare

---

Angular (Google )

Google invented Angular in 2010 as one of the powerful user interface frameworks to bridge the gap between technical innovation and conventional notions. It’s a typescript-based development platform with a broad set of well-integrated libraries that lets you build scalable apps, making it an outstanding Web UI framework.

Advantage

• High-Efficiency
• An ecosystem that is large
• Material Design interface manufacturing is reorganized by Angular Material.
• The Angular sanctions component-based approach creates a user interface with single components.
• With its refactoring services and improved navigation, it makes coding easier.
• Dependency injection makes components more reusable, testable, and manageable.

Disadvantage

• Angular is a verbose and sophisticated language.
• Some users might struggle to comprehend Angular’s layered design, which can make debugging the frontend framework challenging.
• Dynamic apps and single-page applications (SPAs) will be inconvenient.
• Migrating old systems from AngularJS to Angular takes more time.
• Angular web apps have minimal SEO choices, making them difficult to find by search engine crawlers.

When Should You Use It?

Since it uses two-way data binding, Angular improves the performance of browser-based programs by rapidly updating the contents. Angular is a good choice for an enterprise-focused and active web project.

When To Avoid Using It:

As a front-end framework, Angular is an all-encompassing solution. You won’t be able to use the resources that Angular provides if you need to build apps with limited scopes. Choose a tiny framework with simple syntax and fewer complications when you have a small group.

In short

RIZIV-INAMI

• Not allowed several years ago
  
• Issues with packages ( versioning, Servers, access, … ) upon DevOps Level => Npm
  Governance / build security check
  
• Issues with TypeScript builds upon TFS ( versioning ) 
  
• Knowledge found commonly
  

---

Vue.Js​

It’s a type of Web user interface framework that mixes React and Angular. Vue.js is a framework for building single-page apps and progressive web interfaces for mobile and desktop. 

Advantage

• It’s ideal for unit testing and is simple to read and comprehend.
• Learners have access to thorough documentation.
• It boasts a powerful tool system and a slew of new features.
• It offers extensions for dev tools in the browser.
• Reusability of code and ease of integration
• Supports the creation of sophisticated dynamic applications as well as smaller, simpler applications.
• This framework’s syntax is relatively basic, making it easy to work with.

Disadvantage

• Vue.js has a limited community due to its lack of popularity. As a result, finding peer support might be challenging.
• While reading the data, sometimes the reactivity system makes errors.
• It lacks the necessary resources to tackle large-scale initiatives.
• Vue.js is dangerous to utilize in large projects due to a lack of skilled developers, community support, and component stability concerns.

When Should You Use It?

For its simplicity and versatility, Vue.js is one of the most popular front-end frameworks today. It allows you to design the entire project from the ground up and is also capable of handling large projects. Appropriate for progressive web apps, dynamic web apps, and big projects that require a scalable and efficient design.

When To Avoid Using It:

Vue.js is not the proper path to go if you assume the support community will be available to respond to the complexities. Similarly, applications requiring constant components are not suitable for fabrication using Vue, since the framework has caused issues with part stiffness.

In short

RIZIV-INAMI

• No knowledge found
  
• Knowledge hard to find upon Market
  

---

JQuery

This is an older frontend framework for the web. It was first introduced in 2006, and it stands out among competitors because of its relevancy, ease of use, and simplicity.
Mostly used at RIZIV-INAMI to manufacture some kind of UX in current MVC-Standard

Advantage

• The tool is simple to use, and the structure is simple to grasp.
• Provides faster outcomes and is cost-effective.
• You can easily download and study it.
• Because it is one of the top UI frameworks, it is cross-platform compatible.
• It could be ideally suited for responsive web solutions as a result of recent advancements.

Disadvantage

• It’s an outdated platform, and there are many newer and better frameworks on the market nowadays.
• It permits the creation of dynamic applications, although at a slower pace.
• JQuery’s lightweight interface may cause issues in the long term.
• When compared to CSS, jQuery is slower.

When Should You Use It?

This web development framework is used to create JavaScript programs for the desktop. This framework keeps the code clean and straightforward. It is used to manage events and execute animations.

When To Avoid Using It:

It is not possible to use jQuery while developing a large-scale program since it adds more JavaScript code to your project, making it heavier. This framework is not capable of competing with modern frameworks in terms of progressive JavaScript enablement, fewer lines of code, and element reusability.

In short

RIZIV-INAMI

• Makes the applications heavy, slow and reusability is hard when creating bigger applications
  
• Difficult reusability means messy Code and this means hard to support, hard to keep resources
  
• Knowledge hard to find as this is an older framework
  

---

Blazor (Microsoft)

Blazor is a freely available open-source web structure that entrusts several designers to build web-based applications by employing language platforms such as C# and HTML.
Microsoft Blazor development company allows you to use Razor grammar and C# rather than JavaScript. Blazor (Browser + Razor) authorize developers to simulate reusable and instinctive web User interfaces for customer apps, particularly in .NET and managed entirely under web assembly.

Advantage

• Interactive web UI
• C#, HTML, and CSS
•  composed of reusable web UI components
• Blazor is a feature of ASP.NET
• UI component ecosystem

Disadvantage

• WebAssembly or server Blazor is a big difference
• Blazor Hybrid apps with .NET MAUI
  Blazor Hybrid support is built into the .NET Multi-platform App UI (.NET MAUI) framework. .NET MAUI includes the BlazorWebView control that permits rendering Razor components into an embedded Web View. By using .NET MAUI and Blazor together, you can reuse one set of web UI components across mobile, desktop, and web.
  ** already released ? **
• Relative young

When Should You Use It?

Shared Server- and Client-Side Code
An interesting thing about Blazor that many developers may find useful is that the framework allows reusing the code between the server-side and client-side. That means that you can take the code from the back-end and place it in the front-end.
 
Visual Studio Code
Since Blazor is Microsoft’s framework, it’s supported by the undisputed king of development tools available — Visual Studio Code. The VSC editor allows developers to highlight, debug, refactor the code, among many other useful features.
 
Dependency Injection
Thanks to dependency injection, Blazor-made applications can use Inversion of Control. It essentially allows providing objects with dependencies. But what’s a dependency? It’s a usable object that can act as a service.
 
Dependency injection can be divided into classes: injector, client, and service class. It also features different injectors like constructor, method, and property.
 
JavaScript Interop
JavaScript Interop is a functionality of Blazor WebAssembly that allows handling manipulations of DOM, as well as browser API calls. Thanks to it, an application developed with Blazor can use the .NET methods JavaScript functions.

When To Avoid Using It:

It’s really hard to write down Blazor’s disadvantages as a whole since there are two ways of hosting and they are both different. That’s why we’ve decided to split the disadvantages into two — disadvantages of Blazor Server and Blazor WebAssembly.

Blazor Server

• Slower Loading Speed
• No Offline Support
  
• ASP.NET Core

Blazor WebAssembly

• ​Issues with Low-End Hardware​
• Restricted by and to a Browser
• Weight Matters
• Initial Load Time

In short

Components 
Telerik : Claudine licence: good for Blazor? In licence?

RIZIV-INAMI

• Constraints
  
• Difficult reusability means messy Code and this means hard to support, hard to keep resources
  
• Knowledge hard to find as this is an older framework
  

---

Comparison Frameworks

	React	Angular	Vue.Js	JQuery	​Blazor
​Current	Not used	Disallowed	Not used	Used with MVC ​	Not used
Experience Riziv	​None	None	None	​High	None
Learning Curve	​Steep	​​Steep	​​Steep	​outdated	C#
.Net Market ​	Not easily ​	found commonly	Not easily ​	found with seniors	New, But c#
Known Issues ​	​NaN	​packages Versioning Servers Access DevOps Level => Npm TypeScript builds upon TFS ( versioning )	​NaN	Heavy slow reusability issues hard to support	Not Made for Mobile Offline support Speed and Network

Hard Requirements Project 

	React	Angular	Vue.Js	JQuery	​Blazor
Smart Client	Yes	Yes	Yes	Yes​	Yes
Mobile  Devices	​Yes	Yes​	Yes​	Yes	Less fit => Blazor Hybrid Components ?
Deadline	​No	​​Yes​	No​	Yes​	Yes​
Components ​	No​	Yes	No​​	Yes	Yes : Witch one ?
Knowledge​	​No	Yes	​No​	Yes	Yes ( C# )
DevOps Build ​	​No	​No	​No​	​Yes	Yes ( C# )
Possible Supported in RIZIV	​No	​Yes	​No​	Hard	​Yes

Soft Requirements Project 

	React	Angular	Vue.Js	JQuery	​Blazor
Current functionalities	Yes	Yes	Yes	Yes​	Yes

---

Technical Short Response

​Has to be checked with platform team, as we need one Framework that is supported.
Because no framework is a 100% fit. 

	Angular	JQuery	Blazor
​Smart Client /  ​Single Page Applications	Yes	Yes but messy lot of files, not code reuse, Javascript,	Yes​
Mobile Devices WebApplications	Yes	Yes Check Issues MVC as MVC is the ground JQuery uses	Less fit => Blazor Hybrid Components ? MAUI support for Blazor Hybrid ?
Deadline	Yes Denied by Architecture Platform	​​​Yes	​​Yes Waiting for Architecture Platform ​
Components ​	Yes Security? Depth of links Large amount Selection criteria ​	Yes	Yes : Witch one ? Security Depth? Amount? Search?​
Knowledge Internal	​Yes but not enough	Yes	Yes ( C# )
Knowledge on market	Yes but not searched at the moment : so delay	Old Tech	Yes ( C# )
Dev environment ​	No : Npm issues ​	​Yes	​No Blazor Hybrid is in preview currently Visual Studio 2022 Preview
DevOps Build	Yes if Versioning is solved ( see note Brecht).	​Yes	​Yes ( C# )
​Possible Supported in RIZIV	Yes only   after solving of Governance issue : Npm local, Research security, Local Knowledge to be searched.	​Hard	Yes only if Components must be checked  Will blazor Hybrid be allowed Will MAUI be supported?

---

Response 

For the moment we decide to wait 
* for the current added functionalities we can stay in the current MVC/angularJS stack
* we propose a Migration .Net 6 / Blazor project to be set up after the Blazor POC has been concluded 

Collegues of the Platform team are working on this question 
http://vandiest.biz/post/2022/11/02/what-is-the-best-ui-technology-angular-or-blazor



Sources
https://medium.com/@devathon_/blazor-vs-react-angular-vue-390c373869b9
https://www.zenesys.com/blog/blazor-vs-angular-vs-vue-vs-react
https://massivepixel.io/blog/blazor-vs-angular/
https://devathon.com/blog/blazor-vs-angular-vs-react-vs-vue/
https://www.linkedin.com/pulse/exploring-spa-blazor-vs-react-angular-thavaselvan-palanivel/
https://www.angularminds.com/blog/article/comparison-between-blazor-vs-angular-vs-react-vs-vue.html
https://hashdork.com/blazor-vs-angular-js-vs-react-js/
https://www.openxcell.com/blog/blazor-vs-angular/
https://www.infragistics.com/community/blogs/b/jason_beres/posts/blazor-vs-react-comparison
https://www.quora.com/What-is-Blazor-vs-Angular-React-and-Vue-Which-one-should-we-use