Friday, October 25, 2013

Quick and Dirty Server Side Select Helper for Handlebars,js

Handlebars.js is one of  my favorite templating engines. One of the biggest reason for that is because it is usable both on the client and server sides.  While the client-side is pretty familiar, the server-side has its challenges, not the least of which is there is no DOM. Having no DOM means that some convenient methods like createElement don't exist, but there are times when being able to deliver a ready render HTML page is important. 

In one of my projects, we wanted to do server-side rendering of an edit page. Nothing tricky or flashy, just send the user the data they entered previously for editing. This kind of a page is easy with just about every templating engine around. One problem HTML element is the select tag, because it is a composite element consisting of <select> enclosing one or more <option> tags. Luckily handlebars.js includes the ability create your own helpers, which are bits of code you write yourself and handlerbars invokes. Writing a select helpers is pretty easy on the client since you have access to the DOM. Most client-side helpers will generate the select and each of the options including their value and selected attributes. 

I initially was trying to go this route on the server-side as well. And then I stopped myself. The lack of DOM access caused the code to quickly get more complicated than I liked. So I decided to go another way. Instead of rendering out the select element, I instead decide to render the attributes of the option element. This way my helper is much simpler. To use it simply add:

{{option <value of option> <current value>}}

to each option element. The helper will render out the value attribute and if it is the currently selected option, the selected attribute as well.

I may change my mind and render the entire select element, but for now I like this simpler approach.






Thursday, October 24, 2013

So Cal Code Camp - USC Los Angeles (11/9 & 11/10)


It is nearly time for my absolute favorite dev event of the year - So Cal Code Camp @USC Los Angeles - November 9th and 10th. There is no place else where being a nerd is so much fun. Last year's event was amazing. I did the full weekend, Saturday, Sunday, the speaker's dinner Friday night, and the not to be missed geek dinner on Saturday night. When I was not giving talks, I sat in and listened to lots of great talk by others.


So Cal Code Camp is a FREE event. Two days of dev talks for FREE, even the geek dinner is FREE. So you have no excuse not to come and hangout with your fellow developers. Plus you may get lucky and win one of the great prizes that will be auctioned off. 

This year I am giving two talks: one on HTML5 Game programming and another on the super cool open source PhoneGap/Cordova framework. 

If you have already seen my HTML5 Game programming, you have to come to this one. The code has been cleaned up and sound, levels, and scoring have been added. So there is a lot to show. I also use the super cool jQuery deferred objects and show how they make your code cleaner.

PhoneGap is an open source framework for making mobile apps. If you can program the web, you can use PhoneGap to make mobile apps. In this talk I will show how simple it is.

If you plan to attend either of these talks be sure to click the interested button. Room sizes are allocated based on the community interest. I had a couple of standing room only talks last year because more people showed up than had indicated their interest. Here are the links to my talks:

Beginning HTML5 Game Programming
Sunday, Nov. 10th at 12:30 PM, Room ZHS 159

Building Mobile Apps with PhoneGap and Backbone
Sunday, Nov. 10th at 10:15 AM, Room SLH 100

For more information check out the website: http://www.socalcodecamp.com/

Wednesday, October 16, 2013

PhoneGap Explained in 5 Minutes


Even though PhoneGap has been around for nearly four years, it is the source of a great deal of confusion by many who have not work with the framework. In order to clear up some of the confusion, I have written this short document.

What is PhoneGap?

Per PhoneGap.com, "PhoneGap is an open source solution for building cross-platform mobile apps with standards-based Web technologies like HTML, JavaScript, CSS." It is important to understand, that a PhoneGap app, runs on a device, not on the web. All of the components of the app, the HTML, CSS, and JavaScript files are on the device. While it is possible for a PhoneGap app to pull user interface from the web, this is not the norm. In general, PhoneGap apps, like other types of mobile apps, use the web only to download and upload data. This is the most prevalent PhoneGap misconception. Many people think that a PhoneGap app is simply a canned website, it is not. While some websites can essentially be lift from the web and placed into a PhoneGap app, most can't. In general, PhoneGap apps are purpose built.

PhoneGap and the App Store

No disrepect, meant to Windows Phone or Blackberry, but mobile has become a two horse race between Apple and Android. Since the Google Play Store doesn't have any overly restrictive requirements, let's talk about Apple's App Store.

Since PhoneGap version 0.8, apps built with it have been accepted into the App Store. They must meet all the requirements that other iOS apps must meet. You should read all of the Apple Store Review Guidelines, but here are some important ones:

  • 2.1 Apps that crash will be rejected
  • 2.8 Apps that download code in any way or form will be rejected
  • 2.12 Apps that are not very useful, unique, are simply web sites bundled as Apps, or do not provide any lasting entertainment value may be rejected
  • 2.17 Apps that browse the web must use the iOS WebKit framework and WebKit Javascript
  • 10.3 Apps that do not use system provided items, such as buttons and icons, correctly and as described in the Apple iOS Human Interface Guidelines may be rejected

While PhoneGap apps are not able to use the system provided icons, its icons must have a similar look to Apple's, for example you can't use a screwdriver to represent settings, since in standard iOS it is represented by a "gear".

The guidelines also clearly state that you can't download code in any form and that your app can't simply be a web site bundled as an app. So if your plan is simply to create an app which is a link to a web site, you may have trouble passing review.

What does PhoneGap source code look like?

A PhoneGap apps source code has four main sub-directories: www, merges, plugins, and platforms. "plugins" is for your PhoneGap plugins. "www" is where your core code goes. It contains the HTML, CSS, and JavaScript of your app. By default PhoneGap will launch your apps index.html file, but you can make this any HTML file you would via configuration. "platforms" is where the "www" code goes after it is built for each platform you are supporting.

And finally there is the "merges" folder, this is where all of the files which are platform specific go. For example, suppose you would like for your app to look iOS-ish on iOS devices and Android-ish on Android devices. You would create different CSS files for each platform with the same name, say "style.css". In "merges/ios" you would place the iOS version of styles.css and in "merges/android", you would place the Android version of styles.css. When PhoneGap builds your app. It will copy the platform specific version of styles.css to the platform directory. In this way, your app can achieve the device appropriate look and feel without resorting to inline device detection.

What does the build command build?

It is assumed by PhoneGap, that you have already installed the development environment for each platform you wish to support. This means that for iOS development, you must be running on a Mac and have Xcode and iOS SDK installed. Similarly for Windows Phone, you must be on a PC, have Visual Studio and the WP8 SDK installed. Android development can be done on just about any system, but you still need to have the Android SDK installed.

When the command line build command is executed all it does is create the appropriate source code files for each platform. From there you complete the build the process using the platforms development tools. Android is currently the lone exception. It also has the run command. Which when used after the build command will actually compile the code and deploy it to either the Android emulator or an attached device.

In summary

PhoneGap allows you to create cross platform mobile apps using web technologies. It is not a tool for converting websites into apps. While it is easier for web developers to build mobile apps with PhoneGap than to develop them using native tools it is not turnkey or simple. PhoneGap apps require the same level of detail that all well developed apps deserve.

Resources

PhoneGap

Apple App Store Review Guidelines


Apple Human Interface Guidelines

Friday, October 11, 2013

PhoneGap and Backbone in the OC

I will be doing a presentation on developing mobile apps using a sweet combination of PhoneGap and Backbone. The code should work on all of PhoneGap's wide variety of devices, but I have only validated it against iOS and Android. 


HTML5 at one point held the promise of being the unifying platform for desktop and mobile devices. Then big name companies seem to turn their backs on the platform in droves. But don't don't despair, HTML5 isn't dead, in fact it is still a great choice for many mobile applications.


In this session, we will build a simple to understand but easy to enhance mobile app. We will use the latest and greatest version of PhoneGap, 3.0 for cross-platformness. To it we will add the open source MV* framework, Backbone, which will help bring order to the normal chaos of JavaScript development.

This talk is being hosted by the good folks of SoCal .NET Architecture. It is a rare treat for me to do a talk so close to home, last weekend I was talking way up in Silicon Valley. They meet at the offices of the Rancho Santiago Community College District, which is probably the best possible location to have a meeting after work. It is just off the 5 freeway, not far from the 22, 55, 57, and 91 freeways. The talk is on Thursday, October 17th at 7 PM. For more information and directions go to: http://www.scdna.org/.



Thursday, October 3, 2013

Beginning HTML5 Mobile Game Programming - Silicon Valley Code Camp 2013

Want to build your own HTML5 game? Have some starter code. Here are the links to the code and slides for my Beginning HTML5 Mobile Programming.



The Source Code: 

The Slides: