Customize UI design for multi tenant asp.net application using Bootstrap

When you are developing a multitenant application, all your tenant (customer) wants their design or color coding (theme) different as per their brand. First, you have to come up with a unique design or layout of your web app which can be neutral and can be customizable to any different design easily.  By reading this requirement, of course, you get Bootstrap in your mind. By using Bootstrap you can easily make your web app design very flexible and responsive. We all know benefits of using Bootstrap. If you don't then go to Getbootstrap.com and get it.

Bootstrap can be base for responsive web applications. You need to do custom CSS by overriding existing bootstrap classes. You can also make your customization of bootstrap common for all tenant by using .less provided by bootstrap instead directly using .css.

I have added my example of design multitenant web application design using bootstrap.

For our implementation (our example), we considered bootstrap V3.3.7 as  We still may have a learning curve of understanding of new version of the framework. We consider using new bootstrap is a little bit a risk for a team. You can use a new version of bootstrap and apply the same strategy for handling multiple tenants web design customization. We have used ASP.net MVC core project using visual studio.

Implementation of custom design has done in following steps.

1. Need to install basic bootstrap with .less files.

you can download bootstrap .less files from the following URL.

https://getbootstrap.com/docs/3.3/getting-started/

Also, you can implement packages like npm or nuget.

It is also described here how to install grunt and grunt commands here

https://getbootstrap.com/docs/3.3/getting-started/

2. Define your own customization on top of bootstrap using your own .less files.

As per Asp.net core MVC project folder structure, I have added bootstrap .less file under lib/bootstrap.

I have added a folder called "less" under the root folder.  Added main.less file. This can be your application main .less file. You can add reference of bootstrap.less under this. The bootstrap.less file you can locate under lib/bootstrap/less.  Bootstrap.less is the main file of bootstrap which has all reference to other bootstraps .less files and bootstrap variables. bootstrap.less looks like below.

main.less file has bootstrap.less reference.

Check bootstrap variable.less file. Bootstrap has defined all variable for all colors and size. You can directly change this variable values.  By Including bootstrap.less into main.less you can use these variables to your custom .css classes too.  You can also override values variables if you wanted to keep your custom.less file separate for each tenant.

3. Install Grunt and packages for .less.

You can use Gulp or Grunt as a task runner for generating .css file from .less files. You can do other tasks also like minification and bundling using it.  For our example, we have used Grunt task runner. 

You can find the detailed article about how to use Grunt with asp.net core here and for Gulp here.

here is the getting started with Grunt.

You need Nodejs installed on your machine.  Install nodejs with Node Package Manager (npm).

You can install Grunt using npm by the following command.

npm install -g grunt-cli

For our project, we need to add npm Configuration File (package.json). 

For manual install Grunt to your project Open a command prompt and change your directory to your project directory.

cd c:\{your project directory}

If you have added nodejs to PATH environment variable then only has to apply npm command directly otherwise you have to give full path of npm exe like below and run install grunt.

C:\{your project directory}> "c:\Program Files\nodejs"\npm install grunt --save-dev

Install packages for .less

C:\{your project directory}> "c:\Program Files\nodejs"\npm install grunt-contrib-less --save-dev

o/p: 

+ grunt-contrib-less@1.4.1

added 62 packages in 8.574s

Using visual studio, You can simply update package.json file and update packages from Dependencies -> Righ click  on "npm" => Click on "Restore packages"

"Package.json"

"Restore Package"

It will look like following after restoring package

Add Gruntfile.js to a solution. Get more information from here  https://gruntjs.com/getting-started

sample grunt file looks like below.

4. Generate different stylesheet files according to custom variables using Grunt.

Using Grunt task runner you can generate .css file from .less file. We already have installed required package of .less.
we need to add grunt task for .less with different parameter options.  you can find the whole list of parameters and guideline of adding grunt task for less here.   https://www.npmjs.com/package/grunt-contrib-less

We are going to use "modifyVars" parameter to modify .less variable value. using this parameter, you can pass the value of any .less parameter like bootstrap @brand-primary.
With "files" parameter you can define Source .less file and destination .css file (result file).

In our case, we have our main.less file which has a reference of bootstrap.less along with custom CSS classes. We can define different task according to the environment. Also, we can define different task according to a tenant.

Like above gruntfile,  we have defined the task to generate CSS for the development environment and production environment.
For development, you need to check .css classes sometimes so no need to do compression. while production environment you can define compress: true. It minifies the .css.
We defined the value of 'brand-primary' variable under modifyVars for both environments.

Under the "files" tag, You can define source file as .less file and result file .css file like in above example we have following.

files: { 'wwwroot/css/site.debug.css': 'wwwroot/less/main.less'}

Grunt task generates site.debug.css file in defined path using main.less file.

Similar way you can add another task for a different tenant.  you can pass variable value according to customer requirement.  You can also generate different variable. less file with customer specific values and generate .css using different .less files according to tenants.
Tenant task is shown below.

5. Add tenant code switch.

You can change the use of .css file according to your tenant id. You can manage it by _layout.cshtml.
After login, you can get tenant name programmatically.  You can implement base controller and take one global variable which can be used for all views. I would let you decide how would you get your tenant name as I wanted to focus on switching stylesheet according to different tenant name.

In following code sample, I have created one variable called tenantcode which has tenant name. This variable can get value dynamically from server login according to who is logged.  I have used tenantcode to generate CSS name for that particular tenant.

In Asp.net MVC core, You can define the environment for development and production. You also can define your custom one. You can get more info about environment tag from this URL: https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/built-in/environment-tag-helper?view=aspnetcore-2.1

So as per our logic, it generates tenant CSS URL like "~/css/site_tenant1.css". It would be just site_.debug.css for development.

By changing tenantcode, you can just change the theme of your application.

Tenant1 theme

 Development theme

The code sample is here https://github.com/atulpatel/MvcCoreLessCss.

If you want anything to elaborate more then let me know in the comment.

How to close your code

We all know them  SOLID principles.  Every developer knows what are SOLID principles because every developer has to go through an interview process to get a job. Some can explain really good while interview.

Recently, I have been interviewed by a very reputed financial company.  They have 4 rounds of interview and almost 3 round has asked a question about SOLID principles. They all have asked very good interesting questions and it seems they were looking for some specific expertise. I have started working there and their code base is awesome. They are not working anywhere near what they asked in an interview. I also found some controllers code files has 2-3k  lines of code which is a presentation layer. Though they have very nice onion architecture for the project. I hope whoever worked there all gone through those interview process and know about at least SOLID principles. These principles are not just to perform in the interview. We need to apply it in real code. Maybe they have their own reasons for not following them.

Anyway, here I wanted to show some example which I saw in their code base which can very easily make it closed for modification.

Check following code.

       
      public void Work(string switchoption)
        {
            switch (switchoption)
            {
                case "Fun1":
                    ///
                    /// So many lines of code
                    ///
                    break;
                case "Fun2":
                    ///
                    /// So many lines of code
                    ///
                    break;
                case "Fun3":
                    ///
                    /// So many lines of code
                    ///
                    break;
            }
        }




If you come across this kind of code or you may end up writing this kind of code then what can be at least done, I have explained it here.  Above code is not closed because you don't know what kind of another case may have to add in future. What if there is a change in code for a particular switch case. You have to test all cases because you have changed it the function. If your unit test covered all switch cases then you are a little bit good position. QA has to check every case manually. If something missed in testing then you may end up in production bugs. Overall all these increases the maintenance cost.

I do refactor it to the following levels.

At least have a private function for long lines of code for each case.


 public void Work(string switchoption)
        {
            switch (switchoption)
            {
                case "Fun1":
                    function1();
                    break;
                case "Fun2":
                    function2();
                    break;
                case "Fun3":
                    function3();
                    break;
            }
        }


        private void function3()
        {
            Console.WriteLine("Function 3");
        }

        private void function2()
        {
            Console.WriteLine("Function 2");
        }

        private void function1()
        {
            Console.WriteLine("Function 1");
        }

If you create private function then the code will at least increase readability.  By giving a proper name to function,  it describes that what that piece of code is doing. But still, it has an issue of what if we may need to write more cases there. This code is still not a closed code.

Instead of Switch case, you can implement Dictionary.

    
        public void Work2(string switchoption)
        {
            Dictionary<string, Action> switchfunction = new Dictionary<string, Action>();
            switchfunction.Add("Fun1", function1);
            switchfunction.Add("Fun2", function2);
            switchfunction.Add("Fun3", function3);

            switchfunction[switchoption].Invoke();
        }



You can simply add a dictionary with string and Action type. Add all functions to dictionary collection.  Dictionary can pick a particular case by Key name and execute the function by invoking it. You can also generate this dictionary list from outside of this function or get dictionary values from any data store.  In case in future, you may need to add more cases then you don't have to change this function.  This way your existing function Work2 here in the example can be closed for modification.

This implementation has resolved our problem of closing the function "Work" for modification.  But we still have to add a new function to the class for adding new cases. It is also not following Single responsibility principle.

Implement Strategy pattern using Dependency Injection

Basic strategy pattern implementation explained here. http://www.dofactory.com/net/strategy-design-pattern

The basic concept of pattern defines an Interface with strategy and have the concrete classes with different strategies implementation. Based on your need you can create an object of particular strategy dynamically.  google it for  "strategy design pattern"  and you will get plenty of examples.

Here I wanted to show an example using dependency framework. In above-given URL of dofactory example of strategy pattern, has context class to create an object of different strategies. We can rely on dependency injection framework for that responsibility.

In the following code,  IExampleStrategy is an interface and has functionexample(). This interface implemented in three different ExampleStrategy classes. each class has different implementation of functionexample.


   public interface IExampleStrategy
    {
        void functionexample();
    }


    public class ExampleStrategy1 : IExampleStrategy
    {
        public void functionexample()
        {
            Console.WriteLine("ExampleStrategy1.functionexample()  executed.");
        }

    }

    public class ExampleStrategy2 : IExampleStrategy
    {
        public void functionexample()
        {
            Console.WriteLine("ExampleStrategy2.functionexample()  executed.");
        }

    }

    public class ExampleStrategy3 : IExampleStrategy
    {
        public void functionexample()
        {
            Console.WriteLine("ExampleStrategy3.functionexample()  executed.");
        }

    }




Following is the context class where we instantiate the class based on strategy.  In the following class, we have injected IUnityContainer. It resolves right Strategy class based on a parameter.
The Work function is the function that we are changing to our main problem of removing switch cases. The first Work function can pass parameter and decide what strategy need to execute. The container can get a right concrete class based on a parameter passed. Instantiating an object is a responsibility of container based on a parameter.

Another Work function also does the same thing but in some cases, the developer has to do things in a loop. The container can take care of creating an object and also can take care of lifetime of your object. So in case if you have to create the same object multiple times for our second work function then a container can reuse the same object created previously.


  public class CloseCodeExample2
    {
        private readonly IUnityContainer _container;

        public CloseCodeExample2(IUnityContainer container)
        {
            _container = container;
        }

        public void Work(string switchcall)
        {
            var examplefunction= _container.Resolve<IExampleStrategy>(switchcall);

            examplefunction.functionexample();
        }

        public void Work(List<string> switchcalls)
        {
            foreach (var item in switchcalls)
            {
                var examplefunction = _container.Resolve<IExampleStrategy>(item);

                examplefunction.functionexample();
            }
            
        }
    }




Here is our Main function where we have defined our Unity container registration for an interface and its implementation.

   class Program
    {
        static void Main(string[] args)
        {
            CloseCodeExample codeExample = new CloseCodeExample();

            codeExample.Work("Fun1");

            codeExample.Work2("Fun2");
            codeExample.Work2("Fun3");

            //Unity container registration.
            var container = new UnityContainer();

            container.RegisterType<IExampleStrategy, ExampleStrategy1>("Fun1");
            container.RegisterType<IExampleStrategy, ExampleStrategy2>("Fun2");
            container.RegisterType<IExampleStrategy, ExampleStrategy3>("Fun3");


            CloseCodeExample2 codeExample2 = new CloseCodeExample2(container);
                        
            codeExample2.Work("Fun1");
            codeExample2.Work("Fun2");

            Console.WriteLine("---------------------------------");

            codeExample2.Work(new List<string>() { "Fun2", "Fun3", "Fun1" });

            Console.ReadKey();

        }
    }




Let's validate our two SOLID principles that we wanted to implement.  In above code, If you want to add new case then you need to add another class which implements the same interface and just need to register for the container.  We don't need to change function "Work"  It is basically closed for modification. Also, by creating a separate class for each case, We have implemented single responsibility principle. If you implement Unit test then it would be a separate unit test for all classes. Easy to implement the unit test.

Note: In above example, you still have to consider little bit defensive code, for example, what if no any class implementation available to unity config. It will throw an exception of  "Unity.Exceptions.ResolutionFailedException". So you still have to take care of this kind of things.

I hope you like it. If you have any query, add it to comments.

You can find code sample of above code here at GitHub. https://github.com/atulpatel/AspCoreRnd

Importance of Messaging for Enterprise applications

Communication happens between multiple applications using four major approaches.
1. File Transfer.
One application writes a file and another application reads it later. Applications need to agree on file location and name to exchange information.

2. Shared Database
Multiple application share information using a common database. This way application doesn't have to exchange information as it is a single source of data.

3. Remote Procedure
One application exposes some functionality remote so another application can access it remotely as a remote procedure call. This is real-time synchronous communication

4. Messaging.
One application publishes or sends a message to common message channel (Queue) and another application cand read or consume message from the message channel later. This application must agree on channel and Message format to do this asynchronous communication.

Challenges of communication between applications.

As a developer, while developing a software we are taking many assumptions.
For example, If we are developing an application which has to run an individual machine then we assume that while running that application it will always get enough memory and CPU cycle.  An application has never had to wait for any other resource etc.

While developing a software system which has to run on the different machine for different part of the application, we assume that communication between two system is reliable.  The network is efficient with good latency. TCP communication over network runs in a reliable manner.

Applications rarely live in isolation. any application has to communicate with other application directly or indirectly.  while working on this kind of distributed application, developers make a false assumption.  This is called "Fallacies of distributed application"

Fallacies of distributed application

https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing

The network is reliable.
There can be many problems with a network like a cable cut, switch power cut, network h/w failure, firewall issue etc.  Also, there can be some security attack. Applications like e-commerce highly affected by this issues.
As a developer, we need to consider that network is unreliable and we need to address that too.

Latency is zero.
Latency is a how much time it takes for data to move from one place to another.
We develop an application on a local machine and considering LAN latency or local machine latency and considering latency is zero.  But when an application goes into production environment then the scenario is different and application results into slower in performance or transaction failure.
Ajax and Async/await are patterns are little use in this scenario.

Bandwidth is infinite.
Bandwidth is capacity of a network to transfer data (how much data can be transferred).
Bandwidth is continuously improving the network nowadays. Sometimes when bandwidth is lower then network packet loss ratio is high.
Considering bandwidth is not infinite, we should limit the size of information we send over the wire.
Always test application in a production environment for this kind of reason.

The network is secure.
The Network is far from secure.
1. General Internet attack trends are showing a 64% annual rate of growth
2. The average company experienced 32 attacks per week over the past 6 months
3. Attacks during weekdays increased in the past 6 months" [RipTech].

As a developer, we always think of security and awareness of all security and the implications. Sometimes provides message-level security for more confidential information considering network is unsecured.

Topology doesn't change.

When we deploy an application on production environment its topology may change. on Network we have to change servers,  load balancers,  Active directory settings etc. Sometimes we change the whole vendor with different network architecture (AWS/Azure).
The application should work in any of the topology change.

The application should not depend on specific endpoints or routes. It should be always prepared for renegotiating endpoints or provide discovery services.
Another strategy is to abstract the physical structure of the network. Instead of depending on specific IP address, the application should depend on DNS name.

There is one administrator.
If we have an application subsystem which outside of your administrative control then it can be an issue for your application.
We have integrated third-party pricing supplier API. Sometimes they change their security protocol and strategy without even informing us in advance.  That results in failure of a part of our application. Sometimes they change data model also without informing in advance. Sometimes they let us know in advance about their change.
This type of changes is not in control of one administrator.  We should develop our application in a way that it can very less depend on their model structure. Also, we can provide two version of implementation. One can work with an older version and another for the new version so the application can decide automatically which one needs to use until it finals all the changes.

Transport cost is zero.
When information transfer over the network it has to be serialized into bits. This conversion takes server resources and also add latency.
Also, All networking instrument like the router, subnet, load balancer has its own cost. Some cloud providers also charge based on data transferred across applications.
Developers normally ignore this costs.  They should consider this aspect also and develop the cost-effective application.

The network is homogeneous.
The network is not same everywhere. Even at home in the Similar network also may use different systems like Linux and windows. This can be an issue of data formate, protocols etc.
The application should use a standard protocol like XML/JSON.  The application should be used both according to client request it should respond in a particular format


Messaging System can save some of the above scenarios.

What is a messaging system?

We can take an example of telephone voice mail system.  One person calls to another person and leaves a voicemail. That voicemail queued to a message queue(mailbox). once person wanted to listen to voicemail, it dequeues a message from the queue.

Messaging definition: Messaging is a technology that enables high-speed, asynchronous, a program to program communication with reliable delivery.

Applications communicate by sending packets of data called Messages to each other.
Channels(queues) are logical pathways that connect that program and convey a message.
Sender or producer is an application that sends messages by writing the message to a channel. Reciever or Consumer is an application receives a message by reading from the channel.

Messaging capability provided by separate software called Messaging system or Message Oriented Middleware (MOM).  NServiceBus, MassTransit.

Messaging system manages messages while send/publish a message to consume the message. It also uses a database to persists message and state. An administrator has to configure a messaging system with messaging channel that defines the path of communication between sender application and receiver application. The primary purpose of the messaging system to move messages from sender application to receiver application in a reliable fashion. While transmitting a message from sender to receiver, at any point, failure occurs then Messaging system retry to transmit until it succeeded.

Message transmits in following steps:

1. Create: sender creates a message using message model class and populates with data.
2. Send: The sender add a message to the channel.
3. Deliver:  Message system moves the message from senders machine to receivers machine.
4. Receive: The receiver reads the message from the channel.
5. Process: Receiver extract data from the message.

Advantages of Messaging system

1. Remote Communication reliable
Messaging enables separate applications to communicate and transfer data.

2. Plateform / Language integration.
Messages can be consumed by an application written in a different language and deployed on a different platform as it message formate is standard like XML or JSON.

3. Asynchronous communication
Messaging provides fire and forgets communication. The application doesn't need to wait until it finishes execution.

3. variable timing:
In synchronous communication, both applications have to wait for each other to complete a transaction.
In messaging scenario, both applications can work on at their own pace.  no one has to wait for each other.

4. Throttling
In an RPC application it is a single point of the receiver of requests and When there is too many requests comes to a single receiver then it may crash the application. In Messaging scenario it only accepts message from queue whenever it is ready.

5. Reliable communication.
    Covering all fallacies,  Messaging system uses to store and forward approach to transmitting messages. Sending system stores messages and receiver system also stores a message. Messaging system resends messages until it received by receiver successfully.

6. Disconnect operation:
Some applications are designed to work in a disconnected environment.  Messages are queued. Whenever it connects to a network it can start consuming or sending messages.

7. Mediation
Messaging system can act as a mediator between two application.

8. Thread management.
By Asynchronous communication, Threads doesn't need to be blocked until other applications finish its work.  Request/Response scenario also can be implemented by the messaging system.

Challenges of Messaging system

Complex programming model
Implementation of messaging system is little complex then RPC or another synchronous system. Debugging is complex.  Requires little learning curve for new developers.

Sequence issues
Messaging system guarantee message delivery but not in proper sequence.  You need to take special care of it. Implement saga and correlation can resolve this issue.

Synchronous scenario
In many cases, we need to provide instant feedback to the client about performed operation result.
We need to implement request/response or Push notification to cover up this.


Ref: Book: Enterprise-Integration-Patterns-Designing-Deploying
https://en.wikipedia.org/wiki/Fallacies_of_distributed_computing
www.rgoarchitects.com/Files/fallacies.pdf