Slow or ... ? about mobile-chrome-apps

[bshepherdson]

There's several layers of startup lag here. The Mobile Chrome Apps wrapper needs time to do its own bootstrap dance, fetching and loading many JS files, loading the app's background page, running it, opening the window, then fetching and loading the <script>s from your app. Only then does Angular's bootstrap begin: Angular parses the DOM, then it inserts the binding, and finally you see everything loaded properly.

There's not really a way around any of that startup lag, unfortunately. A few things I can suggest:

• Don't fetch Angular from the CDN; use a local copy. Bundling it into the app and fetching from file:///... is much faster than hitting the CDN. That will hopefully remove ~100ms from your startup.
• Use the minifed angular.min.js. That goes for all apps all the time, unless you're hacking on Angular itself.
• Use ng-cloak to avoid a visible "Hello, {{ name }}" before the page has loaded.

Glad it's working for you! Also, be aware of the fastclick problem on mobile, and use either angular-touch.min.js from Angular core or fastclick.js. Currently the latter is more reliable.

[learningjs]

@shepheb thank you for the reply .

Yes , generally speaking works very well for me .

To be fair , I found the startup sequence very fast , also when fetching the dev version of the script from CDN ( I have put a gist of the code I was playing with and without caring about minified or local version because I had not problem at all ) . Maybe I am just lucky or pleasant , but I can not absolutely complain about that .

The lag is noticeable when the app is running and I simply type something to check the binding . Sincerely I do not know if fastclick can solve the typing lag . Can ? There is interaction between clicks and keyboard ... ?

[bshepherdson]

Hm, if the binding itself is slow that's very strange.

I've used Angular in these mobile Chrome apps extensively and haven't had any problems. It's possible that the soft keyboard is causing some of the trouble. Try some other kinds of bindings, like clicking a button to increment a counter, that sort of thing. I'm curious what's so slow.

[learningjs]

Interesting ...

I have switched from angularjs 1.2.1 to 1.2.3 :

• the typing recognition was highly improved
• I tried a button ( adding to the counter ) and a link ( subtracting ) and I got some lag on both .

Switched back to 1.2.1 :

• button with almost unnoticeable lag
• link slower than with 1.2.3
• typing sensibly slower .

This is my impression with the Note 2 .

Sadly , I also have to say that with a Galaxy Tab 2 7.0 P3100 ( and angularjs 1.2.1 ) all the bindings were pretty fast ...

Overall impression : the bootstrap on Note 2 is faster , bindings are slower ; the opposite on Galaxy . Both with Android 4.1.2 , the Note 2 with a newer kernel version .

What angularjs version and what type of bindings did you used ? And , who knows , what MobileChromeApps version ? And , well ... did you tested also with these devices ?

[bshepherdson]

Hm, interesting results. I would definitely stick with the latest version of Angular, there were quite a few bugs that needed hammering out after 1.2.0. Is the Note 2's processor underpowered, or were you perhaps running in a low-battery, power-saving mode that would cut the CPU speed?

I've tested in the past mostly on Galaxy Nexus, Nexus 7 (2013), Nexus 10 and HTC One. The Galaxy Nexus is easily the weakest of those, and it performs well with Angular 1.1.3ish.

[learningjs]

With or without power saving the link looks like the slower binding , the "most misbehaving" one : it is never clear if it has been clicked or not and leads to multiple clicks .

That's said , it is pretty impressive the overall performance ( bootstrap , app responsiveness ) that I experienced in these quick tests . And if you say that you haven't had any problems , it bodes well ...

Thanks for your support .

[bshepherdson]

Glad to help.

I'm going to close this issue, since there's nothing specific wrong here. If you have acute performance problems, or bugs/confusion, feel free to file another issue.

[learningjs]

I have to ask .

Do you have experience with Angular ( or plain zepto / jquery / etc ) in these mobile Chrome apps and also in mobile / desktop sites loaded on devices ? A doubt is rising ...

[bshepherdson]

I have considerable Angular experience on desktop, and some experience on mobile and in Cordova and MCA apps.

See for example this project which is a Cordova app using Angular. It's fast and working well.

[learningjs]

Pretty impressive, some day I'll get there too : )

nonetheless , I was talking about this slowness . Long story short , in my case ( devices / things tried ) , this happens to be related with angularjs and Chrome for Android ( the rising doubt : both in browser - beta and stable - and Chrome Apps ) while with other browsers angularjs is fast lightning . Slowness seems not affecting other libs like zepto / jquery .

My experience is too limited and also based on what you are saying this issue does not apply for a wider array of ( different ) tested devices , so I have to find out which combinations are the most likely involved ...

P.S. : the "A doubt is rising" in my previous comment was about the fact that this slowness seems to affect Chrome for Android ( and so Chrome Apps ? ) in specific devices , but not absolutely sure .

Edit : that comment was badly phrased , I apologize for such inconvenience .

[bshepherdson]

No worries, not offended. I meant with my previous comment to address the speed: I have used Angular a bunch on mobile and have found it definitely slower than desktop, but also much faster than what you're seeing, therefore something is weird about your code/device/browser/environment.

One very important point, before we go any further, is about the WebView on Android. On all versions of Android prior to 4.4 (KitKat), the WebView is based on the old Android browser, not Chrome for Android. The old WebView is slow, buggy, and doesn't support any of the nice features of Chrome.

That said, it still runs Angular apps fine, and without the slowness you've been seeing. If I'm reading your comment correctly, you said that you've got similar slowness in Chrome as well as in the mobile Chrome app? If that's true, it suggests that something about the device is the trouble here, since Chrome and the WebView are using different Javascript backends, different renderers, and so on.

We haven't tested Angular or mobile Chrome apps on all that many different devices. Both are built by Googlers, which means we tend to have Nexus devices (see my list a while ago of devices I've tested Angular with on mobile).

[learningjs]

Ok , thank you .

Important : yes , the issue does affects the Mobile Chrome Apps and Chrome as browser . Issue apply to latest version of Chrome - beta and stable - on various Android 4.1.2 flavors . Tested on a couple Samsung Note 2 and Galaxy Tab 2 7.0 . The only common thing between the devices is the Android version - with different kernels - ( and the carrier , if it applies ) .

My code is very basic .

• For the Mobile Chrome App I used the code that I found in the www folder of the installation and edited the index adding the code that I previously linked .

For web pages , I also tested very basic code . Between others :

• the code using angularjs 1.2.3 for the first egghead.io video is the worst case : the binding acts only if the text input loses focus or typing a space ( if typing a simple string of characters without spaces nothing happens )

Same code is really fast on Firefox and Dolphin .

• Interesting enough , codes like this todo app ( angularjs 1.2.1 ) and joly-sushi ( angularjs 1.0.3 ) are not affected .

joly-sushi does not binds directly from an input text to an output tag , but the filtering for the images is immensely faster than what I see when experiencing the lag .

Wrapping things up , maybe is not the case for further investigation , maybe it is : you did not experienced issues with devices of a specific type , I experience issues with devices of another type . The point is : what other people will experience ? Do you have any statistics on the devices used by people who test Mobile Chrome Apps ? They use all the same type of devices ? Etc .

[learningjs]

I found out that the root cause is something affecting the angularjs versions 1.2.2 , 1.2.3 , 1.2.4 , affecting only Chrome versions for Android - beta and stable - ( also Mobile Chrome Apps ) . With 1.2.1 I can not replicate the issues .