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!

Author: barrettbreshears

I don't take showers, only blood baths.