PDA

View Full Version : [CLOSED] "requires" silently fails



Tomas Pospisek
23 Apr 2013, 6:45 AM
Ext version tested:

Ext 4.2 rev 0

Browser versions tested against:

Chromium 26.0.1410.43-1
FF 10.0.12 (firebug 1.9.2 installed)

DOCTYPE tested against:

???

Description:

When Ext.application() requires a class and the corresponding JS file that implements that class doesn't define the required class, then ExtJS will silently - that is without any error indication - fail to launch the application. I.e. launch will not be called.

Steps to reproduce the problem:

see http://www.sencha.com/forum/showthread.php?261659-4.1-gt-4.2-Application-launch-no-longer-being-called&p=959721&viewfull=1#post959721
(http://www.sencha.com/forum/showthread.php?261659-4.1-gt-4.2-Application-launch-no-longer-being-called&p=959721&viewfull=1#post959721)

The result that was expected:

either ExtJS should not fail (but possibly log an error to the console)
or ExtJS should fail and loudly complain in the console
silently failing is not a useful option
also the corresponding documentation (see below) should explain the semantics of requires.

The result that occurs instead:

screen stays blank
no error is displayed in the console

Test Case:



Ext.application({
name: 'MyApp',
requires: [ 'MyApp.foobar' ],
init: function () {
console.log('app init');
},
launch: function () {
console.log('app launch');
}
});

// then create a corresponding but empty "app/foobar.js" file



Possible fix:

not provided
since the guides and general documentation seems to be advocating the usage of ext-debug.js everywhere (I could not find a mention of ext-dev-all.js on a cursory search), ext-debug.js should be logging the error
also the documentation should describe exactly what requires does and what its failure modes are: http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.Class-cfg-requires

Additional CSS used:

only default ext-all.css

Operating System:

Linux

mankz
23 Apr 2013, 8:20 AM
Silence is a pretty bad way of handling a critical application error. If it's any help, use ext-all-dev.js and you'll find these errors.

+1 for putting the dev-file error logging into ext-all.js and ext-all-debug.js. I've seen too many users make this mistake and wasted many hours (I've done so myself plenty of times too :) ).

LesJ
23 Apr 2013, 8:32 AM
I see some improvement, see this:

http://www.sencha.com/forum/showthread.php?127805-OPEN-EXTJSIV-298-Ext.require-add-error-for-not-found-resources

Tomas Pospisek
23 Apr 2013, 8:39 AM
If it's any help, use ext-all-dev.js and you'll find these errors.

Oh - I didn't know! ext-all-dev.js indeed shows the error. However:


+1 for putting the dev-file error logging into ext-all.js and ext-all-debug.js.

ext-all-debug.js unfortunately does not show the error... :-(

LesJ
23 Apr 2013, 8:52 AM
+1 for putting the dev-file error logging into ext-all.js and ext-all-debug.js. I've seen too many users make this mistake and wasted many hours (I've done so myself plenty of times too :) ).

However, the debug code would increase file size and penalize well-organized developers :))

You should see in the debugger on the Network tab all failed requests in red color.

Tomas Pospisek
23 Apr 2013, 9:19 AM
However, the debug code would increase file size and penalize well-organized developers :))


"Sencha a leading Javascript framework manufacturer has succeeded in reducing their application size by 60% and accellerating execution speed by 50% by applying their patented 'cold-execution-path-elimination' technique".

"'We're dealing with Professionals here', a representative said, 'those do not do kiddie errors'..."

I can allready see the accollades, that this move would bring with it...


You should see in the debugger on the Network tab all failed requests in red color.

It's not only about not being able to load a require. It's also about those dependencies having some problem (misspellings et al. - see my original report (http://www.sencha.com/forum/showthread.php?261659-4.1-gt-4.2-Application-launch-no-longer-being-called&p=959721&viewfull=1#post959721)). Those latter problems you will not see on the wire.

LesJ
23 Apr 2013, 9:33 AM
There's a ton of debug code in Ext JS, so you expect Sencha to include it in production because you don't know how use the framework?

-1 on this bug fix

Tomas Pospisek
23 Apr 2013, 10:01 AM
There's a ton of debug code in Ext JS, so you expect Sencha to include it in production because you don't know how use the framework?

-1 on this bug fix

Let's see. I do not want to agree or disagree with your opinion. Lets however put your statement "so you expect Sencha to include it in production because you don't know how use the framework?" into perspective:

Can you find me a place in the official documentation advocating ext-all-dev.js? The "Getting Started" guide doesn't even mention it. How would a developer be supposed to get the idea to use ext-all-dev.js as opposed to ext-debug.js, which seems to be the standard recommendation everywhere in the docu?

I've now added a point to the bug report that recommends that at least ext-debug.js (since it's being used by default everywhere in the docu) should log the error.

LesJ
23 Apr 2013, 10:14 AM
Let's see. I do not want to agree or disagree with your opinion. Lets however put your statement "so you expect Sencha to include it in production because you don't know how use the framework?" into perspective:

Can you find me a place in the official documentation advocating ext-all-dev.js? The "Getting Started" guide doesn't even mention it. How would a developer be supposed to get the idea to use ext-all-dev.js as opposed to ext-debug.js, which seems to be the standard recommendation everywhere in the docu?

I've now added a point to the bug report that recommends that at least ext-debug.js (since it's being used by default everywhere in the docu) should log the error.

Use Sencha Command to generate your initial app code. This will include the debug code. Building the production app is another one-liner using Sencha Command.

Tomas Pospisek
23 Apr 2013, 10:51 AM
Use Sencha Command to generate your initial app code. This will include the debug code.

But including the debug code would not have helped in any way though. It's part of the problem here.

LesJ
23 Apr 2013, 11:03 AM
But including the debug code would not have helped in any way though. It's part of the problem here.

I'm not sure what you mean. Sencha Command will generate an initial app code that you can use for development. It will contain all the debug code that will issue errors like the one that you expected.

When you are ready to build your application, you can use another Sencha Command against your code base. The built application will be optimized and it will not contain any debug code.

All developers should be using Sencha Command. It was created to simplify common development tasks and optimize the application for deployment.

Tomas Pospisek
23 Apr 2013, 11:44 AM
I'm not sure what you mean. Sencha Command will generate an initial app code that you can use for development. It will contain all the debug code that will issue errors like the one that you expected.


Let me restate this: ext-all-debug.js does not show the error.



When you are ready to build your application, you can use another Sencha Command against your code base. The built application will be optimized and it will not contain any debug code.


But even then I'd personally prefer to be able to tell my user to open the console and read me the error instead of telling me "there's a blank page".



All developers should be using Sencha Command.


This assertion is not supported by Sencha as far as I can tell.

The "Getting Started (http://docs.sencha.com/extjs/4.2.0/#%21/guide/getting_started)" manual starts off without the Sencha Command and only introduces it in paragraph three without pushing it there as mandatory either.



It was created to simplify common development tasks and optimize the application for deployment.


Depending on your production environment, using the generated code as is might not be possible. And once you start moving things around, then you're outside the default way of doing things allready. And then what? See my question in my previous post to you about documentation of ext-dev-all.js.

I would be very glad, and would ask you to please, if possible, if we are to continue this conversation seriously, if you could read what I write carefully, so I do not need to restate the same points repeatedly.

LesJ
23 Apr 2013, 12:08 PM
Well, if you don't use Sencha Cmd, then you will have no way to build your application. So, I'm not sure how you are planning to get your application ready for deployment.

If you use Sencha Cmd, you will have an initial app set up in a way that will display all the errors that you would expect to see in development, such as the one that you reported missing.

Obviously, it's not easy for any developer to set up the initial application code. This is where Sencha Cmd will help you.

Anyway, I think this bug report is bogus.

mitchellsimoens
23 Apr 2013, 1:17 PM
Testing this a little with and without using Sencha Cmd using this code:


Ext.application({
name : 'MyApp',
requires : ['foo']
});

I also have create an empty foo.js file.

With Sencha Cmd, I get this error logged:


Uncaught Error: The following classes are not declared even if their files have been loaded: 'foo'. Please check the source code of their corresponding files for possible typos: 'foo.js

So that's great! Means the file was loaded but the class name that was expected was not created.

Without using Sencha Cmd it does depend on which file you load. ext-debug.js will fail silently however with ext-dev.js you will get the same error as I got when testing with Sencha Cmd. Looking at the Getting Started guide I do see some files being described under the 2.3 Library Inclusion header but this does not show ext-dev.js within it.

So is this bug just for the guide to be updated to explain what ext-dev.js is used for or did I miss something in the back-and-forth posts?

mankz
23 Apr 2013, 2:08 PM
However, the debug code would increase file size and penalize well-organized developers

@Les: Certainly a tradeoff, but Ext is already a _very_ large JS download so an extra couple of sanity checks here and there certainly won't hurt. These silent errors are absolutely horrible for new users starting out, and I'd bet 1000$ this has led devs away from getting into Ext JS (which is a loose for everyone).

I'll raise your -1 with a +100, making it +99. :)


All developers should be using Sencha Command.

-1 for all devs should use Sencha Command. We're not using it - no need for it, doing it the plain old way is perfectly fine if you just know basic web development. That's kind of the point here, with the ________Massive_______ learning curve Ext JS has compared to other micro-libs it's being (unfairly) compared to, adding another tool on top of it as a requirement to get started will be devastating.

And finally, adding this check to ext-all-debug.js should be a no-brainer since it's not a prod-version of the framework.

mankz
23 Apr 2013, 2:21 PM
While we're at it, please add a proper warning message when trying to create a non-existing class. Will lessen the need for basic support for new users.



Ext.create('foo') // "c is not a constructor"


Plenty of hits on this one.

https://www.google.se/search?q=%22c+is+not+a+constructor%22&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a

LesJ
23 Apr 2013, 3:21 PM
How are you building your apps if you are not using Sencha Cmd? By hand?

So the micro-libs are easy to learn? Backbone is just under 1,600 lines of code (4 classes). Yet there are 300+ page books describing how to use it. Something tells me that this library is not that easy to learn. I picked it up as an example.

http://shop.oreilly.com/product/0636920025344.do

LesJ
23 Apr 2013, 3:25 PM
I forgot to add that Backbone has a hard dependency on Underscore or Lo-Dash and jQuery, so you will need to learn these libraries as well before being productive w/ Backbone.

Most of these micro-libs have a dependency on jQuery.

Tomas Pospisek
23 Apr 2013, 4:39 PM
Thanks for popping in here mitchellsimoens (http://www.sencha.com/forum/member.php?22216-mitchellsimoens)!





Without using Sencha Cmd it does depend on which file you load. ext-debug.js will fail silently however with ext-dev.js you will get the same error as I got when testing with Sencha Cmd. Looking at the Getting Started guide I do see some files being described under the 2.3 Library Inclusion header but this does not show ext-dev.js within it.

So is this bug just for the guide to be updated to explain what ext-dev.js is used for or did I miss something in the back-and-forth posts?

First as far as I can see ext-debug.js is the default that is used throughout the documentation. The default should be sane and safe and thus I'd think it should give you an error message if there's an error. If "-debug" is not meant for the application developer to debug his application with, then I do not know what it stands for, then that should be clarified. So please enable logging of that error at least in ext-debug.js.

Second this error is in the case of Ext.application() "devastating". The application just won't start, there's no error, just a blank page. What could be a worse error? So why not give allways an error, in any case, in any ext-* form? In my case it was not the first requires but a requires of third order (requires that requires that requires).

Third it's not just the "getting started" manual. It's also the API documentation of "requires". It should describe semantics and failure modes of requires precisely. Right now the documentation consists of this single phrase: " List of classes that have to be loaded before instantiating this class". What happens if there's a problem?

As an added bonus I'd suggest to document what all the ext-*.js files are there for. This might be both useful to enlighten the application developers as to serve as guidelines to the ExtJS developers themselves (as in the paragraph before: is ext-debug.js there to help the application developer? Why then wouldn't it display an error when there actually was one? What is the way the ExtJS developers have in mind for the application developer to debug that problem?).

Tomas Pospisek
23 Apr 2013, 4:43 PM
Thanks for your constructive support mankz!

Tomas Pospisek
23 Apr 2013, 4:46 PM
How are you building your apps if you are not using Sencha Cmd? By hand?

I started out with



$ git clone https://github.com/lucassus/extjs4-account-manager.git

mitchellsimoens
23 Apr 2013, 4:55 PM
I'm going to open a ticket to discuss this internally.

LesJ
23 Apr 2013, 5:08 PM
I started out with



$ git clone https://github.com/lucassus/extjs4-account-manager.git


Why would this be better compared to Sencha Cmd?

Tomas Pospisek
23 Apr 2013, 5:19 PM
Why would this be better compared to Sencha Cmd?

Have a look at what extjs4-account-manager is. I think then you'll be able to reply to that very question.

mankz
23 Apr 2013, 8:50 PM
How are you building your apps if you are not using Sencha Cmd? By hand?

How were people building web apps before the almighty Sencha Cmd existed? :)

Again, googling these errors reveals there are tons of questions where user has no clue what's going on if there's an error with Ext.Loader, or Ext.create. This means countless hours wasted for the new user and for the Ext support guys. With Ext.create('foo') you at least get a cryptic message, with an Ext.Loader typo you get a white page and empty console (no 404). Let's fix both.


http://www.sencha.com/forum/showthread.php?138536-c-is-not-a-constructor-message-at-the-very-first-example
http://www.sencha.com/forum/showthread.php?154123-Errors-when-extending-a-form-panel
http://www.sencha.com/forum/showthread.php?182789-c-is-not-a-constructor

http://www.sencha.com/forum/showthread.php?156370-How-to-get-a-clue-about-quot-c-is-not-a-constructor-quot

http://www.sencha.com/forum/showthread.php?154123-Errors-when-extending-a-form-panel

http://stackoverflow.com/questions/9681454/extjs-4-c-is-not-a-constructor

http://stackoverflow.com/questions/8453516/cant-resolve-c-is-not-a-constructor-error

http://www.yulebiao.com/questions/9681454/extjs-4-c-is-not-a-constructor

http://ext.ensible.com/forum/viewtopic.php?f=2&t=610&start=10
http://www.sencha.com/forum/showthread.php?137052-Problems-with-the-MVC-Application-Architecture-Guide

LesJ
24 Apr 2013, 2:42 AM
How were people building web apps before the almighty Sencha Cmd existed? :)


mankz,

You didn't answer my question. Let me explain (more visually) why it's a good idea to use Sencha Cmd.

Let's say over many months you created a large Ext JS application containing many custom classes, but you did NOT use Ext charts (because you had no need for it or you used some other charting package).

Sencha Cmd is smart and it will not include any Ext JS charting code in your final JS file ready for deployment. How would you accomplish this on your own? There's no easy way to extract only what you need from Ext JS w/o using Sencha Cmd.

This was the biggest complain that developers had about Ext JS 3 that it's so monolithic.

So, you will be downloading a lot lof code that you don't need. Of course, there will be a performance penalty - slower initial load time.

If you use Sencha Cmd, you just enter three words 'sencha app build', and this will build the application w/o the code that you don't need.

mankz
24 Apr 2013, 3:17 AM
This thread has nothing to do with if Cmd is right for you or not. Sencha Cmd is a brilliant tool and will help lots of people. Though it should _not_ be a requirement to get started with Ext JS. Let's stick to the thread topic, which is about missing error messages. :)

LesJ
24 Apr 2013, 5:22 AM
This thread has nothing to do with if Cmd is right for you or not. Sencha Cmd is a brilliant tool and will help lots of people. Though it should _not_ be a requirement to get started with Ext JS. Let's stick to the thread topic, which is about missing error messages. :)

I'm going to strongly disagree with you, mankz. With due respect, the approach that you are using is not appropriate or sustainable. -1 on Sencha Cmd from an experienced developer is puzzling.

Going forward the Ext JS code base will only grow bigger. More packages will be addded and the existing packages will contain more code, so downloading the entire framework will not work.

IMO Sencha Cmd is a must, and it should be a starting point when learning Ext JS or working with Ext JS applications. This should be emphasized in the documentation as well.

I'd like to point out (again) that Tomas would be seeing helpful error messages if he were using Sencha Cmd.

mitchellsimoens
24 Apr 2013, 5:24 AM
Sencha Cmd is recommended and I would always recommend using it but it's not required to use Ext JS. Just like MVC, I'd always recommend it but it's not required to use it.

mankz
24 Apr 2013, 5:44 AM
Let's agree to disagree :) and let's repeat and summarize: this thread is not about how experienced developers should build their apps. It's about

1. Saving time (and frustration) for new users
1.5 Saving time for the Ext support team.
2. Making sure new users stay in the community and don't loose faith and switch to Kendo, AngularJS, jQuery or some other piece of cool tech due to the learning curve being too steep (which it will be if Cmd is a prerequisite).

Well worth a few bytes in my book (we have several such sanity checks in our scheduling components btw).


if (Ext.versions.extjs.isLessThan(MIN_EXT_VERSION)) {
alert('The Ext JS version you are using needs to be updated to at least ' + MIN_EXT_VERSION);
}
if (!resourceStore) {
Ext.Error.raise("You must specify a resourceStore config");
}

if (!this.eventStore) {
Ext.Error.raise("You must specify an eventStore config");
}

LesJ
24 Apr 2013, 5:56 AM
Let's agree to disagree :) and let's repeat and summarize: this thread is not about how experienced developers should build their apps. It's about

1. Saving time (and frustration) for new users
1.5 Saving time for the Ext support team.
2. Making sure new users stay in the community and don't loose faith and switch to Kendo, AngularJS, jQuery or some other piece of cool tech due to the learning curve being too steep (which it will be if Cmd is a prerequisite).

Well worth a few bytes in my book (we have several such sanity checks in our scheduling components btw).


if (Ext.versions.extjs.isLessThan(MIN_EXT_VERSION)) {
alert('The Ext JS version you are using needs to be updated to at least ' + MIN_EXT_VERSION);
}
if (!resourceStore) {
Ext.Error.raise("You must specify a resourceStore config");
}

if (!this.eventStore) {
Ext.Error.raise("You must specify an eventStore config");
}


This is a popular misconception that you will not have to use a build system when you use another framework, but it doesn't work this way. You will most likely end up using some sort of loader such as RequiresJS that maintains module dependencies and you will most likely use some automation tool such as GruntJS.

Incidentally, I'm not sure why Sencha Cmd uses Java as opposed node.js (as in RequireJS). Also, they use the bootstrap.js file. This appears as if Ext JS has some sort of dependency on the popular Twitter Bootstrap library/:)