In the previous chapters, we developed an MVC application for Ext JS as well as Sencha Touch frameworks, where we used the dynamic class loading capability of the loader, which is part of the new class system, to ensure that we did not have to include all the JS files in the index.html folder. Still the required classes are loaded and the classes were initialized properly. Well, while that sounds like a great thing, it introduces a few development challenges. For example, we know that we would not like to release the source files as they are, in production. So, is there a way that we can package the source files for production deployment?
In this chapter, we will look at the main challenges and see how to solve them.
In this section, we will look at some of the major challenges—creating a project, debugging, packaging, and deploying—in creating an MVC application using Sencha MVC architecture.
Though we discussed about a folder structure for a Sencha MVC-based application development, in Chapter 2, Creating an Application, it is generally better if this process is automated so that we can ensure the consistency across the projects, and also give scope for further automation.
In the previous chapter, we learnt about the loader's synchronous and asynchronous mode of loading the scripts. Based on whether we use the <srcipt> tag, or Ext.require, or requires, or Ext.create, or xtype, the class loader loads the class scripts synchronously or asynchronously. When we developed our MVC applications, we used the combination of Ext.require, requires, Ext.create, and xtype. Only app.js was included in the index.html.
Say, we wanted to understand what the controller objects look like when the handler for the itemclick event is being registered inside the control method of the Department controller. We add a breakpoint on line 15 of the appcontrollerDepartments.js file, shown as follows:
You can refer to https://developers.google.com/chrome-developer-tools/docs/overview for more detail on how to use Chrome's developer tool and how to add breakpoints.
Now hit F5 to reload the URL and you will notice that the application has loaded and the view is rendered, but the debugger did not stop on line 15 where we had added the breakpoint. This is because of the extra parameter, _dc, added in the URL. The value for _dc is a timestamp, which is generated each time a URL is being constructed. Due to this, the browser always downloads the file freshly from the server. From the development perspective, not being able to debug the code is a big problem as it may put pressure on the timeline and the overall quality of the deliverables. In the Solution, section of this chapter, we will see how to address this.
The default project setup that we had created and used in the previous chapters, loaded all the dependencies from the source files. The code was well formatted along with the comments. This is acceptable in a development environment. However, in production, you would not like to deploy the source files unless that is part of your licensing model. This way you would expose your implementation to the outside world and bear the consequences of that. Though there is no way that we can avoid making our code available in the client browser, using the approach of merging the source files and obfuscating it, we can make it difficult for someone to understand the application logic. In addition to this, the merged file will also boost the initial loading time of the application as we reduce the number of files that need to be downloaded and also, the size of the minified file is much smaller as compared to the total size of the individual script files.
Now, if we were launch the extjsapp file and look at the Scripts tab, we would see tons of JS files being downloaded for the application to work. Now, it would be tedious to list all those files and create a build script to combine all those classes and package them together. Sencha offers tools to take care of this, where it can create a build file out of an existing application, which can later be used with a build tool to build the project.
The challenge that we had with the build where we had to manage so many files, which get downloaded to initialize the application and make it functional, applies to the minification process as well. Minification is a very important task in any JavaScript project as it combines all the source code, removes extra space, new lines, and tabs to create a file with a smaller footprint. This helps us reduce the loading time for the code.
We will see what tools Sencha offers to take care of the minification so that we are able to release a production-ready application.