F7v4 Vue/Cordova launch performance

Here’s just question to fellow developers caring about performance.

For me F7v4 Vue/Cordova launch performance seems to be much slower than with F7v2.

Here are some observation, just to gather some other opinions:

  • I have a basic test-project (mostly based on kitchen-sink, with some styles added), which I created in F7v2.

  • I re-created the project in f7v4 and inv4, the time-to-first-screen (after splash) is much longer as in the old project (which, btw., has much more assets and code/mixins, etc…)

While the v2 version starts quite instantly (and dismisses the splash-screen in a second), the v4 version takes considerably longer.

Here’s some details:

  • I just used the framework7 cli to create the project
  • I created the hybrid project also from within the f7 cli
  • I measured (mostly) the most recent iOS (using XCode 10) on an iPhone 5s, iPhone X, iPad min and iPad Pro.

Anybody else seeing these performance issues? Any workarounds?

It’s quite easy to test:

  • create a basic project in v2
  • create the same thing in v4 (e.g. using framework7 create --ui
  • build for production (without adding any code)
  • install on your (iOS) device

Anyone seeing this as well?

I wrote applications on v1, v2, v3 and v4 (beta). Everywhere - great performance.Tested on Android 5,6,7,8 and iOS 10,11,12 (real device iPhone 5S => iPhone XS).

Of course, we are not talking about cheap noname Adnroid-devices. I do not understand why you need Vue when in V4 there is a router component and setState. It’s very powerfull framework without any addition JS-libraries

  • I’m just talking about the time until the Splashscreen disappears (no matter, if the device is slower or faster). I did just a direct comparison (and the v2 contained a bit more code, and a similar amount of images).
  • And yes - you don’t understand, unless you know, that my app(s) communicate via JSON, and reactive Vue-components are a big helper to reduce the amount of boilerplate code.

Please tell me which task you were unable to solve with F7 core?

Tbh I didn’t seriously try to replace Vue with F7 (just add it). That’s because I re-use quite some code from regular HTML-layouts (written with Vue) in F7 (by HTML I don’t necessarily mean a web-page).
For a real-world example I could think of getting the result of an REST-API call (e.g. from Wordpress) into a hierarchical page-structure with the help of Vue’s conditional rendering-syntax. I haven’t found anything in the F7 docs (yet), which does conditional rendering (at least not to that extent).
2. point is: I don’t necessarily run in a DOM-environment, but F7 relies on DOM. So if I use Vue, I can use the same code here and there with just minor modifications (if any)

If you have some good examples or links - I’d be happy to try that out. Improvement and less dependencies are always appreciated!

Read docs about $setState, router component, and learn Template7.

Right, but these are not examples of ‘real-life’ usage :wink:

Btw - my original question was not Vue vs F7 , but the performance differences I see in F7 v2 vs F7 v4 and if others experiencing the same issues.

As for startup performance, i was testing it a lot. And v4-core cordova project starts faster than v2, v3.

Cordova deviceready event (when f7 initializes) depends only on cordova-related stuff - cordova version, cordova plugins, + time required to load webview - which depends on amount of CSS+JS size. And F7 v4 bundle size (JS + CSS) is smaller, so it loads faster.

As for F7-Vue, it also depends on amount of Vue components you register before app init, including own components and router components. v4 bundle has more components, but i can’t say it should significantly increase loading performance, maybe + few ms.

And in terms of JS stuff which F7 does under the hood, there wasn’t anything much different from from v2 to v4. Also pay attention to F7’s initOnDeviceReady parameter http://framework7.io/docs/app.html#app-parameters, which holds its initialization (and nothing will be rendered in F7-Vue) untill deviceready event fired, which can be a while due to some “slow” cordova plugins. So you can try to disable it, but make sure you use any cordova related APIs in custom deviceready handler

1 Like

Thanks for this great feedback.
I’ll check that again and see, why this is slower for me.
Anyway - it’s great to see that you care about performance!