Scalable web application! You might have heard a lot about it.
Well, this quick guide is going to take you on a journey where you will get all of your answers in detail.
Let’s begin with the issue of scalability.
Suppose you launched a new web application for your product or service that has a limited customer base. You will notice that your web app will be blazing fast in the beginning. Your customers will love to surf your app due to its high responsiveness.
But with time, as your customer base starts to grow or you run a marketing campaign that attracts thousands of visitors to your web app, your users will not be able to use your app the same way as earlier.
In this scenario, you might start wondering if the app has a bug, so testing would be the best option, right?
But the reality is different. The chances are high that it’s a scalability issue.
Now the question is, What is scalability, and what does it have to do with the number of users?
In simple terms, scalability is the ability of your web app to give reasonable performance even under growing demand. It doesn’t matter whether this demand stems from larger data sets, a sudden increase in the number of users, or anything else.
The idea behind building a scalable web app is to make your app capable enough to perform normally with one user or with thousands.
Well, Sencha Ext JS is your best bet.
Why? you may ask. Well, let’s get into the nitty-gritty and find out why Sencha Ext JS is becoming more and more popular with each passing day.
What Is Sencha Ext JS, and Why Is It So Popular?
Ext JS comes with more than 140 UI components like grids, trees, HTML5 calendar, D3 adapter, pivot grid, lists, menus, forms, Windows toolbars, panels, and much more. Apart from this, the Sencha community offers hundreds of user extensions.
Let’s see why it is the first choice of developers, managers, and QA professionals across the world.
- Comprehensive offering: Sencha solutions has much more to offer than a development framework. It addresses designing and testing of apps to drive conversions.
- Proven track record: Sencha has been known for innovation in web technologies for more than ten years. It is a trusted vendor within the web app domain.
- Widespread adoption: 10,000+ enterprise customers and about 60% of Fortune 100 companies prefer Sencha. More than two million developers across the world use Sencha products.
- Support and service excellence: Sencha’s support team is always available to resolve issues quickly. It has a well-earned reputation in the field of professional services and training excellence.
Now you have some idea of why Sencha Ext JS is so popular.
Then why not see what Ext JS is capable of?
How Sencha Ext JS can help in building a rich and scalable web app
Here are some examples of features that can help you build cross-platform apps for desktop, tablets, and smartphones.
Admin Dashboards: First impressions are crucial when you begin to work with a new framework or library. Sencha makes Ext JS easily accessible to all users, regardless of skill level. You can use Sencha’s feature-rich admin app template to build a powerful admin dashboard.
Executive Dashboard: An executive dashboard is used to display companies’ information in an organized manner. Ext JS provides a complete and feature-rich administrative app template that lets you build a powerful admin dashboard.
Kitchen Sink (Modern and Classic): It is a complete showcase of Ext JS components and features in modern and classic tool kits.
Ext JS Calendar: Ext JS Calendar is a powerful component that lets you incorporate date and event data to create stunning custom calendars. This calendar utilizes the minimalistic design philosophy, meaning it can be extended to cater to any requirement.
DataView: You can easily create a lot of components dynamically using DataView. It lets you easily render a lot of data from server back end or other data source. You can use DataView in case you want to show sets of the same components a number of times.
Google Maps: Ext JS comes with a ux package that contains various user extensions (including one for Google Maps). You can use them to incorporate a rich map in your Ext JS app along with built-in functionality. This will automatically add markers to the map based on the available data within an Ext JS store.
Progress Bar: Progress Bar supports both manual and automatic modes. In manual mode, you are responsible for showing, updating, and clearing the progress bar as needed. On the other hand, in automatic mode, you need to wait and let the bar run indefinitely. You need to clear it only once the operation has been completed.
Now that you know the types of applications you can build using Ext JS, let’s create one.
How to Build a Rich and Scalable Web Application with Ext JS
When it comes to building a rich and scalable web application with Ext JS, it can be done in two different ways.
- Via NPM
- Using Zip
Step 1: Install packages from NPM
For Trial Customer: Ext JS offers you a 30-day trial package. You can install it from a public NPM using the following command:
|$ npm install -g @sencha/ext-gen|
For Active Customer: Ext JS and all commercial packages related to Ext JS are hosted on Sencha’s private registry. All you need to do is log in to the registry using the below command.
Note: Users can use the same email and password to log in to Sencha’s NPM repo that they have used during support portal activation (after purchasing the license). Users can simply use the email as a username by replacing the @ character with ‘..’ (two periods). For example, email@example.com will be converted to username..gmail.com.
|$ npm login –registry=https://npm.sencha.com/ –scope=@sencha|
|$ npm install -g @sencha/ext-gen|
Step 2: Generate the application
Run the below command to generate the new Ext JS project. The project generated will be a two-view application that carries a simple home page and grid.
|ext-gen app -a -t moderndesktop -n ModernApp|
Step 3: Open and explore new Ext JS application
Once your project is generated, change to that directory.
Run the below npm command to start exploring your project.
Note: It will open the browser with the application entry point.
Well done! You have successfully built an application using Ext JS.
Now that you know how to build a web application with Ext JS, you may also want to add some cutting-edge features to it.
Let’s find out what more you can do.
Let’s take a short tour of some of the most common components.
Grid: It allows you to handle millions of records and comes with built-in functionality like sorting and grouping.
Exporter: This allows you to export data easily from the standard format or the pivot grid to various common formats.
Charts: You can visually represent your data with a wide range of dynamic and static charts like line charts, pie charts, bar charts, and so on.
Layouts: You can ensure the proper sizing and positioning of all the components you have used with a robust and flexible layout system.
D3 Adapter: You can add sophisticated data-driven documents (D3) package visualizations like sunbursts, treemaps, heatmaps, and much more to your web app.
You can further improve the design process with the help of preintegrated tools like Sencha Architect, Themer, Stencils, and more.
Architect: The drag-and-drop feature allows you to build Ext JS applications seamlessly, with no more hassle of manual coding.
Stencils: It enables you as a developer to quickly and easily mock up, prototype, style, and evaluate interface designs.