About Tyler Wolf

Skilled in Rails, PHP, Java, JavaScript, and iOS development, Tyler began building dynamic websites when he was 14. Tyler’s expertise includes web application security and design and developing recommendation and rating systems. While at Genius.com, Tyler helped develop their Java integration with Salesforce.com and Genius’ own external API. Following Genius.com, Tyler was a Senior Software Developer at Tello where he led a major upgrade of a Rails 2 application to Rails 3, helped develop both the native iPhone and Sencha Touch mobile applications, and the OAuth based Rails API consumed by the mobile applications. While a student at Harvey Mudd College, Tyler co-founded Mudd Software Designs, an organization that builds software systems as a service to the college community while teaching underclassman the principles of good software design and product management.

Ext JS 5: Now With 25% More Ext JS

We’ve been using Ext JS since the days when it was still YUI.  With every new version, the framework has become faster, clearer, and more feature-complete.  So whenever a new version is announced, we’re excited to see what’s next.  It’s sort of like a really geeky Christmas.  Here’s a few of the newly-announced features coming in Ext JS 5 that we’re most excited about.

  • Better Touch Support.  If you’ve ever tried to use your Ext JS 4 application on an iPad, you know that the experience leaves a lot to be desired.  A few of the most glaring issues — scrolling and touch events — have been resolved in Ext JS 5.  It’s important to stress that Ext JS 5 is still a framework for building applications for desktop browsers, and Ext JS 5 is not a replacement for a mobile framework like Sencha Touch, but at least now your Ext JS apps will be functional on an iPad.
  • Two-Way Data Binding.  Previous versions of Ext JS made many complicated things very easy: grids and RESTful AJAX come to mind.  But one thing that always bothered us was that updating a view when model data changed — or vice versa — was always more work than it seemed like it should be.  Ext JS alternatives like Ember.js, for example, make binding data to views painless by comparison.  With Ext JS 5, two-way data binding is finally a reality. Gone are the days of boilerplate code juggling data changes between the various layers.  Ext JS 5 introduces a very simple but powerful templating language to wire views and view models together.  Rejoice.
  • View Controllers. Ext JS is great for building reusable components for large applications.  One drawback of this approach, however, is that you often find yourself having to choose between cluttering your view classes with control logic specific to that view (violating MVC), or duplicating that control logic in increasingly-complex, bloated, and non-DRY controllers.  This problem is magnified when you start needing to manage multiple instances of the same component independently of one another.  Well, good news friend: Ext JS 5 introduces the concept of a View Controller, which is essentially an instance of a controller tied to a specific view instance.  Instantiating a second instance of the view creates a second, independent View Controller.  Ext JS 5 even takes care of the memory management for you.  We expect that this will make our applications far simpler and more maintainable.
  • View Models.  Another anti-pattern that we often find in our Ext JS applications is that data-level logic often creeps into view classes.  Think store configurations, or manipulating model data (e.g., concatenating first and last name, or calculating averages).  The new View Models in Ext JS 5 are classes (again, tied to specific view instances) responsible managing data munging so that views can just be views.  Together, View Models and View Controllers are a huge win for separation of concerns enthusiasts like ourselves.
  • Routing.  Previous versions of Ext JS have had token support for URL-based routing, in that they provided a utility class for interacting with hash changes.  In practice, though, deep-linking and URL-based routing required writing a fair amount of custom logic.  This meant that deep-linking was often either completely ignored or bolted on later as an afterthought.  In Ext JS 5, routes are now first class citizens.  We can now define routes in the controller, complete with pattern-matched URL tokens, and per-action interruptible before filters.  Routing in Ext JS 5 is now so easy that there’s no reason not to build it into your app from the beginning.
  • Chained Stores.  Ext stores make it very easy to load and filter data from a server.  But what if you want several stores with slightly different views of the same basic dataset?  If you apply filters, those filters are reflected in every component that uses that store, so filtering a grid might have unintended consequences elsewhere in your application.  As a result, it becomes common practice to create several different versions of the same basic store.  While this is conceptually easy to maintain, it adds quite a bit of memory and network overhead, as loading these stores will actually load the same records individually.  Enter the new Chained Stores.  Now, multiple stores can share the same pool of records (each of which is loaded over the network  only once), while each store has their own filters applied.  It’s the best of both worlds: clear code, and efficient memory and network usage.
  • Data Sessions.  Ext JS 5 introduces a new concept called a Data Session, which aims to keep track of multiple (possibly dependent) changes to several models, allowing for efficient and intelligent bulk updates.  Data Sessions can also be used to isolate change sets, in effect giving you some of the powers of database transactions.  This feature is definitely a departure from how JavaScript developers are used to interacting with models, but it sounds like a very powerful new tool that’s worth checking out.
  • Components in Grid Cells.  We can now put buttons in grid cells.  That’s all I have to say about that. (But sparklines look pretty cool too.)

Those are just a few of the improvements coming in Ext JS 5.  For a more complete list, check out What’s New in Ext JS 5.  We’re certainly looking forward to all the new goodies.

An App in an Afternoon: Sencha Touch & StackMob

Update: August 21, 2012

Since this blog post was initially released in June, StackMob has made some significant changes to their development environment. In particular, rather than relying on a local runner within the stackmob gem, they now ship a Python web server. This blog post has been updated to reflect these changes. Most of the content is the same; the only sections that have changed are “Connecting Sencha to StackMob” and “Deploying to Production”. We have also updated the sample project in GitHub.

Some Cool Tools

Sencha Touch is a fantastic JavaScript framework for building mobile web applications. It is great for rapid development because it comes stocked with all the standard UI components you want, and makes connecting to your API painless. We love using Sencha Touch to knock out a quick prototype, but the really stellar thing about this framework is that it is structured to scale (from a development perspective). The MVC structure of Sencha Touch 2 applications encourages developers to build a codebase that is maintainable even as it grows large. With flexible data store options, you can prototype an app with no server component (backed by local storage). Then, once you refine your idea and decide you want to turn it into a real app, you can drop in a proper API and reuse nearly all of the prototype code.

StackMob is a rapidly improving option for building an entire REST API in minutes. It allows you to define your data model and expose CRUD actions all through a simple UI. For those of you with “real world” problems, and “non CRUD actions” they provide a really simple way to develop custom endpoints with our good friend, Mr. Java. This week, they released OAuth 2 and shiny new access control features which remove the last few hurdles to using StackMob for grown up projects.

If we combine these tools we should be able to build pretty powerful applications in very little time. This isn’t easy to do out-of-the-box, so we are going to write a series of blog posts describing how to use these tools together.

Read on