Sencha Touch container tap events!

Sencha Touch is awesome, but sometimes can be frustrating. Some components just don’t have the events that you need. For example you can’t add a tap listener for a container inside of your controller’s config. I know you can add a listener on the component in the view, but I hate doing this because it moves controller logic in your view.

How do you get a container to listen for a tap event?

Since the component doesn’t have a tap listener we can add one to the components element object! Attaching a listener to the component’s element object gives you access to pretty much any event you will need. In this demo I’m going to use the tap event.

The view with the container component

Ext.define("MainView", {
    extend: 'Ext.Container',
    xtype: "main",
    name: "MainView",
    config: {
        layout: {
            type: 'fit',
            align: 'center',
            pack: 'center'
        },
        items: [
           {
            xtype: 'container',
            items: [{
                xtype: 'container',
                name:'clickableContainer',
                html: 'Hello there click me!'
            }, {
                xtype: 'container',
                html: 'Not clickable'
            }]
        }]
    }
});

The controller

Ext.define('MainController', {
	extend: 'Ext.app.Controller',
	config: {
		
	    control: {
	        MainView:{
		    initialize:'init'
		},
            },
	    refs: {
		MainView:"container[name=clickableContainer]",
	    }
	},
	init:function () {
          var containerView = Ext.ComponentQuery.query('container[name=clickableContainer]')[0];
	  var containerViewEl = containerView.element;
          containerViewEl.on('tap', 
            function( event, node, options, eOpts ){
         	alert('clicked the container');
    	    }
          );
	}
});

First thing we do is set up an init method, which is where we get a reference to the container view. Once we have the container view we can get the component’s element and use the on method to set up a listener (you could substitute the onBefore or onAfter method here), and just like that we have a container with a tap event!

Sencha Touch | A look back at my first year

sencha-tools-250The last year and a half has allowed me to really focus on front end development, more specifically front end development with html5 for mobile devices. I wanted to share my experiences to hopefully help developers choose the right framework if they are considering using Sencha Touch or building a HTML 5 hybrid app. I started out by choosing between 3 front end mobile frameworks that I had heard a lot about which were: Dojo Mobile, jQuery Mobile and Sencha Touch. I choose Sencha Touch because it seemed like it is the most full featured mobile framework, used a MVC architecture, had good docs, a ton of pre built components to use, and a lot of good demos.

Here’s what I didn’t like:

Fist I should probably disclose that due to project requirements I had to build the app inside of IBM’s Worklight platform, which definitely made development life more difficult, and the app not perform as well. Worklight is IBM’s version of Cordova/Phone Gap that runs a server and provides a method for talking to a backend and returning data to and from your app, sounds like a great idea, but it was terrible and clunky to work with. Anyway back to Sencha.

  • The framework is really big:
    The uncompressed version of the framework is over 90,000  lines of code(2.9 MB). That’s a lot of javascript, and thats a lot of code to be loaded into memory on a mobile device. The compressed version of the framework is 139 kb which isn’t too bad, but its not great. This also lead to some really weird javascript debugging, which lead to hours of tinkering following break points and stepping through this enormous code base.
  • There is a steep learning curve:
    It took a  couple of months working full time in the framework to get really comfortable with it, and have the confidence to be able to say “Ya sure we can do that!” or “I don’t think that would be possible”
  • Performance was always an issue:
    It seemed like everything we did had to be reworked and optimized just to get decent performance, from screen transitions, scrolling on long pages and even getting button or tab taps to be responsive. Again Worklight might have played some role in performance issues but, you could definitely tell you were in a hybrid app. I have seen posts about how Sencha’s performance can be awesome, like the facebook vs fastbook (sencha html5 rebuild). I will be the first to admit that it was probably something that I was doing causing the performance issues, but I would like a framework to be robust enough to have great performance without having to optimize every single line of code, or be required to have the same understanding of the framework as the engineers that built it.
  • iOS 7 release issues
    When iOS 7 was first released there were significant issues with inputs and different ui elements that delayed the release of the app until they were fixed, which took weird css hacks and tinkering in the source code. Here is a great article on the issues that sencha faced http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7. This to me is a pretty big issue. I want the apps that I build and spend years of my life working on to work, and work great.

Here is what I liked:

  • Theming
    Sencha’s themes are built with compass, and make it super easy to theme and customize your apps. If you have any background with sass, compass or less you will have no problem in styling you apps. The docs have great guides on getting started with theming, and when you want to style specific components the docs display available mixins and variables that you will need to use http://docs.sencha.com/touch/2.3.1/#!/api/Ext.tab.Bar-css_mixin-sencha-tabbar-ui. This also comes with a down side I guess, if you don’t want to use compass, then sencha is definitely not for you, trying to theme an app without compass would be a huge pain. There are also default themes for a number of different operating systems (iOS, Android, Windows Phone) which can get you started quickly.
  • Docs
    The documentation is really thorough and very helpful. They have guides on getting started, tutorials, and demo apps. You end up relying on the docs for a lot for everything from what events are available to a component, styling, and component properties and methods.
  • Components
    There is a lot of functionality already built out for you, you can take a look at all the different components available in Sencha’s Kitchen sink app. This made it easy to quickly build a html 5 app that had the look and feel of a native app. Once you got over the learning curve components make a lot of sense and are pretty easy to use and create your own.
  • Architecture
    I like the MVC approach to building apps. It made it easy for our team to work together and we didn’t have to worry about structuring out app.
  • Cross Platform
    This was the reason for building a hybrid app in the first place, it allowed us to use a single code base and deploy to multiple markets. It also cuts down in development time.

Overall thoughts

Overall I think Sencha definitely has its uses and has some great ideas on HTML 5 app development but if I had to do it all over again I  would not use Sencha. For a cross platform hybrid app I would lean more towards an Angular, Ember or Backbone because you have more freedom to tweak  you app to exactly how you want it. I just don’t have the confidence that building the app with Sencha will preform well enough or will break if an OS update comes out. I understand when building a hybrid app you can’t expect 100% native app performance, but you when it effects your user’s experience all the benefits of using the framework really don’t count for anything. Hope this helps, let me know if you have any questions!

Getting started with sencha touch!

senchatouch

Sencha Touch is a HTML 5 framework that allows you to create cross platform mobile apps. When used with cordova you can build HTML apps that look and feel like a native app allowing you to cut down in your development time and budget. The frameworks learning curve is a little steep but once you get it down, development is quick and painless.

Lets get started

To get started we are going to need to download a couple things and get our environment set up. It might seem like a lot, but once you are set up you should be able to create Touch projects quick and easy. Here is what we need to download:

Now that we have everything downloaded, install MAMP to get your server up and running, and install sencha cmd. Once sencha cmd is installed run the following cmd:

sencha

You should see something like this in your terminal:
Terminal output

This means sencha cmd is installed correctly and you we are getting close to creating our app.

Next take your sencha touch sdk download  and unzip its contents into you web server directory, put mine under a touch directory. This will allow you view documentation and demo apps locally on your machine, as well as a good getting started guide http://localhost/touch/SETUP.html.

Now that everything is set up lets build our app! We will be using sencha cmd to scaffold out the app. The command we are going to use is:

sencha -sdk /path/to/sencha-touch-sdk generate app MyApp /path/to/www/myapp

With my setup this is what my command will look like for my app called PowPowPowerball

sencha -sdk /Applications/MAMP/htdocs/touch generate app PowPowPowerball /Applications/MAMP/htdocs/PowPowPowerball

And thats it, your app is created. With your web server running navigate to your project. It should look like this:
Your new sencha touch app

Take a look inside your project and you will see what sencha cmd has built out. Below is the basic layout of the project.

.sencha/                # Sencha-specific files (for example configuration)
    app/                # Application-specific content
        sencha.cfg      # Configuration file for Sencha Cmd
        plugin.xml      # Plugin for Sencha Cmd
    workspace/          # Workspace-specific content (see below)
        sencha.cfg      # Configuration file for Sencha Cmd
        plugin.xml      # Plugin for Sencha Cmd

touch/                  # A copy of the Sencha Touch SDK
    cmd/                # Sencha Touch-specific content for Sencha Cmd
        sencha.cfg      # Configuration file for Sencha Cmd
        plugin.xml      # Plugin for Sencha Cmd
    src/                # The Sench Touch source
    sencha-touch-*.js   # Pre-compiled and bootstrap files
    ...

app                     # Your application's source code in MVC structure
    controller
    model
    profile
    store
    view
        Main.js         # The main view of the application

resources
    css
        app.css         # The main stylesheet, compiled from app.scss

    sass
        app.scss        # The Sass file which compiles to app.css above,
                        # includes Sencha Touch theme by default

    icons               # Application icons for all mobile devices
                        # When replacing these default images with your own,
                        # make sure the file name and the dimension stays exactly the same
        ...
    loading             # Application start-up screens for iOS devices
                        # Similarly to icons, make sure the file names and
                        # dimension stays the same
        ...
    images              # Put other images used by your application here

index.html
app.js                  # Contains application's initialization logic
app.json                # Application descriptor
packager.json           # Configuration for native packaging

Thats it, now get started building out your app!