Desktop & Mobile development strategy -> MVC or HTML5/WebAPI

[Ben Hayat]

Hello team;

I'm asked to provide a good strategy for the following case. Then I'll pose a few questions to the team to see what the advice and the strategy would be:

App requirements:

• The app. needs to be able to run on desktop, tablet & mobile (all as browser app). The desktop version will also perform the "Admin" routine that is not available on mobile. Basically, 60% of the app are the same on all three devices
• The app. is a very LoB app, meaning lots of data will be retrieved from Database and most contents will come from database. [Makes a great MVC candidate]

Question:

• As we have the MVC wrappers for the desktop version of KendoUI, do we also have MVC wrappers for the Mobile/Tablet version? This way, the developers can approach building the entire app (Desktop & mobile) in MVC 4 platform?
• If not, does this mean the desktop needs to be done in MVC and the mobile backend in WebAPI with HTML5 frontend?

So, as the title of this post goes, what strategy does Kendo team suggest for building an app for three devices based MSFT stack that minimizes duplicate of code between devices?

Note: Client has indicated, they prefer to do the entire development on MVC [for desktop] rather than MVC + WebAPI [for mobile].

Your suggestions & guidelines will be much appreciated!
Thanks!
..Ben

[Ben Hayat]

Any comments?

I've made recommendation to this company to use Kendo UI MVC suite and they want to be able to use one pattern of programming for building desktop & mobile using MVC & Kendo.

Thanks!
..Ben

[Pat Tormey]

Sorry Ben but I need to be blunt here.. Unless you've written an MVC Html5 KendoUI application you should not be giving this advice. 

KendoUi is a very nice emerging product that is full of promise.. Or full of promises depending on your point of view. 
For example there is no simple input text control to allow collecting just "last name" with out jury rigging the autocomplete box to keep consistent styling.. Ditto on Radio buttons and Checkboxes.. 

And were did you see a solution to data mapping the Razor Model object into the Kendo Datasource? 

I think that KendoUI is converging on a cross platform unified solution... But it's a very new product. 

Please correct me if I'm wrong.. I've been wrong before so I won't be offended.

Pat NH USA

[Ben Hayat]

Thanks Pat!

p.s. What do you suggest Pat?

[Vesselin Obreshkov]

We are in the process of completing a 1+ year  project that started off purely MVC 3 and Telerik Extensions for MVC (Kendo didn't exist yet then) and we have since migrated out whole dashboard to Kendo UI.

Your requirements are very similar to what we are trying to accomplish. We haven't gotten to the mobile part yet but it's well on our roadmap. Basically what we use today is all our transactional data is managed by Entity Framework and Web API. Everything on our site from registration form on the www. to every single drop down on our dashboard. uses JSON data from Web API. For the dashboard we use the Kendo MVC Extensions, simply because it's easier and quicker to write things and also migrating from the Telerik to Kendo controls was a no-brainer for the most part.

For the mobile stuff, you'll have to rely on the JavaScript/HTML syntax as there are no MVC wrappers for that (yet). That being said, if you want a consistent coding environment all around, then go all HTML/JavaScript and skip the MVC wrappers altogether, however they make thins A LOT simpler. Most of our dashboard controllers have action methods similar to the sample below. This example does everything to show a grid bound to whatever resource we need with server paging, sorting, filtering, etc.

[HttpGet]

public ActionResult MyAction()

{

  return View();

}

  

[HttpPost]

public JsonResult MyActionJson([DataSourceRequest]DataSourceRequest request)

{

  var data = this.api.GetResource("resourceName", request);

  return Json(data);

}

Basically, you will find that you'll end up struggling to implement a lot of your own stuff if you chose to not use the MVC extensions. It's not just Html helpers - their IQueryable extensions are really good and make things very simple. Even in our case with custom sorting and filtering, we were able to easily write helpers to map and remap our sorts and filters to their SortDescriptors and FilterDescriptors. 

Things to keep in mind with Kendo is that the Kendo DataSource (which is the core for all data binding of controls) does not interpret the types of related objects when using AJAX binding with JSON so you will need to use projection to flatten your business objects and complex types to simple ViewModels before sending them to your client and then you need to remap your ViewModels back to your business objects. We use AutoMapper for our projections of properties, filters and sorts. I can send you source code samples (and I'm trying to release some of our stuff like this too in their code library if I get approval) if you're interested. 

I don't see a single reason for you to not use Web API for everything from desktop to mobile though. It is an extremely flexible solution, you can have a single source for all your data that way and not have to re-invent the wheel each time for desktop or mobile. Alternatively, if your data needs to vary so much between mobile and desktop devices, there are Web API solutions for that that route to different Mobile controller if the request is coming from a mobile device.

As to what Pat Tormey is talking about having to "jury rig" the autocomplete box to get consistent styling, I am not sure unless he's not aware of the Kendo CSS classes such as k-input, k-button, etc. Sounds like a classic example that you need to learn and know your tools. They have great documentation site and examples and are adding new stuff all the time. Six months ago you had to literally dig through .js and .css files to figure stuff out. Now they have even documented their ASP.NET IQueryable extensions and every little class and interface they use.

[Ben Hayat]

Vesselin, I made a full reply to your wonderful post (thank you), but now I see it's not showing. I wonder why. If doesn't show after a while, I may have to re-write it again.
..Ben

[Ben Hayat]

Vesselin, instead of re-writing the lost post, I'll start a new one, but more of a brainstorming with your past/present experience and what this app is supposed to accomplish.

This app has two fundamental different users:
a) First set are Admin users at corporate office that use desktop to enter lots of data (CRUD operation). Some of these CRUD operations are complex due to hierarchy level. Validation and workflow is important to ensure the right data is captured. These data entry pages account for 60% of the app. size.

b) The second set of users, are consumers. These consumer's pages account for the other 40% and it's mostly presentation and a little data entry. The consumers can use a Desktop or Tablet or Smartphone. A different UI than Admin (CSR) users.

My plan is to create the Admin section in MVC 4 [hopefully using Kendo MVC helpers] to create all these CRUD pages and take advantage of MVC framework.
Then for the Consumer module use WebAPI and HTML/JS to build Ajax pages that are fast and only consume JSON than a full page of HTML like the MVC version.

The Consumer version, we both agree on WebAPI. However, it's the Admin module that I'm debating.

See, the management needs to get to the market and I feel doing the Admin module in WebAPI than MVC is too time consuming. Too much time spent, will also cost me as well, because I have to give a fixed quote.

Any pros & cons are appreciated!
Thank you for your time!
..Ben