Onsen + React + Cordova + Android == slow loading time

[Guest]

Hey folks. We’ve just started work on getting our Onsen based code to replace our native Android app. The initial effort has left us pretty concerned, as it takes up to 5 seconds to load the initial app UI on a fairly new Nexus 9.

Does anyone here have some tips on how to shrink the Onsen app bundle a bit? Ours is 934 KB, and in looking at the Chrome logging, it takes almost 5 seconds to load and parse it.

Beyond that, any advice people might have would be greatly appreciated as we’re pretty new to this and don’t have a whole lot of experience to draw from.

[munsterlander]

@sherscher Are you doing release builds or debugger builds? My Dartitis app has a fairly expansive charting component to it and it only takes about 500 ms to load but the splashscreen works great to cover that up.

I can’t speak for React as I am using vanilla with straight Onsen. I did remove all of the angular and react libraries to reduce weight though.

[Guest]

I’ve done both debug and release builds and they’re both painfully slow. I refactored things to have a loading screen while the app bundle loads, but if there’s any way I could figure out how to reduce the size of the bundle, I’d do it.

Does 900K sound too big to you? I just don’t have enough experience with this stuff to have a frame of reference.

[munsterlander]

@sherscher Not really. My final APK for one of my apps is 4.6 MB and it loads without issue. What all is your app doing (trying to do) on load? Also, how much of your code is in your initial index.html file?

[Guest]

@munsterlander Well, until I refactored it, I loaded my app bundle in index.html. It’s the app bundle that’s killing me, as it seems to take a LONG time to load. This is coming from Android Studio:

11-15 06:16:27.510 29001-29001/com.collobos.presto D/CordovaWebViewImpl: onPageDidNavigate(file:///android_asset/www/index.html)
11-15 06:16:28.654 29001-29001/com.collobos.presto D/SystemWebChromeClient: file:///android_asset/www/js/index.js: Line 39 : Received Event: deviceready
11-15 06:16:28.654 29001-29001/com.collobos.presto I/chromium: [INFO:CONSOLE(39)] “Received Event: deviceready”, source: file:///android_asset/www/js/index.js (39)
11-15 06:16:28.661 29001-29001/com.collobos.presto D/CordovaWebViewImpl: onPageFinished(file:///android_asset/www/index.html)
11-15 06:16:32.916 29001-29001/com.collobos.presto D/SystemWebChromeClient: file:///android_asset/www/app.js: Line 18 : in main constructor

We get onPageDidNavigate at 6:16:27. About a second later (6:16:28), we receive device ready from Cordova. It’s in the handler for device ready that I load our app bundle. And a little more than four seconds later we get a log statement from the app. The app will have done no networking yet, so none of those 4 seconds is because of a slow network.

Is it me, or does 4 seconds to load our app seem like a long time? I can’t tell what is responsible for it. We have Onsen, React and Redux in the mix here. I doubt Redux is the problem, as it’s pretty lightweight. I feel like it’s loading Onsen or React that is causing this, but I’m not sure how to figure out who’s the culprit.

[munsterlander]

@sherscher Hmm, I am not certain either. Have you tried making a blank project with those libraries and see its load time?

[Guest]

Nope…haven’t tried that yet. Will try to do that today.

[munsterlander]

@sherscher Let me know how that works, because 4 seconds does not seem right to me. There has to be something that is occupying that time.

[Guest]

We spent the whole day profiling using the Chrome developer tools. We stripped our app down to just an Onsen Navigator that pushes one empty page with a toolbar. Just that with react/redux we were getting load times of around 4 or 5 seconds. It was challenging to point to one thing that was causing it. We use webpack to create our app bundle, and all the __webpack_require calls took a surprising amount of time. That aside, if we removed the Onsen UI part of the app, we got load times down to 1 to 2 seconds, which still isn’t great, but it’s at least usable.

Sadly, we might have to investigate an alternative to Onsen-React, as the Android Cordova experience is really really bad in the limited testing that we’ve done.

[Guest]

Just as a sanity check, I loaded up Monaca and had it create a React Onsen Navigator project. I’ve confirmed it takes 3 seconds on our Nexus 9 for the first screen to appear after starting the app. That’s with a virtually empty project that doesn’t have complicated pages, doesn’t have Redux or any state management at all etc. After adding all the app code, I can see why I’m seeing load times that are north of 5 seconds. This is somewhat distressing, but we’ll have to figure out a way to make it work.

[Fran Diox]

@sherscher Thanks for the testing. It’s actually the first time anyone reports a slow time about this. I will try to test it and see if I can find any solution.

Are you building the app with Monaca or Cordova? Or are you using Monaca debugger?

[Guest]

I took the code that Monaca created and copied it to the www folder in my cordova project.

[DiselPower]

Hello guys,
is there a good step by step guide of how to create an Onsen UI 2 + React + Redux + Cordova application from scratch?

I mean there are a lot of guides out there but almost none of them tell about the initial project setup: what npm packages to install and how. How you create the project, how you structure it, where goes css, where goes logic and so on.

In the last week I have read ALOT of articles and tutoria about Onsen and React… But I still dont have any clear understanding of how all this things work together in a real project… I am lacking the basics…

Like a small step by step guide:

1. use npm and install following packages…
2. this package does this and this and you have to configure it like that and that…
3. to create a project which will use cordova + onsen + react + redux and will use babel and webpack you have to use this and this… and make following configurations in following files…
4. ok you have created the project! nice! Now here is the correct way of initializing app using cordova… (because i dont understand how hell i have to initialize it… shoul I use cordova onDeviceReady??? or ons.onReady??? or something else???)
5. you have to structure you project like that… because it brings following benefits…
6. the are several additional libraries that can help you and make you life easier…
7. here is an example of a working project with code where you can see everything: the correct app initialization, brilliant structure, working with stores and async web services…

If someone knows where to find this or maybe can create this guide - GOD please do it!

Thanks alot in advance.