KnockoutJS is one of many recent libraries for development of structured applications in JavaScript. It employs the MVVM pattern, as opposed to perhaps the more well known MVC pattern. It also employs a declarative form of data binding via the data-bind attribute on your HTML elements.

KnockoutJS Starter from Packt Publishing, written by Eric Barnard, is short at only 50 pages and proposes to:

• Learn how to develop a deployable app as the author walks you through each step
• Understand how to customize and extend KnockoutJS to take your app to the next level
• Great examples showing how KnockoutJS can simplify your code and make it more robust

The beginning half, building up a basic demonstration app, does a reasonable job. There are some distractions in terms of the author describing his preferences for WebMatrix and HTML5Boilerplate, but other than that I felt comfortable that I had a basic understanding of what a KnockoutJS application was about. It’s split between the very basics (such as downloading KnockoutJS) and more advanced (such as lots of examples of the databinding syntax).

At this point I’ll say that I don’t really like the KnockoutJS databinding technique much (Why I don’t like KnockoutJS by Aaron Powell for more), but I understand the separation of concerns it’s supposed to achieve. I just think it looks kind of messy.

So with our introduction to KnockoutJS out of the way, including master-detail views and a demonstration of things like observable arrays, we then move on to the section titled “Top Features You Need To Know About”. This one didn’t sit quite right with me, it begins with a look at the implementations of the various KnockoutJS observables, which is interesting but not what I’d expect to see in a starters book. Some of the other parts of this section are just fine, like introducing some of the utility functions that come with KnockoutJS.

The final few pages link to some excellent further KnockoutJS resources, so the reader is left with a place to go after this book.

Overall I feel like I gained a good understanding from KnockoutJS Starter, and while some small parts weren’t exactly of immediate use to me, if I planned on becoming more heavily envolved with the library then they’d set me up well. Good work Eric & team!

The ST2 TextAreaField is really rather poor when it comes to editing lots of text. Scrolling through is awkward, the virtual keyboard gets in the way, and the user experience is sub-optimal.

I put together a component which tries to address this, and you can find my BetterTextArea on github.

In read only mode, the field will pop up a full-screen viewer with custom scrolling to allow the content to be read more easily. In editable mode, the viewer is fills the space in the window not taken up by the virtual keyboard, and again allows scrolling to take place with a single finger gesture.

Try it out and fork it if you have any suggestions!

Michael Kiwanuka – Home Again (spotify link)

I only got hold of this album a short while ago, and I really like it. Since then I’ve heard quite a few people playing it so I wonder if it’s going to become popular soon. Anyway, it’s easy on the ears and very well put together. I’ve heard comparisons to Sam Cooke.

The Chapman Family – No More Tears (youtube)

Quick listen.

Errors – Have Some Faith In Magic (spotify link)

Ultimately pretty dull

Noah And The Whale – The First Days Of Spring (spotify link)

I can take or leave this band but this album is very stately and beautiful at times.

Field Music – Plumb

First listen…

Willis Earl Beal – Acousmatic Sorcery (spotify link)

This is “raw”, which means that music critics will probably love it. I’m undecided as to whether it’s actually any good but at least it’s different.

Yesterday’s entry was a little bit rushed. Today’s a proper working day so I’ll write the post as the day goes on.

Moving Up Country by James Yorkston & The Athletes (spotify link)
I really enjoy James Yorkston’s stuff. This is 10 years old now, and I only listened to it for the first time last week. This was my second run through, and it’s beginning to capture me.

Hello Land by Guillemots
Notice about this release dropped into my inbox yesterday and I bought it this morning. Unexpectedly, I rather enjoyed it. Guillemots last two albums have been mostly mediocre, with Fyfe’s ventures into popland spilling into Guillemots’ music. This seemed better, and will definitely get a few more listens.

Diamond Mine by King Cresote & Jon Hopkins (spotify link)
First listen. Bats in the Attic particularly beautiful.

Boys and Girls by Alabama Shakes (spotify link)

Didn’t know what to expect from this so I was pleasantly surprised. Good vocals with a classic jangley guitar sound, without sounding cliched. Needs more listens are in order to see if the songs stand up to the promise.

In The Yard by Neil Morgan (spotify link)

Wank.

The First Big Weekend by Arab Strap (spotify link)

Lovely day here in Falmouth town and for some reason this popped into my head as I walked down the street, so I listened to it when I got back.

Port of Morrow by The Shins (spotify link)

The first two tracks are great, but I haven’t got into the rest yet.

1972 by Josh Rouse (spotify link)

A bit of reminiscing…

Read more about the Music Diary on Sick Mouthy’s blog.

As I was out of the house most of the day, there wasn’t much listening to be had. We went to lovely Mevagissey, and on the way listening to Rooms Filled With Light by Fanfarlo. Apparently this band has some Swedish members, and you can tell. Other than that there are some lovely catchy songs on this album. A quick blast of the new Shins album (first two tracks) and Origins by Tennis on the way back was pretty much the limit today.

When examining how to build a new Sencha Touch 2 application for production, I wanted to make sure I wasn’t reinventing the wheel. I’d heard of Sencha’s commandline SDK tools but this gave me cause to look into it more. Now that I’ve done so, I’m impressed, but I think the documentation could be doing with a little more detail. I’m concentrating solely on deployment for now, though the tool supports other scenarios.

There were a few things we wanted to do:

• Build, concatenate and minimise our custom SASS theme
• Resolve dependencies (in order!) for our JS, then concatenate and minimise
• Work out how to incorporate those into our index.html with sensible versioning
• Ensure all our caching policies were optimal

With one exception, Sencha’s tool helps us with that. I recommend getting an overview of how to install the SDK Tools at the Sencha Documentation pages first. That guide also gives an overview of the various facilities the tool provides.

Setup

If you’ve used the sencha command to create a new application then you’re good to go – you have all the files you need to get building. If not, I recommend you use it to create a new, empty application, and copy over the bits you need to get up and running, and to make sure you’re adhering to the correct directory structure. The documentation does give a good overview of the directory structure which is required – take a look at the section “Understanding Your Application’s Structure”.

Once you’re there, you’ll have an app.json in the root of your project. It’s important that you complete this correctly in order to be able to build your project successfully; the “js” section needs to have any extra JavaScript dependencies – such as third-party libraries – entered.

You don’t need to add in all of the files you use in your application. The sencha command will resolve all of those dependencies automatically when you build. You do need to make sure you’re using requires in your application to make the dependency tree clear, but hopefully you’re doing that anyway.

Assuming you’ve got app.json ready to go, we can move on to making a build.

Index.html

Generally you’ll access your project via http://localhost/index.html, or something similar. The app.json file will have asked you to specify this URL, and you should have a template index.html created for you if you used the sencha command to generate your new project. Your index.html should have the following line:

<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>

This is a key part of the build process, so you need to leave it intact!

Building

The aspect we’re interested in is run via the command:

sencha app build

If you run it without the parameter you’ll see the following:

This gives you an idea of what’s going to happen. Here’s the way the build process works:

1. Copies required resources
2. Resolves dependencies by firing up a headless web browser and running your app
3. Concatenates and minifies your JS in the correct order
4. Builds a HTML5 cache manifest
5. Generates delta files to minimise what changes get sent to the client
6. Generates a new version of your index.html

There’s lots happening here, and it depends on what environment you specify when you run the command. To be clear, you can always keep using http://localhost/index.html, and that’s your development version.

Testing Environment

Testing creates a /build/testing/ directory, and you can access the build at http://localhost/build/testing/index.html. In the testing environment, JS gets concatenated but not minified. It doesn’t do any of the caching/manifest stuff described above, but does resolve all your dependencies into the concatenated file.

Production Environment

In addition to the steps taken to build for the testing environment, production will also minimise your JS, create a cache manifest, and as the documentation says: “Storing all JavaScript and CSS assets inside Local Storage on first load, and patches them via delta updates between releases”. The Sencha blog post goes into more detail on this subject.

Issues

We’re yet to deploy our application to production, so this post is a work in progress. In particular the testing and production builds highlight code issues that aren’t apparently on development – deprecation warnings become errors, and there are various issues with the order in which our code is included. I’m also a little concerned with the delta update mechanism – I need to do further testing to make sure updates are indeed pushed to clients as expected, as we always want to make sure that they have the very latest code.

You’ll also notice that the sencha command doesn’t do anything with SASS. Hopefully this will come in future, but it’s a simple extra command to generate the theme CSS.

Conclusion

The sencha command has become an integrated part of our build process. I’d like to see more documentation, and the proof will be in our final deployment, but it looks like Sencha have provided another key part of the end-to-end development of a mobile application.

My company, Go Tripod, are looking for a Project Manager to handle the day to day running of our development work. You’d be based in our offices in lovely Truro, Cornwall. The full details can be found in our job posting: We are looking for a Digital Project Manager – Freelance or Permanent.

Quick disclaimer: I received a gratis review copy of this book in exchange for writing about it.

With Ext JS 4 bringing so many changes to the framework, even experienced Sencha developers need a helping hand to understand this new direction. Ext JS 4 First Look hits the sweet spot for both new and existing developers. It doesn’t go in-depth, but that’s why it’s a “first look”; the book touches on all parts of the new release and gives an excellent overview of changes and new features.

The chapters on theming and MVC are particularly welcome, as these are both important facets of Ext JS 4 but ones which are still not well documented. In particular the brief practical examples for theming components and creating custom UIs are a good introduction.

Overall Ext JS 4 First Look serves its purpose well – developers who are new to Sencha will get a feel for what Ext JS is all about, and existing users will see how things have changed since version 3. Kudos to Loiane on this great release!

Operator precendence is the order in which operators are evaluated within an expression. For example, take this:

var leftStart = 5,
width = 2;
var left = leftStart - width / 2;

Now, what are we actually doing here? Is it:

var left = (leftStart - width) / 2;

Or:

var left = leftStart - (width / 2);

The addition of brackets would have made the original code more explicit, but is noisier and requires more typing. Reviewing JavaScript operator precedence shows that the division operator has higher precedence over subtraction, so in the above two examples we’re going to get the same result as in the second snippet.

The remaining question is – why bother? By being explicit with brackets, you remove any ambiguity, despite having to type a little more. But I’d argue that not understanding precedence means you’re leaving yourself open to bugs, and in more complicated examples the character noise will obscure the meaning of the code you’re writing.

While there’s commonality between browser Date() implementations, there are edge cases where certain browsers fail when others pass. This is particularly frustrating when working with Mobile Safari because its debugging support is limited to say the least. Take this example:

var date = new Date('Sun Oct 10 10:41:43 UTC 2010');

This works just fine for me in Chrome, Safari, and even my current version of the iOS Simulator’s Mobile Safari. However on my iPhone 4 with the iOS 5 beta, this code:

console.log(date);

Will simply give “Invalid Date”. Because of Mobile Safari’s poor error reporting for things like this it can be extremely difficult to notice that Date() is the ultimate issue. The solution is to use a fixed implementation of Date – I used Date.parseDate within Sencha Touch, but if you’re not using a framework you could look at DateJS.