Understanding the Difference: When to Use Ext JS Classic vs. Modern Toolkit

Ext JS is a JavaScript framework for building powerful web and mobile applications. The framework features over 140+ high-performance, fully tested, and customizable UI widgets/components. Moreover, it supports all modern browsers and cross-platform development. Ext JS provides two primary toolkits for building apps: Classic and Modern toolkits. Each toolkit is designed to cater to different use cases, offering distinct features and advantages.

A common misconception regarding Classic and Modern toolkits is that Modern toolkit is more advanced while Classic is old. As a result, many developers opt for Modern toolkit for their project, which should have actually used the Classic toolkit.

This article will discuss the differences between the Classic and Modern toolkits. We’ll also discuss when developers should opt for each toolkit.

What is Ext JS Classic Toolkit? 

The Classic toolkit is the original Ext JS framework toolkit, designed primarily for desktop apps/browsers. It is a mature, well-established, and highly stable toolkit built upon a solid JavaScript foundation. The Classic toolkit is known for its robustness and extensive functionality.

Here are the key features of the classic toolkit:

Stability

The Classic toolkit is well-established and built upon a solid JavaScript foundation, making it highly stable. Moreover, Sencha has been releasing new and improved versions of Ext JS Classic regularly for a long time to ensure stability.

This stability means that the applications built with Ext JS Classic perform reliably over time.

Recently, Sencha released Ext JS 7.8, which has various improvements and enhancements in both Classic and Modern toolkits. This Ext JS version also includes Froala Editor compatibility with the Classic toolkit.

Extensive Documentation

Sencha provides comprehensive documentation for the Classic toolkit. It includes detailed guides, examples, and API references. This helps developers quickly understand and utilize the Sencha Ext JS framework’s capabilities.

Wide Browser Compatibility

One of the standout features of Ext JS Classic is its wide compatibility across different browsers. This also includes older versions. This means that with the Classic toolkit, you can create highly functional apps even for legacy browsers that do not support some of the newer web features.

This makes the Classic toolkit an excellent choice for projects that need to support a diverse range of client environments.

Rich and Extensive Set of Components

The Classic toolkit supports a comprehensive set of UI components. These include advanced data grids, trees, pivot grids, forms, charts, and more. These components are more stable and traditional, providing a consistent desktop experience.

In other words, Ext JS Classic offers more components and more extensive functionality than the Modern toolkit.

The Classic toolkit’s feature-heavy components are suitable for building complex interfaces.

Moreover, developers using the Classic toolkit need to interact directly with JavaScript to manipulate and customize components. This approach provides granular control over app behavior and appearance. This enables developers to cater to complex and specific requirements.

Considerations

While the Classic toolkit offers robust functionality and a comprehensive set of components, it may not fully leverage the latest advancements in web technologies like HTML5 and CSS3 to their fullest extent. This may sometimes result in less optimized performance when creating modern web apps for modern browsers.

What is Ext JS Modern Toolkit?

Ext JS modern is the newer toolkit in the Ext JS framework designed to address the needs of both desktop and mobile apps/touch devices. It offers a more lightweight and responsive framework.

The Modern toolkit is optimized for touch interactions and modern web standards. It emphasizes performance and a clean, minimalistic design.

The Modern toolkit emphasizes performance and a clean, minimalistic design.

Here are the key features of the Modern toolkit:

Modern Web Technologies

Ext JS Modern takes full advantage of the latest web standards, including HTML5 and CSS3, providing robust support for modern browsers. It helps create visually appealing and highly functional user interfaces with richer interactivity.

Responsive Design

One of the core features of the Modern toolkit is responsive design. This means that the UIs you create with this toolkit adjust to various screen sizes and orientations.

Thus, developers can use the Modern toolkit to provide a modern user experience across desktops, tablets, and smartphones.

Touch-Optimized Interfaces

The Modern toolkit offers a range of components and responsive layouts that are highly optimized for touch interactions. These include drag, pinch, swipe, support for gestures, and more.

This feature makes the Modern toolkit ideal for building apps that need to function well on touch-enabled devices.

Considerations

• Steeper learning curve: Developers who are not familiar with modern JavaScript frameworks may find learning Ext JS Modern a little challenging. Expertise in newer JavaScript features is often required to fully utilize the toolkit’s capabilities.
• Evolving features: While Ext JS Modern provides a solid framework for building modern and responsive apps, its features are still evolving. It’s not as mature and stable as the Classic toolkit. This can mean occasional bugs in the Modern toolkit and the need for updates as the framework matures and stabilizes.

Which toolkit to Choose for your project?

Which Ext JS toolkit is suitable for your project depends on your specific project requirements. Here, we’ve discussed the criteria for selecting both Classic and Modern toolkits.

Criteria for Selecting the Classic Toolkit

Support for older browsers

If your project needs to run a wide range of desktop browsers, including older versions, the Classic toolkit is the better choice. It is designed to be compatible with many legacy browsers. Thus, it ensures your app works reliably across various environments.

Stability and maturity

For projects where stability is paramount, the Classic toolkit’s long history and proven track record make it a reliable option. Its extensive documentation and established community support can also ease the development process.

Data-intensive apps

If your app requires data-intensive features, such as grids and charts, complex UI, complex data manipulation features and extensive customization options, the Classic toolkit is the right choice. For example, the Classic grid component supports complex features like grouping, summaries, filtering, and drag-and-drop.

Accessibility (ARIA Support)

If your project need to focus on accessibility the Classic toolkit can be a good option. It has built-in support for ARIA (Accessible Rich Internet Applications). This can be crucial for making apps accessible to users with disabilities. The Modern toolkit doesn’t currently support ARIA.

When to Choose the Modern Toolkit

Projects using modern web technologies

The Modern toolkit is the right choice if:

• If your app needs to run on modern browsers leveraging the latest web standards like HTML5 and CSS3
• You aim to create a more dynamic, visually appealing user interface,

The toolkit provides better performance and a richer user experience, especially on modern browsers and devices.

Multiple devices and platforms

If your project needs to run on various devices and platforms, especially mobile and touch devices, you should opt for the modern toolkit. Its components and layout systems are designed with responsiveness and touch optimization in mind.

Other Factors to Consider

App for both mobile and desktop browsers

If you’re creating a web app for both mobile and desktop browsers or modern and legacy browsers, you can leverage both toolkits. For example, you can build separate views for each toolkit. You can also leverage Ext JS’s feature to detect the device type and then load the appropriate view.

Project timeline and team expertise

If you have to deliver a project within a short timeframe and your team isn’t well versed with the latest web technologies, using the Classic toolkit would be a good option.

The Modern toolkit can have a steeper learning curve for developers who aren’t familiar with latest web technologies, such as HTML 5 and CSS3.

How to Switch Between Ext JS Classic and Modern Toolkits

• You must create a new Ext JS application from scratch and move components in pieces. You can use Sencha Cmd to scaffold the new application framework.
• Ensure all dependencies required for the new toolkit are installed.
• Analyze the components in your existing app. Assess which components have direct counterparts in the new toolkit and which components will require major changes.
• Move components one by one instead of moving them all at once. Start with the foundational components, such as layouts and containers. You can then gradually move to more complex components, such as grids and forms.
• Be aware of naming conflicts and differences in API conventions between the toolkits. These can include method names, property names, and event names, etc. Refer to the Ext JS Docs to learn about the components naming.
• Test each component thoroughly as you migrate it to ensure it behaves correctly in the new environment.
• You can also contact Sencha support and get expert help any time if you face issues during migration.

Conclusion

Ext JS offers two main toolkits for web application development: Classic and Modern. Both toolkits are designed for different types of projects and use cases. The Classic toolkit offers an extensive and robust set of components and is widely used to build desktop apps, including those that need to run on legacy browsers.

The Modern toolkit is best suited for applications that need to operate seamlessly across various devices and platforms, especially mobile and touch devices.

Start building robust apps with Ext JS today!

FAQs

What is Ext JS used for?

Ext JS is used to build powerful mobile and desktop web apps. It offers over 140+ UI components and supports both MVC architecture and MVVM architecture. You can also use additional tools from the Sencha platform to build your Ext JS applications effortlessly. These include:

• Sencha Architect
• Sencha Cmd
• Sencha Test
• Sencha Touch

What is the difference between Ext JS Classic and Modern toolkits?

The Classic toolkit is a well-established toolkit designed primarily for desktop browsers. The Modern toolkit is designed for various platforms and devices, including touch devices, keeping responsiveness and performance in mind.