Server side language less views in MVC using javascript library/framework

Question

For a while i have been using javascript frameworks and libraries to handle views which is greate. Library like knockoutjs and framework like Backbone. Now i am thinking of using it in views when ever i work on any MVC. I have a few suggestions and few questions.

Passing data from controller to view.

After some research i found these three ways to pass data to views. Examples using php and knockoutjs

First

In controller (Codeingiter)

$data['viewData'] = $array;
$this->load->view('some_view_file',$data);

In view

var myData = '<?php echo json_encode($viewData);?>'
self.myObservable(myData);

Then using knockout bind data to view.

Second

<input type="hidden" value="<?php echo json_encode($myData);?>" id="myData">

Then using jquery

var myData = $('#myData').val()
self.myObservable(myData);    

Then using knockout bind data to view.

The third (Limited)

Make the data query string and then read the querystring with javascript to pass to knockoutjs.

OK. On page load these are methods to pass data to view instead of running ajax.

What i have in mind?

1. No looping or conditioning on view using php/asp
2. First page load should fill knockout viewmodel then with ajax, updated data will be easy to implement

Questions?

1. Is there more elegent way to pass data to view without reaveling to hacker?
2. Any security measures i should follow in this technique?
3. On browser with javascript closed, how to handle the application (Do i still need php/asp on views?)

Answer 1

I guess in order...

Is there more elegent way to pass data to view without revealing to hacker? Ultimately you're dealing with client-side code, therefore it needs to be bought down to the client and interacted with. You could obfuscate, but you'll ultimately need to descramble the results client-side, something that anybody above a script kiddie could handle.

For me, the pure AJAX approach sounds the most elegant so you're at least not rendering the data - but this is something that can be monitored through Fiddler or various debugging tools.

Any security measures i should follow in this technique?

I'm probably not best qualified for this question, but IMHO I would say that limiting access to the data (i.e. through authentication) is a start along with SSL. The above comments probably count here.

On browser with javascript closed, how to handle the application (Do i still need php/asp on views?)

I guess this really depends on your audience / client-base for the application. Is accessibility, for example, a key point? If so, then providing an alternative interface may be required. I'm sure you'll also find many opinions on the relevancy of JS disabled clients with today modern browsers and processing capabilities.

For my money I would recommend an approach of progress enhancement that would allow browsing clients of any configuration to come use the site, a site where you're using JS to leverage a better use experience.

HTH

Answer 2

You're overcomplicating: you don't need to load the page for the first time with a "server side hack". You can perfectly use the same AJAX to load the data from the server and bind it on the client side. You don't need to do the same thing in two ways: i.e. creating a "server side JSON included in your page", and then use AJAX to get the same JSON.

In PHP I don't know if there is a simple way to return JSON, but, in ASP.NET you can use ASP.NET Web API (better than MVC JsonResult) to return JSON form the server.

For the first page load, load a page which simply contains the KO templates, and when the document is ready (for example using $(document).ready()) get the JSON data using AJAX and bind it when ready. If you do it wisely, you can show "loading hints" in your page, and the page will look more responsive to the user. (Loading the first template is really fast, and then, when the AJAX responses are ready, you simply bind them and remove the "loading hints".

Some pseudocode:

<div id="templ">
    DOM template
</div>

<script type="text/javascript">
    var viewModel = // define the view model here... (1)
    $(document).ready(function() {
        $.getJson(...).done(function(data) { // load the data with ajax
            // load data in the viewModel
            // (1): ... or use ko.mapping to create the view model here!
            ko.applyBindings($('#templ')[0], viewModel);
        });
    });
</script>

NOTE: this is not well organized at all, but it's a start point to understand the basic idea. Your view model should include all the observables, and all the methods necessary to get/post data to the server as a reponse to the user actions.

It's even better to have a simple html template, and create a javascript module that:

• defines the view model
• loads the template
• defines function to get data from the server and load it into the template
• defines a function that appends the template to a DOM container, gets the data from the server and loads it into the model, and applies the ko bindings
• define additional functions to update the data on the client, and to post it back to the server

In a few words: don't mix up two technologies. Your life will be simpler if you only use HTML, KO and JSON. If you also use server sidegenerated JSON and HTML you'll get into trouble.