Latest Ext JS 7.8 is now available. Learn more

Quickly Build And Test Javascript Apps In The Browser With This IDE

July 27, 2021 168 Views

Web-based IDEs reside entirely on a remote server and are accessible through browsers. Unlike the typical IDEs on your PC, you don’t have to go through any installation process. Also, they enable you to collaborate with other developers conveniently. You can share code examples from many js frameworks with your colleagues easily. They can play with your code and make the necessary adjustments. You can enjoy all of these benefits using Sencha Fiddle because of its online utility for creating, running, and sharing code examples using the Ext JS framework. Fiddle is supported on the same platforms/browsers supported by Ext JS 6.2.0. It includes an online IDE along with a view of your running example without the overhead of setting up a local environment.

What is Sencha Fiddle?

Sencha Fiddle is an online IDE for creating, running, and sharing code examples using the Ext JS framework easily. It mimics the local development environment in the cloud. You can use it to test and prototype applications conveniently.

Why should you use Sencha Fiddle?

  • Easy to use
  • Run, edit and share Ext JS codes online
  • Super-fast performance

What can you do with the Sencha Fiddle?

Fork and Share Fiddles

Sencha Fiddle enables you to change all the aspects of the fiddle, including the code and folder structure. It gives you flexibility. You can save your code to the Fiddle Server and share your work with your colleagues and community.

The process of sharing the fiddle is very simple. Simply click on the share button. A new window will open up. It will contain a few lines of code, which you can use to display your work through an IFrame.

Fork And Share Fiddles Min

Protect Fiddles with Passwords

You can protect the fiddle with a password to prevent unauthorized access. No one can play with your codes without your permission.

The process of securing the fiddle with a password is very simple. Here are the steps:

  1. Hit the Admin button. Then Details. 1. Hit The Admin Button. Then Details Min
  2. A new window will open up. Scroll down to find and expand Advanced Options. Insert your preferred password. Finally, hit the Set button. 2. A New Window Will Open Up. Scroll Down To Find And Expand Advanced Options Min

That’s it! Now, no one can edit your fiddle without entering the specified password.

Lock Fiddles for Confirmation Prompt

Another thing you can do is locking fiddles to prevent others from editing them unless a confirmation prompt is acknowledged. It is a great way to control access to your codes effectively.

To lock the fiddle, simply check the box of the Locked field.

Lock Fiddles For Confirmation Prompt 1 Min

Assign Fiddles to Team

You can assign the fiddles to different teams. Each of the users will have custom-defined edit privileges. So, you can enjoy granular control over the fiddles and the persons who are interacting with them.

To assign a fiddle to a team, simply follow these steps:

  1. Navigate to Admin > Teams. 1. Navigate To Admin Teams Min
  2. A new window will open up. Click Add To Team button. 2. A New Window Will Open Up. Click Add To Team Button Min
  3. Select the team from the dropdown. Then hit Choose Team button. 3. Select The Team From The Dropdown. Then Hit Choose Team Button. Min

That’s how you assign a fiddle to a specific team.

Add Fiddles to Groups

In Sencha Fiddle, Groups are “albums” of fiddles. They provide additional user-defined organization for your fiddles. Besides, Sencha Fiddle offers support for Dynamic groups. They automatically curate the fiddles based on pre-defined search criteria.

To add a fiddle to a group, simply follow these steps:

  1. Head to Admin > Groups. 1. Head To Admin Groups Min
  2. A new window will appear. Click Add To Group button. 2. A New Window Will Appear. Click Add To Group Button Min
  3. Choose your preferred group from the dropdown. Then click the Choose Group button. 3. Choose Your Preferred Group From The Dropdown. Then Click The Choose Group Button Min

That’s it! Now, you have added your fiddle to a group.

Add Data Files Effortlessly

Sencha Fiddle allows you to create actual data files on the fiddle server. Let’s consider a scenario where you are required to add an “Employee.json” file with two employee records. All you have to do is follow three simple steps:

  1. Click on the + icon beside the Data folder and select Create JSON/JsonP. 1. Click On + Icon Beside Data Folder Min
  2. Then set the name of the file to Employee.json. 2. Then Set The Name Of File To Employee.json Min
  3. Now, you can add the code to the file. 3. Now, You Can Add The Code To The File. Min

That’s how you add the data file to Sencha Fiddle effortlessly. There’s absolutely no hassle.

How can I start using Sencha Fiddle?

Sencha Fiddle makes your life easier by allowing you to create, run and share your Ext JS code online. It gives you flexibility. It enables you to collaborate with your colleagues and community easily.

Ready to get started? Launch Sencha Fiddle!