sencha-logoI’ve blogged about this before: I really love jsFiddle, the excellent online JavaScript snippet creator/editor. One of the reasons I REALLY like it is because it allows one to use the latest(ish) version of ExtJS. One of the reasons I DON’T like it is because I have to setup the environment every time to use ExtJS. Sure, it only takes a few seconds, but wouldn’t it be great if Sencha had their own flavor?

Well, this week at SenchaCon, we saw a sneak peek (perhaps not intentional…?) of a beta version of Fiddle, an online JS snippet editor/profiler. The big pull for me, of course, is that Fiddle already knows about ExtJS/Touch, so getting setup for creating a snippet is instantaneous.

https://fiddle.sencha.com

Here are some the major features:

Choose Your Framework…and Theme!

When composing a new fiddle, you can easily select from any of the currently available library versions…all the way back to Ext JS 2.3.0…whoah. Additionally, for Ext JS 4.2.x, you can even select the theme that you’d like to apply to the rendered content.

Mocking Data

Mocking data for stores and other AJAX requests is pretty slick. At the bottom of the main editing area, you’ll see the typical tabs for JavaScript, CSS, and HTML. However, you can add additional “Data” tabs that allow you to specify a mock url, as well as provide mock data that should be returned when that url is used, such as with a remote Store. Here’s an example:

JavaScript Tab

Ext.create('Ext.data.Store', {
    fields: ['car', 'driver'],
    proxy: {
         url: '/caranddrivers',
         type: 'ajax'
    },
    autoLoad: true
})

Data 1

URL: /caranddrivers
Data:[
    {car:'Ford',driver:'Joel'},
    {car:'Chevy',driver:'Tom'},
    {car:'Dolorian',driver:'Joel'}                       
]

When the store attempts to load data, the request is mocked via a Simlet (I assume), but the behavior represents what you would get with a remotely-configured store and proxy. Pretty neat!

Recording Events

The Events tab is pretty cool as it allows you to record and print the events that occur within your fiddle, even allowing to configure precisely which events you want to target. But even cooler is that you can actually “playback” the events, and every event which was recorded will be replayed again For example, if you changed a form field value, you’ll visually see the interaction with the element again during playback. You can even adjust the speed at which the playback occurs. That’s pretty cool.

Layout, Component, Performance Analyzer, and More

I haven’t had a chance to look at these in any detail, but in addition to the rendered output of the fiddle, Sencha Fiddle also provides some pretty awesome looking summaries and analyzers for layouts, components, and performance. For example, in the Components tab, you can click “Generate Component Tree” and get a tree-representation of the component structure of your snippet. While I need to see what these can really do, it’s features like these that will really set Sencha Fiddle apart from other more generic offerings like jsFiddle.

Yes, and let’s not overlook the fact that Sencha Fiddle comes with JSLint/JSHint support baked in, which you can run in isolation, or as a part of the execution of your script.

It’s Still Very Beta

As awesome as Sencha Fiddle is, don’t go an delete your jsFiddle account right away. The current version (1.0.0) is still in beta, and there are a few bugs (some show-stoppers), such as:

  • Saving/forking a fiddle doesn’t save Data tabs (no!!!)
  • Search is broken
  • New Fiddle button doesn’t work
  • Reset Fiddle doesn’t work

But even with the bugs, it’s DEFINITELY worth checking out. I sincerely hope the tool gains adoption…at the very least, it would help out in the forums :)

Have you tried Sencha Fiddle? If so, I’d love to hear what you think! Please leave a comment!