How to create a web application? - ajax

I have a question. I need to create a web application, which should work and look like a normal desktop app, so with windows, dialogs etc. without refreshing every time the site, but I am not sure what should I use for that. I have only a little experience with php (one rather simple site).
I suppose I need ajax on the client site to do that (maybe jQuery), but what should I use on the server site and how can I load e.g. whole page without refreshing site? Should I use PHP or python or something else? Maybe with some frameworks?
Thanks for any advice.

If you want to have rich client side interaction, consider using a MVC /MVVM js framework as:
backbone.js;
ember.js;
knockout.js;
angular.js.
Everyone has pros and cons, here you can find a smart comparison resource.
Once you download the bootstrap stuff [css, js, images], no page reloads will issue, and the app will flow like a desktop one.
All data is fetched from and persisted to the server: further request are made in JSON / XML format, in a RESTful fashion possibly.
You can setup such webservice in many many ways, among the others:
Sinatra (Ruby);
Symfony (PHP);
Django (python).

As I am more familiar with MS technologies I would use ASP.NET MVC, and then on the client side you can use Telerik controls which are good and free. jQuery is also a great option for the client side development. For developing ASP.NET MVC you can use the Visual Studio Express which is free as well.
However, I do not know your specifications. Maybe it would not be good enough for you. Another option that you have is using WPF (MS again), with which you can really develop very rich behavior web applications.

Related

Clarification of Web API in WebForm

I have created Web API.I know the Main advantage of Web API is cross domain application (I can call Web API in all platform). My question is ,Is there any performance issue When I call Web API in ASP.net WebForm???
I would like to know the below scenario
1.I Can use Direct SQL Query in .aspx Page
2.I Can use Web API and generate JSON to DataTable
I would like to know which one is fast and better to use.......
I have tried in JQuery,the performance is fine but I would like to call in ASP.net WEb Form
Where you call the API from or from what type of app makes no difference. Your issues are going to come from how you use it and what you do with the results of the calls.
Yes, you can get JSON data from the API and yes you can convert that to a DataTable, technically no issue there, but the performance will depend on how much data you retrieve in one go and how many transformations you go through to get it to the state you need for your webforms controls.
You're talking about using a dead tech ( webforms ) and trying to fit some things into how that works, which while possible, is not really the way to build anything these days.
SQL in aspx kinda says it all.Assuming you have an old app, that you just do updates to then just do what you can, but I would start looking into modern ways of building web apps. You don't have to keep using webforms controls anymore.
You can't talk about scalability when you still have stuff thrown in aspx pages. You need to start thinking about a proper separation of concerns, think about testing your stuff, retrieving only the data you need etc etc. Just because you add WebApi in the mix, that doesn't mean you'll get all the benefits, if everything else does not catch up to the required standard.
There is no inherent performance issue with using WebAPI, aside from the overhead of an additional network hop.
In real world terms, I think this would be negligible and outweighed by the benefits:
You get the 'cross platform' benefit you mentioned.
Better scalability as your 'service' and 'web' concerns are seperated and can be scaled appropriate to the load they need to serve.
The service layer functionality is re-useable, for example if you wanted to develop an app later.

Web-Dev with AngularJS: What kind of server software should I use?

I have a question about the concept:
I was out of the web development practices for ~3-4 years, and now, when I try to return to it and to adopt the last technologies, I am very confused.
In the past, I was used to use JSP/PHP/Java Servlets, or some other technology that processes the page in the server and then sends it to the client. For example (JSP):
<% for (String s : names) { %>
<% =s %>
</br>
<% } %>
If I understand correctly, nowadays, AngularJS should perform the loop on the client, instead of Java on the server, and the data should be achieved by the client in JSON format, using an AJAX call to the server.
Is my understanding correct?
If so - I think that all I need is a server that will enable me to define the AJAX functions - I don't need to mix server code with client code anymore (I.e. I don't need JSP / PHP / Java Servlets / etc.). So are there new simple server technologies that are designated to enables these AJAX calls? Which server technologies are recommended and commonly used for these targets in Java and in Python nowadays?
Yes, your understanding is correct. AngularJS is one option, there are other JavaScript frameworks that work in a similar manner - Angular seems to be the most popular at the moment.
As for the server, you can use pretty much any technology there, the standard is to provide JSON data through RESTful web services.
Node.js with Express is popular (and easy to use), if you want to use JavaScript on the server as well.
If you want to use Java, you can use something like JBoss or Jetty as a server and then expose your services using something like Resteasy as RESTful services. It's fairly easy to add to an existing application.
I recommend that you start with the Angular tutorial, which will go through many of these concepts in great detail. It's a good starting point.
As has been suggested, your back-end server will send a JSON to the client. The client can then render the HTML on the page dynamically using a front-end framework like AngularJS.
It doesn't matter what the back-end language is. However, for best performance, some people recommend that you put an additional back-end layer between your server and the browser where you render your HTML before sending it to the browser. They say this results in better performance and search engine optimization. Node.js works well as a rendering layer, so you might as well simplify your technology stack and use use Node.js for your entire back-end.
Also, server-side rendering is easier to achieve with some front-end frameworks than others. This is one of the reasons React has been trending lately. It's easier to achieve server-side rendering with it.

Front End Frameworks for RESTful backend

I am developing a RESTful backend using Spring framework. All the services are accessible through HTTP request methods (GET, POST, PUT, DELETE).
Could you please tell me what can the best combination of frameworks for front end?
Is it best to use SpringMVC or some other framework like Backbone is good enough?
If I am using SpringMVC for REST backend and also SpringMVC for front end then won't it be extra work doing same things again first for backend then for front end?
And most important I am confused about how can do the session management using front end?
Any help will be appreciated!
If you are looking into to make a SPA (Single Page App) make sure that you take a look at AmpersandJS -> http://ampersandjs.com/
Templates
Since you said "server-side" GUI, maybe you are thinking more along the lines of a template engine for creating HTML? This isn't really restful, but can be MVC like if you are forwarding from your Controller classes.
But PLEASE keep in mind that it would be a very BAD idea to try and generate XML or JSON data for consumption by RESTful clients (ajax) with either of these. Just say no to JSON creation from a template engine!
JSP is pretty much the standard for Java EE at the moment, or is most widely used. All you need is a compliant server, such as Tomcat/Jetty.
http://www.oracle.com/technetwork/java/javaee/jsp/index.html
Thymeleaf It looks a lot cleaner than JSP, and has the added benefit of not allowing all the pitfalls that can happen with a JSP (and there are a lot).
http://www.thymeleaf.org/
JavaScript:
When you say you are creating a RESTful backend, most people would make the conclusion (and rightfully so) that you are trying to develop a JavaScript MVVM client/GUI.
Kendo UI has a complete set of GUI widgets and MVVM framework that is specifically designed to work with a RESTful backend. But it's a paid for API.
http://www.telerik.com/kendo-ui
YUI3 (Yahoo User Interface) has a variety of widgets as well, and I've seen a lot of jobs requesting this. It has the advantage of being free/OSS as well. Older version are deprecated.
https://github.com/yui/yui3/wiki
knockout.js has been my favorite for MVVM engines that I've actually had experience working with. And it's simple to learn, in my opinion.
http://knockoutjs.com/
Angular.js Also free/oss, and works well with other GUI APIs.
https://angularjs.org/
I would suggest you to consioder Sencha Ext JS for front-end, it is one of the best framework and will work with RestFul back-end.
this is a good question, but I don't think there is a server-side framework out there specifically built to use a REST server backend. I think you could use Spring-MVC / Spring-Boot to get a good headstart, but you might also want to look into Rails or other Ruby any other modern web framework technology.

pjax or client side MVC?

i have to start a new project, a webapp with lots of forms and screens and i really don't know which technology fit best. The application is an ERP like app, with very few animations and lot of forms. The goal is to reduce at minimum reloads and waiting time, it has to be as close as possible to a normal desktop app (a lot of work to look like a marvelous VB6 app :-)
On the one hand we have client side MVC (backbone). It's cool to have all the code running on client but in my mind this implies repetition of lot of code (for example all models definitions) from server (PHP + Fuel). Sure once loaded all the informations task like paginations or grid work without any delay but it also present some problems of synchronization (other users can change data and i have to manually invalidate data on client).
On the other hand we have pjax. The idea is to make all the templating and so on on server, just implement a logic to return the page without the frame for pjax request or full page on new requests. No code duplication, very simple client side.
I've read the the story from basecamp and from twitter and both the point make sense to me. You can't relay on visitor computer (features, performance ...)
The more i think about it the mode i like pjax over MVC, but maybe i'm missing something. Which are the MVC advantages over pjax or pjax disadvantages over Client side MVC ?
Thanks a lot
Backbone.js is good for heavy, single page web apps that never truly post back, but have lots of ajaxian things going on, interdependent cascading dropdowns, etc. It has a very good API for events and collections. If you have plentiful client side javascript, it can be a helpful way to organize it. It is opinionated in the sense that it expects your server-side architecture to be RESTful by default, and you have to make some effort to use it for non RESTful APIs.
The project I'm working on is an ERP web app as well, with asp.net MVC on the server-side. I've learned that Backbone (with handlebars as the templating system), and .net mvc really don't play together that well. If you go Backbone, you really have to go full-hog (controller methods serve up json, that's it). On pages in this app that are more or less 'normal' web pages with some forms, Backbone is the wrong choice.
I just googled pjax for the first time, so I've basically just read the short description at the top of the page, but I suspect that might be the way to go for your scenario, in keeping with Keep It Simple Silly principles.

100% Ajax Websites

I have been looking at Hulu's new website and I am very impressed from a developer's standpoint (as well as a designer's).
I have found that, unless you switch between http/https, you are served content entirely from json requests. That is a HUGE feat to have this level of ajax while maintaining browse back button support as well as allowing each url to be visited directly.
I want to create a website like this as a learning experience. Is there any type of framework out there that can give me this kind of support?
I was thinking I could...
leverage jQuery
use clientside MVVM frameworks like KnockoutJS?
use ASP.NET MVC content negotiation to serve html or json determined by an accept header.
using the same codebase.
use the same template for client side and server side rendering
provide ways to update pagetitle/meta tags/etc.
Ajax forms/widgets/etc would still be used, by I am thinking about page level ajax using json and client side templates.
What do you think? Any frameworks out there? Any patterns I could follow?
It is always best to first build a website without AJAX support, then add AJAX on top of that. Doing this means that:
users without javascript can already access your website
users can already visit any URL directly.
Adding AJAX support can be accomplished by various javascript libraries. So that you can render json content, you will want to look at javascript templating. You will want to use javascript templating even on your server side for when you add AJAX support (file extension .ejs). This will probably require some appropriate libraries to run javascript on the server.
When you add AJAX support, you will want to use the "History.js" library for browser back/forward/history support.
Make no mistake. This is a HUGE project (unless your website only has a few pages). So it is going to take a LONG time to add all the AJAX support to the best possible standard.
to answer your bullet point about using the same template server side as well as client side: check outdust. It was originally developed by akdubya, but has since been adopted and enhanced by linkedin. They use it to render templates on their mobile app client side. Personally I've used it on the server side and it works great.

Resources