Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Sencha performances improvements / best practices

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    Paris, France
    Posts
    52
    Answers
    1

    Default Sencha performances improvements / best practices

    Hi Guys,
    We are at the moment optimizing the beta version of our app based on Sencha, especially regarding the fluidness of animations / transitions where we have several raised points by our testers.

    I have so a couple of questions, hope it's not too much, (FYI we are on Sencha 2.4.1)

    - Views creations / destructions
    I've read several times that the DOM manipulation is quite consuming for the webview and in some cases we should try to have all of our views in the DOM from the beginning.
    In the other side, you guys are trying to say that a view unused should be destroyed or created at the moment of its use.

    So, who's right ?

    - Using store VS data config
    So if we are pushing new views containing a list (or any view needing a data behind, with a XTemplate for ex...), should we use a Ext.Store object to handle the data or just pass the data through the list object created.
    I've doubts about the performances if we use everytime Stores (creating new object for no real reason)...

    Your thoughts ?

    - Scroll views management (Android / iPhone <=5)
    We are encountering several scroll issues (latencies / freezes) on some phone as Android (randomly) or iPhone (5 and below). Quite painful for the user experience prooving the bad quality of our work :/

    Do you know anything about improvements / best-practices to improve this subject ?

    - Slow App init
    Launching the app could be really slow sometimes, same... especially for Android users with phones from early 2014 and below.

    - Production build unstable
    The production build is eliminating Ext.* objects access.
    The app is working well except when we use methods as Ext.ComponentQuery / Ext.Store etc..

    Weird. First time i'm seeing that.

    Thanks for your feedbacks !
    Alex
    "Do or do not, there's no try"

  2. #2
    Sencha User
    Join Date
    Nov 2011
    Location
    Paris, France
    Posts
    52
    Answers
    1

    Default

    Hey guys,I'm quite disappointed seeing no-one trying to reply (at least on the big lines) after more than 100 views.

    I really want to push my app live next month using Sencha / Cordova, however if I'm not able to fix these main lines I'm thinking about switching to a fully native version. As an HTML5 fanboy using your tech from the version 1... this is quite a fail.

    Alex
    "Do or do not, there's no try"

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19

    Default

    Hi,

    I will see if I can help a little bit. I'm no expert but I've learnt about some of the quirks and best practices and these things that have helped. Some of this stuff I have mentioned before so apologies if I'm repeating myself.

    First of all, how is your app structured? Are you using the built-in tab panel or are you doing it another way? There are several clever things you can do to improved the performance of the built-in tab panel.

    The key thing in general (whether using Tab panels or not) is to keep an eye on how many DOM items you have active at any one time. I try to keep my app's DOM hovering at around 500 items. If It is higher, then I try to optimised my app in such a way that I only add those views when arriving at that page.


    You can check this by pasting this command into Google Chrome's console after running your app:

    Code:
    document.getElementsByTagName("*").length
    How many items does it say? You can keep pasting it when switching your views to see which part of your app is particularly heavy.

    If I have numerous stores, I would only load the first one that is to be shown. Multiple store loading on startup will significantly slow your startup time.

    The way to defer loading of the other stores would be to turn off autoload on the other stores, then only load the store by listening out for the painted view listener on that new view (I think that's what it's called, will have to check the API again!).

    I one of my apps I have a sidemenu list with items. I have named each view as so 'Home', 'Sports' etc. When tapping on the list item it gets the name record associated with that list item...then it sets the active item to that name. This seems to keep the DOM quite nice and light:

    Code:
    onMylistItemTap: function(dataview, index, target, record, e, eOpts) {
            var name = record.get('name');
            console.log('Item Tapped = ' + name);
    
    
            this.setOpen(false);
    
    
            Ext.Viewport.setActiveItem(""+name+"");
    
    
        },
    Once you have built your app, be sure to experiment with the different builds....removing unused CSS rules etc. Have you built your app using Production mode using Sencha command? This can compress you app down to 1 JS file and significantly speed up load time.

    Hope that helps a little bit...

    Check out Stuart Ashworth's recent posts, they are quite useful:

    http://www.stuartashworth.com/blog/w...a-code-review/

    Also I would recommend Josh Morony's Blog, he has a whole bunch of useful links for Sencha-related sites

    http://www.joshmorony.com

    :-)

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Location
    Paris, France
    Posts
    52
    Answers
    1

    Default

    Hi,
    Thanks for your feedbacks, I will have a look on your links and try to follow the suggested things.

    I think you're right on the numbers of elements in the page, we are too heavy on the DOM side. I have some ideas to improve that.

    Keep you posted
    Thanks
    Alex
    "Do or do not, there's no try"

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19

    Default Store vs data config...

    Also I have not compared performance between a separate store class vs inline data config....but I would suspect that having it inline would be a bit faster? Not sure if this would make a difference when using Sencha's production build though as everything gets compressed down to one file anyway. The performance difference could be negligible. I don't have any data to back this up either.

    I would suggest if it does not bother you having inline data for you stores then do it that way (but of course I would suggest still setting autoload to false on the stores that are not currently visible on your page).

    If you are using a tabpanel, you could listen for onActiveItemChange, add a viewport mask to show a loading message, then load your store (please double check the API, as I just quickly grabbed this code and it might not be 100%):

    Code:
     onActiveItemChange: function (self, newItem) {
            Ext.Viewport.setMasked({ xtype: 'loadmask', message: 'Loading...', indicator:true});
     Ext.getStore('storename').load();
            console.log('Activeitemchanged');
            console.log('Storename Loaded!');
    You could then do a Ext.Viewport.setMasked to false on the painted or after load store event or something. Take a look here too:

    http://www.sencha.com/forum/showthread.php?289952-Detect-when-store-has-loaded-and-list-is-ready-to-be-shown

    The other problems you have, the slow scroll on list views on iPhone and Android, will hopefully be helped by the things I mentioned in my first reply. Hopefully if your DOM items are at about 500 then your scrolling will be fine.

    More info on keeping the DOM light can be found here:

    https://www.sencha.com/forum/showthr...ize-of-the-DOM

    https://www.sencha.com/forum/showthr...en-not-in-view

    When you say your app is working well except when you use methods Ext.ComponentQuery and Ext.Store, what do you mean? Can you explain a bit more? Do you only have problems in the production build with these things?

    :-)

  6. #6
    Sencha User
    Join Date
    Oct 2014
    Posts
    51
    Answers
    1

    Default

    Thanks for the hints so far!

    The really big issue compared to frameworks like ionic is the large tap delay for me. On iPhone it's not such a big problem, but on Android it's quite large. Do you have any ideas how to face this?

  7. #7
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19

    Default Where are you seeing these delays?

    I've been using Ionic lately too to see how it compares and I like it, it does seem faster but there are also many things I don't like about it. I think Sencha is much more polished, feature rich and has a much better application architecture. With Ionic you have to find your own way when creating a good application structure and their data package is definitely not as good!

    However, production size of the compressed Ionic core is approx 382k and with Sencha it is 796k. The DOM is also much lighter. A basic sidemenu in Ionic (with left and right menus) has under 100 items. A Sencha app with 1 side menu has double that (I just tested it using the built-in Ext.Menu and it came in at 194 items).

    With Sencha because it creates more DOM items you have to optimise you views by destroying or removing items from the DOM when not in use. For example in my sidemenu app I have a button on the top toolbar which brings up an action sheet. I use in-line Ext.Create on tap for that one so that it creates it on-the-fly instead of having to be defined as a separate class. Then I used myactionsheet.destroy(); after to remove it from the DOM. I don't notice any slowness at all by doing it that way but it keeps the DOM light.

    Where are you seeing these delays, do you have an example you can share somewhere so we can take a look? Are you using a tabpanel, card layout or custom sidemenu? Have you tried using Ext.create on tap of the button instead to create the view on tap then destroy it afterwards? Sometimes this is not the best way depending on how much stuff you have in there but it can speed things up.

    ;-)

  8. #8
    Sencha User
    Join Date
    Oct 2014
    Posts
    51
    Answers
    1

    Default

    I think Sencha is much more polished, feature rich and has a much better application architecture. With Ionic you have to find your own way when creating a good application structure
    I didn't do any ionic project, yet. But this has also been my thought.

    With Sencha because it creates more DOM items you have to optimise you views by destroying or removing items from the DOM when not in use
    I really don't think, this should still be the task of the developer nowadays. Why are this tons of useless DOM elements created in the first place???

    Have you tried using Ext.create on tap of the button instead to create the view on tap then destroy it afterwards
    Help me, I don't see the difference here. I do transitions the following way:
    Code:
    nav.push(Ext.create('Test.view.misc.EventFlickrCarousel', {eventData: eventData}));
    Where are you seeing these delays, do you have an example you can share somewhere so we can take a look?
    Hard to say, but the delay is higher when a store-powered list lies behind in the view which is opened by a tap on that specific button. But these stores are loaded at app startup (which isn't a problem in my use case).

  9. #9
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19

    Default Div soup...

    Quote Originally Posted by The_Unknown View Post
    I didn't do any ionic project, yet. But this has also been my thought.

    I really don't think, this should still be the task of the developer nowadays. Why are this tons of useless DOM elements created in the first place???

    Help me, I don't see the difference here. I do transitions the following way:
    Code:
    nav.push(Ext.create('Test.view.misc.EventFlickrCarousel', {eventData: eventData}));
    Hard to say, but the delay is higher when a store-powered list lies behind in the view which is opened by a tap on that specific button. But these stores are loaded at app startup (which isn't a problem in my use case).
    I agree with you, it should not be up to us...and why does Sencha create so many DOM items? I'm not sure.

    You are creating your view the standard way for the nav view...I too have seen performance issues in my nav view, a slight pause before animating in the view.

    I've tested one of the fast sencha examples, touchstyle, on my iPhone 4 and there is also still a delay when tapping:

    http://dev.sencha.com/deploy/touch/examples/production/touchstyle/

    Seems like you can speed things up further by not using the nav view (lol!) but this doesn't really help if you have nested data that you need to show!

    http://www.sencha.com/forum/showthre...on-view-faster

    https://fiddle.sencha.com/#fiddle/1hj

    You can set certain things to null such as doubletap in the eventPublishers settings and put this in your app.js. I never use doubleTap, edgeSwipe, longPress etc. I just tried it and I think I can notice a difference. Can you?

    Code:
    Ext.application({
        eventPublishers: {
            touchGesture: {
                recognizers: {
                     doubleTap : null,                
                    // don't disable this one unless you don't want your list to scroll!   drag : null,
                    edgeSwipe : null,
                    longPress : null,
                    pinch : null,
                    rotate : null,
                    swipe : null
                }
                }
            }
        },
        // 
    });// JavaScript Document
    That is meant to prevent app/touch/src/event/recognizer/DoubleTap.js etc from loading for example.

    If you find any other solutions that speeds up the nav view please let us know

    :-)

  10. #10
    Sencha User
    Join Date
    Oct 2014
    Posts
    51
    Answers
    1

    Default

    OK, the "tap delay" wasn't really a tap delay. As mentioned before, I created the views by Ext.create() on tap. The navigation destroyed all views when tapping back ("autoDestroy"). So afterwards the views had to be created over and over again. Not I wrote a little view cache in order to create the views, save them, and reuse them if called again. autoDestroy in the navigation view is now set to false. This speeds up things *a lot*, escpecially on Android.

    Maybe, someone finds this helpful:

    Code:
    getCachedView: function(viewName, modelId) { // called on tap
    		var cachedViewsStore = Ext.getStore('CachedViews'),
    			cachedView = cachedViewsStore.queryBy(function(record) {
    				if (isTruthy(modelId))
    					return record.get('viewName') == viewName && record.get('modelId') == modelId;
    				else
    					return record.get('viewName') == viewName;
    			});
    
    
    		if (cachedView.getCount() > 0)
    		{
    			console.log('cached view: ' + viewName);
    			return cachedView.items[0].get('viewObject');
    		}
    		else
    		{
    			console.log('new view: ' + viewName);
    			var viewObject = Ext.create(viewName),
    				cachedViewConfig = {
    				viewName: viewName,
    				viewObject: viewObject
    			};
    
    
    			if (isTruthy(modelId))
    				cachedViewConfig[modelId] = modelId;
    
    
    			cachedView = Ext.create('Test.model.CachedView', cachedViewConfig);
    
    
    			// only phantom'ed items are written to local storage
    			cachedView.phantom = true;
    			cachedViewsStore.add(cachedView);
    			cachedViewsStore.sync();
    
    
    			return viewObject;
    		}
    	},
    	warmUpViewCache: function() { // called at startup (before the splashscreen gets hidden)
    		Ext.Array.each(Test.util.Config.getPreCachedViews(), function(view) {
    			Test.util.Common.getCachedView(view);
    		});
    	}

Page 1 of 2 12 LastLast

Similar Threads

  1. Performance Improvements for Sencha Touch Charts 2.0
    By anonymous123456789 in forum Sencha Touch 2.x: Q&A
    Replies: 5
    Last Post: 31 Aug 2012, 4:40 AM
  2. 4.1 Beta Performances
    By paipai in forum Ext: 4.x Beta
    Replies: 22
    Last Post: 20 Jan 2012, 4:48 AM
  3. Sencha Docs: Unacceptable performances in IE 8
    By plalx in forum Community Discussion
    Replies: 7
    Last Post: 30 Aug 2011, 12:45 PM
  4. Ext 4.0.0/4.0.1 Grid Performances
    By thecoder in forum Ext: Discussion
    Replies: 9
    Last Post: 8 Jun 2011, 9:58 AM
  5. poor performances
    By kallou in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 21 Aug 2007, 7:27 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •