3 ms·

>People who haven't tried it themselves will say to use Cordova for everything, but once you start you notice the performance issues right away. I've developed

>People who haven't tried it themselves will say to use Cordova for everything, but once you start you notice the performance issues right away. I've developed a half dozen apps in Ionic Framework, and they all operate at a silky smooth 60FPS. I don't end up with performance issues because I'm: * Using CSS for animations * Not using JQuery for things you should never use JQuery for in 2016 because they're too slow on mobile * Not piling on tons of verbose frameworks to accomplish every little thing and therefore slowing down the JavaScript engine as it ends up with multiple megabytes of code * Limiting asset sizes so we don't overrun mobile memory limits * Generally optimizing the code so that I'm not wasting time or creating 16 intermediate arrays in every data conversion/manipulation because the functional approach looks so pretty I understand you were "just learning JS development." It may actually (ironically) take more of an expert to get good performance out of Cordova than it does to produce a decent native app. But everything I did above should also be standard practice for creating any web pages, since otherwise performance will in fact be crap on mobile. So it's really just web development best practices. No, it's not that there are limitations in Cordova. It's that writing web pages for mobile is harder than for desktop, but that when you do it right, it makes for a good app experience as well. Not to mention React Native and NativeScript, which will get you full speed on mobile with native controls.

rudedogg 10y ago
I'll be a little more detailed. What I tried to do was make a game using Phaser. I didn't get past creating the loading and menu scenes before I starting noticing really bad sluggishness when first loading, etc. If you let it sit for 10 seconds then things mostly smooth out, but you still have the frame rate randomly drop, etc. I had done so little there was nothing to optimize, it was just the barebones to get something on the screen. And I didn't even try it on mobile, this was using my desktop/laptop. I see the same thing with CSS3 animations. There's this weird jerking, even on something simple like this: http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_speed http://www.w3schools.com/css/tryit.asp?filename=trycss3_anim... . When I enable the FPS meter I see drops to 30FPS. Also, I hadn't heard of Framework7 mentioned in another comment, so I checked it out. The demo apps I tried (http://framework7.io/apps/ http://framework7.io/apps/) have issues on mobile. I just feel like it's unfair to new developers who are going to invest a lot of time before they figure out hybrid apps have issues. I know people want to market/highlight how great their framework is, but it causes us all grief. We should be more upfront about what works well (CRUD apps), and what doesn't (games, animations, custom UI). I don't know enough about React Native to comment.
- mikewhy 10y ago
  In that example they are animating the "left" prop, which won't be hardware accelerated. Using "transform: translateX" will allow the animation to be hardware accelerated.
- SomeCallMeTim 10y ago
  I'm working with Phaser on an app that needs to be mobile, but I'm regretting not using PIXI directly. See: http://www.goodboydigital.com/pixijs/bunnymark/ http://www.goodboydigital.com/pixijs/bunnymark/ -- click or touch to spawn bunnies. Run it on mobile. On my Nexus 6 it stays pretty smooth around 10-15k bunnies, sometimes more. I've seen it glitch as thousands of new bunnies are added at once, but in a well-written game you'd create a "bunny pool" and pre-create all of them so that you could add them without as much overhead. It's actually a bit jerky on Firefox on my "ultra low power" laptop, despite having a recent Intel i7 CPU, but Chrome is smooth up to 10K bunnies. On my gaming computer, heh, I can go over 100K bunnies without it dropping below 60FPS. That's a lot of sprites, period. At some point I'll probably port my game from Phaser to PIXI. Like I said, I'm stuck using a browser for at least part of my game. If I were creating a 2d game that didn't require a browser, I'd probably use something else: Unity, maybe, or I'd look around at the other 2d and 3d engines out there to see what's available. I also have an existing 2d engine that I might bring up to date. In your sample on w3schools, I ran some profiling, and it's firing off dozens of JavaScript callbacks per second, doing who-knows-what. Analyics, probably? Also, as mikewhy pointed out in a sibling comment, transform:translateX() gives you hardware acceleration. Otherwise it has to rebuild the DOM on Every Single Frame. I pulled the code to a local server without the w3schools extra cruft and it was much better, but still not perfect. Converting to using tranform:translateX() made it silky smooth. In any case, good luck.

rudedogg 10y ago

I'll be a little more detailed. What I tried to do was make a game using Phaser. I didn't get past creating the loading and menu scenes before I starting noticing really bad sluggishness when first loading, etc. If you let it sit for 10 seconds then things mostly smooth out, but you still have the frame rate randomly drop, etc. I had done so little there was nothing to optimize, it was just the barebones to get something on the screen. And I didn't even try it on mobile, this was using my desktop/laptop. I see the same thing with CSS3 animations. There's this weird jerking, even on something simple like this: http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_speed http://www.w3schools.com/css/tryit.asp?filename=trycss3_anim... . When I enable the FPS meter I see drops to 30FPS. Also, I hadn't heard of Framework7 mentioned in another comment, so I checked it out. The demo apps I tried (http://framework7.io/apps/ http://framework7.io/apps/) have issues on mobile. I just feel like it's unfair to new developers who are going to invest a lot of time before they figure out hybrid apps have issues. I know people want to market/highlight how great their framework is, but it causes us all grief. We should be more upfront about what works well (CRUD apps), and what doesn't (games, animations, custom UI). I don't know enough about React Native to comment.

mikewhy 10y ago
In that example they are animating the "left" prop, which won't be hardware accelerated. Using "transform: translateX" will allow the animation to be hardware accelerated.
SomeCallMeTim 10y ago
I'm working with Phaser on an app that needs to be mobile, but I'm regretting not using PIXI directly. See: http://www.goodboydigital.com/pixijs/bunnymark/ http://www.goodboydigital.com/pixijs/bunnymark/ -- click or touch to spawn bunnies. Run it on mobile. On my Nexus 6 it stays pretty smooth around 10-15k bunnies, sometimes more. I've seen it glitch as thousands of new bunnies are added at once, but in a well-written game you'd create a "bunny pool" and pre-create all of them so that you could add them without as much overhead. It's actually a bit jerky on Firefox on my "ultra low power" laptop, despite having a recent Intel i7 CPU, but Chrome is smooth up to 10K bunnies. On my gaming computer, heh, I can go over 100K bunnies without it dropping below 60FPS. That's a lot of sprites, period. At some point I'll probably port my game from Phaser to PIXI. Like I said, I'm stuck using a browser for at least part of my game. If I were creating a 2d game that didn't require a browser, I'd probably use something else: Unity, maybe, or I'd look around at the other 2d and 3d engines out there to see what's available. I also have an existing 2d engine that I might bring up to date. In your sample on w3schools, I ran some profiling, and it's firing off dozens of JavaScript callbacks per second, doing who-knows-what. Analyics, probably? Also, as mikewhy pointed out in a sibling comment, transform:translateX() gives you hardware acceleration. Otherwise it has to rebuild the DOM on Every Single Frame. I pulled the code to a local server without the w3schools extra cruft and it was much better, but still not perfect. Converting to using tranform:translateX() made it silky smooth. In any case, good luck.