“PhoneGap”:https://www.phonegap.com/ is an HTML application platform that runs natively on iOS. After the initial project setup, PhoneGap allows you to pretend you are just writing a web application, meaning you spend your day in HTML, CSS and javascript instead of Objective-C.
When I had the opportunity to write a PhoneGap application for a project demo, I decided to take the development process one step further and use the goodness of HAML, SCSS and CoffeeScript instead of straight HTML, CSS and javascript.
Setting up the development environment was relatively simple. I put the source code for HAML, SCSS and CoffeeScript in a similar file tree next to the www directory. I then automated the process of converting the HAML, SCSS and CoffeeScript using a file change monitor to execute conversion scripts whenever a modification occurred.
Below is the layout and tooling I used for the project.
h2. PhoneGap File Layout
h2. Tools
h3. Ruby and Bundler
“Ruby”:https://www.ruby-lang.org/en/ and the ruby gem management tool, “Bundler”:https://gembundler.com/, simplified the dependency setup and scripting necessary for the development environment. Here is a copy of Bundler’s Gemfile I used on the project.
h3. Watchr
The ruby gem “Watchr”:https://github.com/mynyml/watchr monitors system files and executes a block of code when changes are detected. Watchr uses a simple DSL to configure its usage.
h3. Thor
We scripted repetitive tasks using the ruby gem “Thor”:https://github.com/wycats/thor.
h3. Sinatra
A PhoneGap application at its heart is mostly a web application therefore you can view and rapidly iterate the application using “Sinatra”:https://www.sinatrarb.com/, a simple web server, and your favorite web browser.
_config.ru_
_app.rb_
h2. Additional Resources
Here are several links I found useful during my PhoneGap project.
* “Official PhoneGap Docs”:https://www.phonegap.com/docs
* “Introduction to PhoneGap tutorial”:https://mobile.tutsplus.com/tutorials/phonegap/phonegap-development/
* “Introduction to iPhone SDK Development”:https://mobile.tutsplus.com/tutorials/iphone/introduction-to-iphone-sdk-development/
* “Deploying iPhone applications (the official way)”:https://mobiforge.com/design-development/deploying-iphone-apps-real-devices
* “Safari Visual Effects How To”:https://developer.apple.com/library/safari/#codinghowtos/Mobile/GraphicsMediaAndVisualEffects/_index.html
* “Handling Retina Display in CSS”:https://webapp-net.com/Forums/viewtopic.php?id=487
* “Using Custom Fonts for iOS”:https://wiki.phonegap.com/w/page/28514708/iPad-or-iOS-4:-Use-Custom-Fonts
Clever additions. You transformed your PhoneGap environment into a modern Rails environment. Pretty slick!
SO GOOD. Thank you.
Thanks for article.
One point. Sinatra probably isn’t needed, given that we are serving everything from “public”, running a rack file (or directory) server should do the trick. Something like config.ru:
use Rack::Static, :urls => [“/public”]
Nice ! I personally use guard with it’s sub-modules.
I think it’s a better alternative to thor/watchr.
I just have a question… How do you use partials ?
I would be interrested to render templates (using icanhaz/mustache) for backbone in the single index.html file, while writing them in HAML.
Regards
Any way to make this work with the scaffolding from balckbone-rails (https://github.com/codebrew/backbone-rails)?
also of interest: http://ricostacruz.com/sinatra-assetpack
[…] [toread] PhoneGap with HAML, SCSS and CoffeeScript | Atomic Spin, via https://spin.atomicobject.com/2011/07/12/phonegap-with-haml-scss-and-coffeescript/ […]
This was so handy, thank you so much.
This would be more handy with the complete set of files you used. Where does the Gemfile go? What files are these Thor and Watchr commands in? Where does the Sinatra code live? A lot of little Gists is a lot less useful than a repo with everything already set up.
As someone new to Ruby, I find that details like this are frequently missing in Ruby (and particularly Rails) tutorials. It makes it very difficult for new users to figure out what to do.