I am developing mobile web app using ionic sidemenu, but it is not as smooth as it should be. When I open sidemenu using slide left/right, I am getting less than 30 FPS as shown in figure.
How can I improve the performance?
Reaching 60 FPS would be great!
AppGyver's Steroids tooling also provides you with access to Crosswalk on Android. You can run it in your Ionic project directly without modifying any files.
Also, Supersonic's sidemenu/drawer is fully native, so if you're up for migrating, it'll run way faster. :)
(Disclaimer: I'm a programmer for AppGyver.)
My advice is to use Crosswalk instead of the Cordova as the webview for the app.
While both share the same end goal, they are different:
Cordova, from the Apache Foundation, uses the regular (pre-lollipop) Android webview, which is based on Android's stock browser since its inception.
The Crosswalk Project, created on the Intel Open Source Technology Center, is different. It wraps your app with Chromium, the open-source base code that gave birth to Google Chrome, which brings numerous performance enhancements: css3 transitions, animations, 3d transformations, html5 support, remote debugging and much better javascript support and performance.
At the time of writing, the Ionic team is already working on a beta version (1.3.0-beta1) that uses Crosswalk instead of Cordova. Not really stable just yet, but a huge promise.
In any case, you can use Crosswalk today, by manually copying your Ionic project's 'www'
folder content to the project folder inside Crosswalk folder and run it. You'll need to setup some manifest files previously, so read the docs.
In any case, it's not hard at all to try, and I'll recommend it everyday for all projects pre-Lollipop. If you're targeting Lollipop/Android 5 versions, you don't need it, because the default Webview in these versions is already Chrome-based.
Hope it helps.
Related
Hi stack overflow community,
I'm a novice programmer in high school and have never written an app for mobile devices before so please bear with me. If I was to write an app using Flutter, will I only be required to write the code once and then be able to distribute different versions of it (iOS, macOS, Windows, Linux, Android, etc)? Or will I need to make small changes for each version such as using XCode to create the iOS version and Android Studio for the Android version? I know this is such a basic question but I've spent a couple of hours looking this stuff up and I'm still confused. Any help would be nice.
Thanks,
Daniel
In a product development environment, after writing the cross-platform code with Flutter, there are some need-to-do tasks related to Native environment.
In the case of Android, there are several cases when you'll need to touch the Native level such as config Firestore settings, Social authentication (Login with Facebook for example), changing the launch icons/ splash screen of the app or publishing to app store, etc
For iOS, the same case apply as well. So I suggest you start with small steps to develop the app first, then when running into something that seems impossible with just Flutter code, there are tutorials and SO to guide you through. It might seem overwhelmed at first, but we are all on a journey, so no need to rush it ;)
You should make small changes too. For eg when adding launcher icons and splash screen you have to edit the respective native folders. When distributing for ios you need to manually customize its Runner from xcode. There are many library that support either android only or ios only. In that case if you need that feature you have to make changes in native code like java ans swift.
if you're creating your own native plugins, you will have unique code to write. But if you're just using things out of pub, almost nothing will require change (unless you are publishing to the store).
To be more precise, I already have a huge app writen in Ionic and now we're considering to migrate it to flutter, but we can't rewrite it from scratch, both ionic and flutter should coexist.
So my question is: can I have a flutter app as a "host" and import / run the ionic app inside it? Something like a micro frontend.
Until now I was able to build the target ionic app and import it on the flutter app, under android folder, but it does not feels like a productive way to approach the problem.
I also googled a little bit about this integration, but did not find anything that solves this problem.
I appreciate any help on this topic.
Yes, it is possible, but very cumbersome.
I did it for a project and embedded 3 ionic apps inside flutter.
I'll not list every problem that i faced but just go through some points to give you an idea.
You will need to take care of some cordova plugins that use native code, for Android copy and paste some folders like CordovaLib,cordova and use it as a library. For iOS you must add the plugin files like *.h to the compiles list inside Xcode and create an Pod to get the cordova resources (that's the way i did)
To "launch" the app for android you need to start the cordova activity and for iOS you need to play with UINavigationController and FlutterViewController, and of course create a method channel to be possible to call it from Flutter.
For multiple apps, you have to mess inside de cordova code to get the app from the right www folder and be sure to equalize every plugin version between apps.
Some packages from flutter may clash with ionic/cordova libs
Every change you do to your ionic application it must be tested outside flutter and within it to see if there's any mismatch behavior that you didn't expect, specially when adding new plugins.
Maybe some permission issues will arrive between applications like camera or localization.
I know thats not the answer, but when searching on how to do it, i stumbled upon this question a few months ago and it still without any answer on this problem.
But my final take is that the effort of joining together all pieces using multiple languages and frameworks together with the job of maintaining this spaghetti behemoth is not worth it and you'll save yourself of a tremendous headache.
I really hope I'm doing something wrong. I've added crosswalk to a project and have had some serious app size increase. To test I've done the following.
created a new ionic project
added my app code to /www/
added ngcordova and various plugins
Ran ionic build and drop the apk onto a Genymotion emulator. The app was very slow but had a app size of 8.01mb (once installed - checked with app manager).
Then I deleted the app from the emulator
Ran ionic browser add crosswalk
Ran ionic run android which installed the correct .apk on the emulator. On checking in manage apps the app size is now 79.36mb!!! Thats a 71mb increase! Most places say 20mb at most but 71mb!!!
Can someone tell me what I've done wrong?
When I added the Android SDK I did add all the tools ad platforms availabe in the SDK manager, did that have some effect?
If this isn's fixable it's a show stopper for me, which is a shame after spending weeks developing an app...
Please help!
I'm also running into that issue. Unfortunately using crosswalk will definitely increase your apk size. However, I found some way to at least reduce the apk size. For instance you could make use of the crosswalk lite. It may reduce your apk size for about 15 MB (see crosswalk lite).
You can also specify that you don't want to build the projects for two architectures (explained here).
Same problem here. I think promissed size of 20Mb is for the apk file which is compressed, you are looking at installed size on device.
You can check generated APK size on platforms/android/build/outputs/apk/ or platforms/android/ant-build/
I think the problem you're encountering though Crosswalk related, it's emulation related. I've tried emulators from both Android Studio versions and Genymotion. They both didn't work well for hybrid app testing.
My advice is to try Chrome Device Inspector along with actual device testing. I don't think anyone will argue that's the best way to ensure performance. AWS Device Farm is just one of many offerings that will spit out physical devices for testing. There's even services that let you outsource testing on different devices by real people, just can't think of the name of it right now...
My current favorite is Cordova Tools for Visual Studio Code, but it has been buggy for me lately.
However, I'm in the early stages of a fleet of Cordova apps and was alarmed at the overhead Crosswalk has. ~20MB extra to your APKs, and ~70MB to the installed size of your application. That's pretty alarming, considering the apps we use it with, with resource assets (images, etc.) are about 1/10th the size of this one plugin!
We have one app that has actually degraded with Crosswalk. My theory is that Crosswalk doesn't do a good job parsing non-standard HTML which is a core feature we have since we have XSLT transformed XML which winds up being non-standard HTML. Traversing it is extremely slow compared to the default WebView. We do a lot of manipulation with raw DocumentNode objects, so maybe that's it. That said, I'm so surprised that if it's slow traversing/appending HTML via vanilla JavaScript that these other apps are seeing performance gains!
I also learned last night there is Shared Mode with Crosswalk which allows multiple applications that use Crosswalk to share one instance.
I've been trying to find an answer why the cordova keyboard plugin doesn't work in ionic view.
In the documentation it says it supports version 1.0.3.. The updated version is 1.0.4. I suspect that's the reason why the keyboard plugin doesn't work in ionic view. How can I downgrade to 1.0.3?
I realize this isn't a direct answer to your question, but...
Personally, I've found Ionic View, while a cool idea, to be mostly just a tool for basic previews. I've noticed all sorts of things don't work within Ionic View, such as overridden back button behavior, rendering inconsistencies, Crosswalk issues, etc.
I've done comparisons of Ionic View rendering directly with running the app on a device (using ionic run) and it very often has differences, even with minimally complex apps. That, to me, is unacceptable in a situation where you need valid prototypes. I previously wasted a lot of time trying to fix some issues that I found out were actually caused by Ionic View. I use the Cordova Keyboard plugin in one of my apps, and I was having issues with the event detection within Ionic View. Those issues didn't happen when I ran the app directly on my devices.
I've since switched to using Google Play Staged Rollouts to alpha/beta test my Ionic apps with multiple people/groups. Changes might not be reflected immediately (since updates need approval), but it will be exactly as the app is going to behave, and that might be the most important consideration of all.
However, if you're absolutely set on using Ionic View, you might consider filing this as an issue on their GitHub page.
I have been recently begin working with phonegap and I notice that there is no tutorial for phonegap 2.2, the most recent version. What's more, since phonegap 2.0 there has apparently been drastic changes. I am having lots of trouble with using phonegap since I am new to web-iphone apps.
I am trying to make an application with phonegap to use facebook log in to get your data (pics, friends, etc) and then post on your facebook page, update status, etc. Basically a social App.
It seems that no tutorial is clear on any facebook-phonegap integration and social web based app.
I have seen a video with phonegap 1.8 tutorial and have followed it very close, only to get many errors.
I followed the one on:
https://github.com/davejohnson/phonegap-plugin-facebook-connect
and have had protocol.
I have tried many different things, but it seems that xcode simply is not able to recognize some functions or protocols. I am looking to see if I missed anything, but Ive added everything according to steps followed.
Ive tried adding the facebook.Framework, the extra headers, heck, Ive even added all of the files from the facebook SDK in the src file of the package:
https://github.com/facebook/facebook-ios-sdk
I cant seem to put together a simple facebook log in app...
anyone got it to work? what are the exact steps to follow? Im good with a new 2.2 cordova project and up until I put the files: FacebookCOnnectPlugin.h and .m that is where everything gets messed up.
I DO have the libsqlite3.0.dylib and HAVE followed the steps, added all the stuff in various .plist and all these weird long and annoying procedures many times...
Ive tried adding various libraries and just can't come up with anything else so why can't I just start a simple cordova project and get the option to log-in connect fb. like a simple hackbook sample.... I get it working in Objective-c demo (new single view application project)... Why does everything have to be so difficult and not working. I just want to get a page to start coding at. Just to get to this point, not even starting is so difficult.
very frustrating....
any help is much appreciated.
-- Im new to web apps and iphone...
I got it working but there are lots of issues and tweaks you need to do in order for it to fully work.
In my experience PhoneGap Plugins do work but you have to play around a lot. E.g. I know for sure the new Facebook SDK is not supported by the PhoneGap plugin. Even if you import the Deprecated Headers. I had to use the older version of the SDK. And also with version 2.7 not all plugins are supported so I had to stick to an older version 2.5 so I could get my project to work.
Even tough I got this plugin to work on iOS, it doesn't work on Android. It's a really good platform to develop on if you're looking for fast productivity but i'm still a bit spectacle on being heavily dependant on the plugins which are not being maintained continuously.
Hope this helps.