Soon I'll start working on the next version of a website I've built. Basically it's kind of a CRM. Lots of tables, forms, CRUD everywhere. The problem is that it's going to be nearly a rewrite cause of huge requirements for functionality for the up-coming version, and we will need to make the website a bit more interactive, responsive and user friendly.
Currently it's ASP.NET MVC 4, with some jQuery for ajax stuff. MVC 4 application acts as a glue/proxy between client-side and underlying service which provides all the data, so WebApp has no direct communication with database. Also MVC 4 application is where business objects are transformed into ViewModels. We use DataAnnotations Validation for ViewModels.
Now what I was looking for, is to somehow integrate something like AngularJs. The goal is to move closer to SPA, give the client-side some structure, as building more functionality on top of existing jQuery code will just result in a sphagetti. However, writing full-blown SPA is not really an option, as it will require way too much effort and time, as always, is not unlimited.
For start the goal is to move Html forms management to AngularJs. That means I need a way to render MVC partial view with MVC model, and let Angular take over the controll. Posting changes/updating the view should be handled by Angular.
I have been researching Angular + asp.net for a while now, and the problem is that I need MVC models, but Angular also needs a 'model' ($scope). I know about ng-init, but some models will be quite complex. so it does not seem like a good idea.
Also server side validation (DataAnotations with loads of customized stuff) with unobtrusive client-side validation works very well for us, so would like to keep that and somehow make it work with Angular.
I've also looked into AngularJs/BreezeJs/MVC4, but breeze mvc integration is focused on EntityFramework, and it needs model metadata for client-side to be able to save, update and cache entities. And as mentioned earlier, mvc app does not access database directly, nor has a way to generate metadata. Writing by hand is not an option.
I know I'm trying to make some kind of hybrid and would have a lot's of issues having models on server and client sides, so I am looking for an advice which way should I go.
Is this doable?
Maybe I can generate metadata for Breeze js from existing ViewModels on MVC (breeze seems to work with dataanotations and validation works on client-side, at least minimally)?
Maybe this is a nonsense and I should either continue with MVC app, or go full-SPA, and there is no easy way to combine them both.
Related
I want to make a lightening-fast web application and am wondering about the best way to implement it. It's a drawing app that will need support for vector graphics, but it will use a database to store data in user accounts. Here's how I'm breaking it down in MVC terminology:
Controller: Django, hosted on GCP Python app engine
Model: CloudSQL
View: AngularJS
I'm wondering if a Javascript/JQuery approach would be better, since I could have Django handle the database operations and am worried that I'll just be adding overhead with Angular.
I'd welcome any thoughts.
Once you use Javascript framework such as Angular.js and React.js. Your backend and frontend becomes totally isolated. First thing you should do it you gotta make your django REST API. Build your logics to do the vector graphic in your django REST API and build your angular.js app in away that it will "consume" your REST API services.
For the second question, it is depending on your architecture design. If your application is going to be DOM-driven, use jQuery since still jquery still provides lots of UI stuff. However, if it's going to be data-driven and you will use Javascript to organize and display the data in efficient way, choose Angular.js.
Please leave a comment if you have more questions. Thanks!
I've been working with ASP.NET MVC for about a year now. I enjoy the ability to create SPA's especially by using the following tools:
Partial views(via html.action() and renderPartial())
Ajax helpers (Ajax.Actionlink() and Ajax.beginform())
My question is, Is it safe to just continue without a JavaScript frameworks or am i seriously missing out on something by not utilising a Javascript framework like Angular JS.
This depends a lot of the type of application you are building, but in general you don't necessarily have to choose between ASP.NET MVC and Angular, you can use both in a project.
For example, if you have a page with a grid where the user will add rows and you have to calculate sums etc you could use angular on that page (and it will speed up the development process).
But if you have pages with static content you can just serve an html file there using ASP.NET MVC.
And you can even use both of them. For something like a blog post, you can use a static html file for the post content and then implement the comments are with angular.
Since ASP.NET is a server side framework, it can only go that far as AJAX insertions. Angular JS is a client side Framework, designed for SPA in mind. If you are going for a light SPA, ASP.NET will do nicely, but I think you should use the right tools for the right job. Don't hesitate to mix them in order to find the right place between server side rendering and client side dynamism.
You are definitely missing some things.
The purpose of frameworks such as angular is not just to handle your bootstrap tab switches or whatever to display just parts of the UI rather than everything. Sure, you can create small and simple SPAs by utilizing such logic but once you come to create real-world apps that approach will become unusable. The reasons to this are:
Your site will be highly unmaintainable
Frameworks like angular provide much more than just templating (more on that in a moment) but features such as routing, which allows on-demand content loading. That is, instead of sending the whole page to the client, much of which (s)he maybe will not even take a look at, you can load fragments of HTML on-demand, which reduces network usage. Imagine you had to download everything (posts, images, videos, chat messages etc) on Facebook and hide them until you actually want to see them.
Back to templating, this is a very powerful feature. Again, in the case of simple apps you can use custom JS code - that is, concatenate strings to create fragments of HTML and then insert them into the DOM. But even with simple apps this is a smelly thing to do. Imagine you had to write custom JS to concatenate your chat messages in an app like Facebook then insert them into the DOM. With angular2, for example, you can do something like this:
<ul>
<li *ngFor="let msg of messages">{{msg.Sender}} said: {{msg.Content}}</li>
</ul>
This way, Angular2 will do all the parsing and DOM handling for you. That is, you write declarative markup rather than imperative logic for what you want to display.
All in all, they help you to decouple the logic from the UI so you should definitely dig into any of the popular frameworks and get a taste of their capabilities if you want to create rich apps. You will not regret it.
So I just spent the past 5 hours reading up on Angular JS. It seems like a lot of people are heavily associating this framework to single page applications especially when accommodated with a back-end MVC framework with nice API usage like Ruby on Rails or Laravel.
I have 2 main questions that have been boggling me:
How do you initialize such apps considering that the content is
dynamic in nature. When using something like RoR/Laravel, I'd prepare
the HTML with the dynamic data at the back-end and then serve the
initial pages. It seems like most people using Angular serve up a
basic skeleton of the HTML and then do a round trip to web server
again for some data. Is this really how its done? if not, please
suggest a the right way.
Secondly, I dont think I am about to embark on a project with a
single paged application in mind. Does that mean it would be overkill
to use AngularJS for my project. Does anyone have a use case that
they think is appropriate that would require AngularJS with non
single page application that jQuery cant handle easily?
We currently have an asp.net webforms web application, which needs updating in terms of look and speed. I think its time to redevelop it and was thinking about creating a webApi and change the website to asp mvc. But then i started using AngularJS and loved it, now i am thinking about redeveloping our site using AngularJs and a webApi.
Am i right in thinking that using AngularJs + ASP MVC is pointless, as they are nearly the same thing (although 1 is clientside and 1 is server side)
Also i have a couple questions about using angularJs on a website.
On the mobile apps that i have used angularJS i have used the routeProvider and stateProvider to change the page. This adds #/SOMETHING to the url and angular loads the correct content accordingly. Does this work ok with search engines like google?
Should the whole web application be 1 app within angular, or should it be broken down into app modules and each be a separate "app", even though it is 1 website? I am wondering about performance. Say i have a website where the user can look at companies, contacts, projects. Each module may have 10 different pages, can angular handle this? In our app we would have over 20 modules, each with maybe 10 pages+.
Is this something i should avoid? Would ASP MVC + webApi be better?
Any other views and opinions are greatly welcome, i want to get as much information as possible before making my decision and developing.
Thanks in advance
Let me try to address some of your concerns.
ASP.Net Partial views can still be used even if you decide to use AngularJS and WebAPI. Have a server view has some advantages. For example if your view has element that are only accessible to authorize users in a specific role, then better to not emit that view content from server, rather than hiding it on client side using AngularJS.
I have not done mobile development using AngularJS so i cannot answer your bullet point 1. But as far as SEO goes every client side framework has the same challenge. Google SEO techniques for Angular and you may find something interesting.
Regarding bullet 2, all depends. Multiple SPA apps can be created if the functionality is tangential. For example user side of app and admin side of the app can be different SPA but they can be a single SPA too. I think it all depends upon on scenario and there is no hard and fast rule.
For bullet 3, this is too broad question. I can only say AngularJS is a very capable framework and can do everything that MVC+ WebApi can achieve. There is a learning curve involved and it takes some time to do stuff the Angular way but i believe it is well worth.
We use MVC2 to build up our web app. There are some complicated pages in our project. They have plenty of user interactivities, realtime stock data and charts, requiring no page refresh.
I am new to front end development and ASP.NET MVC2. After using it for a while I think it's a form-based framework for presentation layer(I maybe wrong). If most UI actions are excuted inside one web page, using ajax and javascript to render data and run UI logic seems better.
Then I find there're two way to rendering UI in our app: binding UI model to View using MVC2 and filling the view using javascript. This seems not so elegant or may possibly mess if more and more views are implemented.
It seems MVC2 controller is good at being RESTful UI model data provider. So I think make the solution as Controller(model data)->HTML layouts + javascript(ui logic) could be a good way to implement such a rich client web app. Is it a good practice to do? Or what's your advice on this kind of project? Are there any web resources(articles or sample projects) for reference?
Thanks a lot.
It's not a bad practice to make your actions return just data, you could make your actions return JSon objects since they are lightweight and use JSonP to make ajax request across different domains.
You can try the new template JQuery PlugIn to render your views.
My suggestion would be to build up your application such that it works without JavaScript. Then use JQuery (a JavaScript library) and Ajax to improve the user experience.
Be aware that it is entirely possible that your RIA needs go beyond what one can do with Jquery. In these scenarios one might consider another solution (HTML5, SilverLight, Flash, etc.). Or you could tone down your RIA needs.