[CLOSED] [#364] CDN Subjects/Comments/Questions.

[michaeld]

Ran some numbers...

Filesize: 1.4mb
http://cdn.sencha.io/ext/gpl/4.2.1/ext-all.js ~750ms
https://extjs.cachefly.net/ext/gpl/4.2.1/ext-all.js ~650ms
http://speed.ext.net/ext.net/2.2.0/extjs/ext-all.js ~1.5-3.5 seconds
http://www.myserver.com/extjs/ext-all-js/ext.axd?v=39808 ~11-15seconds

Filesize: 284kb
http://cdn.sencha.com/ext/gpl/4.2.1/...e-gray-all.css ~120ms
https://extjs.cachefly.net/ext/gpl/4...e-gray-all.css ~140-300ms
http://speed.ext.net/ext.net/2.2.0/extjs/resources/ext-theme-gray/ext-theme-gray-all.css ~200ms
http://www.myserver.com/extjs/resources/ext_theme_gray/ext-theme-gray-all-embedded-css/ext.axd?v=39808 ~300ms-1.6sec

As you can see, cdn helps my website first-time load performance SIGNIFICANTLY if I can stream even this one major component. Bandwidth throttling has a massive consequence on my server's simultaneous load times. Cutting down the single file, ext-all.js, reduces my website load times from 15+seconds to <= 3 seconds. Of course, I can't cdn if I use anything from the trunk per current cdn strategy.

Part of the very high load of the ext-all.js from ext.net's cdn is from the lack of gzip streaming (as was previously noted as being currently addressed, as not yet). However the first time cache hit is pretty heavy still which means even after compression may still run the risk of > 1s load times first time. Not really a major deal but still noting for the basis argument.

I'm sure different users will have different experiences depending on their location and the effect of time and load on cached servers. Also speed.ext.net and https cachefly servers seem to have a first time lag whereas the cdn.sencha.com servers do not. I'm guessing this is probably related to frequency of use. Sencha resources are probably in higher demand which makes them cache more.

Anyway, another argument to justify loading from the sencha cdn is greater parallelization. Most browsers are limited to how many resources can be simultaneously loaded from the same domain. Separation would increase browser parallelization opportunities. That is, browsers more often may be able to load the larger extjs and extnet resources at the same time this way. Older browsers limit at 2 at a time and extnet resources will load at minimum 4 resources, 5 if linking, upwards from there if ux controls or images are loaded. So you can see where I'm going with the importance of this.

[Daniil]

Hmmm. Embedded would not be the ideal but you mean only embedded for the resources? and the javascript would be file?

Why should we make File for JavaScript resources? We would like to cover the most common case. I.e. a developer uses RenderScripts="CDN" and/or RenderStyles="CDN". Currently, it is OK with insecure pages, but it stops working with secure pages. Well, as you stated. A common developer would like it continues working without any additional efforts from his side. So, switching to Embedded looks the best option for that. Supposably, we are switching to File and a page breaks anyway, because a common developer would not attach resources as files.

However, I did check and notice that sometimes the trunk advances to the next extjs release version (which would not correspond to a release version posted to your cdn). In this case, we'd be out of luck. So maybe that's where we are disconnecting and why you don't see the value. Like for instance, I think the trunk is using extjs 4.2.1 now and /extjs/extjs-all-js on cdn is 4.2.

So yeah, your point is there's no advantage here.

Yes, that is exactly my point.

So maybe the simplest solution I can suggest is create another property for the ResourceManager.UseSenchaCDN = true that loads extjs appropriate cdn as listed from here http://senchaexamples.com/sencha-cdn/ instead of from your cdn. The correct path would have to be hardcoded each time you guys advance versions in the trunk.

I am afraid that Sencha uploads to CDN only released versions as well.

Ran some numbers...

Filesize: 1.4mb
http://cdn.sencha.io/ext/gpl/4.2.1/ext-all.js ~750ms
https://extjs.cachefly.net/ext/gpl/4.2.1/ext-all.js ~650ms
http://speed.ext.net/ext.net/2.2.0/extjs/ext-all.js ~1.5-3.5 seconds
http://www.myserver.com/extjs/ext-all-js/ext.axd?v=39808 ~11-15seconds

Filesize: 284kb
http://cdn.sencha.com/ext/gpl/4.2.1/...e-gray-all.css ~120ms
https://extjs.cachefly.net/ext/gpl/4...e-gray-all.css ~140-300ms
http://speed.ext.net/ext.net/2.2.0/extjs/resources/ext-theme-gray/ext-theme-gray-all.css ~200ms
http://www.myserver.com/extjs/resources/ext_theme_gray/ext-theme-gray-all-embedded-css/ext.axd?v=39808 ~300ms-1.6sec

As you can see, cdn helps my website first-time load performance SIGNIFICANTLY if I can stream even this one major component. Bandwidth throttling has a massive consequence on my server's simultaneous load times. Cutting down the single file, ext-all.js, reduces my website load times from 15+seconds to <= 3 seconds. Of course, I can't cdn if I use anything from the trunk per current cdn strategy.

Part of the very high load of the ext-all.js from ext.net's cdn is from the lack of gzip streaming (as was previously noted as being currently addressed, as not yet). However the first time cache hit is pretty heavy still which means even after compression may still run the risk of > 1s load times first time. Not really a major deal but still noting for the basis argument.

I'm sure different users will have different experiences depending on their location and the effect of time and load on cached servers. Also speed.ext.net and https cachefly servers seem to have a first time lag whereas the cdn.sencha.com servers do not. I'm guessing this is probably related to frequency of use. Sencha resources are probably in higher demand which makes them cache more.

Anyway, another argument to justify loading from the sencha cdn is greater parallelization. Most browsers are limited to how many resources can be simultaneously loaded from the same domain. Separation would increase browser parallelization opportunities. That is, browsers more often may be able to load the larger extjs and extnet resources at the same time this way. Older browsers limit at 2 at a time and extnet resources will load at minimum 4 resources, 5 if linking, upwards from there if ux controls or images are loaded. So you can see where I'm going with the importance of this.

Thank you for this investigation!

Yes, when we fix the Gzip issue, the situation with loading ext-all.js from our CDN should be improved.

Re: parallelization

Interesting. Well, I am not sure about using Sencha CDN. I have to redirect this question to our manager.

[michaeld]

I am afraid that Sencha uploads to CDN only released versions as well.

Is the trunk ever drawing from a non-release extjs version? If you noticed, I found 4.2.1 on their cdn and they only have published information up to 4.2.0. Ext.net trunk is using 4.2.1 as far as I can tell.

Filesize: 1.4mb
http://cdn.sencha.com/ext/gpl/4.2.1/ext-all.js ~750ms
https://extjs.cachefly.net/ext/gpl/4.2.1/ext-all.js ~650ms
http://speed.ext.net/ext.net/2.2.0/extjs/ext-all.js ~1.5-3.5 seconds
http://www.myserver.com/extjs/ext-all-js/ext.axd?v=39808 ~11-15seconds
...
Cutting down the single file, ext-all.js, reduces my website load times from 15+seconds to <= 3 seconds

Anyway, this isn't optional for me anymore until I can get to a higher bandwith provider. As you can see first time loads for my new users is absolutely unacceptable. They hit heavy load times twice as a first time user - first when they hit the website and second when they hit a secure page to create a new user account. Not great for a first impression. I'll be branching some kind of solution when I launch later this month. I need to at least load the ext-all.js from a cdn if one is vailid and available (as happens to be case at this juncture now).

[Daniil]

I am afraid that Sencha uploads to CDN only released versions as well.

Is the trunk ever drawing from a non-release extjs version? If you noticed, I found 4.2.1 on their cdn and they only have published information up to 4.2.0. Ext.net trunk is using 4.2.1 as far as I can tell.

Yes, you are right, we have never used a non-release ExtJS version. I am not sure why I worried about the fact that Sencha uploads to CDN only release versions:) Generally, it is what we need. Currently, we still hope to fix the GZip issue with our CDN.

As for separating resources (ExtJS from CDN; Ext.NET from the trunk, i.e. Embedded or File), I am still reluctant to do it. Well, I have to think more about it. Anyway, you could implement such the behavior manually. Setting up RenderScripts="None" and RenderStyles="None" and attach all the resources manually. It should not be a problem.

[michaeld]

You know? I'm realizing my Item #1 code was wrong. You were right all along. Embedded is what I meant for default all along.

rm.RenderScripts = Request.IsSecureConnection ? ResourceLocationType.Embedded : ResourceLocationType.CDN;
rm.RenderStyles = Request.IsSecureConnection ? ResourceLocationType.Embedded : ResourceLocationType.CDN;

You're still going to internalize this code, right?

As for separating resources (ExtJS from CDN; Ext.NET from the trunk, i.e. Embedded or File), I am still reluctant to do it. Well, I have to think more about it. Anyway, you could implement such the behavior manually. Setting up RenderScripts="None" and RenderStyles="None" and attach all the resources manually. It should not be a problem.

Somehow I think I'd lose a lot of rendering functionality by manually including the extnet resources, or would I? Do I need to worry about the number v=####? or is there a way I can constract that reference number by calling a utility function? I'll have to create the permutations for all the Dev/Debug/Release etc. Will it still correctly include additional ux resources or would I have to do that as well?

Again, if I could set just extjs resources to none, I could call it a day. I've begun to code ForceExtjsCDN=true branch in my code that I'll maintain.

[Daniil]

You know? I'm realizing my Item #1 code was wrong. You were right all along. Embedded is what I meant for default all along.

rm.RenderScripts = Request.IsSecureConnection ? ResourceLocationType.Embedded : ResourceLocationType.CDN;
rm.RenderStyles = Request.IsSecureConnection ? ResourceLocationType.Embedded : ResourceLocationType.CDN;

You're still going to internalize this code, right?

Yes, we are still going to implement it. Just it was put off for clarifying the best option. So, finally, since you agree with the Embedded option, we will add it shortly.

Somehow I think I'd lose a lot of rendering functionality by manually including the extnet resources, or would I? Do I need to worry about the number v=####? or is there a way I can constract that reference number by calling a utility function? I'll have to create the permutations for all the Dev/Debug/Release etc. Will it still correctly include additional ux resources or would I have to do that as well?

Again, if I could set just extjs resources to none, I could call it a day. I've begun to code ForceExtjsCDN=true branch in my code that I'll maintain.

Yes, it requires some efforts. Well, we are still considering how it is worth and possible to implement such an option. I will notify you about any solution.

[michaeld]

Index: C:/Users/Michael/Documents/Visual Studio 2012/Projects/Ext.Net/Ext.Net/MyExtensions.cs
===================================================================
--- C:/Users/Michael/Documents/Visual Studio 2012/Projects/Ext.Net/Ext.Net/MyExtensions.cs    (revision 0)
+++ C:/Users/Michael/Documents/Visual Studio 2012/Projects/Ext.Net/Ext.Net/MyExtensions.cs    (working copy)
@@ -0,0 +1,73 @@
+using System;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.Configuration;
+using System.Linq;
+using System.Text;
+using System.Web;
+
+namespace Ext.Net {
+
+    public partial class GlobalConfig : ConfigurationSection {
+
+        /// <summary>
+        /// 
+        /// </summary>
+        [ConfigurationProperty( "forceExtjsCDN", DefaultValue = false, IsRequired = false )]
+        [Description( "" )]
+        public bool ForceExtjsCDN {
+            get {
+                return (bool)this["forceExtjsCDN"];
+            }
+        }
+
+    }
+
+    
+    public partial class ResourceManager {
+
+        public const string ExtjsCDN = "http://cdn.sencha.com/ext/gpl/4.2.1";// Current bound extjs version to Ext.net 2.2.0
+        public const string SecExtjsCDN = "https://extjs.cachefly.net/ext/gpl/4.2.1";// Extjs secure server
+
+
+        private bool? forceExtjsCDN;
+
+        /// <summary>
+        /// Determines if you want to force CDN loading from Extjs CDN. Can be set at Page level in ResourceManager, Session[\"Ext.Net.ForceExtjsCDN\"], Application[\"Ext.Net.ForceExtjsCDN\"] and web.config.
+        /// </summary>
+        [Category( "Config Options" )]
+        [DefaultValue( true )]
+        [Description( "Determines if you want to force CDN loading from Extjs CDN. Can be set at Page level in ResourceManager, Session[\"Ext.Net.ForceExtjsCDN\"], Application[\"Ext.Net.ForceExtjsCDN\"] and web.config." )]
+        public virtual bool ForceExtjsCDN {
+            get {
+                if( this.forceExtjsCDN != null ) {
+                    return (bool)this.forceExtjsCDN;
+                }
+
+                if( this.DesignMode ) {
+                    return false;
+                }
+
+                if( HttpContext.Current != null ) {
+                    string token = "Ext.Net.ForceExtjsCDN";
+
+                    object obj = HttpContext.Current.Application[token];
+
+                    if( obj == null ) {
+                        obj = Session( token );
+                    }
+
+                    if( obj != null && obj is bool ) {
+                        return (bool)obj;
+                    }
+                }
+
+                return GlobalConfig.Settings.ForceExtjsCDN;
+            }
+            set {
+                this.forceExtjsCDN = value;
+            }
+        }
+
+    }
+}


Index: C:/Users/Michael/Documents/Visual Studio 2012/Projects/Ext.Net/Ext.Net/Core/ResourceManager/ResourceManager.cs
===================================================================
--- C:/Users/Michael/Documents/Visual Studio 2012/Projects/Ext.Net/Ext.Net/Core/ResourceManager/ResourceManager.cs    (revision 5218)
+++ C:/Users/Michael/Documents/Visual Studio 2012/Projects/Ext.Net/Ext.Net/Core/ResourceManager/ResourceManager.cs    (working copy)
@@ -1075,10 +1075,15 @@
                             break;
                     }
 
-                    items.Add(".extjs.ext-all" + (this.RTL ? ("-rtl" + ext) : ext));
+                    string extjsall = ".extjs.ext-all" + (this.RTL ? ("-rtl" + ext) : ext);
+                    if(!this.ForceExtjsCDN)
+                        items.Add(extjsall);
+                    else
+                        source.Append( string.Format( ResourceManager.ScriptIncludeTemplate, this.ConvertToCDN( ResourceManager.ASSEMBLYSLUG + extjsall, true ) ) );
+
                     if (this.Theme == Ext.Net.Theme.Neptune)
                    {
                        items.Add(".extjs.ext-theme-neptune.js");
                     }
                     items.Add(".extnet.extnet-all" + (this.ScriptMode == Ext.Net.ScriptMode.Development ? "-debug.js" : ext));
                 }
@@ -2031,13 +2036,25 @@
             return url;
         }
 #if ISPRO
        private string ConvertToCDN( string resourceName ) 
+        {
+            return ConvertToCDN( resourceName, false );
+        }
+        private string ConvertToCDN(string resourceName, bool forceExtjsCDN)
         {
             string url = resourceName;
 
             if (resourceName.StartsWith(ResourceManager.ASSEMBLYSLUG))
             {
-                url = this.ResolveUrlLink(ResourceManager.CDNPath + "/" + resourceName.Replace(ResourceManager.ASSEMBLYSLUG + ".", "").Replace("-embedded", "").Replace(".", "/").ReplaceLastInstanceOf("/", "."));
+                resourceName = resourceName.Substring( ResourceManager.ASSEMBLYSLUG.Length + 1 );
+                string cdnPath;
+                if( forceExtjsCDN && resourceName.StartsWith( "extjs." ) ) 
+                {
+                    cdnPath = HttpContext.Current.Request.IsSecureConnection ? ResourceManager.SecExtjsCDN : ResourceManager.ExtjsCDN;
+                    resourceName = resourceName.Substring( 6 );
+                }  else
+                    cdnPath = ResourceManager.CDNPath;
+                url = this.ResolveUrlLink( cdnPath + "/" + resourceName.Replace( "-embedded", "" ).Replace( ".", "/" ).ReplaceLastInstanceOf( "/", "." ) );
             }
 
             return url;
      }

If ForceExtjsCDN=true it will force cdn to sencha's cdn regardless of other cdn on or off settings.
This only does it for the largest ext-all.js file. I may try the css later.
As expected, first time-loads are now finally bareable when deploying trunk code.

[Daniil]

Thank you for sharing! I will review it closely later.

[michaeld]

Checking in on this item. I didn't see any new items on the github.

[Daniil]

Yes, no changes yet, but we are getting closer to a solution.