View Full Version : Fiddle 2.1

28 Dec 2016, 11:47 AM
Fiddle 2 was a major overhaul of what was already a great tool. Read more about the 2.0 release over on the blog (https://www.sencha.com/blog/using-fiddle-2-to-share-ext-js-code/).

To continue development, we have released version 2.1 with some smaller improvements that make some of the new features more convenient.

Ext JS 6.2!

When Fiddle 2.0 was released, Ext JS was about two months old but I knew Ext JS 6.2.1 was going to soon be released and was released about two weeks later. Fiddle 2.1 was updated to run Ext JS Fun fact, the only changes there were made to the app to support the newer Ext JS version was removal of some overrides for bugs that were fixed.

Dynamic Data API

A very common use of Ext JS is to use it's grid component. When using a dynamic data asset within Fiddle if you wanted to support sorting and filtering you had to code this yourself and you may recode this for each new fiddle. Fiddle 2.1 created a new Fiddle API where you can use it's sort and filtering API. These APIs integrate seemlessly with the request that Ext JS will send out of the box. Here is a sample fiddle:


Request Object

Another improvement with dynamic data was access to a request object. Fiddle 2.0 gave access to the parameters that matched the request method (GET requests params were the query string parameters, others were the body parameters), however, there may be times yo uneed access to both the body and query string parameters. Fiddle 2.1 now passes a req object that gives access to both set of parameters but also cookies and headers. Here is a sample fiddle:


Vanilla JavaScript

There are times that I use some other fiddle sites but they are a bit simple for my uses. Fiddle 2.1 now has a "None" option in the framework selector. When your code is run, it will not load any Ext JS or Sencha Touch release. It will still load your app.js automatically but if you create any other local JavaScript files you would need to add <script> nodes in index.html to load them.

Data in Embeds

It may shock you but in Fiddle 1 and 2.0 if you had data assets in your saved fiddle and you embedded that fiddle (like here in the forum) it would not show them; it only showed JavaScript, HTML and CSS. Well, that has been solved with Fiddle 2.1. See the above embedded fiddles.

Create ViewController/ViewModel

A more experimental feature that was added to Fiddle 2.1 is the ability to easily create ViewController/ViewModels. If you right-click on a local file, it will do a quick and simple inspection of the code. If it thinks that file can have a ViewController/ViewModel then the context menu will have two menu items enabled. On selection of one of them, it will create a new file with a generated file name (basically the name of the class + 'Controller' or 'model') and generate the Ext.define for the VC/VM. It will also check to see if a file with the name it wants to use is already present or now. Like I said, this is a more experiemental feature that doesn't have a lot of usage on it so I would be very interested in hearing your milage on it. If it doesn't work as expected, open a thread in this forum with a link to a fiddle to reproduce the unwatned behavior.

Other Minor Changes

There are a couple things you may likely overlook. The version of the Fiddle app is now shown in the lower-left corner. The Docs and Forum links on the lower-left corner also now will link to either the Fiddle docs or this Fiddle forum. The server powering Fiddle also got a little bit smarter with Cmd packages. Fiddle 2.0 used to send the Cmd packages as remote assets when running the code (you likely haven't even looked at the requests when running the code and that's ok). Instead, The Fiddle app now sends what packages it wants to use and the server will then lookup the assets for those packages.

Hope you enjoy these improvements!