Icenium Ion crashes on big apps

[softwarea]

Greetings,

I have an app that was using the Kendo UI Scrollview component, at some point the app started crashing on 20 pages loaded in the component, I have opened a ticket and the Kendo UI team answered that the ScrollView component is not designed for big amounts of content. They recommended to use different component so I switched to jQuery iosslider (http://iosscripts.com/iosslider/). There I had better results but now the app started crashing again, this time on 40pages. When we put more content (HTML + images) the crash is even sooner. At this point I was thinking that this is iOS webkit restriction or something like that, until I exported the entire project on my web server and I tried to open it through Safari in iPhone, this is the result:
Safari on iPhone - 100pages without problems
Icenium Ion on iPhone - crash on 40pages

For me this means that there is a problem or restriction in Icenium Ion. This demo demonstrates the problem: http://bgnews4.me/demo.zip
It crashes in Icenium Ion and it doesn't crash in Safari.

Is this something that the Telerik team can fix ? Is it a known restriction and if yes - what exactly ? I really need to know if you plan to improve/fix it ... I have invested alot of time in making this work with Icenium and I would really hate if I have to look for alternative

[Stefan Dobrev]

Hi Ingmar,

We have investigate your problem and it seems that you are hitting a limitation of the UIWebView. Fortunately there is an easy way around this: you just need to hide the pages that are not currently visible in the slider. Here is an updated snippet of your source code:

<script type="text/javascript">
            $(document).ready(function() {
                var settings = {
                    snapToChildren: true,
                    scrollbar: true,
                    desktopClickDrag: true,
                    onSlideChange: function(args){

                        var pages = $(".page", args.sliderObject);

                        $(pages[args.currentSlideNumber - 3]).hide();
                        $(pages[args.currentSlideNumber + 1]).hide();

                        $(pages[args.currentSlideNumber - 2]).show();
                        $(pages[args.currentSlideNumber - 1]).show();
                        $(pages[args.currentSlideNumber]).show();

                    }
                };
                $('.showroom').iosSlider(settings);

            });


            var data = '<div class="page" style="display:none">\
    <div>\
        <div>\
            <div>\
                <img src="http://togo.idiner.mobi/ToGoImages/Restaurants/e7b26b8c-8baa-4be4-a680-aa7673f0ec14/Public/af1dbd61-0f7b-4609-a4a7-97a1e79e2966_iPhone4.jpg?ver=' + Math.random() + '" data-id="b84e37ee-916a-41b0-8766-a7d9a4aafd88">\
            </div>\
            <div>\
    <div>\
        <div>\
            <div>Test1</div>\
            <div>Test2</div>\
        </div>\
        <div>\
            <div class="infoBox">\
                <img class="image" src="http://togo.idiner.mobi/ToGoImages/Restaurants/e7b26b8c-8baa-4be4-a680-aa7673f0ec14/Public/af1dbd61-0f7b-4609-a4a7-97a1e79e2966_iPhone4_preview.jpg?ver=' + Math.random() + '">\
            </div>\
            <div> \
                <div>Test3</div>\
                <div>Test4</div>\
            </div>\
            <div>\
                <div>Test5</div>\
                <div>Test6</div>\
            </div>\
            <div>\
                <div>Test7</div>\
                <div>Test8</div>\
            </div>\
        </div>\
        <div>Test9</div>\
    </div>\
</div>\
        </div>\
    </div>\
</div>';


            setTimeout(function() {
                var total = $('.page').length + 1;
                for (var i = 0; i <= 60;i++) {
                    $('.showroom').iosSlider('addSlide', data, total);
                    $('#slider').html('Slides: ' + $('.page').length + '<br />');
                    total++;
                }

            }, 2000);

        </script>

You can see the trick we apply: initially hide all pages and then display current one plus one before it and one after it and hide all the rest, when a slide change event occurs. The code is very naive and does not do any array boundary detection but can be used as a proof of concept. 

You can use the same approach with Kendo UI Mobile ScrollView as it has the appropriate event to hide or show the pages.

 

Hope this helps,
Stefan Dobrev
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[softwarea]

Thank you Stefan, I tried your suggestion and it works perfectly ! I am very happy with the result, good job !

[softwarea]

Once again thanks very much for your suggestion, Stefan. After a couple runs I am confident that your tipp works pretty good in my scenario.

There is only one question left: Do you have any idea why my code worked on Mobile Safari and in Icenium on Android, but not in Icenium on iOS? 

[Stefan Dobrev]

Hi Ingmar,

As you might know Mobile Safari has some differences than the UIWebView component used to host your hybrid application. I'm not sure what is the exact reason why it works fine in Safari, but apparently Apple is doing some kind of optimization in their browser and handle the memory usage more gracefully.

 

All the best,
Stefan Dobrev
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[softwarea]

Hello again Stefan,

actually I had not even heard about a "UIWebView" component until your answer.
When I first hit this bug (feature? ;-)) I was wondering if the crash is due to Icenium, Cordova, iOS or Webkit.

I now understood that this has nothing to do with Icenium. But are you sure it is not related to Cordova? I was thinking of passing those guys a bug report in this case (or maybe you guys do it because I believe you have closer connections than I and you probably want to make sure that such crashes don't happen in the future when other users of Icenium hit this limitation).

Anyways, thanks again! I am very happy now that this is solved. :-) And actually it is not just a workaround, but a real improvement. The whole slider thing seems to be a little faster now, probably because of less work for the cpu.

Ingmar