Rvrsit was designed for use on the iPad and constructed using best practices of Sencha Touch, the best and most powerful HTML5 mobile framework and Impact JS, arguably the most modern JavaScript gaming framework on the market.

The history

I began development of this game over a year ago, when Sencha Touch 1.0 was in release candidate phase. My initial inspiration came from my experience in teaching my 4.5 year old son (now 6) how to play Othello. Little did I know that it would take over a year to get to this point!

I remember having an epiphany “If I can teach a 4.5 year old how to play Othello, surely I can teach (program) a computer!”. So, I set off to start developing Rvrsit, then known as Othello. I began by doing research into Othello (also known as Reversi) algorithms. I found a few JavaScript implementations including ones in Java and C++. All of them were really difficult to understand and some took different approaches to achieve AI. Most implementations of Othello (or Reversi, as it’s often called) were slow or not very attractive.

In order to figure out a fast way to get the AI working, I began to think about the rules of game play. Then, I needed to figure out how to get those rules into play. The result was an approach that was different compared to anything that I could find, but extremely fast!

Beginning with Sencha Touch, I decided to create components that could be placed into a game board. The Chip class was constructed to be smart enough to know whether or not it was an edge piece or not and know of its nearest neighbor.

With this logic configuration, Chip instances could literally talk to other Chip instances by means of a simple JavaScript reference. This allowed for rapid lookups throughout the game board for the game rules, which include whether or not the player made a valid move or not. The results of this game engine design can be seen in the Rvrsit prototype. (This version of the game does not come with the necessary A.I. to allow the computer to compete against the player)

Fast forward to 2012

Soon after the turn of the new year, I was able to begin focusing on Rvrsit again! I began by converting the Sencha Touch 1.0 code to 2.0. I was left with the same quick response time but faced CSS3 animation issues. I couldn’t have the silky smooth 3d transition of a two-colored chip that I wanted. This led me down the path of HTML5 game engines.

In my research, I found a lot of JavaScript HTML5 game engines but only one really stood out. That framework is ImpactJS. Impact JS was the only framework that was mature enough for me to use to develop such a game with ease. After a few days of tinkering, I was able to come up with a prototype that uses the exact same Chip connection logic, but this time we got the silky smooth transitions we were looking for.

I gave the prototype to my two boys, Takeshi and Kenji and they were able to play against each other without any issues.

After the migration to ImpactJS, I was able to leverage the Chip connection design to create efficient A.I., allowing the computer to make decisions based on which chips were available to be flipped. In this decision loop, the computer first gathers a list of chips that are currently visible. It then loops through that small list and asks those chips whether or not its neighbors are valid playing options. After it determines all of the valid moves, it figures out which is the biggest gain for it. It then flips the chips that gain it the biggest score, allowing for the human player to make their move. The speed of the AI is evident when playing against the computer, even in the slowest mobile tablets, including the Motorola Xoom, Blackberry Playbook and Kindle Fire.

After this prototyping phase, it was time for design. This is where team member Dave Ackerman came into play. Dave was able to take the initial game prototypes and add much-needed polish. Some of our design inspiration came from our good friend Michael Harris, with his wildly successful HTML5 Sudoku game, which can be found in the Google chrome store today.

That leaves us where we’re at today. A well-designed app that leverages the best HTML5 UI framework with the best HTML5 game framework.

Looking to the future

The Rvrsit evolution is not done! Here’s a list of features that we already have in the works.

• Use of HTML5 sound API for game sounds & in-game music
• Two player game play via the cloud
• Full integration with Silk JS, an up and coming Server side framework
• Multi-device UI layout
• Multiple layouts

In closing, as we progress, we’ll be providing in-depth blog posts. In these blog posts, we’ll be doing deep-dives into how we use each layer of the technology.

When you incorporate a business, you are generally required to have a person or organization resident in the state in which the business operates that can accept official correspondence on your behalf – also called, an agent for service of process. I don’t know this for a fact, but it has been my experience that most states will let a person act as their own agent for service of process if they live in the state in which their business operates.

So let’s say you live in the Commonwealth of Virginia and you want to start a new venture. By incorporating in Virginia, you will be able to save yourself a few hundred dollars a year in filing fees and agent fees by acting as your own agent. If you were to incorporate in Delaware, then you would need to pay a third party to act as your agent in Delaware and you would need to file to do business as a “foreign” corporation in Virginia – more fees and more paperwork. So then why should the average startup even consider incorporating in Delaware?

Well, for one, if you have thoughts of ever looking for funding, then being a Delaware company can have real advantages. The fact is that people who invest in companies tend to prefer Delaware companies (or at least their lawyers tell them they should) because of the breadth and predictability of Delaware corporate law. As a result, most VC deals are governed by Delaware law. When you go out to seek funding, if you are already a Delaware company then you will avoid the likely costs of having to “move” states. It’s also likely that you will incur less legal fees since the paperwork used for investments in Delaware companies is very standard and will take less time for a law firm to prepare and negotiate.

Delaware. It’s not just for the Fortune 500 anymore!

Topics being covered include:

• Introduction to Sencha Touch
• Ext JS Component foundations
• Panels and Layouts
• TabPanels
• Sheets and Pickers
• Data Stores
• List and Nested List
• Form Panels
• Media and Carousels
• Application development
• Performance considrations

Early bird pricing for the event ends on March 11th, so get your tickets now!

Tickets can be purchased from Eventbrite.

I have produced a set of Sencha Touch 2 OmniGraffle stencils based around the kitchen sink demo that Sencha has developed. Using this set of stencils, you should effectively be able to quickly wireframe and prototype a base theme Sencha Touch application.

Included are the majority of the UI elements, and in the set you will find buttons, toolbars, form elements, modals, overlays, alerts, tab bars, and a date picker.

• Download the OmniGraffle .gstencil here

The stencil will also be posted to Graffletopia shortly, so you can search for it inside of OmniGraffle and download it that way as well.

Update: The stencil has been approved on Graffletopia. You can find it here.

We’d love to hear your feedback!

HTML5 Evolves from Buzzword to Core Technology Platform

2012 is the year Mobile Web Apps will come online.  Most firms continue to struggle with mobile product development and the first generation of native mobile apps were held to a much lower standard for user experience.  As consumers expectations become more sophisticated, the ever increasing portfolio of novelty or ‘executive pet project’ mobile apps will have to be replace by a scalable, cost effective, HTML5 mobile web app model.

The ‘Hybrid App’ Development Becomes Migration Plan for Native Apps

Many firms we speak to look at HTML5 as their ‘everything else’ strategy beyond iOS.   For firms that have focused on native iOS apps, HTML5 will be their platform of choice for covering Android, Windows, and Blackberry devices.   Of course there are specific hardware features available to native mobile apps that packaging tools such as PhoneGap make available to HTML5 developers:  camera, GPS, compass, accelerometer, and local storage to name a few.  Hybrid Apps, apps that deploy HTML5 content wrapped in a native wrapper of code, allow for a smooth transition point to more scalable solutions.

Facebook embraces HTML5

Facebook will release project Spartan and most likely it’s own phone optimized to run HTML5 based games and apps as direct challenge to iOS.  Facebook acquired HTML5 platform company Strobe towards the end of 2011 and looks to be boosting it’s developer community relations.  With the release of ‘Timeline’ we believe Facebook is beginning to draw a line between the content and app experience on Facebook and HTML5 will be the technology that Facebook use to become an app distribution channel.

Open Government = Mobile Web Apps

Citizen engagement is predicated on citizen access.  Just as CMS platform like Drupal and WordPress revolutionized the way agencies standardize and manage web content, HTML5 based mobile friendly sites and apps that can easily pull content from existing CMS infratructure will revolutionize how agencies large and small achieve their mission.

HTML5 Challenges the “Native App & Store” Distribution (and Business) Model

Scale is the primary driver for HTML5 growth.  As enterprises shift mobile from vanity projects to core technology, the 30% ‘Tax’ levied to use native iTunes Store and Android Market will become increasingly seen as lost revenue.  Firms will increasingly look to hybrid apps and mobile web apps to grow their marketshare beyond iOS devices and leapfrog over the need to add native Android development to their operational stack.  As companies look to maximize mobile app revenues, they will be increasing motivated to recapture profit lost to pay for access to a delivery channel.

Sheridan had recently served as the Director of Product Strategy at Three Pillar Global after the 2009 acquisition of CloverLeaf Consulting, a user experience strategy firm he founded in 2005. Sheridan helped grow Three Pillar from 20 to 200 employees globally and deliver noted iPad, iPhone, and Android applications for PBS and Time, Inc.

The meteoric growth of Three Pillar is a testament to the talent of the executive team and dedicated staff and I will draw on that experience and friendships heavily moving forward with Modus Create,” said Sheridan. Sheridan has also been recently nominated to participate in the exclusive DC MindShare class of 2011.

Jay Garcia, who founded Frederick Maryland based TDG Innovations in 2006, will serve as the company’s CTO. A core part of our growth strategy is consulting services, training, and product development based on the Sencha Touch HTML5 framework,” said Garcia, who recently authored ExtJS, in Action” for Manning Press and is currently authoring Sencha Touch, In Action.” We are excited to be the premier provider of Sencha consulting on the east coast.

The start of Modus is a very exciting development within the rapidly expanding Sencha Touch ecosystem,” said Jeff Hartley, Vice President of Services at Sencha. Jay Garcia and Pat Sheridan are skilled technologists and highly-regarded Sencha community advocates. We believe Modus will show customers directly that HTML5 is the right approach for enterprise mobile applications.”

Modus Create will focus primarily on mobile apps for media, publishing, and entertainment.

Founded in March 2011, Modus Create provide high end solution design for mobile, tablet, and rich web applications. Modus Labs offers training, workshops, and custom learning engagements to empower their clients. More information is available at www.moduscreate.com

Pretend for a moment you have been given an assignment. You are to allow records from a DataView to be moved to an adjacent GridPanel. The rules are as such:

• Users must be allowed to migrate records form the left DataView to the right GridPanel
• After records have been moved to the GridPanel, they cannot be migrated back to the DataView. They can only be destroyed.

The question becomes, how can we do this? If we sit down and think about the first task, migrating records from left to right, we must consider the order of operation that must occur.

• Get a collection of the selected nodes and records in the DataView
• Animate out the row representing the record in the DataView
• Remove the records from the DataView store, all the while capturing a reference to that very record.
• Add the records to the GridPanel store
• Locate the indexes of the newly inserted records in the GridPanel
• Somehow gain a reference to the HTML elements that represent the records in the GridPanel View
• Animate the elements in.

Sound like a lot of work? With Ext JS It’s actually surprisingly easy. Here is the handler for the “add to grid” button.

// This is the handler for the 'add to grid' button
var addToGrid = function() {
    var selNodes  = dataView.getSelectedNodes(),
        selRecs   = dataView.getRecords(selNodes),
        dvStore   = dataView.store,
        gridStore = gridPanel.store,
        gridView  = gridPanel.view,
        gridRowIdx,
        gridRowEl;

    // Loop through the selected nodes
    Ext.each(selNodes, function(selectedEl, idx) {
        // Animate and remove from store after animation
        Ext.get(selectedEl).slideOut('t', {
            callback : function() {
                // remove from DataView store
                var rec = selRecs[idx];
                dvStore.remove(rec);

                // Add to grid store
                gridStore.add(rec);
                gridRowIdx = gridStore.indexOf(rec);
                gridRowEl  = gridView.getRow(gridRowIdx);

                // Animate the newly added row.
                Ext.get(gridRowEl).slideIn('t', {
                    callback : function(el) {
                        el.highlight();
                    }
                });
            }
        });
    });
};

As you can see in the code above, the trick to getting things done immediately after an animation is making use of callbacks, which are methods that are executed after something of interest has occurred. In our case, the animations will execute our callback methods to ensure that everything happens in the proper order.

Here is a video of it working:

There you have it. Adding simple animations implemented in DataViews and GridPanels can enhance the feel for our Ext JS applications, helping make a more pleasant experience for your users.

If you want to see the example visit http://moduscreate.com/examples/566. There you can add/remove records. You can view the page source to see how everything is setup.

Read more.

To understand how Animations, data Stores, GridPanels, DataViews, work, check out my book,Ext JS in Action. You can get 40% off by using coupon code “extjs40″ at checkout.

Like what you’ve read today?

Please register and leave a comment. The best fuel that drives us to write is involvement with our readers .

     The rub with this requirement is that buttons automatically steal focus. One approach is to manually try to manage what input field was last focused, and will have to create all types of spaghetti code just to overcome this focus issue.

    A better approach is to prevent the problem from happening in the first place. This means that we’ll have to somehow intercept the mousedown and mouseup events. In order to do that, you will have to override two methods in the ExtJS Button class.

If you want to check this out on your own, I’ve attached code below. The easiest thing to do is to drop it in any Ext JS page via firebug. Here is quick video demonstrating the override in action.

In that video, we can see that even when mashing on the keyboard and button with the overrides, the focus is retained in the text area. But, you’re probably interested in seeing a real-world use-case.

    Below is a video that demonstrates a very early working copy of module I’m developing, that utilizes the overrides.

In the video above, I am pressing number keys along with clicking on instances of Ext.Button to demonstrate the consistent focus of the input fields on the screen.

The big picture

To solve this application wide, you could create a plugin or a mixin, but I think the best approach is to create an override that injects a new behavior for all Button instances, allowing you to simply set a flag to turn on the behavior with a simple config property.

Below is the code that you can use in your application today to include this behavior.

Read more.

To understand how inline extensions work, check out our article titled “how to extend and override with out creating an extension or override“.

Like what you’ve read today?

Please register and leave a comment. The best fuel that drives us to write is involvement with our readers .

Looking for Ext JS or Sencha Touch professional services?

TDG-i specializes in high-end software development with Ext JS and Sencha Touch. To learn more about who we are and what we do, check out our professional services and about-us pages.

In his blog, Saki has extended upon this pattern, adding variations to your factory methods, affording you greater flexibility when creating your abstract classes.

Below is an excerpt of code that demonstrates a variant to our Abstract pattern as been detailed in his blog post.

To read the article, click : http://blog.extjs.eu/know-how/factory-functions-in-ext-extensions“

Thank you Saki for all of the work that you do, further educating the Ext JS community!

Abstract

The OS X window blind is a very well known user interface (see below). Being that OS X is a “Window management system”, everything you interact with is contained by some window. When the application requires input in a modal fashion, designers are faced with two paradigms: Modal popup dialogue (typically found on MS Windows), or a blind.

Below is an example of a Blind used in the via the save menu of Safari:

Firefox displays typical alert/prompt dialogues using the blinds.

Enter WindowBlinds for Ext JS 3.x

Ext JS 3.x, being a powerful UI framework for the web, mimics a lot of Windows Vista and Windows 7. That said, we think that there is a lot of room for this type of UI widget inside of our Ext JS applications.

Here’s a screenshot:

Download information

Github: here | Online example: here