Why is it important?

While Ext JS was developed under the assumption that its users will most likely work with Sencha Cmd too, there's no hard and fast rule that dictates that it must be used.

Note

We're not going to cover the installation of Sencha Cmd here. The latest installer is available on the Sencha website (http://www.sencha.com/) and should be a straightforward process.

In the next few pages, we'll create a small application without using Sencha Cmd and examine a couple of sticking points we'll hit on the way.

The act of creation

One of these sticking points comes up straightaway. With Sencha Cmd, creating a new application is as easy as the following command:

sencha -sdk ~/<path-to-ext-sdk> generate app MyApp ./my-app

Within seconds, Sencha Cmd creates a new directory called my-app containing the following:

  • The specified Ext JS SDK
  • An app directory containing model, controller, store, and view directories
  • The app.js, app.json, and Application.js files
  • The index.html file
  • The Bootstrap files
  • A sass directory with configuration files
  • The .sencha directory and a build.xml

Now, much of this is part of the Sencha Cmd support infrastructure that we can discard. We're going to have to manually create a lot of the preceding detailed items. Let's get started.

Let's create the application directory and copy the Ext JS SDK in here:

The act of creation

Bare-bones application directory

Next up is the index.html page. We can create a standard HTML5 page and need to hook up the JavaScript and HTML for Ext JS. In an application generated by Sencha Cmd, we'd have the Bootstrap files to help us here. They go through your application's dependency tree and autoload files accordingly. Without Sencha Cmd, we have to include these files manually. So, we end up with the following code:

<!DOCTYPE HTML>
<html>
<head>
    <title>NoCMD</title>
    <link rel="stylesheet" type="text/css" href="ext/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
    <script type="text/javascript" src="ext/build/ext-all.js"></script>
    <script type="text/javascript" src="ext/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
    <script type="text/javascript" src="Application.js"></script>
</head>
<body></body>
</html>

We can now begin to build our application, starting with a small "Hello World" that displays a message box:

// Application.js
Ext.application({
    name: 'NoCMD',
    launch: function() {
        Ext.Msg.alert('Welcome', 'To our Command-free application!'),
    }
});

Next step is to turn this into an MVVM application. Once we've built the directory structure by adding app, app/model, app/store, and app/view, we can add our first view. Remember that everything we've done so far would have been created with a single call to Sencha Cmd.

Here's the code for our view classes; the view model comes first:

Ext.define('NoCMD.view.main.MainModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.main',
    data: {
        introText: 'Welcome to the Command-free MVVM application!',
        buttonText: 'Click Me!'
    }
});

This is entirely standard and is followed by the view itself:

Ext.define('NoCMD.view.main.Main', {
    extend: 'Ext.Panel',
    requires: ['NoCMD.view.main.MainModel', 'NoCMD.view.main.MainController'],
    viewModel: 'main',
    controller: 'main',
    items: [
        { xtype: 'component', bind: { html: '{introText}' } },
        { xtype: 'button', bind: { text: '{buttonText}', handler: 'onClickButton' } }
    ]
});

Note that in comparison with our previous apps, we have to explicitly require the view model and view controller. We'll come back to this in a moment. Finally, here's the view controller:

Ext.define('NoCMD.view.main.MainController', {
    extend: 'Ext.app.ViewController',

    requires: [
        'Ext.MessageBox'
    ],

    alias: 'controller.main',

    onClickButton: function () {
        Ext.Msg.alert('Confirm', 'Are you sure?'),
    }
});

Let's go back to the requires option. When working with Sencha Cmd, the viewModel and controller configuration options are parsed as auto-dependencies. When we run the meta-command (or another command such as build that calls the meta-command), it compiles your code and produces Bootstrap files that tell Ext JS how to load your application.

Without Sencha Cmd, we have no autodependencies, so they must be specified explicitly with the requires option. That's another couple of lines of code that we could have avoided.

Not to mention the fact that all of these view-related files could have been generated with just one command:

sencha generate view main.Main

We're already seeing how setting up our application and adding new features is simplified with Sencha Cmd. Let's look briefly at the other end of the process: deployment.

We want to ensure that our users have a production build as slim as possible to minimize download times. With Sencha Cmd, we can use the build command to create a set of files for deployment that meet our requirements. Sencha Cmd will parse our JavaScript files and metadata and create a minimized JS file that only contains the classes we're actually using in our application. It does this by examining the requirements that each class has and building a tree of dependencies that can be combined into a single download.

Without Sencha Cmd, where are we? Here are the steps we'll need to take on each production build:

  1. Make a list of all the files used by our application (including those in the Ext JS framework itself).
  2. Combine them together and then minimize them.
Replace the JavaScript files we reference in index.html with this new file.

Remember, this is only for JavaScript! Sencha Cmd can perform a similar process for CSS and compile the application's Sass files into a single download.

Note

Ext JS uses Ext.Loader, a class that ensures the classes you require are loaded, and if not, requests the relevant files using Ajax and parses them—all on the fly. It also means that a file could be loaded from anywhere in your code that requires it—there's no single point of reference.

In truth, the nature of an Ext JS application is such that performing this kind of production optimization becomes a lengthy process and is prone to errors. In the rest of this chapter, we'll show how your builds and the rest of your workflow will become quicker, easily reproducible, and result in a higher-quality end product.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset