Icenium Ion crashes on big apps

6 posts, 0 answers
  1. softwarea
    softwarea avatar
    77 posts
    Member since:
    Feb 2007

    Posted 11 Mar 2013 Link to this post

    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
  2. Stefan Dobrev
    Admin
    Stefan Dobrev avatar
    790 posts

    Posted 11 Mar 2013 Link to this post

    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">\
                </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.
  3. softwarea
    softwarea avatar
    77 posts
    Member since:
    Feb 2007

    Posted 12 Mar 2013 Link to this post

    Thank you Stefan, I tried your suggestion and it works perfectly ! I am very happy with the result, good job !
  4. softwarea
    softwarea avatar
    77 posts
    Member since:
    Feb 2007

    Posted 12 Mar 2013 Link to this post

    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? 
  5. Stefan Dobrev
    Admin
    Stefan Dobrev avatar
    790 posts

    Posted 12 Mar 2013 Link to this post

    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.
  6. softwarea
    softwarea avatar
    77 posts
    Member since:
    Feb 2007

    Posted 12 Mar 2013 Link to this post

    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  
Back to Top