Chapter 1

Pros and Cons
Different applications have different requirements. Some apps are a better fit with web
technologies than others. Knowing the pros and cons of each approach will help you
make a better decision about which path is appropriate for your situation.
Here are the pros of native app development:
• Millions of registered credit card owners are one click away
• You can access all the cool hardware features of the device
Here are the cons of native app development:
• You have to pay to become an Android developer
• Your app will run only on Android phones
• You have to develop using Java
• The development cycle is slow (develop, compile, deploy, repeat)
Here are the pros of web app development:
• Web developers can use their current authoring tools
• You can use your current web design and development skills
• Your app will run on any device that has a web browser
• You can fix bugs in real time
• The development cycle is fast
Here are the cons of web app development:
• You cannot access the all cool hardware features of the phone
• You have to roll your own payment system if you want to charge for the app
• It can be difficult to achieve sophisticated UI effects
Which Approach Is Right for You?
Here’s where it gets exciting. The always-online nature of the Android phone creates
an environment in which the lines between a web app and a native app get blurry. There
are even some little-known features of the Android web browser (see Chapter 6) that
allow you to take a web app offline if you want. What’s more, several third-party
projects—of which PhoneGap is the most notable—are actively developing solutions
that allow web developers to take a web app and package it as a native app for Android
and other mobile platforms.
For me, this is the perfect blend. I can write in my native language, release a product
as a pure web app (for Android and any other devices that have a modern browser),
and use the same code base to create an enhanced native version that can access the
device hardware and potentially be sold in the Android Market. This is a great way to

create a “fremium” model for your app—allow free access to the web app and charge
for the more feature-rich native version.
Web Programming Crash Course
The three main technologies we will use to build web apps are HTML, CSS, and Java-
Script. We’ll quickly cover each to make sure we’re all on the same page before plowing
into the fancy stuff.
Introduction to HTML
When you are browsing the web, the pages you are viewing are just text documents
sitting on someone else’s computer. The text in a typical web page is wrapped in HTML
tags, which tell your browser about the structure of the document. With this information,
the browser can decide how to display the information in a way that makes sense.
Consider the web page snippet shown in Example 1-1. On the first line, the string Hi
there! is wrapped in a pair of h1 tags. Notice that the open tag and the close tag are
slightly different: the close tag has a slash (/) as the second character, while the open
tag does not have a slash.
Wrapping text in h1 tags tells the browser that the words enclosed are a heading, which
will cause it to be displayed in large bold text on its own line. There are also h2, h3, h4,
h5, and h6 heading tags. The lower the number, the more important the header, so text
wrapped in an h6 tag will be smaller (i.e., less important-looking) than text wrapped in
an h3 tag.
After the h1 tag in Example 1-1, there are two lines wrapped in p tags. These are called
paragraph tags. Browsers will display each paragraph on its own line. If the paragraph
is long enough to exceed the width of the browser window, the text will bump down
and continue on the next line. In either case, a blank line will be inserted after the
paragraph to separate it from the next item on the page.
Example 1-1. HTML snippet
<h1>Hi there!</h1>
<p>Thanks for visiting my web page.</p>
<p>I hope you like it.</p>
You can also put HTML tags inside other HTML tags. Example 1-2 shows an unordered
list (ul) tag that contains three list items (li). In a browser, this appears as a bulleted
list with each item on its own line. When you have a tag or tags inside another tag, the
inner tags are called child elements, or children, of the parent tag. So in this example,
the li tags are children of the ul parent.