Why Ext JS Apps Scale, When Others Don’t

At Sencha, we believe applications should be designed with the ability to scale in a cost-effective manner. Scaling for HTML5 apps comes in three major forms.

1. Easily grow the codebase of a project as you add application features, functionality and capability, without adversely impacting speed or performance.
2. Add developers to project teams, so each developer can immediately and easily contribute independently.
3. Support various platforms, browsers, and device types.

The Ext JS architecture allows apps to scale across all three of these areas based on two key architectural/technology implementations. First, it’s class-based or object-oriented architecture allows for separation of concerns. Second, the Ext JS comprehensive component library allows for cohesiveness, efficiency, and stability.

Separation of Concerns

Developers know that building applications using an object-oriented paradigm allows them to write modular code. Because modular code breaks the problem down into smaller parts, it enables distributed software development, code reusability, and code readability. Unfortunately, the approach taken by many other micro-frameworks, where object-oriented methodologies aren’t enforced, creates spaghetti code and makes it challenging for developers to code independently. Distributed software development only works if developers understand the end-to-end coding environment and can focus on a single component to develop and test each modular component separately.

We’ve been creating new tools to make development and testing even easier. At SenchaCon 2015, we announced the new JetBrains IDE Plugin to make development more efficient.

 

To assist with debugging components, we launched a new tool called Sencha Inspector, which helps developers to inspect an application’s structure, visualize a component tree, and even assist in theming the application.

 
Code reusability is crucial to reduce redundant code when producing applications that scale. Writing reusable code also makes it easy to import code from previous products. Plus, reusable code can be sold and distributed to others. Ext JS allows developers to take advantage of code reusability by providing a process for dynamic loading and building. Similar to #include in modern object-oriented programming languages, the Ext JS build process uses just the framework code that is actually needed. As a result, code reuse produces smaller file sizes.

After the launch of Ext JS 5 back in 2014, which included MVVM, it made it even simpler to write more readable code. Because Views have their own ViewModel and ViewController, writing code using declarative programming techniques is now more intuitive.

Integrated and Comprehensive Component Library

Ext JS 6, released this past July, has the most diverse out-of-the-box JavaScript component library. Using a diverse component library, developers don’t have to deal with integration problems that they face with other less comprehensive microframeworks.

Often these microframeworks, such as AngularJS, have to be stitched together with other independent microframeworks and component libraries. Common integration problems often include managing browser compatibility, component interoperability, ensuring and maintaining release synchronization across various component sets, integration with charting libraries, and an inefficient build process.

MVC microframeworks, such as AngularJS, need to work with another component library that frequently has different browser requirements. Each additional framework typically has its own set of browser requirements. As each new microframework is added, managing the browser requirements for the app being developed can prove challenging.

When many microframeworks are glued together, there is usually no cohesive methodology to handle component interoperability. With Ext JS, components communicate with each other using an events API which is standardized across components. Additionally, Ext JS namespaces standards make variable collisions very unlikely. When using microframeworks and component libraries that are glued together, developers often find themselves writing code to build bridges or wrappers that allow each glued framework to communicate with the other. Without a consistent methodology or coding environment, developers waste valuable time learning how each glued framework differs from the rest.

Most microframeworks don’t have a standardized build process. Even for those that do, when they are glued together with other microframeworks, there is often no clean way to exclude unused code. This frequently leads to huge file sizes and slow performance. Sencha Cmd provides a standardized build process which only uses the framework code that is actually needed for the application and the device.

Multiple Devices and Platforms

After an application is successful, the next step is to migrate it to other devices and platforms. Because most microframeworks are designed to be used by mobile devices or desktop devices, this frequently means a code-rewrite.

With the introduction of Ext JS 6, developers can now create next gen Universal Applications (desktop, tablet, and smartphone apps), using the same codebase, delivering the right experience for each device type. In Ext JS 6, the the business logic is separate from the view logic, so developers have the option to create sophisticated user experiences that map to the devices their users choose. By designing the view portion separately, the developer can also consider the context in which the application will be used.

A good example is an airline application. On a desktop device, the developer would likely prioritize the ticket purchase view because ticket purchasing is the most likely action on a desktop device; but on a mobile device, the developer would likely prioritize the flight status and check-in views because travelers are most likely using the app to access their boarding passes and gate information. Although the views are designed separately for each device type, the business logic remains the same when building the application in Ext JS 6.

Conclusion

As companies adopt HTML5 for web applications, it’s important to choose technologies that scale to help prevent re-writes and promote code reusability. The object-oriented structure of Ext JS with its separation of concerns, along with the massive out-of-the-box component library makes it easy to build scalable applications.

We’re taking bold steps to create new tools and technologies that enable developers to build better apps that scale easily and perform faster.

Try Ext JS 6

Download Ext JS and try it for 30 days free.
Check out example Ext JS apps.