PDA

View Full Version : Fiddle sometimes needs a page refresh



vadimv
29 Nov 2016, 1:09 AM
Wondering why I see 2 console.logs in one run.

https://fiddle.sencha.com/#view/editor&fiddle/1lc8

55563

vadimv
29 Nov 2016, 1:17 AM
Oh I got it, it's because I add the app.js in the index.html file. Weird, I think first time when adding js files Fiddle doesn't detect them, and it says that the namespaces is undefined, then I added all js files in the index.html and the error disappeared and I got the console logs. But then I saved refreshed the page and saw 2 console logs, one coming from Ext.onReady with embedded app.js code in it, and the other one coming from the app.js itself. So I removed app.js from index.html saved and refreshed the page and everything went ok.

Seems that many weird things happen when working in 1 session and sometimes have to refresh the page and make Fiddle working. Wondering if anyone have had the same ?

mitchellsimoens
29 Nov 2016, 4:36 AM
Oh I got it, it's because I add the app.js in the index.html file. Weird, I think first time when adding js files Fiddle doesn't detect them, and it says that the namespaces is undefined, then I added all js files in the index.html and the error disappeared and I got the console logs.

I want to understand this a bit more. So when you open fiddle and it has app.js and index.html files by default (btw, index.html is only <body></body> stuff), Fiddle will load app.js by default. This happens for me every time without needing to save or refresh the browser.

Like local development, you have to require classes to load them when working with Ext JS. You are getting around that by loading them in your index.html which will work just not the way you do Ext JS development. 1 class per file and using requires in your classes is the prescribed way to develop with Ext JS.

vadimv
29 Nov 2016, 5:01 AM
Like local development, you have to require classes to load them when working with Ext JS. You are getting around that by loading them in your index.html which will work just not the way you do Ext JS development. 1 class per file and using requires in your classes is the prescribed way to develop with Ext JS.

Ok, then this explains my problems. My first expectations were that Fiddle will add the JS files automatically, which actually does this but only when the folders and files structures corresponds to the ExtJS dev way. Thanks for your explanation.

mitchellsimoens
29 Nov 2016, 5:06 AM
This is one of the differences from Fiddle 2 to Fiddle 1.

Fiddle 1 would take all your files and concatenate them and output them in an inline <script> in the index.html. This means no remote file loading, poorer debuging and seemingly random order of concatenation.

Fiddle 2 is different, as you are experiencing, files are no longer concatenated and are now loading remotely mimicing local development (using requires). Fiddle 2 is trying to be as close to if you were working locally on an application.

Fiddle 2 will still run fiddles created with Fiddle 1 in the Fiddle 1 way so it doesn't possibly break thousands of fiddles that relied on the concatenation. You can "upgrade" a Fiddle 1 fiddle to the Fiddle 2 way if you want to support the remote file loading and such but it's an optional step (for now).

This was mentioned in this guide also: http://docs.sencha.com/fiddle/guides/working_with_files.html

I am currently writing a blog that will also further highlight this.

vadimv
29 Nov 2016, 5:44 AM
This is one of the differences from Fiddle 2 to Fiddle 1.

Fiddle 1 would take all your files and concatenate them and output them in an inline <script> in the index.html. This means no remote file loading, poorer debuging and seemingly random order of concatenation.


Yes, that's why my confusion. And my bad that I didn't read the docs you just pointed out.