Pluralsight blog Where devs, IT admins & creative pros go for news, tips, videos and more.
Pluralsight + Digital-Tutors - 3,000 tech & creative courses - starting at $29/month Get it now →
May 11, 2012

Meet the Author: Jon Flanders on Building Hybrid Mobile Apps with HTML 5

By

In the latest edition of our Meet the Author podcast, Fritz Onion sits down with Jon Flanders to discuss his course Building Hybrid Mobile Apps with HTML 5.  In the interview Jon explains a bit about why a mobile developer might choose to use HTML 5 for cross device compatibility as well as how some of the new HTML 5 features such as media queries make building apps that span multiple devices easier.

Listen to the Audio (MP3)

Meet the Author:  Jon Flanders on Building Hybrid Mobile Apps with HTML 5

Transcript


[Fritz] Hi, this is Fritz Onion with another episode of Pluralsight’s Meet the Author podcast. Today I’m talking with Jon Flanders about his new course Building Hybrid Mobile Apps with HTML 5. Jon is an expert in REST based designs, HTML 5 and mobile application development. He’s also the author of RESTful.NET from O’Reilly as well as Essential ASP from Addison Wesley and was a co-author Mastering Visual Studio.NET for O’Reilly. Jon’s current major interest is helping people to understand how to leverage HTML 5 when targeting mobile devices. Hey, Jon, it’s good to talk with you today.

[Jon] Hey Fritz, good to be here.

[Fritz] So your new course, Jon, the Building Hybrid Mobile Apps, you talk about how to build essentially websites, web pages using HTML 5 but you go a little further than just building sort of a straight web page that shows up in a mobile device. You actually add constructs and features that make them look much more like real native applications. So I wanted to get into some of these details with you. Just to give the listeners a quick preview of your course, Jon gets into responsive web design as a topic as well as building the native shell for targeting various devices. He looks at designing mobile friendly content, dealing with touch and dealing with offline access to the application. So Jon, why don’t we start with probably what the most obvious question is, why might you choose HTML 5 to target mobile devices?

[Jon] Well, I mean when you look at the current, you know, development environment. I mean mobile is obviously a very hot area and you know everybody wants something on mobile. They want their website to be able to be accessible on mobile, at the least, but a lot of people want to build applications within not only out in the app market. Not only just the next Draw Some or whatever the next hot game is but you know, even within enterprises. You know lots of people in those enterprises have mobile devices and expect to have enterprise functionality on those devices. So when you look at that problem space, you can either — you basically have three ways to go which is either to learn everything about each mobile application development platform that you want to target. Typically we’re talking about iOS and Android, potentially Windows phone, potentially Blackberry and each of those, you know, has a whole API space and a whole different IDE and different programming languages you have to learn. Or you can go with, at least, reusing skills that you can gain by learning about HTML 5, JavaScript and CSS 3. The great thing about these mobile platforms is they’ve been in the forefront of pushing the boundaries of what those particular technologies can do. You know, it kind of all started with Steve Jobs saying, hey I’m not going to have flash on my devices, right? I’m not going to let that happen and so that really pushed the industry forward to be able to make web pages act more like applications. And in fact, many of the applications that people use on a day-to-day basis is on their mobile devices. Probably use HTML 5 to one degree or other. One of my favorite examples to give is the app store, app on IOS is an actually an HTML 5 app. Netflix uses HTML 5 very heavily in terms of building its platform. So, you know, the distinction between what’s a native app and what’s a mobile HTML 5 app is pretty gray at the moment. And I think the big thing for me is, you know people say well, you know I’ll have to write different HTML 5 for each of the platforms and that could be true but at least you’re using the same programming language, JavaScript, the same UI layout language which is CSS and the same description of your application or your data which is HTML. So at least you’re reusing that across those platforms and I think that’s really why it’s an interesting thing to look at in terms of if you’re building your “mobile strategy,” thinking about how you’re going to develop for mobile devices, I think it’s an interesting place to look.

[Fritz] Yeah and one of the things I learned about watching your course was you can really kind of choose how much you want to invest in adopting the native platform even with HTML 5 versus kind of creating just a generic, you know, web interface and then that scale will sort of determine how much effort you have to put into each individual device you target.

[Jon] Right and that is one thing that a lot of people don’t realize is that if I use the “web browser control” or UI web view or web view on the different platforms, they each have a different name but they’re a control that lives in a native application that shows HTML 5. I can interact from JavaScript to any amount of native code that I need for my app. So if I need to interact with the hardware, the camera or the calendar system or the contacts system, I can do that by essentially firing off some JavaScript having that invoke native code and then the native code can call back into the JavaScript as well. So again, as you said depending on how much you need to integrate with the actual platform, the actual hardware, your amount of native code could be, you know just very, very simple or it could be incredibly complex. And there are other customers that I’ve talked to who have said, well you know we’re building the games. We really want to use the, you know, native drawing on the hardware device for that but you know, we have some other UI stuff and like settings and things like that. And often times even just part of an app can be built using HTML. The other thing is if you load your HTML from a server and when you do that, you’ll want to use the — some of the offline techniques I talk about in the offline module to handle offline but you can update your app without having to resubmit it to the app store which is another pretty big advantage I think.

[Fritz] Great, well let’s get into some of the details that you cover in the course here. One of the things you start off by looking at are media queries. Do you want to give us a brief introduction to those and why they’re important?

[Jon] Yeah media queries and media queries are actually the thing that gave me the epiphany about this idea. I’m obviously not the only person in the industry who’s talking about this but I saw a presentation on media queries and it really just blew my mind. Media queries allow you through declarative CSS to specify different CSS selectors and properties for your HTML based upon a query, an expression, and typically when we’re talking about mobile, those expressions are things like how wide is the view port or how narrow is the view port, depending on how you want to look at it but what it allows you to do is declaratively say, here’s my HTML. Here’s my CSS. When somebody’s looking at my web page or my app on a 27 inch monitor, this is what I want it to look like and when they’re looking at it on, you know, iPhone 480 by 480 width, this is what I want it to look like. When they’re looking at it on a tablet this is what I want it to look like and you can change things like color and what’s displayed and not displayed and the size of the images. And what that allows you to do is to have one, you know, HTML page, one you know set of CSS. It could be multiple CSS files or one CSS file but have that be able to render adaptively depending on the resolution of the browser and you can even do this by resizing your browser on the desktop. You can see this happen. And so media queries — you know one of the things that I talk about in the course is how it can allow you to build, you know, — again getting back to the idea of let’s say I’m an enterprise and I have a website that you know we want to have that functionality to be — to work well on mobile devices. Through media queries I can have the same page, the same functionality render really well on my 27 inch monitor and render really well on my mobile devices whether it’s Android or iOS or Windows Phone or a tablet or whatever. With that power is that I don’t have to do a bunch of service side detection of what the devices are and render different HTML and have different views or whatever my technology might be on the server side. I can basically say here’s my whole package of my application and again, the idea is to have it respond to the device and be able to render differently based on the device and the resolution of the current — of the browser, of the view port.

[Fritz] Right. Yeah as soon as I saw some of the demos you did of that, it made me wish that more websites did that today because a lot of people just choose a fixed pixel width and kind of stick with it because of design consideration. So –

[Jon] Yeah, the 960 pixels is what I refer to as the current designer fetish size.

[Fritz] Yeah.

[Jon] And you know, you and I talking and we both have 27 inch monitors I know. And so when you do a full screen on that, you get, you know –

[Fritz] It’s pretty much useless yeah.

[Jon] The website in the middle and then a bunch of white space or images or background images or whatever. It’s very annoying.

[Fritz] Yeah, yeah agreed. Well, great, Jon. I appreciate you taking the time. I hope everyone takes a moment to look at your course and learn more about using HTML 5 to adapt to all of these different mobile devices that are coming into our lives more by the day. So thanks very much Jon.

[Jon] Thank you Fritz.

About the Author

is a Chief Architect specializing in large scale distributed system development and enterprise software processes. Paul has more than twenty years of development experience including being a former Microsoft MVP, a speaker at technical conferences such as Microsoft Tech-Ed and VSLive, and a published author. Prior to working on the Windows platform, he built software using a vast array of technologies including Java, Unix, C, and even OS/2.


Discussion