Why use ReactJS with ASP.NET CORE MVC? - asp.net

I have worked in ASP.NET CORE MVC, before.
What are all the advantages in using ReactJS over ASP.NET CORE?
Would not that additional library & its components, slow down the page
load, comparing plain Razor Views?
I tried web search, I am unable to get proper answers.

If you have independent apps in PC,Phones tablet,etc,you could just use React and core web api which is front-end and back-end separation.
By using Angular/React with api in server side:
1.You eliminate process of generating HTML in server side and you save CPU.
2.API produces small payload (json) and Razor (html) would be much larger in size, constant full page reloads and postback round trip. so API and SPA save bandwidth.
3.API and SPA could have different versioning, scaling and deployment scenarios.
4.By using API you can support mobile app too and if you start by Razor you may need api in future.
Below are some opinions on using Angular/React or razor:
1.Razor supports mobile,and both are optimized and fast in their own way. Razor optimizes code by not using a tree like MVC does. React is client side so it doesn't really use a tree, but also optimizes data in the HTML to an extent.
2.Angular (or React) is far superior in terms of performance.The model-binding aspects of Angular is a gigantic advantage of server-side rendering. Using Razor(or server side rendering in general) does, however, lend itself to better overall integrity as far as data goes and it makes for a better transition of data from front-end to back-end.
See ASP.NET Core 2.0 Razor vs Angular/React/etc

What are all the advantages in using ReactJS over ASP.NET CORE?
ReactJS is high performance and rapid development client side framework, you can use it throw asp.net core or any other server side framework to handle client side operations.
Would not that additional library & its components, slow down the page
load, comparing plain Razor Views?
ReactJS designed to be a single page application, and this kind of apps is more faster than multiple page applications, also ReactJS processing the DOM in different and smarter way.
If you want to use ReactJS in asp.net core you must keep in mind that asp.net core is the api part just to return the data (json or xml) or to receive your ajax request to post data.
All clients side parts will handled by ReactJS, no razor views, you can have only one to reference your reacts application or simply you can reference it using plain html page.

Related

Single vs multi-page angular application in ASP.NET Core

I'm an angular beginner and am currently working through a few angular tutorials. I have some ASP.NET MVC experience from a few years back.
What I think I am trying to understand is whether I should be attempting to design my application as a SINGLE or MULTI page application.
As far as I understand, there are two main schools of thought, when it comes to Angular and ASP.NET CORE applications:
Create a simple ASP.NET CORE application serving a single page. That page will be a single-page angular application, which will take care of its own routing, etc, presenting a variety of different views and potentially using an API exposed through ASP.NET for data
Create a multi-page ASP.NET CORE application, serving a number of different pages, each of which will be a razor page, with some part of it being an angular application
Am I understanding this right? I think the single-page application makes sense to me, but I do find that I am quite confused on multi-page approach... I am not quite clear on which part of multi-page application is angular supposed to fill and whether every single page should be its own angular application.
I have tried searching for a comparison of the two, but was unable to find anything decent. :(
In Multi-Page Applications, the client (browser) which typically sends a request for page to the server to initiates the communication. Then the server processes the request and sends the HTML of the page to the client (browser). For every request server sends the full html to the client, not to load patch html to the client.
In Single-Page Applications (SPAs) at first the entire page is loaded in the client by the initial request, after that the subsequent action has to update by Ajax request and no need to reload the entire page. The SPA reduces the time by to respond to user actions and result is more fluid experience.
I don't think the classification you use is correct.
To me it is:
Traditional "multi page" application: HTML generated on server (ie MVC and Razor) and pushed to the browser at every request.
Single page applications (SPA): HTML downloaded a single time from the server and manipulated on client via Javascript (ie Angular).
Probably you are talking about "multiple" "single page applications" where you break a complex SPA into smaller ones.
Ie you could have a "user" SPA and an "admin" SPA published from the same website.
If you want to build single page application(ajax based) in Asp.net Core MVC solution without using any third party JavaScript framework then better you have to look this github repository.
https://github.com/KishorNaik/Sol_Ajax_Spa_MVC_Core

angularjs rendering on server side asp.net

I have used angularjs framework for front-end and asp net mvc for back-end to develop my web app. As you know angularjs has a major flaw when it comes to SEO. There are some solutions like using phantomjs to create snapshots of website and serve it to search bot instead of original website. But I don't like it that way. I've recently introduced to the concept of isomorphic web apps and if I'm not mistaken it is possible to pre-render angularjs apps on server and then serve the rendered html to client. All solutions I've found was for other frameworks. Like Rendr (https://github.com/rendrjs/rendr) or angularjs-server (https://github.com/saymedia/angularjs-server). Also there is a library called NodeServices (https://github.com/aspnet/NodeServices) that do the trick but it's written in Asp.net core and angular 2 universal that I use neither of them. Is there any library doing the same work for asp.net and angular?
Thanks in advanced.
As stated here How do search engines deal with AngularJS applications?
Google now execute javascript when crawling the web. The problem is that a there's no standard, ,you can't assume that any search engine will correctly crawl your web application when is client-side rendered.

AngularJS and ( ASP.NET or ASP.NET MVC )

I want to build a Single Page Application using AngularJS as an client side framework but I struggle to understand if I can use the ASP.NET as my server side framework?
I know that AngularJS is an MVC framework and when I'm trying to decide wich server side framework to chose all I hear or read is MVC, MVC,...,MVC.
I know, this an subjective question, but still, can any one tell me if I need to learn ASP.NET MVC or I can still reach the desired result using the ASP.NET framework?
You can use whatever technology you want.
Basically to be able to communicate with angular you need something that listen for http requests (an http server so), parse them and that can send/read json (with maybe some extra libraries). The static pages can just be deserves by an apache in front.
You could do that in C parsing the whole thing yourself, but for performance, maintenability, speed of development and a bunch of other reasons, it's better to use an appropriate framework.
If your application is not big-scaled, specially in the backend part just search for a c# rest framework that handle thing that url mapping and json.

Do I need ASP.NET MVC 5 SPA template?

I want to build responsive SPA web application. I followed old paradigms before and the way it is supposed to be done nowadays is not very familiar to me, so sorry if my question seems unadequate.
Now I'm trying to understand the motivation behind this MVC 5 SPA template: why would I need to use MVC and Web API in one application?
My app will not act as a service. I can simply return JSON from my action methods. If in my case it is absolutely not neccessary, what factors could change the situation in favor of using both WebAPI and MVC at the same time?
You don't have to but it is useful.
I'm usually using MVC for
generating initial html file for my SPA through index.cshtml
(bundles + some customization of initial html code)
generating dynamic JavaScript code (usually for something like configuration angular modules)
Web API or OData kicks in aferwards providing endpoints for your favourite SPA framework (angular / knockout etc.) returning json or even xml if you need.

Frontend javascript framework with asp.net mvc and web api

I am currently starting a massive web app project, and one of the requirements is that down the line I may be required to allow an iOS and Android app to interface with my application, I figured the best solution was to create a RESTful API and have the web application interface with it. However, my coworker who does front end development is unfamiliar with using a javascript framework such as backbone.js (more of a library I know), ember.js or angular.js. Since we're using asp.net I figured that the I could handle authentication and routing using asp.net MVC, delivering seperate views depending on the route, and he can handle the data manipulation only, However, I can't seem to figure out how to seperate routing from the javascript framework, I've looked into ember.js and backbone and both of them seem to require routing to be handled on their end for it to really work.
Does anyone have any idea how to implement data manipulation without the need for routing?
What you are describing is generally called API oriented architecture, meaning you have a RESTful service on a back-end and rich client-side application on front end.
The point is, it basically does not matter what technology you pick up on server. It could be anything: ASP.NET MVC, Web API, Express.js or Django. As soon as it's really RESTful and pure. By purity I mean, it deals only with data, no serving of HTML or something.
Server just specify the interface you work with data,
GET /invoices // get all invoices
GET /invoices/:id // get invoice by id
POST /invoices // post new invoice
If you confident with .NET, WebAPI is probably good choice. Typically you would prefer JSON output, WebAPI could handle content negotiation for you.
Now, the client job is to consume the API data and dynamically create HTML in browser. A lot of options now: Backbone.js, Angular.js etc.
Please be aware: client side routing and server side routing are completely different things.
Server side routing: routes particular HTTP request to particular controllers action (or any function).
Client side routing: detects the URL change and triggers corresponding JavaScript function to handle change. Client side routing is vital for SPA (single page applications). You can find a bit more information on SPA on that blog post.
Have a look at KnockoutJS, which would allow you to use ASP.NET MVC for routing or another JavaScript library like sammy.js (just for routing) or Durandal (for routing and navigation).
Note: Durandal version 1 used sammy.js internally, but version 2 has a custom routing engine and no longer uses sammy.js.

Resources