Using PhoneGap and keeping the UI on the server - client-server

I'm continuing my research on solutions for our organization for our mobile app strategy. There's two somewhat conflicting requirements:
it should be a web app in that all updates for users are immediate as we update the app on the server
the app should leverage native UI widgets and native device features as much as possible
With PhoneGap, the process appears to be that you'd normally keep the UI on the device, as part of the compiled app, and you'd hit your server via AJAX to deal with the data updates and submissions. That then gives you access to the native device's UI widgets and features using the PhoneGap API into their hooks.
However, in doing that, we lose bullet point one.
My question is if one can, using PhoneGap, create a 'web view' within the app that would allow us to keep the UI on our server (the app then pretty much becomes a custom browser). And, if so, could our UI still access the device's native functionality via PhoneGap's API or is that only accessible if we compiled our UI code?

A similar question came up on the PhoneGap Google Group recently.
One thing that came up was that you are unlikely to pass app store certification if you are loading UI and core functionality from a remote server as this invalidates much of the purpose of certification.

If you're going to do this, you should set up web services that return the content you want to display to users. Then you can use jQuery Mobile and PhoneGap to take the content returned from the server and display it on the application with the appropriate native UI widgets and features that you want.
So use jQuery Mobile to hit your server for data using something like:
var fileUrl = "http://www.mywebserver.com/servedevice?data=current&selection=fresh";
$.ajax({
url: fileUrl,
dataType: "html",
success: function( html ) {
// If the call succeeds, do something with the return value here
}
});
There are many other ways you can handle it including JSONP methods. See the documentation for details:
http://api.jquery.com/jQuery.ajax/

Another approach would be to point your HTML file at a server for the JavaScript, just like a CDN file load. Then, your app's JavaScript would be loaded at runtime instead of bundled into the app. However, when it actually runs, it is running within the PhoneGap WebView so it has access to all of the PhoneGap APIs.
This is the jQuery Mobile example:
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

Related

DFP Ads on an AngularJS app

We are building an AngularJS web app and we are trying to integrate DFP ads. By the way, we already have a PHP web app with DFP ads running so I am familiar with how DFP integration works, but of course it is different on an AngularJS app, due to its front end loading nature. So, I know there are three components we need to get working:
In the <head>:
The DFP tag for either sync or async, as shown here, https://support.google.com/dfp_sb/answer/1651549. I know Google recommends async, but recently on our PHP app we had to switch to sync, since async doesn't support rich media, and we were also facing some reporting discrepancies with async. So, with an AngularJS app, can we still use sync, or only async?
The DFP tag in which we define the ad slots, and also call the enableServices, singleRequest or syncRendering, etc. By the way, we want to have dynamically populated ad slots per page (app state), so we have to figure that out.
, and in the <body>:
The tags for displaying the ads for the ad divs. On an AngularJS app would it work with .display() or would we need to call the .refresh() method?
Any help is much appreciated, thanks in advance.
Cheers,
Iraklis
Try this ngDfp
ngDfp is a simple library for Angular JS that allows you to add DoubleClick for Publishers tags to your Angular site.
To show an ad, use
<div data-ng-dfp-ad="div-gpt-ad-1234567890123-0"></div>

SEO-Friendly, Internationalized Polymer.dart

I am displaying internationalized strings within a Polymer element as follows:
<div>
<span class="content">{{myContent}}</span>
</div>
... and have the following dart code:
#observable String myContent;
//...
void onUpdateLocale(_locale) {
myContent = getMyContent();
}
//...
getMyContent() => Intl.message('All my content ...', name:'myContent',
desc: 'This is my content',
args: [],
examples: {'None' : 0});
However; when Google crawls the app, it only pulls "{{myContent}}" and not its interpolated value, the actual internationalized content. Is there a way to work around this and make an internationalized Polymer.dart app that is also SEO-friendly?
Its not really clear. Although recently Google announced that they are evaluating Javascript to index the page, I've not seen any deep evaluation of how this compares to the server rendered pages approach.
And then there is the issue of non Google search engines like Bing.
Polymer as it stands today doesn't really do server side rendering and as far as I can tell the team doesn't have plans to offer than in the near future.
If your project/business depends on SEO I would not risk using polymer.
You have two options to address this issue:
Use phantom.js to render the page on server side whenever a crawler is requesting the page.
Use a third party service like ajaxsnapshots.
Forget polymer and use react.js component framework. React has a way to render the virtual DOM on the server side. This will work seamlessly if you are using node.js frameworks. It should be possible with JVM frameworks as well as Java 6+ ships with a Javascript engine (vastly improved in Java 8. Google "nashhorn").
Google have a spec that lets you serve snapshots of your page's HTML after all necessary Javascript (or Dart) has run to search engines: https://developers.google.com/webmasters/ajax-crawling/
The basic idea is to render the pages on the server side and then follow a set of URL conventions that lets you serve search engines the pre-generated HTML in a way that they wont confuse with cloaking.
Google, Bing, Yandex and some social bots support this spec.
You can implement this spec yourself or use a service that does it for you (I work for one of these: https://ajaxsnapshots.com) The solution is typically plugged in at web server level so you don't need to make any changes to your app.
So, I don't know much about Polymer, aside from the documentation on databinding I just viewed. It seems fairly similar to AngularJS by Google, in that it is using JavaScript in a declarative way to render data into an HTML document. That being the case, the browser is still fundamentally seeing the underlying calls to {{something}} as just a raw string. The JS libraries are then what change that data into text on the screen.
That being the case, you might consider handling SEO like Angular developers do. Here is the definitive resource on the subject: http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

100% Ajax Websites

I have been looking at Hulu's new website and I am very impressed from a developer's standpoint (as well as a designer's).
I have found that, unless you switch between http/https, you are served content entirely from json requests. That is a HUGE feat to have this level of ajax while maintaining browse back button support as well as allowing each url to be visited directly.
I want to create a website like this as a learning experience. Is there any type of framework out there that can give me this kind of support?
I was thinking I could...
leverage jQuery
use clientside MVVM frameworks like KnockoutJS?
use ASP.NET MVC content negotiation to serve html or json determined by an accept header.
using the same codebase.
use the same template for client side and server side rendering
provide ways to update pagetitle/meta tags/etc.
Ajax forms/widgets/etc would still be used, by I am thinking about page level ajax using json and client side templates.
What do you think? Any frameworks out there? Any patterns I could follow?
It is always best to first build a website without AJAX support, then add AJAX on top of that. Doing this means that:
users without javascript can already access your website
users can already visit any URL directly.
Adding AJAX support can be accomplished by various javascript libraries. So that you can render json content, you will want to look at javascript templating. You will want to use javascript templating even on your server side for when you add AJAX support (file extension .ejs). This will probably require some appropriate libraries to run javascript on the server.
When you add AJAX support, you will want to use the "History.js" library for browser back/forward/history support.
Make no mistake. This is a HUGE project (unless your website only has a few pages). So it is going to take a LONG time to add all the AJAX support to the best possible standard.
to answer your bullet point about using the same template server side as well as client side: check outdust. It was originally developed by akdubya, but has since been adopted and enhanced by linkedin. They use it to render templates on their mobile app client side. Personally I've used it on the server side and it works great.

What methods are there for querying a database from a webpage?

I am fairly new to web development, and I am currently creating a mobile web app with PhoneGap. That is to say, it's done entirely in html and associated technologies, which the app then links up properly to function within whatever OS the device is running.
Portions of this app require me to retrieve data from a database on a remote server. This is an entirely new thing to me, having never done any programming involving networks/connections.
I was recommended to use AJAX for this purpose, but I'd like to be certain I'm making an informed choice. What other options are there for an HTML page to retrieve data from a remote server?
there is no other choice you will have to use ajax ( using jquery for exqmple ) to get your data back from the server ..
the best way ( from my point of view ) is to make sure that your data is retrieved as json or jsonp so that you can handle it easily within your app.
and if you do use jquery ajax remember to configure it to allow external ajax request.

Completely building a web app with static file and AJAX calls

I'm considering building a new web app with totally with static "html, js, css" file and
make asynchronous call (AJAX) to gain access to DB, some calculations and handle sessions.
So the static files will have basic DOM structures and css applied form only at the beginning
and static js code will asynchronously communicate with server to show page contents
dynamically.
What would be good and bad points of making a web app like this?
and do you recommend or not recommend this way of developing a web app?
I have built a a decent sized web site with this pattern. I feel that this is the current method of developing sites as there are no page post-backs. A fully AJAX site is more 'Web 2.0', if you will.
Debugging can be harder with this setup, but if you're careful (which isn't that hard to do with a brand new site), it shouldn't cause you too much headache. I would recommend you go this route.

Resources