My website is an ajax single page application with serverside rendering. What are some javascript framework i can use for made a better organization of my javascript code?
BreezeJS you can use for rich data centric apps, which can be used with knockout or angularJS.
I prefer u to use HotTowel SPA template and take a look on this link
http://www.johnpapa.net/spa/
And before asking any questions You should be clear for what you need and why u need. So take your time and look around you will get.
You can look into breezeJS which is used to build rich Data-Centric application, for DOM manipulation you can use some JQueryUI or KendoUI, for dynamic Data bindings which will allow you to change the content of your Views you can prefer Knockout or Angular. Using AngularJS will be much appreciated as it provides rich AngularUI which helps you to change your view to manipulate DOM. Based on type of application you want to develop, you can select from the above suggestions.
I used to utilize MVC 3 Razor engine to render pages. Sometimes I had to use AJAX calls to transfer Razor-rendered HTML and inserting it into the page using JQuery. As new project is starting, we do consider to utilize MVC 4 Single Page Application framework which is new to us. I took the first glance at it which left me with mixed feelings:
On the one hand it implies all your data are transferred by JSON and client does all the job to render them and encode some UI-related logic which is great for server and network performance. On the other hand the client (HTML+JavaScript) becomes much more heavy with a bunch of magic strings and hidden relations inside it which seems to be hard to maintain. We got used to VS intellisense, type-safed .NET server code to render pages which we have to exchange for client scripts and Knockout binding statements in case of SPA.
I wonder are any prons and cons of using SPA comparing to Razor, other that this obvious one I've mentioned here? Thanks
Razor is a server based technology where SPA (Single Page Application) is an architecture approach used on the client (web browser). Both can be used together.
From a high level, SPA moves the rendering and data retrieval to the client. The web server becomes a services tier sitting in front of the database. An MVC pattern works best when using SPA. Frameworks like Knockout.js and Backbone.js can be used for this. The net results is a rich responsive desktop like experience.
To achieve this you'll need to be a descent javascript programmer or be willing to learn javascript.
Yes it's moving business requirements from C# into javascript. In Visual Studio there is limited intelli-sense for javascript. To have confidence in your javascript you'll need to lean on unit testing. The up side is the rich user experience (think gmail or google maps).
I think it sounds like you are already fairly well apprised of most of the trade-offs here; you'll have reduced network load with SPA, and will shift a measure of the processing to the client. You will, however, increase the complexity of your code, and make it slightly harder to easily maintain the system (simply because of the increased complexity - not due to any architectural problems inherent in SPA).
Another thing to keep in mind is compatibility. The reason I mentioned a "false choice" in my comment to your question is that to keep the site usable for folks with Javascript disabled, you will still need to provide regular, whole-page views. This is also a good idea to do for the sake of SEO; a crawler will browse your site as a user with JS disabled, and can then index your site. The site should then handle such incoming URLs properly so that those with JS enabled will find themselves in your SPA looking at the same content (as opposed to being dumped in the "no JS" view unnecessarily).
There's something else I'll mention as a possibility that might help with the above, but it breaks the ideals of an SPA; that is, using Ajax-loaded partials in some places, rather than JSON data. For example, say you have a typical "Contact EMail" form on the site; you want that to load within the context of the SPA, but it's probably easier to do so by loading the partial via AJAX. (Though certainly, yes; you could do it with a JSON object describing the fields to display in the e-mail form).
There will also likely be content that is more "content" than "data", which you may still wish to load via partials and Ajax.
An SPA is definitely an interesting project, and I'm about to deploy one myself. I've used a mix of JSON and partials in it, but that may not be your own choice.
My project's domain is of eTendering. And we are planing to use Spring and Hibernate in the architecture and in presentation Spring MVC but we want look and feel like silverlight of .Net or Flex of adobe in short we are planning for Ajax framework in presentaion. So SpringMVC will be worthfull? I have seen wicket and openxava but I am still confused so please suggest correct option in terms of my domain's complexity.
Depends on your needs:
Spring MVC - this option will leave you with writing AJAX on your own (via JQuery for instance) along with HTML and so forth. It might be tedious, but you're controlling everything. It's also up to you what will be the quality of your resulting HTML and how good it will be indexed by SEO.
JSF - this option provides you with a number of components and allows you to create AJAX based forms and handles it out-of-box. But when it comes to writing custom components, it won't that easy as just writing JS/JQuery on your own. Also it generates not that pretty HTML which is not of that good quality and you might be less indexed by SEOs.
GWT - this choice would mean that you don't write JS, instead you write logic in Java and then it transforms to JS. From one hand it will provide you with good-looking AJAX-based app where you don't need to write JS, from the other hand it's a) pretty complicated to write really good-looking apps UI b) it will add another step in your development cycle (it takes pretty much time when you generate that JS) c) it almost won't allow your pages to be indexed. Also, if it comes to such derivatives as SmartGWT, they provide a large set of cool-looking components, but they always require money for support.
Vaadin - this is AJAX based framework that partially generates Java to JS, but it also sends requests go server for logic execution (of course in GWT this happens as well, but not that often, GWT tries to execute logic on client). It takes less time to compile sources to JS and it's also almost impossible to make pages being indexed.
ZK - another AJAX based framework. unlike other frameworks that allow you to work with only one pattern, it can work in MVC, MVP, MVVM modes. It doesn't compile Java sources to JS thus all the requests go to the server (I've heard about internal company's benchmarks that showed it was actually faster than GWT, but I think it depends on your processing logic). SEO won't make it with ZK at all, but it's possible to include ZK components into JSP pages (though this functionality is not free) which makes it possible to kill both birds. It will be not trivial to write your own components with ZK, but it has a wide range of ready-to-use components.
So you should consider several things: SEO, money you can give for the framework, how much AJAX you need and do you want to write it on your own, etc.
Also pay attention to those patterns I mentioned: MVP for instance is suitable for complicated interfaces and is supported by GWT, Vaadin, ZK. MVVM is very cool because of its binding and is supported by JSF and ZK.
I was reading about JSF that it's a UI framework and provides some UI components. But how is it better or different from number of components that are available from jQueryUI, AngularJS, React, Vue.js, Svelte, ExtJS, or even plain HTML, CSS and JavaScript.
Why should someone learn JSF?
JSF to plain JSP/Servlet/HTML/CSS/JS is like as jQuery to plain JS: do more with less code. To take PrimeFaces (jQuery + jQuery UI based) as an example, browse through its showcase to see complete code examples. BootsFaces (jQuery + Bootstrap UI based) has also a showcase with complete code examples. If you study those examples closely, then you'll see that you basically need a simple Javabean class as model and a XHTML file as view.
Note that you should not see JSF as replacement of alone HTML/CSS/JS, you should also take the server side part into account (specifically: JSP/Servlet). JSF removes the need of all the boilerplate of gathering HTTP request parameters, converting/validating them, updating the model values, executing the right Java method to do the business stuff and generating the HTML/CSS/JS boilerplate code. With JSF you basically end up with a XHTML page as view definition and a Javabean class as model definition. This greatly speeds up development.
As with every component based web MVC framework, you have in JSF less fine-grained control over the rendered HTML/CSS/JS. Adding custom JS code isn't that easy as you have to take the JSF view state in the server side into account as well (e.g. enabling a disabled button in JS side won't enable the button in JSF side, which is in turn a huge security advantage). If that is however a major showstopper, then rather look for an action based web MVC framework like Spring MVC. You'll only take into account that you have to write all that HTML/CSS/JS code (and prevention against XSS, CSRF and DOM-manipulation!) yourself. Also if you fall back from Facelets to JSP, you'll miss advanced templating capabilities as well.
On the other hand, if you have a big JSP/Servlet/HTML/CSS/JS/jQuery based website and you'd like to refactor the repeated JSP/Servlet/HTML/CSS/JS/jQuery boilerplate code into reusable components, then one of the solutions would be JSF. Custom templates, tagfiles and components can aid in this. In that perspective, JSF stands above JSP/Servlet/HTML/CSS/JS/jQuery (and that's also why it's pretty important to understand those basics before diving into JSF).
You can find a real world kickoff JSF based project here: Java EE Kickoff App. You'll see that it contains next to JSF as good HTML5, CSS3 and jQuery.
See also:
Difference between Request MVC and Component MVC
Difference between JSP, Servlet and JSF
What are the main disadvantages of JSF 2.0?
Is it possible to use JSF+Facelets with HTML 4/5?
When to use <ui:include>, tag files, composite components and/or custom components?
JSF was created to make it so that java shops didn't have to learn stuff like jQuery and build complex JS but instead focus on a purely Java stack. In a world where time is money and lots of places already focusing on Java development, one less language/piece in the stack makes training and maintaining faster and thus cheaper.
I'll add that JavaScript is easy to become a maintenance nightmare on large teams, especially if some of the developers on the project are not highly web savvy.
With Javascript and frameworks such as jQuery you have full flexibility and full control . With ext's etc you lose much control and must adapt to the framework. With JSF you totally lose control and must totally adapt to the framework. You're invoked in lifecycles etc. and finally you have no control when the call to the server can be made and where not. If you are to do something considered 'special', you're in very hard position. And in JSF world even such basic things as multicolumn table sort or fields where you can type only limited set of characters (such as number field) are considered 'special'.
However, the more flexibility you have, the more errors or bad practices you can made. High flexibility works only with highly intelligent programmers, others will turn the project into unmanagable nightmare.
But, with JSF and its limited flexibility, there's always only a few (or even only one) correct way to do something. You are very limited, you can't make shortcuts, you must write more XML etc. - but when adapting to standard, there's better control on the code the unexperienced or low-skilled programmers will produce. As a result, big corporations love JSF because it is 'safer' for them.
When I moved from GWT to JSF, I was shocked, how many things, that was natural to me, was considered highly untypical and how much simple things were so hard to achieve. What's more, even making the smallest changes, such as adding ':' sign after label, which in GWT/jQuery powered app would be changing one function generating label, required changing dozens of files with localized properties, which wasn't even considered by anyone except me strange...
The benefits of using JSF are not only in generating xhtml + css + js. Sometimes JSF imposes a restriction on the markup you can generate, like any component based framework. But JSF is not just for that, its lifecyle helps greately. After validating the input it can update the model and sync your server side beans without any effort. you just say "whatever the user types here, check if it's a number, if yes then store it in the property YY in object XX" and JSF will do all that.
So yes, you can still use JQuery, JS, etc. But JSF provides many benefits when it comes to writing server side code and saves you from a lot of boiler plate.
I strongly disagree that jsf adds anything. It only adds overhead. Doing ui stuff on the server is the most ridiculous thing ive ever heard. And javascript on large teams works great - its called reusing code.
Just wrap the jquery in some jsp tags, thats all you need and youre done, and dont endure the.shackles and scalability issues with.jsf and richfaces.
Having worked with JSF, Spring MVC, Struts, Grails, JQuery, and ExtJS my opinion is that Grails + ExtJS is one powerful combination.
I would pick Grails over JSF any day. I like the completeness of ExtJS as the client side framework and library, but it comes with a steeper learning curve than JQuery.
Here are the biggest differences between jQuery & JSF:
no MVC architecture
no state control (store date in session or conversation, auto-clean up, etc.)
no (default) validation library
no templating library
no advanced navigation/routing
client side
jQuery was never intended to be used as a full stack webframework. It was more intended for replacing low-level JS code so that writing JS becomes easier and more powerfull in less lines of code.
And it should thus mostly be used to add behaviour on HTML elements.
Having used ExtJS framework for a large web application, I know how easy it is to use. The ExtJS (Schena) is best suited for (Oracle 11g) database interactions in MVC architecture. The View was for the visual / user interactions. The controller specified the 'processing' and the triggers that needed to be used form the PLSQL packages (the API for the CRUD, SQL select queries etc.). The Model and the store files were used to 'map' the data items to the Viewer / inputs.
ExtJS is not suitable for non database intensive web interfaces - where Angular JS may be a better fit.
I have inherited a DotNetNuke codebase and have come across areas that have included both the AjaxControlToolkit and the Telerik RadAjaxManager. There are plenty of instances where one is preferred to the other but with only a slight bias towards Telerik in the code base as a whole.
I am familiar with the MS Ajax Exentsions but haven't used either of these frameworks before.
The code has to be refactored and I only want to use a single framework. The work involved to do this seems equal so I wonder which would be the better to retain?
The Ajax parts of my site show real time prices recieving JSON from a webservice and process trades on the prices. A few other Ajax requests take place but just to display notes to the user.
The code base also makes extensive use of jQuery so would I really need these frameworks if I use that instead? I could also use the MS Extensions that I'm already familiar with or even hand-roll the calls but whichever way, I want a single coherent approach.
Looks like Simone Chiaretta was already surveying the webspace for the popularity of Ajax frameworks and his results are in; Ajax Survey 2009: jQuery and MS Ajax are Almost Tied Among .NET Developers
(source: dzone.com)
So by the wisdom of crowds and the unnecessary use of Telerik in more than just this place of my code base I'm going to go with AjaxControlToolkit for now and see if I can't transition that to jQuery later.