Transcript Read More - NP Compete


Phone Gap is a mobile application
development frame work based upon the open source apache
cordova project.
Developed by Nitobi software
Bought by Adobe.
It allows the users to develop mobile application using
HTML,CSS,J.S without losing the naive features
Ex: Geolocation
Camera
Accelerometers


Cordova CLI
Phone Gap CLI – Supports cloud building.
This is the additional feature supported in
Phone Gap .

Build Apps with web standard on HTML5, CSS,
javascript

Deploy to multiple platforms

Cloud Building
Hybrid application
Native application
Cross platform
support
YES
NO
Distribution
YES(Possibility for app store’s
rejection even in google play
store)
YES
Performance for
normal apps
Fast
Faster
Hardware
intensive apps
Performance is not so good
Good
performance
Cost
Lower budget cost (With good
web developer, Web based code
can support multiple mobile
platforms)
Higher


Common debugging tools which is used in
the web development can be used.
For platform specific debugging,
corresponding SDK debugging tools can be
used (xcode, Eclipse etc)
Performance:
 Single Page is faster than Multi Page
App Assets Load:
 In Single Page, Most of the needed files are
loaded at once or at least after the first page
is loaded, whereas multi-page requires
loading content each time user navigates to a
new page
Page Transition:


In Single Page Application page navigation can be added
like native application.
In Multi Page Application there is no animation
supported in page navigation.
Offline Support:


Single page should point to the cache manifest. When
navigation to new HTML page with manifest attribute,
the page itself is assumed to be part of application.
In multipage application all HTML pages should be list
out in the manifest file.

Memory Management

More Complex

Modularity


To use the Native features of the mobile, we
need to make use of the Plug in
For example to make use of the below
features we need to make use of the plug in.
-Compass, Contacts, Notification,
Media, Storage


HTML templates decouples the UI definition
(HTML markup) from your code.
Examples of Templates Engines
Mustache.js
Handlebars.js
Underscore.js
How to use templates?

In index.html:
<h1>Handlebars JS Example</h1>
<script id="some-template" type="text/x-handlebars-template">
<table>
<thead>
<th>Name</th> <th>Job Title</th> <th>Twitter</th>
</thead>
<tbody>
{{#users}}
<tr>
<td>{{fullName person}}</td> <td>{{jobTitle}}</td>
<td><a
href="https://twitter.com/{{twitter}}">@{{twitter}}</a></td>
</tr>
{{/users}}
</tbody>
</table> </script>
How to use templates?
In .js file:
var source = $("#some-template").html();
var template = Handlebars.compile(source);
var data = { users:
[ {person: {firstName: "Garry", lastName: "Finch”},
jobTitle: "Front End Technical Lead",
twitter: "gazraa” },
{person: { firstName: "Garry", lastName: "Finch”},
jobTitle: "Photographer”,
twitter: "photobasics”}]
};
Handlebars.registerHelper('fullName', function(person) {
return person.firstName + " " + person.lastName;});
$('body').append(template(data));

No need of SDK and IDE

Free for open source

QR quote for app installation

No need to generate UI on the server

No need to wait for data to display UI

Cache Everything

Use Hardware acceleration

Avoid Click events



Poor performance, especially if your app
is graphically intense, i.e. a game.
Lack of pre-built UI widgets, transitions,
standard controls, etc. Your development
time can take longer, especially if you
want a polished-looking app with a
native look and feel.
New features of mobile platforms are not
integrated immediately in the phoneGap.


http://phonegap.com/
https://build.phonegap.com/