A Step-by-Step Guide To One Of The Best Javascript Libraries

Sencha Ext JS is the most comprehensive JavaScript framework for building data-intensive, cross-platform web and mobile applications for any modern device. Ext JS includes 140+ UI components, such as HTML5 calendar, grids, pivot grid, D3 adapter, trees, lists, forms, menus, toolbars, panels, windows, and much more which helps make it one of the best Javascript libraries. The robust data package included in Ext JS decouples the UI components from the data layer. Hundreds of user extensions are also available from the Sencha community.

You can accelerate web application development with an enterprise-ready framework, components and tools built to work together seamlessly. You can improve the web app design process with pre-integrated tools like Sencha Architect, Sencha Stencils and Sencha Themer. Sencha Test is the most comprehensive unit and end-to-end testing solution for Ext JS.

Additionally, Ext JS includes a flexible layout manager to help organize the display of data and content across multiple browsers, devices, and screen sizes. It helps you to control the display of components, even for the most complex user interfaces. Ext JS also provides a responsive config system that allows application components to adapt to specific device orientation (landscape or portrait) or available browser window size.

Ext JS also includes features that align with the ADA Standards for Accessible Design. The Ext JS ARIA package makes it possible to add accessibility support to your applications by providing tools that you need to achieve Section 508 Compliance. Using the ARIA package, you can create apps that can be used by people who need assistive technologies such as screen readers to navigate the web.

In this article we will explore the ecosystem of all of the Ext JS libraries and tools that make it one of the best Javascript libraries.

What is Sencha Ext JS?

Sencha Ext JS is the most comprehensive JavaScript framework and set of libraries for building data-intensive, cross-platform web and mobile applications for any modern device but it also has an ecosystem of supporting tools as well. The Ext JS framework itself includes 140+ pre-integrated and tested high-performance UI components. But the supporting tools include Sencha Cmd, Sencha Architect, Sencha Stencils, Sencha Themer, Sencha Test, Sencha Inspector, and Sencha Fiddle.

You can build Ext JS applications using drag-and-drop features and spend less time on manual coding. You can also design customized application themes using graphical tools — without writing code. The included IDE and Code Editor Plugins integrate Sencha frameworks into your enterprise workflow, enabling code completion, inspection, generation, navigation, refactoring and more.

Find out more about Sencha Ext JS.

What is Sencha Cmd?

Sencha Cmd is the cornerstone for building your Ext applications. Sencha Cmd is the cornerstone for building your Sencha Ext JS and Sencha Touch applications, as well as optimizing ExtReact applications. Sencha Cmd provides a full set of lifecycle management features such as scaffolding, code minification, production build generation, and more, to complement your Sencha projects.

With an ever-expanding list of command line options, from code generation to native packaging, Sencha Cmd automates many tasks related to the Sencha Ext JS app development lifecycles. The tool also provides a rich set of command line syntax and Ant integration. It can be seamlessly integrated with your enterprise build environments or used as a standalone tool to boost developer productivity and enhance application performance. Tools like Sencha Cmd help you work with one of the best Javascript libraries.

Sencha Cmd provides a workspace and package management system that assists in sharing framework code, packages, and custom code across multiple applications. You can easily integrate packages from the Sencha Package Repository or any other packages created by the Sencha community. By using dynamic package loading, you can create a faster loading experience for large applications.

Find out more about Sencha Cmd.

What is Sencha Architect?

It is the ultimate visual app builder for developing cross-platform HTML5 applications on desktop and mobile devices.

Architect empowers your team to build HTML5 applications using drag-and-drop features, so you spend less time on manual coding and your application code is optimized for high performance. Getting access to one of the best Javascript libraries through a visual app builder is an amazing experience.

Architect saves developers time by removing the need to type most boilerplate code. Automatic code generation accelerates the development of both desktop and mobile applications. Simply altering properties and configurations of any Ext JS UI component in a WYSIWYG window eliminates the human error that often occurs with manual coding.

A Visual Application Builder helps you create applications with Ext JS in an easy-to-use, drag-and-drop environment. Every Ext JS component is available for use in your application. The tool also lets you see what your users will see as you are building your application.

Find out more about Sencha Architect.

What is Sencha Inspector?

Sencha Inspector is a debugging tool that provides direct access to components, classes, objects, etc. for apps built using Sencha frameworks. Inspector is designed to provide application insights and intelligent debugging capabilities for any Sencha application developed with Ext JS 4.2.0, 5.x, 6.x or Touch 2.1.0 and above – regardless of the browser you’re using. It lets you analyze your application code for issues, such as overnesting of components, number of layout runs, and helps improve your application performance.

Inspector even lets you theme your Sencha applications by providing access to modify any Ext JS and Sencha Touch Sass variables. Because Inspector comes pre-integrated with Sencha Cmd, all theme changes can be viewed in near real-time. Being able to inspect one of the best Javascript libraries through Sencha Inspector can really boost productivity.

With Inspector, you can also debug Sencha applications running on your mobile devices (including iOS and Android) using the remote debugging capabilities of the tool.

Find out more about Sencha Inspector.

What is Sencha Test?

Sencha Test is the most comprehensive unit and end-to-end testing solution for Ext JS, including support for end-to-end testing of ExtAngular, Angular, ExtReact and React apps. Deliver high quality apps and reduce testing time & cost with Sencha Test.

Write unit and functional tests in JavaScript using page object functions to keep test code clean. Store tests in a source CMS. Utilize powerful APIs to target specific Ext JS and ExtReact components in the app.

Install and use Node modules to expand the scope of testing by connecting to databases. Run tests by communicating with web service APIs without invoking the application. Require external files directly in the test code.

Automate your test runs. Test real-time app changes from the CI system. Leverage our TeamCity and Jenkins integrations. Use any build tool that can invoke a command-line utility to rust tests.

Comprehensive results reports from automated and manual test runs, including failed tests. Identify and fix code coverage gaps with our Istanbul integration.

In addition to Sencha Test we also have Sencha WebTestIt which is a lightweight IDE optimized for building UI web tests with Selenium or Protractor. Find out more about WebTestIt.

Find out more about Sencha Test.

What is Sencha Themer?

Sencha Themer empowers you to style Ext JS, ExtAngular and ExtReact apps and make them look great. You can create custom themes using graphical tools – without writing code. Themer gives you access to components and inspection tools to set fine-grained styles and generate theme packages with dynamic stylesheets.

With the innovative color palette in Themer, it’s easy to apply different color combinations to different component states. The color palette shows base, body background, and font color with progressively lighter and darker colors. There is also a palette that helps you select colors from Material Design. The Themer font management option allows you to quickly add web fonts from Google fonts.

Find out more about Sencha Themer.

What is Sencha Stencils?

Stencils is a complete UI asset kit for Adobe Illustrator, Adobe XD, Sketch, Balsamiq and is also available as SVG/PNG for use with other programs. Stencils contains all of the components and styles used in the Ext JS Classic and Modern toolkits as well as ExtAngular and ExtReact Components. Designers can use visual assets that exactly match all of the UI components that Sencha offers – down to the very last pixel. They can work with the components as vector files and symbols rather than writing code. With Stencils, designers can streamline the process of creating mockups for great looking web applications.

Find out more about Sencha Stencils.

What is Sencha Fiddle?

Fiddle is an 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. Fiddle 2 attempts to mimic local development, but is hosted in the cloud. Saving code examples (we’ll refer these as fiddles going forward) is as easy as signing in with your Sencha Forum username and password, saving your code, and sharing the Fiddle url.

Launch Sencha Fiddle now!

Ready to get started building Javascript web apps using one of the best Javascript libraries?

In this article we have provided a step by step guide that has walked you through the various tools, frameworks, and libraries available in our ecosystem. These include Sencha Cmd, Sencha Architect, Sencha Stencils, Sencha Themer, Sencha Test, Sencha Inspector, and Sencha Fiddle. Sencha Ext JS is available as a free trial so head over and get started with one of the best javascript libraries today!