Living with a best-selling Indian phone for 10 days

Re:Living with a best-selling Indian phone for 10 days by osrec on Friday July 13, 2018 @07:56PM (#17527827)

We have a lot of Indian users use our PWA (https://usebx.com/app), so we tried to optimise for low end phones. Generally, we found that animations still run reasonably smoothly. The trick was to be really careful not to carry out too much layout thrashing, and use GPU accelerated CSS animations wherever possible. On some of the cheapest devices, we got our animation running as smooth as a Galaxy Note or iPhone. Just goes to show that if you don't over-bloat your app, even low end phones can offer a very good experience.

[ Parent | on HN ]

Re:Living with a best-selling Indian phone for 10 days by untog on Friday July 13, 2018 @08:15PM (#17527904)

I've been surprised by how performant you can get with CSS transitions and a will-change property. But good grief is it difficult.

On one hand I understand why a transition on `left` isn't hardware accelerated but a `translate3d` is, but on the other it seems crazy that we expect people to think and know this kind of stuff when they just want to do something very simple.

[ Parent | on HN ]

Re:Living with a best-selling Indian phone for 10 days by bgirard on Saturday July 14, 2018 @01:35AM (#17528993)

That's was my intention when I proposed will-changed. I was trying to get the Firefox OS home screen slide transitions to be performant without hard coding it in the Gecko layout engine.

[ Parent | on HN ]

Re:Living with a best-selling Indian phone for 10 days by untog on Saturday July 14, 2018 @10:48AM (#17530534)

Thank you for proposing it! I was astonished by the difference when I used it.

[ Parent | on HN ]

Re:Living with a best-selling Indian phone for 10 days by osrec on Friday July 13, 2018 @08:23PM (#17527951)

I agree with you. Performant animations with JavaScript are generally painful. CSS helps, but can be limited. It can also be a bit fiddly, especially when you want to chain animations together. Perhaps the web animations API will solve this as it matures.

[ Parent | on HN ]

Re:Living with a best-selling Indian phone for 10 days by bsimpson on Friday July 13, 2018 @08:34PM (#17528005)

I've been able to get surprisingly good animation performance on an NBU quality device as well with Houdini's Paint Worklet.

You do have to be intentional to get good animation performance on the web, but it's amazing that when you are, you can make transitions that perform better than the ones that come with the phone.

[ Parent | on HN ]

Re:Living with a best-selling Indian phone for 10 days by osrec on Friday July 13, 2018 @08:41PM (#17528036)

Absolutely - I've seen native apps struggle to provide the same animation performance as our PWA. It is hard work though, and I've seen even the best web devs fall short on performance. We luckily hired an absolute gem of a developer that thoroughly understood JS and CSS animations. We make sure we retain her, because her work makes our PWA infinitely more usable.

[ Parent | on HN ]

Re:Living with a best-selling Indian phone for 10 days by stefan_ on Friday July 13, 2018 @08:19PM (#17527927)

That site literally has a loading popup and constantly changing fonts and UI. Whatever you're doing, its not working.

[ Parent | on HN ]

Re:Living with a best-selling Indian phone for 10 days by osrec on Friday July 13, 2018 @08:25PM (#17527964)

Hmm, I know the initial load is a bit slow, but once that's done, it should be fairly performant. The slow load is caused by our in-browser PDF rendering library. We are due to make it a "lazy load" in the upcoming release, so things should be significantly faster.

[ Parent | on HN ]

Re:Living with a best-selling Indian phone for 10 days by syspec on Saturday July 14, 2018 @03:37AM (#17529289)

In the demo, when you mouse over the sales chart it creates a jittery effect.

This is because you're setting the position of an element that has a transition with a curve. In effect it's restarting its animation every time you move the mouse, causing it reset its velocity.

[ Parent | on HN ]

Re:Living with a best-selling Indian phone for 10 days by osrec on Saturday July 14, 2018 @04:36AM (#17529422)

May I know which browser and OS you're using please?

[ Parent | on HN ]

Re:Living with a best-selling Indian phone for 10 days by StavrosK on Saturday July 14, 2018 @08:27AM (#17530056)

A bit off-topic, but does the OS matter? Don't all browsers render the same between OSes? Although I can see them being different in things like font rendering...

[ Parent | on HN ]

Re:Living with a best-selling Indian phone for 10 days by osrec on Saturday July 14, 2018 @08:33AM (#17530078)

It can matter, depending on what responsibilities the particular browser offloads to the OS. I just like to ask, so we can diagnose issues fully :)

[ Parent | on HN ]

Re:Living with a best-selling Indian phone for 10 days by StavrosK on Saturday July 14, 2018 @09:28AM (#17530257)

True true, I was just idly wondering how many OS-dependent bugs people had seen, as a rough proportion.

[ Parent | on HN ]

Re:Living with a best-selling Indian phone for 10 days by noir_lord on Saturday July 14, 2018 @09:51AM (#17530346)

Firefox on iOS and Firefox on Android are completely different beasts, OS definitely matters when Apple forces you to use their layout engine.

[ Parent | on HN ]

Re:Living with a best-selling Indian phone for 10 days by vanderZwan on Saturday July 14, 2018 @11:20AM (#17530656)

> Don't all browsers render the same between OSes?

Canvas fingerprinting wouldn't be as effective if it did

[ Parent | on HN ]