I'm currently testing worklight and I noticed a huge loss of performance on android devices compared to iOs ones. (tested on asus nexus 7 vs iphone 4)
The first point was: A simple html page jerks during a simple jquery mobile page transition.
No server calls.
I removed the jQuery mobile transition as it uses a lot of javascript instead of css3 transitions capabilities, but it still continue to tilt from a page to another.
I mean there's a 1/10 second 'blank screen' between 2 pages and the rendering of the next page lags.
To analyze that issue, I removed the worklight layer and hosted my simple html/jquery mobile page on an apache web server and called it from my device's chrome browser.
It worked perfectly fluid even with transitions.
After, I analyzed the worklight generated code in the mobile browser simulator and it appears that there's a lot of wlclient javascript files in the , which is not a good way of implementing a web page from my point of view, and what's more a mobile one.
Is there a way to compile all those files in one to avoid multiple http requests to the server ?
Is there a way to avoid to load all the client api if we just need a small part? I mean, if I don't need encryptedcache, why load the related js?
Is there a way to force the browser engine to use inside the app (chrome, opera, android native...) in order to test the perf of each one?
Worklight 5.0.5.20121217-0622
Android 21.0.0.v201210310015-519525
Win 7 64bit
Eclipse 3.7.2
Thanks a lot for your help.
removed the jQuery mobile transition as it uses a lot of javascript
instead of css3 transitions capabilities, but it still continue to
tilt from a page to another.
You can choose not to use jQuery Mobile and implement animations on your own or use another UI framework. You can also try creating custom CSS-based transitions for jQuery Mobile.
I removed the worklight layer and hosted my simple html/jquery mobile
page on an apache web server and called it from my device's chrome
browser
Worklight's file are not hosted on any server, they are part of the .apk you install on your device. The performance in the Web View is different than the performance in other browsers such as Google Chrome. You can try to improve it by looking at what other people are doing.
Is there a way to compile all those files in one to avoid multiple
http requests to the server ?
There's no way to do it as part of the 'Build all and deploy' step. You can edit the contents of the native folder generated for each environment and manually put the contents into a single file. However, I would not recommend that approach since those changes will get overwritten when you 'Build All and Deploy'. Read this if you want to minify your resources using Ant, however I doubt it will notably improve performance.
Is there a way to avoid to load all the client api if we just need a
small part? I mean, if I don't need encryptedcache, why load the
related js?
No, you can do it manually if you read my reply to the question above.
Is there a way to force the browser engine to use inside the app
(chrome, opera, android native...) in order to test the perf of each
one?
No, you Worklight uses Apache Cordova and that uses the Web View provided by the Android API.
Related
I'm enjoying web development and I want to make an "app" to try my hand at mobile phone dev. Learning Java/AppleCode isn't feasible right now, so would it be possible to make a website that runs as an app on a phone? And have that app do the things people want apps to do, like integrate with your phone's calendar, receive notifications in the notification bar at the top (Android), etc...??
Yes.
Apache cordova will do the trick but you (of course) can't have php running, only html and javascript are supported (and the code in which the app is built).
Featueres :
Free :)
Code for multiple platforms in html and js.
Tons of plugins to do all kind of stuff for you.
Can (with a little modification of content security policy) load pages from a remote server.
Downsides :
Not the performance of normal code.
Only communication between app code and js is using callbacks, this results in true Callback Hell.
All app code runs asynchronously while js code doesn't.
Installation is not a simple .exe but an actual guide (i managed to screw it up, had to system restore to easily remove created files. But it should be rather simple).
Supported Platforms :
android
ios, can't compile for ios on non-apple though (thanks apple!)
browser (basically webserver)
windows
windows 8 app
windows phone 8
blackberry 10
and more...
I'm on a bit of new ground here and perhaps this is a repost (if so>sorry).
I need some pointers on which direction to go. I have previously made an android app and found myself using most dev time on the UI. I wish to design the UI with HTML5 and distribute it to android and iOS .
I researched a lot about native and hybrid in order to focus my effort. Came across a bunch of platforms like PhoneGap, Appcelerator, Trigger.io and AppGyver (found the latter two appealing). But now I'm confused...
I basically wish to to make an intraweb environment that allows a team to develop HTML5 content that feeds data into a database while keeping the development and database under strict version control.
Thinking of such a setup
Local server hosting the source HTML5 code and database(s) - git upstream.
Development is then done by git on desktop computers
The mobile/tablets pulls the source (git origin) and creates instances that pull request the data entries to upstream (and thereby all other remotes)
Multiple units can work on the same instance and contribute to pull request data to the origin. They see changes right away (logic should assure no conflicts - thinking of pinging the devices)
No need to distribute new app via app stores if some new html5 is added (no behavior changed so no manifest violated).
Currently I'm considering making a native app that has a webview and performs git commands, but I'm fearing that I will get stuck (have no iOS programming experience). Is this overkill?
I'm not at all against the hybrid suppliers - just wondering if they will let me achieve what I aim for.
If anyone has some links to online tutorials on how to archive similar task or can provide usefull hints/pointers then I would appreciate it.
I'll upvote all answers that helped me and set the solution for the one that helped me most.
I worked some years with web technology packed into native apps. You have to consider two things.
First, your app will be just a simple HTML page or it will have fancy UIs, very dynamic UI interaction and animations? If it is complex and very dynamic, stick with native apps. The main advantage of them is the performance, it is VERY superior to WebView packaged apps in HTML5.
Second, the WebView have MANY usage restrictions. It is not like the Chrome browser that you use in your phone/tablet. Too fancy operations will likely have problems with WebView, and the extra time you've spent constructing UIs you will spend working around very annoying little problems.
Another concern, using git bundled in your app will be hard to integrate with the WebView due to its sandbox restrictions. I surely would not recommend to go that way. If you don't use the native phone hardware, like camera and others, you can show in the WebView a remote HTML5 site. It is a much more simple and secure option.
Another thing to note. These packing JavaScript libraries have different objectives. The Cordova (PhoneGap extends this with some Adobe powered features) goal is to make available to your JS code the native phone features, it has nothing to do with UI. The Ionic that was mentioned is focused on UI development. There are other libraries that are focused on UI and are used with PhoneGap/Cordova. My suggestion for fancy and dynamic UIs using HTML5 based technology is the Sencha Touch framework, that is bundled in ExtJS 6 now. Although they are paid framework and require advanced Javascript programming. The learning curve is very big.
Concluding, if your goal is faster UI development and the apps are simple, you can go with Cordova and another UI-focused framework. But I suggest to forget the complicated Git "on-the-fly" app update. If your app uses many native features and has very complex and big UIs, stick to native due to performance.
Another thing to note, well developed native apps consumes (in most cases) much less network bandwidth and battery lifetime.
I hope these informations help you =)
I might suggest looking into Ionic, it is a quote:
Powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript.
Ionic is focused mainly on the look and feel, and UI interaction of your app. That means we aren't a replacement for PhoneGap or your favorite Javascript framework. Instead, Ionic simply fits in well with these projects in order to simplify one big part of your app: the front end. We recommend reading Where does the Ionic Framework fit in? to get a good understanding of Ionic's goals.
Ionic currently requires AngularJS in order to work at its full potential. While you can still use the CSS portion of the framework, you'll miss out on powerful UI interactions, gestures, animations, and other things.
What I get from this is that Ionic integrates with PhoneGap.
I'm not sure how well this will help, but I think it will be useful in your search.
PhoneGap - Is as of yet, the single most comprehensive suite that allows you to leverage HTML, CSS and Javascript in a way that will give you the ability to have a single source solution and publish to the mobile landscape.
Using your scenario:
Create your application in local Webserver (Intranet)
Utilize the PhoneGap API to improve data access and UI.
Publish to GIT/SVN for versioning
Build with PhoneGap (Build Service - a cloud service that takes the zip of source code and then you choose your platform)
Publish as Private/Public to the Device Target (IOS, Android, WPhone)
In this way your HTML5 Application and your Published/Packaged App on the Devices you chose would be identical; and the WebApp and DeviceApp will remain in synch.
Useful PhoneGap Tutorials:
PhoneGap Tutorial 1
PhoneGap Tutorial 2
So far we have a web solution in html5, javascript for a webrtc solution. It is running successfully in chrome browser version 28.
Is it possible to embedded / convert the whole web solution in a single apk using phone gap?
Is the default phone gap browser support webrtc?
Please let know any info.
well, first you need to create projects in phonegap depending on your platform, say android, ios. Then you can start importing your web project into the www folder relatively and gradually, and see if it actually works. depending on functionality you will have to adapt to of course, jqm or some other framework perhaps along the way.
i made a little nice app with phonegap and mgwt.
Now i want to do the same app with jquery mobile and to compare the mgwt app with the jquery mobile app.
I want to compare the size and the performance of the both apps.
For example the speed of the change from one view (or side) to the next view (side).
Is this possible to test the speed with a stopwatch for example?
How could i do this testings?
Does i need an android phone or is it better to test it in a desktop browser?
How to test the performance and which tools are needed?
Please help.
One option you can use is Traceview. Here in this blog post you can see a method to measure the time of events in a phonegap application.
I hope it helped
You could use the Browsers DeveloperTools (Firebug, Chrome DevTools, Safari Web Inspector) to measure the performance of the different apps.
With Safaris Web Inspector it is possible to measure the performance of an Phonegap app running on a real device. see Safari Docs It can connect to the browser on the iOS device and also to WebViews used by an app, e.g. when it uses PhoneGap.
For Android you can use Weinre to get the Web Developement Tools for an app that is running on a device.
The Web Developer Tools offer a lot of possibilities to look at your Application e.g. inspect your DOM Elements, Resources, Network Traffic, Console and also to profile your app. You can call console.profile() to start profiling and end it with console.profileEnd(). So this would e.g. be an easy way to measure how long a function is executed.
In case of jQuery Mobile and only jQuery Mobile you can use this js script: https://github.com/jquery/jquery-mobile/blob/master/tools/page-change-time.js
At the bottom of my other article: https://stackoverflow.com/a/14469041/1848600 you will find how to use it.
We have recently started a Hybrid project(?) to work on iOS as well as Android with the following specifications:
Html pages, Javascript file, Jquery based libraries files and resource files (Images) are hosted on a server.
The hybrid code (iOS or android) loads the html pages in the web view and the page navigation and event handling is completely like any normal html and js based website. We have taken care of CORS for AJAX web service calls. The data is basically stored as local storage(browser's support).
Most of the data that is viewed by the user is live from web service calls, Except some of the images captured using camera which will be stored locally in the application sandbox. (For camera invocation, we have written native code.)
Why the architecture is planned in this way ?
One of the reasons - Any modification in the application will be handled right from the server as I mentioned that all the html and js files are centrally located on the server, Ofcourse also to skip the Apple's App submission process).
Now I am not really sure if there might be any issues with this kind of application - the issues might be because 1. Whether Apple accepts such apps ? 2. Maintenance of the Project 3. Any critics on the architectural design of the App.
I am one small developer in this project, I have these questions for you. Apologize me if I haven't put my doubts in appropriate way. Your critics and answers/tips are most welcome. Thanks..
You should use native code if possible, the performance of HTML5 apps is not very good when compared to the native apps plus the things that you can do with native apps are just worth it. Although Apple shouldn't have any problems with your apps. But As Wesley said they never really follow that consistency of the platform so they just look out of the place. Even in native apps, you might still be able to control simple aspects of your app like theme etc from a server, you just need to think ahead.