Best Practices for Implementing Blazorise UI using Blazor

Introduction

Blazorise is a component library for Blazor, a web framework for building interactive web applications using C# instead of JavaScript. Blazorise provides a set of reusable UI components, such as buttons, forms, and modals, that you can use to build responsive and mobile-friendly web applications.

Blazorise framework is a good choice for Microsoft-oriented companies with c# developers who don’t want to learn or invest in resources to work on UI frameworks like React which is based on JavaScript. You can achieve the same outcomes with Blazorise as with React.

Some of the critical features of Blazorise include:

• A rich set of UI components, including buttons, forms, modals, and more.
• Customizable appearance and behavior for each component.
• Support for popular CSS frameworks like Bootstrap and Bulma.
• Highly configurable themes and styles.
• Built-in validation and error handling for forms.
• Optimized for performance and accessibility.
• Compatible with server-side and client-side Blazor applications.
• Compatible with popular web browsers like Chrome, Firefox, and Safari.

Overall, Blazorise is a powerful and flexible component library that can help you build modern, responsive, and mobile-friendly web applications using Blazor. However, some best practices should be followed when implementing Blazorise UI using Blazor. This blog will discuss some of the best practices for implementing Blazorise UI.

Use Blazorise with caution

Blazorise provides a wide range of UI components that can be used to build web applications quickly and easily. However, it’s important to note that using too many UI components can lead to performance issues. To avoid this, it’s essential to use Blazorise cautiously and only use the components required for your application.

Keep it simple

When implementing Blazorise UI, it’s essential to keep it simple. This means avoiding complex UI components and layouts that can make it difficult for users to navigate the application. Keeping it simple also means avoiding unnecessary features and functions that can add to the complexity of the application.

Use proper naming conventions

When implementing Blazorise UI, it’s essential to use proper naming conventions for the UI components. This can make it easier to maintain and update the code in the future. It’s also crucial to use consistent naming conventions throughout the application.

• DO use PascalCasing for all public member, type, and namespace names consisting of multiple words.
• DO use camelCasing for parameter names and local function variable names.
• DO start with an underscore for private fields.
• DO use PascalCasing casing for static read-only fields, and constants.
• DO use nouns to name classes.
• DO use whole words rather than abbreviations to name classes.
• DO end exception class names with the suffix Exception.
• DO use verbs to name methods/functions.
• DO use a singular name for an enumeration unless its values are bit fields.
• DO NOT use a prefix on enumeration value names (enmTeam).
• DO NOT include the enumeration type name in the Enumeration value (Enum Team should not have the value TeamAlpha).
• DO use native datatypes instead of .NET Common Type System (CTS) type (int rather than Int32 or Int64)
• DO use implicit type for local variables when the type is obvious.
• DO use implicit typing in for statements.
• DO NOT use implicit typing in for each statement.
• DO NOT capitalize each word in so-called closed-form compound words.
• DO have “Async” explicitly in the Async method name to notify people how to use it properly.

Development Best Practices

When implementing Blazorise UI, it’s essential to follow coding standards. This includes consistent code formatting, able and method names, and avoiding duplicate code. Following coding standards can help ensure the code is maintainable and easy to update.

File Layout (Recommended)

Only one public class is allowed per file.

The file name is derived from the class name.

Class Definition Order (Mandatory)

The class definition contains class members in the following order, from less restricted scope (public) to more restrictive (private):

• Nested types, e.g., classes, Enum, struct, etc.
• Field members, e.g., member variables, const, etc.
• Member functions
  • Constructors
  • Finalizer (Do not use unless necessary)
  • Methods (Properties, Events, Operations, Overridable, Static)
  • Private nested types

Cross-platform Coding

Our code should support multiple operating systems. Please don’t assume we only run (and develop) on Windows. Code should be sensitive to the differences between OS. Here are some specifics to consider.

• DO use Enviroment.NewLine instead of hard coding the line break instead of \r\n, as Windows uses \r\n and OSX/Linux uses \n.

Note

Be aware that these line endings may cause problems in code when using @”” text blocks with line breaks.

• DO use Path.Combine() or Path.DirectorySeparatorChar to separate directories. If this is impossible (such as in scripting), use a forward slash /. Windows is more forgiving than Linux in this regard.

Standards for Coding in Razor

This section aims to define a set of coding standards to be used for the Web Application using Blazor (razor Pages).

• DO use title case for razor filename (except 404, 400 pages).
• DO break up a razor page if it exceeds 180 lines.
• AVOID adding empty Lifecycle Methods in the components.

Component Lifecycle Events

All Blazor Components expose the Lifecycle Methods to override. Be aware that the calls made in these lifecycle methods should have proper try/catch to handle the exceptions. Otherwise, it will end up with short-circuit or application crash.

If any objects are initialized in the Lifecycle event, then use a conditional block before accessing those objects in the razor.

Component Naming

• When creating parameters for Component, use TitleCase.
• For any Private variables for the component, you can use camelCase.
• Refresh UI using StateHasChanged.
• If you invoke StateHasChanged in a component, only that specific component and all its children will be refreshed.

All the other components don’t know that they must be refreshed, so we need to invoke StateHasChange for them. A possible solution is a state container. Components subscribe to NotifyChange, and when the state is changed, all subscribers are notified, and StateHasChanged is invoked for all of them.

Dispose Event Listeners

When subscribing for events using event delegates, always ensure those events are unsubscribed in Dispose method.

HTTP Service Clients

When calling external APIs, don’t swallow the HTTP errors. If you are using, try/catch throw the appropriate error so that the system can gracefully show users that something happened, and they can report it to the system admin.

Component Property Initialization

When properties are declared and used in the razor markups, they may crash if not initialized at the loading time. Please use conditional checks instead of directly rendering the markups.

Exceptions

• Always provide exception message text.
• Throw the most specific exception that is appropriate. For example,
• If a method receives a null argument, it should throw ArgumentNu11Exception instead of its base type ArgumentException.
• Do not use try/ catch blocks for flow-control.
• Only catch exceptions that you can handle or when you need to perform any action on it (ex. Logging).
• Never declare an empty catch block.
• If re-throwing an exception, preserve the original call stack by omitting the exception argument from the throw statement.

Example:

Test thoroughly

When implementing Blazorise UI, it’s important to test thoroughly. This includes testing the UI components, as well as testing the application. Testing can help ensure that the application functions correctly and meets user requirements.

Conclusion

In conclusion, Blazorise is a powerful UI component library that can build web applications quickly and easily. However, the above best practices when implementing Blazorise UI ensure the application is maintainable, scalable, and performs well. Using these best practices, you can build web applications that are easy to use, visually appealing, and provide a great user experience.