Screen shots

Live demo

Run the demo at http://cafetownsend-angular-rails.herokuapp.com using a modern browser.

Source code

All source code is available at GitHub.

Random notes

Here are some notes and tips based on issues I ran into:

Rails and AngularJS

• The best way to communicate between Angular and Rails is using JSON. To ensure this your Rails controllers have to declare respond_to :json. Within your AngularJS controllers you have to declare this.$xhr.defaults.headers.post['Content-Type'] = 'application/json'; and this.$xhr.defaults.headers.put['Content-Type'] = 'application/json'; for any XHR requests. The library “angle-up” will help you to simplify this.
• Angular services provide a angular.service.$resource object for using RESTful APIs. It includes almost all CRUD operations (create, read, delete) by default with the exception of update. To call an update operation your service has to define this action based on a PUT method call.
• You can use *.erb files for your client-side html templates. That can be very handy, especially if you want to use ruby code within HTML. For example to refer to the asset path just write <%= asset_path("my-template.html") %>
• It seems that there are some issues to compress AngularJS while pre-compiling on Rails. The only way to avoid it seems to be disabling compression of JavaScript config.assets.compress = false in config/environments/production.rb. Please let me know if you have another solution.

Heroku

• Deploying your rails app to Heroku is pretty easy. The only thing you should have in mind is that Heroku does not support SQLite. It provides PostgreSQL database only. Just replace within your Gemfile gem 'sqlite3' with gem 'pg'.
• Heroku recommands using a more robust webserver, e.g. Thin. In this case just add to your Gemfile gem 'thin' for using Thin (and not Webrick).

Acknowledge

• Vimeo: Angular.js + Rails: Part 1 by Daniel Nelson
• Vimeo: Angular.js + Rails: Part 2 by Daniel Nelson
• AngularJS Rails demo by Daniel Nelson
• RailsCasts: Authentication in Rails 3.1
• Heroku: Getting Started with Rails 3.0 on Heroku/Cedar
• Rails 3.1 on Heroku by Daniel Kehoe

Have fun!

-Jens

The JavaScript port is written in CoffeeScript using Spine.js and Hem. It uses Eco for templating HTML and Stylus for less CSS.

Screen shots

Live demo

Run the demo at http://cafetownsend-spine.herokuapp.com using Chrome.

Source code

All source code is available at GitHub.

Have fun!

-Jens

Demo (Video on Vimeo)

Behind the scenes

The simple demo runs with Node.js (Express) and Socket.IO. It generates its HTML code using Jade templates and Stylus (CSS). The code is written in CoffeeScript.

Limitation of pushing binary data

At the time of writing this post sending and receiving binary data using WebSockets are very limited by current browser.

To avoid lack of supporting binary messages by browser all image data have to be encoded in base64 before emitting the message. To do that just draw the image within a Canvas and send the data using Canvas’ toDataURL() over the wire.

Here is a simple roundtrip on client-side (You will find all code of this demo here: https://github.com/sectore/node-socket.io-push-image-demo):

###

1 SENDING DATA

1.1 get original image data clicking on it
1.2 get its base64-encoded data
1.3 emit the data by Socket.IO to server (Node.js)

###
$(".my-image").click (event) =>
	# get image which was clicked
	img = event.target
	# create base64 encoded image
	imgdata = @getBase64Image(img)
	# emit data to clients
	@socket.emit 'onimgdata', {  width: img.width, height: img.height, source:imgdata }


###
Helper method to get a base64 encoded image data
Based on http://stackoverflow.com/questions/934012/get-image-data-in-javascript
###
getBase64Image:(img) ->
	# create canvas
	canvas = document.createElement "canvas"
	canvas.width = img.width
	canvas.height = img.height
	context = canvas.getContext "2d"
	# draw image into canvas
	context.drawImage   img,
		0,
		0

	###
	Get the data-URL formatted image
	using jpeg format as the type of the image to be returned
	@see: http://www.w3.org/TR/html5/the-canvas-element.html
	###
	data = canvas.toDataURL "image/jpeg"

	#return data
	data

###

2 RECEIVING DATA + DISPLAY IMAGE
2.1 listen to "showimgdata" event sent from server (Node.js)
2.2 push data to HTML image

###

@socket.on 'showimgdata', (data) ->
	#get image
	img = $('#show-img').get 0
	message
	try
		# set data for image
		img.width = data.width;
		img.height = data.height;
		img.src = data.source;

		message = ''

	catch error
		console.log error
		message = 'error receiving image data...'

The disadvantage of this solution is that “Base64 encoding adds ~30%+ of size to the image” (Quote by Eric Bidelman / Developer Relations, Google: “Mobifying” Your HTML5 Site).

Source code

All source code and its installation instruction available at GitHub.

Have fun!

-Jens

It is built with Node.js (Express) on server-side and it uses Eco templates to render views on client-side. Most of code is written in CoffeeScript.

Screen shot

Random notes

Here are some notes or tips based on issues I ran into writing this app:

CoffeeScript + Express

• Use cupcake to build a skeleton of your CoffeeScript / Express app as easy as possible

Eco templates

• Don’t forget to declare any value sent from server using a “@” within the Eco template, e.g <%- @user.name %> It took me some time to find and fix such a typo.

Deploying to Heroku

• To run an app written in CoffeeScript on Heroku you have to point the app.coffee and not app.js as a command to the Procfile as follow: web: coffee app.coffee
• Run heroku ps to check if the app has been crashed or not.
• In case of crashing check heroku logs for very helpful detailes
• Heroku may not run the version of Node.js you have installed on your local machine. At the moment of writing this post Heroku is running v.0.4.7., not the latest version of Node.js v.0.6.5. If you have to downgrade your local version you will find here a short instruction.
• To rename your subdomain using by Heroku you have to rename the app itself as follow: heroku rename newname --app oldname. After that you may have to repoint your git repository as well: git remote rm heroku and git remote add heroku git@heroku.com:newname.git
• Instead of using an hardcoded value for a port check the PORT environment variable in your app.coffee as well port = process.env.PORT or 9294 Because Heroku tells the app which port is listen to.
• Last but not least: Heroku has published an excellent article: “Getting Started with Node.js on Heroku/Cedar“

Source code

You will find all source code and its build instruction at GitHub

Have fun!

-Jens

How-to

The best way to downgrade any Node.js version is using the make file which is delivered by any Node release. In case you have Node installed by an installer (e.g. Macintosh Installer) you have to re-build your current version “by hand” (steps #3-#5). It seems that is not possible to run the make file targeting to a Node version, which has been installed by an installer.

1. Open Terminal
2. Check version you are running on your machine: node --version
3. Download the version you are using at the moment from Node.js release files list
4. Extract downloaded file: tar -zxf node-v{your-current-version-number}.tar.gz
5. If you already build Node without an installer you can skip this step:
   Build and install this version
   cd node-v{your-current-version-number}
./configure
make
sudo make install
6. Uninstall current version: sudo make uninstall
7. Download the version you want to upgrade from Node.js release files list
8. Extract downloaded file: tar -zxf node-v{downgrade-version-number}.tar.gz
9. Build and install this version:
   cd node-v{downgrade-version-number}
./configure
make
sudo make install
10. Check if the downgraded version is installed now: node --version

That’s all

Acknowledge

• Building and Installing Node.js

-Jens

The packaging process of creating ANE (ActionScript Native Extension) files is already well documented (check “Packaging a native extension” at Adobes AIR documentation). However, it’s not easy to find a detailed instruction for signing an ANE file. Maybe because it is optionally… Here are few tips:

Tips

1. Signing an *.ane file is almost the same thing as signing an *.air file. So you can use an own self-signed certificate or an obtained certificate
   
   
2. Because the current Flash Builder (v.4.5) does not support packaging and signing ANE files, you have to use the command line tool ADT.
   
   Here is an example of packaging an ANE for using it on the iPhone (without signing):
   adt -package -target ane MyExtension.ane extension-descriptor.xml -swc MyExtension.swc -platform iPhone-ARM library.swf MyExtension.a -platform default library.swf.
   
   More information about all command line options you will find here: “ADT example for packaging an extension“.
   
   
3. To sign an ANE file just add the needed signing options to the command line options after -package and before -target. You will find all available signing options here.
   
   An example of packaging and signing an ANE for using it on the iPhone looks like:
   adt -package -storetype pkcs12 -keystore my_certificate.p12 -keypass my_password -target ane MyExtension.ane extension-descriptor.xml -swc MyExtension.swc -platform iPhone-ARM library.swf MyExtension.a -platform default library.swf
   
   

Acknowledge:

• Adobe AIR documentation: “Developing Native Extensions for Adobe AIR“
• Adobe AIR documentation: “Signing AIR applications“
• Adobe ADC – Daniel Koestler: “Developing native extensions for Adobe AIR” -> Chapter “Packaging a native extension”
• Adobe: “Developing ACTIONSCRIPT® Extensions for ADOBE® AIR®” (PDF) -> Chapter “Packaging a native extension for AIR for TV devices”

First of all: If you have not already installed Flash Builder Burrito as a plug-in for Eclipse (and again – not as a standalone version ) follow the simple and great description by Jason here: “Burrito Feature: Plug-in Installer”. To get more details of installing the PlayBook SDK and its Flash Builder 4 plug-in check the post “Install the BlackBerry Tablet OS SDK for Adobe AIR” at the BlackBarry Documentation as well.

After that just copy blackberry-tablet-sdk.link located in folder named “dropins” of Burritos standalone version to the folder “dropins” of your eclipse installation folder. That’s all

Cafe Townsend is a well known application to demonstrate any MVC framework for using Flex or ActionScript. There are already ports of Cairngorm, Mate, PureMVC, Spring ActionScript, RobotLegs and now Swiz.

In cooperation with “my partner in crime” Sönke Rohde we have built a Swiz port including unit tests. Check out the following example and its source.

Live Example

(To view source code just a right mouse click on it)

Source code

You will find the full source of Swiz’ Cafe Townsend example at GitHub.

Thanks!

Thanks again to Sönke for his great cooperation including all helpful tips! Also big thanks to Swiz team for development such a simple to use framework – keep on rocking

-Jens

Nochmals vielen Dank, dass Ihr beim heutigen flexughh-Meeting “Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen.” so zahlreich erschienen seid und auch tapfer bis zum Ende des Vortrages durchgehalten habt Es hat großen Spass gemacht!

Hier die versprochenen Slides inkl. Source Code.

Folien