3 ms·

Isn't this the whole circle? Returning to the time where iPhone would not have a native API and web apps were the way?

redbar0n 4y ago
For a lot of (most?) apps not requiring native capabilities, I suspect it is. The web has come a long way since the days of FB ditching HTML5 in favor of creating React Native. Here are some recent comparison videos, using the exact same app example. React Native (w/ Animated API): https://www.youtube.com/watch?v=yV-2HRzNX9o&t=13s https://www.youtube.com/watch?v=yV-2HRzNX9o&t=13s Ionic React 5 + Capacitor 3.0 (w/ SwiperJS): https://www.youtube.com/watch?v=2o2hpv9N7Ys https://www.youtube.com/watch?v=2o2hpv9N7Ys Web apps are apparently able to achieve 60 fps in a Web View these days: https://ionic.io/blog/ionic-vs-react-native-performance-comparison https://ionic.io/blog/ionic-vs-react-native-performance-comp... On the other hand, you have efforts such as Tamagui.dev which can give you close to 100% code sharing between a React web app and a React Native app (making the divide less relevant, for mobile apps at least): https://tamagui.dev/docs/intro/compiler https://tamagui.dev/docs/intro/compiler
- deleted 4y ago
  [deleted]
- throw_m239339 4y ago
  > Web apps are apparently able to achieve 60 fps in a Web View these days: https://ionic.io/blog/ionic-vs-react-native-performance-comp https://ionic.io/blog/ionic-vs-react-native-performance-comp... With a high end device. That's the problem. I can get 60FPS in my native app on a $50 Android phone if I use Kotlin/Java and Android SDK... I can't get that in a web view on the same device with a native wrapper using Ionic...
  - redbar0n 4y ago
    That's interesting, and very ironic, since PWA's are supposed to be the lightweight option.. Did you try recently? Ionic has developed quite a bit the last years, it looks like. Did you try the same with a React Native app too?
    - dmitriid 4y ago
      You can't have decent animations on the web without a powerful device, period. The reasons are simple: - animations that affect layout are extremely heavy because you need to re-layout and re-draw the entire page on every update. That's why you still can't animate things like height: auto etc. They can only be done on the CPU. There's literally no good way around that besides hacks that rely on the next reason - animations that don't affect layout like transform: translate can be offloaded to the GPU. But then you need a GPU and some of them are still ridiculously expensive. For example, anything related to opacity changes (because you'r likely to still run into layout re-calculations with opacity changes) Some device manufacturers (like TVs where many apps are just web apps) even have specific requirements and block lists for things your can and cannot do with respect to animations on the device
      - redbar0n 4y ago
        Thanks for sharing your insights! Why don't you need to 're-layout and re-draw the entire page on every update' on native? Animations that affect layout still affect layout when on native, right? Is the reason that JS (and/or the browser sandbox) is single-threaded, whereas native is natively multi-threaded by default? So the point is that cheap mobile devices may not have a GPU, but they may have multiple cores, so they can layout & draw using multiple-threads?

For a lot of (most?) apps not requiring native capabilities, I suspect it is. The web has come a long way since the days of FB ditching HTML5 in favor of creating React Native. Here are some recent comparison videos, using the exact same app example. React Native (w/ Animated API): https://www.youtube.com/watch?v=yV-2HRzNX9o&t=13s https://www.youtube.com/watch?v=yV-2HRzNX9o&t=13s Ionic React 5 + Capacitor 3.0 (w/ SwiperJS): https://www.youtube.com/watch?v=2o2hpv9N7Ys https://www.youtube.com/watch?v=2o2hpv9N7Ys Web apps are apparently able to achieve 60 fps in a Web View these days: https://ionic.io/blog/ionic-vs-react-native-performance-comparison https://ionic.io/blog/ionic-vs-react-native-performance-comp... On the other hand, you have efforts such as Tamagui.dev which can give you close to 100% code sharing between a React web app and a React Native app (making the divide less relevant, for mobile apps at least): https://tamagui.dev/docs/intro/compiler https://tamagui.dev/docs/intro/compiler

deleted 4y ago
[deleted]
throw_m239339 4y ago
> Web apps are apparently able to achieve 60 fps in a Web View these days: https://ionic.io/blog/ionic-vs-react-native-performance-comp https://ionic.io/blog/ionic-vs-react-native-performance-comp... With a high end device. That's the problem. I can get 60FPS in my native app on a $50 Android phone if I use Kotlin/Java and Android SDK... I can't get that in a web view on the same device with a native wrapper using Ionic...
- redbar0n 4y ago
  That's interesting, and very ironic, since PWA's are supposed to be the lightweight option.. Did you try recently? Ionic has developed quite a bit the last years, it looks like. Did you try the same with a React Native app too?
  - dmitriid 4y ago
    You can't have decent animations on the web without a powerful device, period. The reasons are simple: - animations that affect layout are extremely heavy because you need to re-layout and re-draw the entire page on every update. That's why you still can't animate things like height: auto etc. They can only be done on the CPU. There's literally no good way around that besides hacks that rely on the next reason - animations that don't affect layout like transform: translate can be offloaded to the GPU. But then you need a GPU and some of them are still ridiculously expensive. For example, anything related to opacity changes (because you'r likely to still run into layout re-calculations with opacity changes) Some device manufacturers (like TVs where many apps are just web apps) even have specific requirements and block lists for things your can and cannot do with respect to animations on the device
    - redbar0n 4y ago
      Thanks for sharing your insights! Why don't you need to 're-layout and re-draw the entire page on every update' on native? Animations that affect layout still affect layout when on native, right? Is the reason that JS (and/or the browser sandbox) is single-threaded, whereas native is natively multi-threaded by default? So the point is that cheap mobile devices may not have a GPU, but they may have multiple cores, so they can layout & draw using multiple-threads?