BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage Interviews Aditya Bansod on Building Mobile Web Applications using HTML5

Aditya Bansod on Building Mobile Web Applications using HTML5

Bookmarks
   

1. Hi everyone. My name is Srini Penchikala. I’m with InfoQ team and in this interview we’ll be talking with Aditya Bansod from Sencha team about building mobile web applications using HTML5. Hi, Aditya, can you introduce yourself to our audience and tell us what you do at Sencha and also what you are currently working on?

Absolutely, it’s a pleasure to be here today and like you said, my name is Aditya Bansod and I work at Sencha. I’m the VP of Product Marketing and what we are working on at Sencha is really try to build an application platform, a set of frameworks, tools and cloud services that help developers take advantage of HTML5.

   

2. Where does Sencha fit in the mobile development technology categories?

Srini’s full question: Thank you. Earlier today you spoke about building mobile web apps using HTML5. There are three or four different ways of developing mobile solutions, depending on how you categorize the solutions, whether they are mobile web apps using HTML5 or other technologies or the hybrid mobile solutions using technologies like PhoneGap, to access the native device features and also the third category is the native apps using ObjectiveC, Java, C≠ whatever and finally there are these mobile enterprise applications platforms, MEAPs, like IBM WorkLight, Oracle’S ADF Mobile technologies. Where does Sencha technology fit into these categories, is it like focusing on one category or more than one?

The way that our products really work is we focus on using the web as a technology platform, and so whether it’s HTML5, CSS or JavaScript, the core underlying techniques that our products leverage are these HTML5 web platform capabilities. So that means primarily the first two that you spoke about. So, mobile web applications built and delivered using the regular browser, www.mysite.com, internal.mysite.internaldns.com, and then secondarily all our stuff, since it’s built with HTML5 and with web technologies, we are fully able to be use it inside of native shells or hybridized. So, in SenchaTouch, we actually support and supply our own native packager, we call it Sencha Touch Native Packager, it’s a very clever name, but also developers are very comfortable and use our products with other packagers like PhoneGap or others ones that come in many other different platforms. So really our product’s focus on using web as a common technology but then using any distribution mechanism or any API enablement mechanism that works well for the developer’s needs.

   

3. What do you see as the current state of mobile development in general and mobile web development in particular, in terms of maturity and industry standards?

Srini’s full question: Good, sounds super extensive and extensible, so before we get into Sencha technologies specifically, let me ask a couple of general questions on the mobile development. So where do you see the current state of mobile development in general and mobile web development in particular, in terms of maturity, industry standards?

Let’s talk about mobile web development because I think mobile development is a whole, I’d like to believe I’m an expert but mobile web development is our bread and butter. So I think mobile web development and mobile hybrid development, we’re well on the path, the road ahead is still very murky, there’s many splits in the road and intersections that will come to, but we’re well on the way and largely this comes in a couple of very salient ways. First and foremost for business applications, for apps that people are developing for enterprises, for small and medium businesses, anywhere that a business app is being built, HTML5 in the mobile web have all the techniques and technologies under the hood in the browser platform that make that very easy to take advantage of. So I think that for where we look at the mobile web is kind of a holistic platform. We see that for the majority of enterprise and business applications, we’re very clearly able to say that “yes, we are 100% on the road, the car is running and we’re kind of at a good pace”. Broadly speaking, for overall advantages and overall capabilities, gaming and real-time communication, I don’t think we’re out the door yet. We’re still trying to find the keys for the car on that one.

Srini: Ok, that’s probably how it’s going to be on that one because mobile web will be the right solution for several use cases, but there will be some use cases that native apps is the only way to go.

I will always tell customers that and I will tell anyone that ask me about that you should absolutely go the native route when you’re trying these very high performances, 60 frames per second games, that sort of application, it’s the right choice, don’t fool yourself. HTML5 is great in a lot of cases, that is not the right one.

Srini: Same as how we have client/server and web applications today, just on the smaller devices

Yes, that’s very similar in that way.

   

4. Can you talk about the Sencha mobile application architecture, how it works and how it is different from other architectures in this space?

So, the way we approach mobile is we have our first and original product, it’s this thing called ExtJS. It’s used by a lot of businesses to actually build line of business, B2B, B2C kind of applications, and what we did we took the core foundation elements of this, our class system, our data package and improved upon them, made them more mobile friendly, made them so that they would work better in a mobile context and our flagship mobile product, Sencha Touch. So the core architecture of Sencha Touch is built around a common object oriented view of JavaScript that gives you extensibility, mixins, inheritance, all that kind of classic object oriented metaphors, plus a really rich data package that gives you the ability to read data off the network, fill it into data bound elements so that you can get one way data binding, and then you get this really rich capability on top of that with our component architecture, so you have lists and buttons and forms and panels and all this sort of stuff. So when all these pieces come together in this mobile architecture, you got a very mobile tuned, highly performant framework for building mobile applications that shares a very strong heritage with ExtJS. So we see a lot of developers that are new to Sencha coming to our products, building mobile first, we see this whole other group coming from the ExtJS heritage and now mobilizing their existing investments. So, our architecture gives us a lot of advantages in that way.

   

5. Is that the right skill set to have, like a lot of JavaScript experience?

Yes, I think if you want to build mobile web you should be familiar with JavaScript and I think largely we are kind of very fortunate that the web tool set, the web technology set is one of the most commonly known technologies that’s in the world, right? Now, whether you just say you are a website kind of hacker or expert in JavaScript, in scope chain management, all that good stuff, you’re building applications that require you to be a little more on the programmer or engineer side and so you have to apply to the same techniques in the JavaScript. People who are good engineers, generally, will find that having a little bit of JavaScript skills will make them incredibly successful web app developers.

   

6. Sencha has two flavors of products, one is a community free version of that and other one is the commercial. Can you explain what is the difference between those two?

Yes, sure. So, our frameworks products, ExtJS, Sencha Touch and Sencha GXT, these three products are offered in dual licenses, one is under the GPLv3, it’s the purest and original open source license, a rev of the original open source license, that’s available with all the terms and conditions that come with the GPL. They’re also available under commercial license, and depending on the product, that commercial license has a different price point. Our Sencha Touch product is a zero dollar commercial license, so our Sencha Touch product, you can use it with GPL, under the open source terms or commercially for zero dollars. And then pricing for the other products, for desktop software, ExtJS and GXT are available on our website.

   

7. So, let’s get back to the best practices in the space of, so what do you see as some best practices or even gotchas that mobile applications designers and developers should keep in mind either when they are migrating existing web apps to mobile or creating new mobile web apps from scratch?

I think the biggest one that any developer has to worry about, really, is performance. I gave a talk here earlier today at QCon, I had a really interesting question from the audience which was if you’re packaging an application, you don’t get the advantage of the SquirrelFish Extreme, the Nitro engine, and he is asking “do we have to worry about that as developers building applications”? I was like “really the first thing you are going to find, well before that, is your graphics performance”. You can make some bad choices along the way, that make web apps perform very poorly, you can make that wrong choice in any app platform, is really not a web thing or a native thing, if you’re not familiar or if kind of fall, these gotchas as you say, you kind of fall into a trap where graphics performance becomes a problem. So I think that’s kind of the first thing, that’s really the main one, which is like the biggest thing to consider, that’s kind of the gotcha, but the other half which you asked is best practices and I would really recommend for developers who are looking to build or use HTML5, to use a framework. Obviously, we have our own frameworks but there’re are many others as well you can choose from, I highly suggest ours because we’re used to build very scalable business applications, we removed a lot of the gotchas for you, but if you want to take advantage of that and be cross-platform, pixel perfect, pick a framework because it’s going to save you a lot of time and that’s probably the number one best practice I would recommend.

Srini: Ok, I think that graphics performance will be a big thing in the mobile space because that is the first thing the customer, the user sees, that is poor no matter how fast your app is.

You hit the home button and then you leave the app. Your tolerance is very low.

Srini: You can have the fastest server side component model but if you don’t have a decent UI model.

If your graphics is not performing, you can have trouble.

   

8. You mentioned about the performance, do you have any advice, like specific to improving performance when using HTML5 and the mobile web technologies?

Yes, I talked I little bit about using frameworks and those help you a lot. Sencha Touch for example, you very rarely directly interact with the DOM, you use our component layouts and our components do the interaction with the DOM for you, we kind of optimized that depending on the browser, depending on the operating system, you’re more than welcome to do a lot of that stuff your own, that works as well. There’s a lot of great debug techniques and debug tools so if you want to use remote debug tools like Weinre or Adobe Shadow, those give you really good advantage to use a real device to actually see what the performance characteristics are coming out, there’s new performance APIs that are coming out in the W3C that give you better insight into how your application is performing. And then you also want to take advantage of other tools like DeviceAnywhere, just to see what the device population looks like, where your application is going to actually run, and I think one of the hardest things to do is being very diligent about where you say your app is supported. You can say I work on the IOS 1 to 5, 1 to 6, I work on Android 1 to 4, take some time. Look at your device population, if it’s a BYOD kind of ecosystem look at what your employees are bringing to the market, bring it to their office and tailor your choices to that, and normally you will find yourself in a way to actually make some smarter decisions that way.

Srini: If you know what your target device.

Exactly.

   

9. Do you see HTML5 supporting device features like push notifications, camera access, accelerometer in the future?

Srini’s full question: So, HTML5 features, speaking of HTML5 features, HTML currently supports the geo-location features, you can use a mobile web app to give the location of the team. So do you see HTML5 supporting other device features like push notifications, camera access, accelerometer, etc. in the future?

Yes, so the three features that are generally well supported today, and this IOS 5 and Android 4, is geo-location, like you mentioned, accelerometer and then compass heading, so that’s on IOS 5. One of the big ones that we are starting to see now, it’s available on Android 4 and in IOS 6, is support for the camera. So using the media input types, you’re actually able to push images and post requests up to the web server. So that’s huge, that’s a big deal. So, I think what we’re really seeing right now is kind of a 24 to 36 month lag time between when new device APIs are introduced into the native platform and to when they are available on the web platform. So I think it’s kind of trailing behavior here. Now, will all of them become available? Hard to tell, no one is going to know that one for sure but I’d like to believe most of them will be. Camera was by far in a way the number one request in a web device feature and with IOS 6 and Android 4 we have it. So now the next one will be, I think push is another big one, but camera was number one from all of our developer metrics.

   

10. Especially for financial applications like bank transactions?

Yes, take a photo of a check or expense reporting applications take a photo of a receipt, even social applications like an Instagram type of thing.

   

11. Do you have any recommendations on tools for designers and developers IDEs, emulators, simulators, on device testing?

Srini’s full question: You mentioned about couple of tools earlier, like the Weinre and Adobe Shadow. So what other tools, like HTML5, like any other application development has to go through, design development, testing, performance testing, and all the phases in the lifecycle. Do you have any recommendations on tools for designers, developers, IDEs, emulators, simulators, on device testing?

Yes, we use a lot of tools ourselves for our own internal development purposes. So for unit test, Jasmine is one of the big ones, and then we use a lot of Selenium so we see those two being very good on the testing end of the universe. Kind of more on the design and development end of the universe we have our Sencha Architect product which is a visual application builder, makes it really easy for you to scaffold your application, write your code right in. There’s other very cool technologies being built, EBay open source has a project called VJet, which does some very cool code intelligence and code analytics for you, and code completion around JS, so we’re seeing some really cool innovation happening there. That’s kind of in the design phase, the develop phase, really around architect and IDE kind of assistance, JetBrains and the WebStorm tools are excellent, they’re doing a very good job around that space. DeviceAnywhere gives you access to actual testing on real devices, the IOS simulator is great, we’ve seen some other the guys doing some interesting on device type of things but by and large for that side of it, what we’ve seen developers do is “I’ve got four devices in front of me, this represents my 80% use cases and I use those”.

Srini: Makes sense. Since mobile web is based on HTML5, you can even reset the browser to see how the web application will look on a smaller browser window.

Exactly, you can take your desktop browser and shrink it down, now it’s the size of your phone now it’s the size of a tablet, that’s where it starts.

Srini: Poor man’s testing.

Yes, poor man’s testing, but if it gets you half way there in less time you should use it.

   

12. Can you talk about the security features in mobile web applications, what the developers should focus on?

Srini’s full question: I want to go to the question of security. Security is a key component in any application especially in mobile applications which are less control especially in the BYOD scenario. Can you talk about the mobile security features in the mobile web applications, what the developers should be focusing on?

All the best practices that have evolved around desktop web security, cross-site request forgeries, script injections, SQL injections, all these kind of critical web best practices have to be applied on the mobile side as well, none of that stuff goes away, you get no free passes, so if you’ve been working and doing input validation, input sanitization, double client side and server side validation and sanitization, 100% keep doing that, none of that stuff becomes less relevant. Now, what I think you kind of additionally have to look at is the fact that like you mentioned especially in the BYOD ecosystem or enterprise, you have, let’s take an example, let’s use maybe a financial reporting app or an expense reporting app. On my device now I’ve got an address book stored in local storage maybe, I’ve got reporting structure stored in there so I can send approvals for that application and I’ve also got maybe other things like what expenses I have to approve if I’m a manager.

So being able to store all these in local storage is a boon for developers because they can take advantage of the storage but there’s no app management features, right? And so I think what you are going to start to see over, we’ve started to see this over the last three months, in the next 12 to 18 is going to be a move from mobile device management, MDM, to mobile app management, MAM. And so the coming of MAM a lot of vendors to help support that, you’ll see things where you’ll be able to package into a remote wipe or selective lock down, policy control management features where things that are in the browser’s context you’ll be able to actually fix those things and then actually policy control those. That will be kind of on top of the standard web practices, SSL, all that good stuff and then other stuff where data becomes very portable on mobile and being able to manage the portability of data.

Srini: That’s where the encryption.

Encryption, remote wipe, remote management, all these features.

Srini: Time based expiry.

Exactly.

   

13. What do you see as the future roadmap of mobile web apps, in general, where do you see that going in the next two to five years, especially Sencha mobile web products in particular?

Yes, I think the web in general what we are going to see is additional proliferation of device APIs, so camera, move from camera to video, like better audio capture APIs, you’ll see WebGL, Web SQL, I think we’ll hopefully see this structured data side of the HTML5 stack get better between the XTP and Web SQL camps, and then a lot of SVG and CSS shaders, CSS filters, so you’ll see kind of the whole stack evolve. The big one that I think it’s going to be the big, cause the next wave, the next explosion of mobile web applications is going to be WebGL. We get graphics in a really meaningful way and canvas to a large degree, graphics in a meaningful way, a lot of the benefit you get from native goes away and so you get very high performance applications and that applies to the consumer case but also applies in the business case too which will be able to take advantage of the build in really incredibly beautiful data visualization and charting that sort of stuff, CIO, CTO, CXO types of applications, tablet dashboards, so I think that’s how it will apply, kind of web in general. In Sencha, what our road map really is how do we take tools, like Sencha Architect, frameworks of Sencha Touch and cloud services like Sencha IO and actually bring them together and then make them so that developers can take advantage of all that mobile ecosystem development in a completely cohesive and completely sane and scalable manner. So, as bigger teams, as mobile app development goes from one or two guys to departments, to companies, how can they take advantage of that.

   

14. It does make sense because mobile and social are kind of converging together so collaboration is a big thing, so this is where these new technologies will help.

It’s not just social in the you and me sense, it’s like “hey, I’m in a team of eight developers, I need to know code quality, I need to worry about standards and maintenance, I need to worry about code governance, and I need to worry about my guy who works on the data model piece doesn’t mess up the UI model”, you’ve got to worry about all of these collaborative coding problems, too. I think they get really important to manage in a web space, in an HTML5 space, as well.

Srini: Be more productive, I guess.

Yes, that’s really the goal right?

Srini: Aditya, thanks for your time, it’s been great information.

Great, it was a pleasure to speak with you today, thanks for having me.

Nov 02, 2012

BT