This is less of a code-based question and more of a best practices-based question I suppose.
I built a scrollytelling data visualization with svg elements using d3.js. While it works just fine on my desktop, it lags quite a bit on mobile (I'm thinking perhaps because mobile has less cpu/ram capability). While making it responsive using chrome dev tools for mobile, I suppose I figured because it looked fine for that particular device (which it does design-wise), it would render the elements just the same performance-wise (which it does not when deployed to an actual hard device).
I suppose my question(s) is - Is there a best practice for preventing something like this from happening? I'm assuming I should have staged this on an actual device earlier so I would pick up on something like this occurring. Moreover, (and perhaps a dump question), are there well-working svg-to-canvas converters that would allow me to override this problem (are these even a thing?), so when device width & height is detected, it would run the canvas-copy as opposed to the original svg code which is better suited for more powerful/capable devices?
Many thanks.
Related
Looking for a tree (or nested list) UI component that would work for a hybrid mobile app and would have the following properties:
drag-and drop
animations (visual feedback) for insert/delete/update and expand/collapse and drag/hover/drop
good performance on mobile
open-source (I would accept paid open-source, dual-licensing, etc.)
modern, clean look
"modern" implementation, for example aligning itself with philosophies like AngularJS, ReactJS, Ionic or whatever are the recent cool kids on the block
My research so far has found the following ones:
https://angular-ui-tree.github.io/angular-ui-tree/#/cloning (no animations)
https://www.jstree.com/demo/ (drag and drop problems on mobile)
many others on http://www.jqueryrain.com/demo/jquery-treeview/ but I haven't found anything that would look designed for mobile
None of them really seems to work well in mobile browser (I'm testing on Android 4.x, 5.x, 6.x).
Following issues seem to occur:
drag events seem to not be interpreted properly, instead unexpected things happen, like scrolling or text selection (subjectively: does not "seem right" to me as a user to manipulate the tree)
choppy animations
clickable elements too small for tapping via finger
about half of the solutions sadly look like windows 95 Explorer tree, which is not good on the eyes and does not seem modern and clean
Can you advise such a UI component that would work or at least would be a good starting point for my own enhancements?
Are the mobile browsers ready to host such a sophisticated component, in terms of input events, layout, performance, animations, etc.?
Full disclosure: I come from a Java+Android background, expanding into hybrid mobile apps, so my paradigm might not yet be fully adjusted.
The backend (e.g. Firebase) part is here: Using firebase tree structure to represent a "document outline" structure directly
I'm having a issue which is hard to debug. I'm using a Javascript library (the JQuery Flexslider plugin) in a number of different places on my site. It's all working fine except for one particular phone where it doesn't work and slows down everything on the page.
So far, I've only seen it happen on this one device. Other devices of the same type do not have the issue. This person has an iOS that's a few versions out of date and not much memory, so I think it's a memory issue.
An old hack was to move the carousel element that has the issue on the page with Javascript, but I want to find and fix the root issue.
How can I start debugging this? I'm not sure how to test for a memory issue on a device.
If you're on a Mac, then you can plug in and use remote debugging via Safari, where you'll have access to the tools, including the profiler (not sure the state of Safari support in Windows). There are numerous resources for showing how to remotely debug a device, unless it is a really old version of iOS you should be fine, you’ll have to enable the develop menu via settings but after that its plain sailing if you know your debugging tools.
I'd agree that it doesnt really sound like a memory issue, although jQuery tends to be hungry in that respect, I dont know the plugin in question but the quality of plugins is hugely variable in jQuery-land. Old phones and old versions of jQuery certainly never played well together.
When you say one phone, you mean one type of phone + iOS version? The question isnt clear, its almost reads like you have 2 identical phones/os's where 1 works and 1 does not.
If you use Chrome you can use the Heap profiler
First open your developer tool and start recording.
Next start using your page and try to replicate your issue, stop recording and review the stats.
This is likely not a memory issue, but a cpu issue. The way jQuery does animation is processor constrained on older dvices. Factors that are easiest to handle include:
size of the page (html length and complexity)
animation steps, length, and complexity
You have a couple of options here, but the simple answer is you are asking too much of the older processor. Assuming you are using this plugin http://www.woothemes.com/flexslider/ you could try disabling or simplifying some of the transition effects. animation and animationSpeed would be the first I would suggest.
If you are interested in not changing the experience for most users you could consider tying into the start and end functions on the callback api and checking the time it took to perform the first transition, then reinitialize a simpler version of the slideshow for that device.
The hard thing here is there isn't really a right answer. If one of the above options doesn't fix it you're likely looking at choosing/building a different slideshow, degrading the experience for everyone, or determining the best way you feel comfortable with choosing who gets the degraded experience.
I am developing a very game-like web application, and there is a particular requirement that is driving me nuts: I have to show an image for a very short (some hundreds of ms, sometimes even just 25ms, just enough for the user to perceive something when he/she already knows what to look for). This application has to work on Chrome, Firefox and IE9+, but also Android tablets and iPad.
The only reliable way of doing this in desktop browsers I have found is Flash. Using Javascript and html5 canvas in a lot of computers results in the items not even being rendered. On the other hand, Flash doesn't work on the iPad and some Androids, but in those devices, our tests show, the javascript way seems to work just fine. So this is the best solution I have found: grosso modo, if iPad then load_javascript_version() else load_flash_version().
Have you seen anything like this done before? Should I abandon any hope of finding a more maintainable solution?
Thanks a lot.
Haven't tried this particular use case, but a 2D library like KineticJS should be able to do what you need.
There are jQuery functions like timeout: http://www.jquery4u.com/jquery-functions/settimeout-example/ and delay: http://api.jquery.com/delay/
Are you using RequestAnimationFrame in your game loop? If not please read about it and ensure that your image is preloaded when you try to render it.
Mozilla dev RAF api
Most devices and browsers that have hardware accelerated canvas support, should be able to achive as fast as 60 fps fairly, which means you would be able to show an image for a single frame or about 16.7 ms.
I have managed to do similar things using the createjs library which can very easily be set to use the RequestAnimationFrame api.
Createjs ticker RAF
I am using flot.js library for my graphing needs, but the performance with the android webview is very poor. I have this graph on the webpage, and have a need to be able to scroll up and down. But scrolling causes what I liken to a "sloshing" effect (think water in a glass!).
If scroll down the flot graph "slips" upwards, and similarly if I scroll up the flot graph slides downwards before returning to its normal position. So if I scroll up and down quickly, the graph looks like its bouncing around and overlaps the title and footer (as seen below).
I have tested this on a desktop, and the problem disappears so I believe it has something to do with the canvas or webview performance.
As anyone run into this problem before and know how I can get the flot graph to behave and stay properly aligned?
sample flot graph http://img543.imageshack.us/img543/1627/kpy4.png
UPDATE:
Android 4.4 now uses chromium for the webviews (almost chrome, basically) and the performance is a lot better.
~~~~~~~~~~~~~~~~~~~~~~~
Perhaps not the answer I, or anyone else is looking for, but I have discovered the problem to be a combination of poor flot.js and poor android webview performance.
The android webview, as noted many times on this site, has subpar performance for intensive js applications. Turning on hardware acceleration did not help in this case.
Additionally, flot.js does not perform terribly well either. In talking to a colleague, he was able to cut the loading time needed for his application by almost a factor of 100 by writing pure javascript instead of using flot.
TL;DR: Android WebView == Flot.js == slow
Anyone out there done reserch or have real good experience with 3rd party scroller's for apps running in a webview? Especially with more than one divide that scrolls?? i.e. A webview with a navigation panel and a details panel.
When there is only one divide requiring a scroller, it works smoothly but in the situation above, its very choppy. I'm sure a lot of developers have encountered this issue.
I have tried iScroll (and is best so far) along with other plugins but the quality of the scroll is less than desirable. I can't use iFrames because I need to tweak the style of some HTML docs that are pulled from our server. I've searched online for a way to invoke the native scroller in HTML divides and haven't found a way to. Is there a way and how could I do this?
I've been playing around using API's 9 thru 15 on various devices and I'm not seeing any difference when it comes to the performance of a non-native scroller. I'm currently developing the app on 15 if this is a help to your answer. Also, I have hardware acceleration off and this works best.
I've played with jqm, Sencha, and alike and they seen to have satisfactory scroller's. Does anyone know what they use? The issue why I'm not primarily using any of these platforms is the bulk and other performance issues.
Currently I'm building an app using raw javascript and this is proving to have a significant improvement in performance over all in animations within the webview layouts - Significantly better over any of the big name cross platform solutions. Unfortunately I am not experienced enough to build my own scroller so I need to find an out of the box solution.
Any ideas, leads or solutions so others that are better at writing apps with javascript can have a fighting chance building quality apps would be very appreciated.
With you experiences and experties, please include what API level you were using.
Thnx
I did many tests about this. I won't recommend a third party scrolling based only on HTML because on my experience the problem is not the javascript, but the webview itself:
1) Iframes performance on WebView is weak weak weak. I got a nearly 40% decrease on performance for any (complicated) app just for placing it inside an iframe. Besides, they cause much more problems if you use hardware acceleration.
2) Scrolling of DIVS is acceptable if stuff in divs is simple and SHORT, but the performance decreases as you add more elaborate stuff to scroll. For example, in my case it made a difference to enclose everything in ul/li's (slower) or not (noticeabily faster). However, the feeling is not perfect, ie., if you are used to native scroll, you realise this is not native scroll.
3) Raw scrolling of the body is very good. Besides, you get native-like feedback, such as the glowing effect on overscroll, etc. But mind that this scroll is NOT using javascript, it's just a page bigger than the webview that you let the user to scroll and WebView takes care of it. In my case, this was the only acceptable scroll experience I wanted for my users.
So I came with a mixed solution: I did a JavaScript-callable Java function that would open another webview with requested size like if it was an iframe, so I could open it from HTML and fill with stuff, it was not very difficult to do, and the improvement was awesome.
More things:
4) Scrolling a WebView from Java (scrollTo) was very useful in my case, where I had a huge HTML page loaded (kind of a magazine) to be swipped. Performance if I asked the webview to scroll from Java was much, much, much better than relying on JavaScript to do the scroll.
5) Hardware-Acceleration improves the scroll speed a 100% -setLayerType(HARDWARE)- but to be able to use it you have to keep you html very very simple. stuff like Display:none/block, etc completely break the application (see WebView fails to render until touched Android 4.2.2 for more info)
6) HTML5 animations on big images completely kill the scrolling experience.
7) All this is not valid in a couple months, goole is replacing the rendering engine to "Blink", so who knows what's gonna happen. I am restless.