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.
Related
I've mostly worked with Springboot framework only with JSP to cover the things I need for the website part. Now, I've got a project to do that mostly revolves, if not all, around the website and I have a couple of questions.
Just to be clear first, I don't have experience either with Thymeleaf or Angular so whichever I pick will be the first time (I think thymeleaf syntax would be easier for me to handle).
Ok so the main goal in my mind is not to render the whole page every time I load data from the backend, so I figure I would have like a header/content/footer parts where every time I click something only the content part would change. Also, I would like the possibility for a loader to show and go away when the content part is changing. This web application will need to be secure for users that register.
I've searched the web to investigate both frameworks, but can not seem to find the right answer so I can continue with my development
I do not mind creating separate REST services in later development if some other platform needs to hook up to the service if I decide to go with Thymeleaf.What do you guys think in what direction should I go, Thymeleaf or Angular? Any help and/or discussion would be much appreciated.
I am sorry if this seems like a general question, but I just need some basic guidelines to start with. Cheers!
I think transitioning to ThymeLeaf is probably going to be the easiest for you, but Angular is a great choice as well, and from there it is up to you. Would you rather use mostly expressions similar to JSTL expressions, but in Spring's SpEL language, then use ThymeLeaf, or would you rather use JavaScript, then use Angular. It just a user's preference for what you are doing.
The fragmenting portion (header, footer, body, etc..) is native to both frameworks. It just depends on which one you want to use. Whatever you go with, to load specific sections while not rendering the others, is going to require AJAX and for you to feel comfortable with how the template frameworks work.
I would suggest reading up on both of them to figure out which one you feel more comfortable with.
Angular
Thymeleaf
Both of them have great documentation for beginners and the Baeldung and Mkyong have good walkthrus for ThymeLeaf. Angular's documentation I found good enough on its own.
For a loader, you can do with simple CSS and JS. There is a ton of demos out there on how to do full screen loaders and how to turn them on or off with JS or CSS. IHateTomatoes has a good article about how to build a full screen loader, that has a No JS fallback option and should give you a good starting point.
Your point about it needing to be secure is a whole other monster. I would look into Spring Security. It's relatively straightforward, especially when using Spring Boot. If you want it can control the users session and assist in preventing session jacking, add CSRF to prevent cross site forgery, control permissions to urls and on down the line, or not. It all just depends.
Either way, don't randomly stab at security, it will end up in something that you feel is secure but it is not, which leaves you and your users in a very bad spot. Again, Baeldung has a great walkthru on the user registration and login process that can help get you started with Spring security and how to tie everything together.
Pretty high level answer, but hopefully gave you some good starting points and some resources.
Build apps decoupling frontend from the backend.
Always build apps following the "The API-first approach"
The API-first approach involves setting up the foundation of your app, which is the application programming interface
For me the differences between Thymeleaf and Angular:
Using Thymeleaf: You don't need to create Restful/web service endpoints on your frontend side because you just need to make calls to the backend from the frontend itself.
Using Angular: Besides of your Restful/ web service endpoints on your backend side, you have to build Restful/ web services endpoints on your frontend side because you don't want to expose direct access from Javascript code to the backend.
Hope this helps and happy coding time!
I just wondering what is the technique of creating a single page website by using javascript without using framework like ember js / angular js.
For example in php like they can get
example.com?view=homepage
Can easily get the view and load/display homepage and load homepage's content.
What if in javascript if want to load another page/content?Any technique for building it?
I just building with a simple function like
$("#otherpage").hide();
$("#homepage").show();
I don't know is it the best way to develop a javascript single website page with this way?Or any technique that you all can suggest, cause I need learn from basic, need use javascript to explore and create a single app page without php.
Thanks lot
If it was that easy, do you really think Ember, Spine and Angular would be that widely used?
Snarky comment aside, building a page that refreshes like what you've done, while simple and rather easy to modify, falls very short on quite a few things:
For sites larger than a couple of pages, your HTML markup will become MASSIVE. Not just that, but you'll have to run every single piece of code on every page...per page. Say hi to insane overhead, both on bandwidth and on server-side processing, even with caching.
If you want to dynamically update part of a page, you'll need to use AJAX anyway. Why would it suck to write stuff using an MVC approach from the get-go, rendering data as you go along with AJAX, rather than brute-feeding the entire DOM?
What is the problem with Angular, anyway? Widely used, bug-free, unit-tested, built by reliable people, and if a bug does go through, you can be sure that the community will fix it quicker than you could
If the last comment didn't dissuade you from building your own to replace an already-existing platform, I would strongly recommend you build your JS to be fed data (JSON or otherwise) from your server and to dynamically update the page. You might not want the full-blown MVC approach, but at least the MV part of it. This will also allow modularity.
AngularJS uses two-way client side data binding (from AngularJS Developers guide):
Has anyone consider using mix of server side templating engine with AngularJS two-way client side data binding. Something like this:
I am thinking about using AngularJS just for parts(components) of the page? Would it be good idea?
I would like to hear if you already had experiences with similar approach and what were drawbacks and advantages...
Angular is a complete UI rendering client framework. You can feed data into it, and it will render the proper html. On it's own Angular is a templating solution completely de-coupled from any server.
What you're attempting to do, is re-couple your Angular application to your server. It will be more work, there will be very few benefits, and you'll lose your ability to switch server technologies but keep your angular application untouched.
In essence, you don't want to do this for the same reason you wouldn't want to have your server rendering JavaScript for you... it's just less obvious because of all of the years we've been rendering all of our HTML at the server.
The end result is what's important. That the UI works properly and the application is easy to maintain. If you find your solution to be easier to maintain, then you should do it. I have a hard time imagining much being easier to maintain than straight HTML and JavaScript with a server that does nothing but host JSON.
I had the same dilemma as you have, I come from a background of using SMARTY as a server side template engine and we recently started using AngularJS.
I think mixing both solution would be appropriate in the the essence of total separation. i.e don't mix part of your page with both technologies but use both technologies separately.
For instance if you have a listing page where users will not interact with it at all, you may use server side template perfectly.
But if a page involve lots of manipulation and user side interaction in this case Angular is what you should use.
If you are using SPA (single page application) don't use server side template at all.
In a cordova app we recently made, we used a kind of a mix. Fix content like forms, lists, headers and menues we did in the angular way, some parts like content from an RTE or often changing templates we added with the directive ngBindHtml. The idea behind is to be flexible in the content pages of the app if the client want to change layout or want to put currently unknown content to it.
But i would suggest: if you can easy maintain the app (no long deployment/approval process) you should do it the angular way (but with no SEO in mind;).
At work I have been thrown in the deep end. A customer required some functionality on the web and one of our devs knocked together an ASP.Net webforms project.
When I started, because of constraints I got handed this project. I am not a web dev (I've dabbled) but because of the work I have put into the project, the customer is now looking for more functionality to be built into the web solution.
I would like to take a look at MVC (on my own time). With a view of converting the project to it. I come from a Xaml background so MVx jives with me.
I seem to have most of the basic theory nailed down except for one thing. What is the best way to use JQuery on the view?
Should the controller just pass back semantic data and the view (via JQuery) makes it pretty / unstatic (with help from JQuery UI).
I am confused but from what I can gather is it correct to assume JQuery (in terms of MVC) is like a client side View engine that would handle things like theming, hiding controls, simple validation, popups, etc?
jQuery (and JavaScript in general) can be used to enhance the behaviour of a page. I say enhance, because it should basically work without JavaScript. About 2% of users do not have JavaScript enabled.
CSS should be used to enhance the presentation (or styling) of a page.
The HTML itself is effectively a vector for your raw data which also provides a semantic context. For example, data in a p tag means that that data is a paragraph. Browsers have CSS defined for HTML elements so that by default, the raw data with a semantic context will look vaguely sensible.
So, with regards to "is it correct to assume JQuery (in terms of MVC) is like a client side View engine that would handle things like theming, hiding controls, simple validation, popups, etc?":
Theming should be done using CSS, as it is presentation. The theming you get from the jQuery UI library just gives you some CSS, which is fine.
Hiding / showing content based on events, popups and validation should be done server-side, but JavaScript can be used as well to enhance the behavioural experience.
Pretty much exactly as you said, the controller should pass data to the view which should be rendered using HTML and structured using CSS.
You can then use jQuery to add validation/dynamic effects/ajax etc.
I think you should see Javascript more like an addon to mock things up. For example:
You've got a serverside validation, but you don't want to reload the whole page all the time, then the javascript is good, but it's an addon, because when you don't have a serverside security, someone who hasn't got javascript turned on, or simply doesn't have it, is going to bypass your security easily.
Jquery in this case, is to make those tasks easier to implement.
I know in ASP.net the hiding of controls and the form submits are standard javascript. But it isn't good practice to do this.
Implementing it in MVC is easy as you just need to put it in the scripts map and then load it with a method in your cshtml page.
For more information about how to build your webpage for alot of browsers, i would recommend you searching after progressive enhancement.
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.