8 HTML5 Mobile Development Tips
In this article we look at 8 HTML5 mobile development tips to help you with the design process. To help me flesh out this story, I called Earl Flormata, a colleague at Big Box Apps. This article will cover quite a bit, including how native code, used in combination with HTML5 can create a great mobile experience.
1. According to Earl: “There isn´t a lot of difference between code such as HTML, PHP, or C. Code is code. A lot of the languages overlap and are actually very similar to each other in how they function. Good code is, number one, documented so someone else could read it and know what it is doing.”
“The documentation is often in the form of a WIKI. Good structure means that an analyst has asked the client what they want, what they want to achieve, then a business case is built around it. After that the business case is broken down into its individual components, which then get assigned to programmers for fulfillment.”
“The reason that most documentation is horrible is because no one likes documenting and they wait until the last minute to do so. If you’re a programmer, all you want to do is program then move onto the next thing.”
“If you’re a one-man programming shop you don’t need to explain to anyone else.”
2. “When you’re in an organization of 3, 5, or 10 people, inevitably some people will ask why you programmed a certain way and the reality is that logic doesn’t flow the same way for everybody. If you ask people how to program something, you will get 10 different ways to get it done. So elegant code is small. The fewer lines of code you can accomplish something in, the better.”
3. “The next thing to remember is you should name your variables so you know what they are, later. And if you use layers you should label what each layer is for.”
4. “Good code should call the server as little as possible. The more times you have to call the server the slower it goes, the slower your SEO rank, and the lower the experience for the customers.”
5. “When using CSS it is better to have one main sheet and you reference chunks of it, rather than one style sheet per page. With a website that has thousands of pages that can be a bit crazy. Again, every time you have a style sheet, you have to hit the server and the server has to go back and forth. If it’s the same style sheet for everybody you’ve already downloaded it when you’ve hit the first page so if you hit the 5th, 20th, or 30th page within that browsing session, it doesn’t have to download a different style sheet.
6. “When programming a project, the first thing to do is figure out what each screen will look like, then figure out how each screen flows to the next, and what data must be kept from one screen to another.”
“As an example, the login data has to be kept the entire time the session is running if you want to access your account. The reason I bring this up is because it’s resource management. HTML5 is still HTML, therefore there are a limited number of sessions that you’re able to utilize while in the browser.”
“A session is an environment where you bring something across from one page to another. HTML is stateless, it has no idea whether you’re connected or not. A login is really important. That session keeps your login from page to page. As an example is if I want to use HTML5 and log into my bank account. If I don’t keep that session from one page to the next I’m going to have to log in every time the screen changes.”
“To make it work you would use a security token and it keeps you logged in from one page to the next and you want that session to be open for the entire time that you’re logged in. That’s also why those sessions have timeouts. If you have ever logged into your account and you leave it for a bit and come back you’ll see a message that your session has timed out.
“The session allows you to log-in, follows you around and then counts down from, say, 20 minutes and if you’re no longer there after 20 minutes, it kicks you out. If I access my bank account from the library I expect it to kill the session after I log out and if I forget, to kill the session after a specified amount of time.”
“With a session, you have a limited amount of them and you don’t want to have too many open pages If you do you have a lot of memory moving back and forth. If you’ve been working on a web page and it randomly crashes, this is because you have too many things open. If your pages become sluggish, one way to fix the problem is to close the browser and open it back up again.
7. When building an HTML5 app it’s really important to consider the upper limit and to design your variables accordingly. When Youtube was built, they had an upper limit on the number of views they could show, which topped out at around 2 billion. The video which finally “broke” Youtube was: “Gangnam Style.” “Once Gangnam Style surpassed that number, every view past that didn’t count.”
“When you create variables, these can change from one value to another. When you create a variable you set what that variable is going to be. If the variable is an integer it’s always going to be a number, but an integer variable only holds so much space.”
“Back in the day, were you familiar with the number 65535?”
Earl: “That is the limit of an integer on certain platforms. If I had a value of 65536 or higher, that variable explodes. This results in errors, crashing, security leaks, etc.
“A long integer (long int) is the same as an integer, just bigger. With the Youtube video, people could still see it but the counter stopped working. It’s exactly the same as the Y2K bug. No one thought that everyone would use the same function over and over and over again. That was invented in the 50’s and 60’s and they thought, well, by the time it rolls over to 2,000, I’ll be dead and by then, they’ll have rewritten this code.”
”Youtube never thought that anyone would get 2 billion views. So they had to swap out that integer to the next largest number. For a long time people were watching it just to see the number go up. I remember watching it when it stopped.”
“This is an example of HTML5 coding where it makes a difference as to where you put things and how you place them. Back in the day when they were building Youtube they were thinking about most ridiculous number of views that anything has ever gotten and they came up with 2 billion which seemed crazy. And they thought that if they set the value to that, no one would ever hit it.”
“Youtube was founded on February 14, 2005 and from an Internet perspective, it’s ancient. That’s why you build the workflow first, so you don’t fail when it comes time to execute and to deliver to the customer what they want.
8. In this next section, we look at some important differences between HTML5 and native code and when you would want to use one or the other or both. Earl stated: “Usually, native is the way to go. Native code allows you to touch all the resources of the phone, whereas HTML5 does not.”
“As an example, if I want to access the camera, I can’t on HTML5 but I can on the native app. Any time you want to use any of the peripherals of the phone HTML5 may or may not have reach to it but the native code always has reach to it.”
“For Android you would use Java and if you have an Android app, you can do much more than an HTML5 piece on the Android platform. If you’re working on the iPhone, that would be Xcode or Cocoa.”
“That said, the main benefit to HTML5 is if I make it once, it works on everything. It works on Blackberry and Microsoft, too. In contrast, native code will only work on the platform you built it on.”
It’s also important to realize there will be some instances where you will want to use both HTML5 and native code to get the result you want.
Earl said: “Let’s pretend I have an app that’s a game and I want to sell a sword. I have to use the Apple or Google store to sell that within the app and make it happen. Now, what does it cost me to give some guy a digital sword?”
Earl: “Let’s juxtapose that with an app that runs a café and I want to buy a sandwich. There’s a cost for that sandwich and I have to manufacture those. Apple and Google take 30% of whatever you sell through the app or Google Play store. This is where you can use HTML5. If I have a pre-existing web store and it is not a digital product, my HTML5 shopping cart will solve the problem and allow me to save that 30%.”
As you can see, we’ve covered a fair bit of ground with this article, discussing both HTML5 and native code. To recap, here are the most important points:
1. Document your workflow
2. Keep your code small
3. Name your variables so you can remember what they are later
4. Good code should call the server as little as possible
5. Place all CSS code on one style sheet, not many
6. Use sessions
7. Consider the upper limit of your variables
8. Know the limits of HTML5 vs. native code.