Framework7 template with TypeScript and AngularJS

Important: Read this first!
This article covers a template for Framework7 apps built on TypeScript, SASS, Grunt and AngularJS. From my experience so far I discovered that TypeScript is really complicated and not much fun to use with F7 and Angular. Also, some people seem to struggle with the grunt compile process. So, I created a new, easier template without any fancy stuff, just plain HTML, CSS and JavaScript which I can recommend to get started before diving into the funky stuff: https://github.com/valnub/Framework7-Pure-Angular-Template (There is also a video screencast tutorial available)


Framework7

I am a big fanboy of Framework7, strict typing and MVC, so I tried to combine Framework7 with TypeScript and Angular with a flavor of SASS boiled on top of Grunt. The result is this ready-to-use template: Check on Github

How to build the Framework7 template

  1. No complicated bower or yeoman stuff. Just get from Github.
  2. Then, do npm install and then grunt compile to compile and copy everything from /src to /build. Default task for grunt is “watch” which you can use for auto-compile and -reload in the browser when you do changes in /src.

Example app

If you need an example check out this demo app that I created on top of this template. It simply lists current and upcoming movies from rottentomatoes by getting the data via Ajax using Angular’s $http service as well as its integrated data binding technique to render the view.

Framework7 with Angular movie list demo

Let me know if you have any feature requests for the template.

How to read cookies in a Phonegap-based Android app with Java

Just took me forever to get this straight, here is the trick on how to do it:

CookieSyncManager sym = CookieSyncManager.createInstance(appView.getContext());
CookieManager com = CookieManager.getInstance();
sym.sync();
String cookie = com.getCookie("file:///android_asset");

if (cookie == null) Log.d("MainActivity", "Cookie is null");
else{
	Log.d("MainActivity", "Cookie exists, value is:");
	Log.d("MainActivity", cookie);
}

Apple’s cheap trick on Macbook AIR battery runtime tests

I am sure, you’ve all heard about Apple’s recent release of the new Macbook AIR which comes without Flash preinstalled as well as their claims of longer battery lifetime without Adobe’s RIA platform. The computer manufacturer even announced a maximum of 5-7 hours runtime based on some new series of tests they made by browsing the web without the Flash plugin installed.

In fact though, these tests are not objective. Without Flash, no animated ads are being displayed while you surf the web which probably cause most CPU load (besides video playback).

I actually agree with Adobe’s CTO Kevin Lynch who said in an interview (see below) that replacing all Flash-ads with HTML5 canvas content would not increase battery life.

Animation => CPU-load

It’s in the nature of animations to cause higher CPU-load than static content, no matter if it is being provided by Flash or HTML5 canvas.
Actually, HTML5 canvas animations require more CPU power than Flash animations do, no matter on which browser (even on fast Webkit-based ones).

If you don’t believe, I recommend to read my recent thesis about RIA performance analysis.
Section 2.3.2.5 proofs that HTML5 canvas animation is currently inferior to Flash-based animation performance which implies that more CPU power is required to reach an equal fps rate which again leads to higher energy drain.

Apple’s smart. Really smart.

If people would only take off their Apple-glasses they would realize that the daily experience with Flash-based animations (which often tend to cause high CPU load) probably influences their attitude towards Flash.

Whenever we see Flash-based content like ads or video, our computer’s CPU requires more energy. That shortens battery lifetime, often forces the fan to run faster. This experience makes us think: Flash=bad, but it isn’t. It’s not McDonald’s fault that people are getting fatter and fatter. Burgers and fries simply are fat but people still want them.

Apple’s trick to run their battery-test without Flash returns false results. It’s no wonder that battery lifetime goes up without Flash since animations usually cause most CPU load while surfing the web (besides video playback).
If they’d done the test correctly, they should’ve converted all Flash-content to HTML5 and then re-run the test.

I am not an Adobe/Flash fanboy.

I own and love many Apple products.
Actually, this blog entry was written on a Macbook Pro and I’d probably never trade it for a Windows- or Linux-based notebook. I even recommend Macs whenever I can to friends but as much as I like Apple’s products in general, I really dislike their recent behavior towards Flash.

In a nutshell

  • Animations (like Flash-ads) can cause a lot of CPU load while surfing the web. It’s in the nature of animations to do so. Replacing those ads with HTML5 canvas animations would make things only worse.
  • HTML5-based video playback seems to require much less CPU power than Flash-video. Since most ads rely on animations rather than video playback, this argument does not really apply.
  • Apple’s accusation of Flash being a battery-drainer is wrong. Animations drain power, not Flash. Thus, their test-series of battery lifetime on the new Macbook AIR is not objective.