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
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.
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!
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
