2

I have everything I need in 2 services in form of REST api's, is it a good idea or even possible to replace my existing asp.net app by writing ONE single html page (embedded with Angular templates) invoking the web services from JS controller? Then that html page will be published onto production IIS

My existing asp.net app to be replaced is composed of two parts: building query to acquire data and calling another app to decipher the acquired data.

5
  • 2
    It's basically possibly. If it's a good idea would depend on what your current site does and how complex it is. You may end up with a unnecessarily large site which everybody must load though they may use only a very small amount of functionality (good caching strategy may be a workaround especially if the sites code itself doesn't change often). But there is no clear rule. Apr 26, 2016 at 20:59
  • Lets add some drawbacks. If your app business is at client-side, I wonder if you are falling into a sort of segmention due to the different existing browsers. You will be forced to deal with cross-browser issues. And cross-browser means also browsers for movile devices (Tablets, Smarpthone,...). It will force to you to be extremely conscientious in your development, because to make crap devs at client-side is way easier than to make'em at server side. Another drawback, could be, the security. Javascript is quite easy to hack. However, you will get some advantages in return
    – Laiv
    Apr 27, 2016 at 10:19
  • 1
    @Laiv not necessarily - Microsoft managed to force people to use IE6 to use various intranet style web sites after all. You might want to code for the lowest reasonable denominator, but in an corporate setting you can dictate the browser. For public web, the fallback is to provide a simple version with limited functionality. (though this doesn't in any way detract from your comment about crappy devs)
    – gbjbaanb
    May 18, 2016 at 12:55
  • Crapy code is what I have done once or twice when I new on jQuery and I had to develop a client side app (some years ago). Now that code (which may seem hilarius for many ppl) is almost impossible to migrate, hard to maintain and a pain. Not even intendesdly I have developed nothing so hard to maintain at server side. These things happens. So often. Plus that client side app was out-dated 1 month later when jQuery released another version. Year later Angular was released... And so on. It wouldn't be so dramatic if client side app were not so complexe. If it would not have all the business.
    – Laiv
    May 18, 2016 at 21:17
  • One more thing. All the these glamurous client side apps made up till now, depens totally and inconditionaly on the "good will" of browser providers. So better be sure that your browser (1 or any you supports) is not going to turn into a IE8 or earlier, where MS just invented its own html, CSS, Javascript interpreter ignoring standards or W3C consortium... Too many risk out there and I barely can manage any.
    – Laiv
    May 18, 2016 at 21:23

3 Answers 3

4

This is the approach which is used by many web applications.

Should you do it? It depends. The full-AJAX approach has its drawbacks:

  • SEO. For an interactive application which handles user content, such as GMail or Slack, or any other content which is not text, images or video, such as Google Maps, this is a non-issue: there is nothing to index. For websites which are based on public content, such as Stack Exchange, it is crucial to provide access to all content without requiring JavaScript.

  • Accessibility. Governmental websites in many countries should follow strict accessibility rules, which usually means being able to use the website without JavaScript. Some non-governmental websites in specific sectors in some countries have to follow accessibility standards too.

  • Bandwidth impact. If the access to the first page is immediately followed by hundreds of HTTP requests, this could quickly become a problem for both the bandwidth and the servers.

    When used cleverly, AJAX makes it possible to lower the impact on the servers and the bandwidth by serving only content which is absolutely needed by the user (and especially serving dynamic content in a compact JSON form instead of not so compact HTML, and moving static content to a CDN). However, I rarely see applications which use AJAX cleverly, leading to increased footprint.

A few notes:

  • AJAX is a tool, not a goal. Don't make a full-AJAX web app just because you can. Do it if you know that it brings something useful (such as increased performance) to your users.

  • Don't be afraid of mixing different approaches. Maybe a part of your web app has static content which should be indexed and it makes sense to make it under a form of ordinary HTML pages, while another part is centered around user content presented in a very interactive way; here, AJAX makes sense.

2
  • It is possible to simultaneously provide an AJAX-oriented approach and an indexable site. So long as your individual ajax "pages" have urls (usually only the bots follow the real urls, with the users being "navigated" via the history API), even an AJAX-ified site can be indexed. Some frameworks are designed to provide strong support for a hybrid approach, providing JS users/bots with a more performant site while generating pages for non-JS users/bots. ReactJS w/NodeJS is a good example of this. Also, take note that GoogleBot has had strong javascript for a while.
    – Brian
    Apr 27, 2016 at 13:09
  • Is there a good book (condensed) to read about "How to implement pure AJAX cleverly?" that has "clever" examples? Thanks
    – Jenna Leaf
    Apr 27, 2016 at 14:42
0

Yes you can do.

Is it the right way : If you are thinking of single page mentality you should consider using lazy loading for images and if possible data.

Alternatively you can create dom elements dynamicly so first load and render of page will be quicker. But it will make user wait for a few miliseconds for each data transfer.

Another way is to use js libraries. Jeasyui is a perfect one. I have used it for a big project and it was satisfying. Its performance and componemts are satisfying. This method is similar to second one but a clearer code is a plus.

0

Yes I did it!!!

var app = angular.module( 'ngApp', ['ngGrid'] );
app.controller('appController'

, function ($scope, $http) { initializeScope( $scope );

$scope.GetData = function () {
    $scope.qryStr = ( function ()
    {
        // bldg your qry ... ;

    })();
    var config = { header: { "Content-Type": "application/json; charset=utf-8" }, xhrFields: {withCredentials: "true"} };
    var qryStr = JSON.stringify( $scope.qryStr );
    $http.post( RESTUrl, qryStr, config )
        .success( function ( response, status, headers, config ) {
            $scope.gridOptions = {
                data: response 
                , showGroupPanel: true
            };
        })
        .error(function (response, status, headers, config) {
            alert(qryStr+ " is failing!");
            $scope.errmsg = "<hr />status: " + status +
                "<hr />headers: " + headers ;
        });
    }; //GetData
});

HTML :::>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="script/jquery-2.1.0.js"></script>
<script src="script/angular.js"></script>
<script type="text/javascript" src="JS/appController.js"></script>
</head>
<body ng-app="ngApp" >
<form ng-submit="GetData()" ng-controller="appController">
<div id="div_srchForm"> {{ ... your ng templates }}   </div>
<div id="doMySubmit"><button type="submit">Submit</button></div>
<div class="gridStyle" ng-grid="gridOptions"></div>
<div id="div_err">{{errmsg}}</div>
</form>
</body>
</html>
3
  • 2
    First: NEVER send SQL from the client to the server. Send the data and build the SQL from it, with lots of validation and checking. Second: never use 'ur' for 'your' :-)
    – gbjbaanb
    May 18, 2016 at 13:00
  • I agree. I am considering some uglifying tool to minify it (encrypt?) and to make it more machine less human. You are welcome to give me some recommendation which is the best uglifying tool. Thanks.
    – Jenna Leaf
    May 18, 2016 at 13:25
  • 1
    "uglify" simply compresses the js text, it does not encrypt it at all. Do it right or be Bobby Tables. Try Uglify2
    – gbjbaanb
    May 18, 2016 at 13:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.