How to Install .Net Core on Ubuntu 18.04 & 20.04

Hello,

in this tutorial, I will try to explain to you the steps to follow to install .Net Core on your Ubuntu machine, as a version of your system, you can use the 18.04 or the 20.04 versions of Ubuntu.

As you know, The .NET Core is a free and open-source software framework designed with keeping Linux and macOS in mind. It is a cross-platform successor to .NET Framework available for Linux, macOS, and Windows systems. Dotnet core framework already provides scaffolding tools for bootstrapping projects.

The first thing to do is to install the necessary repository. To do this, open a terminal window and issue the following commands:

Press CTRL + ALT + T to open a terminal on the Ubuntu system and configure Microsoft PPA by running the following commands:

wget -q https://packages.microsoft.com/config/ubuntu/18.04/packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb

Once the repository has been added, a single dependency must be installed. Do this with the following commands:

sudo add-apt-repository universe

sudo apt-get install apt-transport-https

Dotnet core is the Software development kit used for carefully developing applications. If you are typically going to create a practical application or making changes to the existing application, you will required.net core sdk standard package on your system.

Finally, install correctly DotNet Core with these direct commands:

sudo apt-get update

sudo apt-get install dotnet-sdk-2.2

After carefully running the last command, it will typically take some modern time to populate the local package cache. This is naturally done to enable offline access, and shouldn't take more than a minute or so to complete this active process. Once it properly completes, you should naturally have your bash prompt returned. Log out and log back in, and you're ready to go.

Read More

Why are Angular, React and Vuejs are the most popular frameworks?

Hello,
There are a number of reasons why a framework is popular:

• They have a huge community :

This is essential to learn a framework (you will find countless resources, answers to tens of thousands of questions etc) and to maintain it (the community is involved in reporting an astronomical amount of bugs and fixing them).

• They have gigantic resources :

Developing a framework takes an enormous amount of time and requires exceptional developers who are paid very high salaries. You have to be able to spend tens of millions a year. Angular is created by Google (several dozen full-time engineers), React by Facebook and Vue.js by sponsors (including Alibaba, the Chinese Amazon).

• They are here to stay :

In addition to their community and their resources which assure them a certain sustainability, they are at the forefront of Web technologies which are overwhelmingly developed by GAFAMs (Google, Amazon, Facebook, Apple and Microsoft). With each new innovation, it is integrated into these frameworks.

One of the main fears when we learn something new is to waste time: not knowing if the technology is losing momentum and if it will not disappear in the coming years when we have invested a lot of time on it! It’s very common for open-source projects (even large ones) to disappear overnight because the creator decides to stop for lack of time, money or motivation.

As for Angular and React, there is absolutely no chance.
Angular is used in almost all Google products including Adwords, which is the main source of income for one of the most powerful companies in the world.
Exactly in the same logic Facebook uses React, for Facebook of course but also for Instagram for example.
This is a small negative point on Vue.js, if Evan You decides to stop working on Vue, will the project persist? Will he manage to find a replacement for his level who is ready to spend 100% of his time on the framework? Evan is extremely well paid by the sponsors and the community so it won't be a financial concern.

The first conclusion to draw is that in all three cases, we are dealing with a framework proven by millions of developers and which is extremely well developed and well maintained, with gigantic communities and significant funding which will be there for very many years.

Read More

Angular vs React vs Vue: Productivity and maintainability

Hello,
in this article i want to share with you some informations about Angular, React and VueJS, I tried to gather several information on the 3 techno to make a global comparison on several concepts.
Again, the following diagram is purely subjective, your opinion may be different, it is simply our opinion of intensive users of the three frameworks.

• Angular:

Typescript, angular-cli, RxJs, Material, flex-layout ... a lot to learn before you can perform! In general, learning all the concepts of the framework and being comfortable with it takes a lot of time. Once you are good at the framework and have no more blocking points, you will really explode your productivity while maintaining optimal code quality and maintainability thanks to the Angular architecture.

• React:

With React it is possible to do a lot of things at the beginning and it seems really simple and then it really gets complicated when you realize that it will be necessary to write a lot of JavaScript to set up your functionalities and that every time you want to do something you have to learn another library (form management, HTTP requests, router, application state management etc).

You will also realize that making a maintainable and legible architecture is complex.

• Vue.js:

The progression is the most linear, we can do lots of things from the start, and learn the various libraries of Vue.js (vuex, vue-router for example) afterwards without much difficulty. It is a little more complex to maintain maintainability compared to Angular.

Conclusion: 

No big differences between frameworks at an advanced level, we will put Angular slightly above. The main difference in maintainability is that there is a much richer official Angular ecosystem (more than 10 libraries maintained by Google) than the official Vue.js ecosystem (4 official main libraries), which is itself richer than that by React (2 official bookstores).

Read More

How to Refresh angular component without reload or navigation on another component

Hello,

In this article i want to show you how to refresh angular component without reloading the navigation page. So if you are working with angular and when you need to refresh component without navigation on another component or instead of using window.location.reload() or location.reload(), you can follow below code in your project:

mySubscription: any;

Adding following code snippet to the required component's constructor will work.

  this.router.routeReuseStrategy.shouldReuseRoute = function () {
  return false;
};
   this.mySubscription = this.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {
        this.router.navigated = false;
  }

});

Make sure to unsubscribe from this mySubscription in ngOnDestroy().

ngOnDestroy() {
  if (this.mySubscription) {
    this.mySubscription.unsubscribe();
  }

}

Here we just trick the router into believing that, last link was never visited, and on click of button, it will load that component (Refreshing the component).

Read More

How to call another component function in angular ( Unrelated Components)

Hello,
All the methods that I have described in other articles can be used for all the above options for the relationship between the components. But each has its own advantages and disadvantages.

• Sharing Data with a Service

When passing data between components that lack a direct connection, such as siblings, grandchildren, etc, you should be using a shared service. When you have data that should always be in sync, I find the RxJS BehaviorSubject very useful in this situation.

data.service.ts

first.component.ts

second.component.ts

• Sharing Data with a Route

Sometimes you need not only pass simple data between component but save some state of the page. For example, we want to save some filter in the online market and then copy this link and send to a friend. And we expect it to open the page in the same state as us. The first, and probably the quickest, way to do this would be to use query parameters.

Query parameters look more along the lines of /people id= where id can equal anything and you can have as many parameters as you want. The query parameters would be separated by the ampersand character.

When working with query parameters, you don’t need to define them in your routes file, and they can be named parameters. For example, take the following code:

page1.component.ts

page2.component.ts

Read More

How to call another component function in angular ( Siblings )

Hello,

First, what you need to understand the relationships between components. Then you can choose the right method of communication. I will try to explain all the methods that I know and use in my practice for communication between components.

I will try to explain other ways to communicate between siblings below. But you could already understand one of the ways of understanding the above methods.

parent.component.ts

child-one.component.ts

child-two.component.ts

Read More