
Ratchet: Prototyping iPhone apps in simple HTML, CSS, and JS - uggedal
http://maker.github.com/ratchet/
======
minikomi
Super hipster site:

<http://hn.site44.com/>

HN top page, parsed by webscript.io, hosted by site44.com, using ratchet :)

Edit: pattern matching a little off.. Only 28 results showing up
<https://gist.github.com/e449457ff64cf4bccc44>

~~~
minikomi
Oops.. looks like the script is being blocked :)

~~~
klapinat0r
Just as a reminder/caution: Might not have happend if you checked
<https://news.ycombinator.com/robots.txt> or used the unofficial Hacker News
API: <http://api.ihackernews.com/>

------
netghost
I was pleasantly surprised when I realized that as I scrolled the example on
the right changed. Really nice site guys.

~~~
bobdole3
Your website is cool, but If all you are doing is setting up some basic
widgets like (tables and buttons) why don't you just use interface builder.
It's way faster and cuts down on the use of these jerryatric noob tools. Who
needs to show someone a prototype of a basic table view anyway? Moreover,
creating stuff like this in graphics gives you the resulting assets and
similarly creating in interface builder gives you the actual foundation for
the app. What a horrible waste of time.

~~~
davidlumley
I think you completely misunderstand the audience for Rachet.

It's a HTML/JS/CSS prototyping tool, so if you're building a web application
for iPhone it makes it so much easier to get a basic prototype together and
start hallway testing. Interface builder is _not_ the tool for doing this.

Additionally, just because you're not 'creating stuff like this in graphics'
doesn't mean that you'll never create a proper interface for the application,
it just means you can get a __prototype__ together quickly. Spending time
creating a well designed interface takes away from what a prototype should be.

~~~
bobdole3
How is this better than pencil and paper. You don't have to see the button
depress to know what the button does, right?

~~~
skyhook_mockups
It's a lot harder to email paper? there aren't many good paper VCS? Paper is
great for quick sketches and has its place. Digital is good for lots of other
use cases. Maybe use what suits on a case by case basis?

~~~
bobdole3
I'd like to see a designer speak up about using stuff like this more than one
time. I find I'd hard to believe that you would sit down, after already
playing around with this once, and say "this time I'm going to add a chevron
to each cell, put the button on the left side, and go test it in the hallway".
If your app is a table with a stock navigation system do you really ever need
to build a second version of the same thing?

~~~
skyhook_mockups
Every project/team is different. Sometimes a designer wants to communicate
with another designer, sometimes with a developer and sometimes with a client.
Each of these stakeholders will react differently to:

'...this screen looks like.. well you know a stock tableview'

And sometimes these people aren't in the same room/building/country

Simply dismissing the tool because you cant think of a use-case is a bit short
sighted.

PS: also when designing for the iphone, elements have a surprisingly different
feel when shown on a device.

------
brianr
Looks great, guys.

Slightly off-topic... the name "Ratchet" seems to be getting pretty crowded.
In addition to this, there's also:

\- Ratchet the websockets library for PHP: <http://socketo.me/>

\- <http://ratchet.io> \- error tracking (my startup)

\- Ratchet the consulting company (acquired earlier this year), which owned
ratchet.com

~~~
jgv
you forgot about juicy j

~~~
streptomycin
And this is relevant because Rap Genius is in YC: [http://rapgenius.com/Juicy-
j-bands-a-make-her-dance-lyrics#n...](http://rapgenius.com/Juicy-j-bands-a-
make-her-dance-lyrics#note-827421)

(Although unfortunately this is an example of a poor explanation of a lyric,
as it doesn't explain what "ratchet" means, it just paraphrases the lyrics
without adding any insight.)

------
ayanb
Interestingly, one of the creators of Ratchet is @fat, who is a co-creator of
twitter bootstrap, so he would know a thing or two about adoption of new
frameworks.

~~~
joshuamerrill
Considering that, I find it odd that the Ratchet homepage doesn't appear to be
using Bootstrap.

~~~
watson
It's because it's hosted on GitHub Pagee

~~~
patrickg
I am new to bootstrap: what does it need that gh pages don't support?

~~~
lewispollard
Nothing, in fact the bootstrap site itself is hosted on gh pages.

------
icambron
Maybe I'm missing something, but it looks like you could extract just the CSS
and build an HTML5 app with it (as in PhoneGap or trigger.io), without all of
the push.js stuff. It looks really nice, and would be good for more than just
prototyping.

Edit: clarifying what I meant by HTML5 app.

~~~
kellishaver
This was my first thought, as well. This would be nice for building a clean,
minimal UI for a phonegap app or a mobile web site.

------
jyap
I was playing around with jQuery Mobile the other night to create a simple
iPhone compatible web form.

I found the WYSIWYG builder Codiqa on their web site was really handy. It was
literally 5 mins of building, download, and then tweak the HTML file and I was
done.

Perhaps that is the next step for Ratchet? A drag and drop WYSIWYG editor.

~~~
yesimahuman
:) Glad you found it useful, I built it.

Ratchet does look awesome, though it seems from these comments the goal isn't
to build a HTML5 mobile framework, so I'm not sure it would replace jQM in
that regard.

------
zem
my first thought: i have no real interest in building iphone apps, but this
looks like it would be really nice to develop mobile-specific webapps and even
pages. are there any non-obvious reasons this couldn't just be used to develop
and deploy a webapp?

~~~
luke_s
I came here to say the exact same thing. I've worked with JQuery Mobile, and
found it to be a bit 'heavyweight'. It likes to take your html elements and
replace them with a soup of divs and spans, so that it can support devices
such as blackberry, feature phones, etc. I've been wishing for a pure CSS
mobile framework for some time.

I just tried ratchet out on my Android phone - it works well under chrome, but
there are some minor CSS problems with the directional buttons under the built
in web browser. Performance seems ok, but not lightning quick.

On the ipad everything seems to work ok. I had a bit of trouble with sliding
the toggles.

So on the face of it, building an actual HTML5 app should be feasible. Does
anybody with an iphone or a windows phone want to comment on how it runs?

~~~
matthewferry
Works fairly well on iPhone. Just tried on Android emulator (don't have an
actual phone handy)... loaded it up as a web app and also did a trigger.io
android build. Some minor css issues, and it looks like it's getting a bunch
of extra space at the end of the content area that isn't happening in desktop
chrome or on ios though...

------
marizmelo
Ratchet powered site fetching HN rss feed: <http://jsbin.com/atuzes/1/>

------
superasn
This is really impressive. I'm tempted by the idea that combined with
AngularJS directives[1], this can really work wonders for iphone development.
So instead of all the divs and css, the code can be really boiled down to
this:

    
    
       <iphone-app>
          <title-bar>
             <button-prev />
          </title-bar>
          <slider>
                <image src="1.jpg" />
          </slider>
       </iphone-app>         
    

On the backend you can have something like:

    
    
       angular.module(...).directive('titleBar', function(){ 
          template: '<header class="bar-title"><h1 class="title">{{title}}</h1></header>'
          });
    

Will make writing the code much easier and intuitive.

[1] <http://docs.angularjs.org/guide/directive>

------
matb33
Just tried this on my iPhone, the buttons feel native, impressive. Awesome
work! Already have a use case for this

------
rcchen
This feels a lot more lightweight than jQuery mobile while retaining the
look/functionality needed to work on a mobile web app. Does this seem like a
suitable replacement for jQM for a basic mobile web application?

~~~
doctorpangloss
I don't think so. It doesn't support non-Webkit browsers, while jQM /
SensaTouch and their friends do.

------
yannski
A few typical "global" layouts would be nice! Like the famous "off canvas
layout" <http://www.zurb.com/playground/off-canvas-layouts>

------
jahewson
The attention to detail is superb. This is the first complete set of mobile
widgets which I would actually use on a website, as well as for prototyping.

------
bluetidepro
Did you guys build your site using Bootstrap or at least Bootstrap as starting
point? It looks like a lot of similar components function like Bootstrap ones.
If you did, amazing work taking the bootstrap design and making it unique to
your product and not "just another standard Bootstrap design!"

Also, great product! It looks beautiful and makes for fast prototyping! I
can't wait to try it out! :)

~~~
dhgamache
We didn't use Bootstrap for anything on the docs. To be fair though, we're all
homies and even had @mdo do a quick code review before releasing :)

------
deepGem
One of the best User interfaces I've seen, period. Scrolling is the best part.
Kudos guys.

------
yesimahuman
Combined with the component set and push.js, it looks like a similar framework
to jQuery Mobile. Thus, it would be great for building straight up mobile
websites or HTML5 mobile apps. Am I right, or missing something?

~~~
KingMob
jQuery Mobile's components are mobile-oriented, but don't by default capture
the look-and-feel of iOS.

~~~
yesimahuman
Well, neither does Ratchet really. The default look of iOS is not this, which
I think is a good thing for Ratchet. Stock iOS is stale. It's the custom apps
that have really made a meaningful mark on users.

------
perfunctory
I don't understand how the word "simple" can go together with "html, css, js"

------
Cyranix
Bit of a shame that it doesn't use the slider style that made waves yesterday:
<http://news.ycombinator.com/item?id=4742535>

------
alpb
Awesome job from awesome guys. Really liked it but I don't get why you haven't
reused Bootstrap resources. Really small and neat toy. Really good to see all
the stuff packed in 50 KB stuff!

------
hdra
Really cool stuff there,

Does anyone know of similar project that are built with the Android's UI in
mind? It seems like almost all of these kind of projects are built with iOS'
UI in mind... wonder why..

~~~
ommunist
I know. Because only 7-8% of mobile generated Internet traffic accounts for
Android.

~~~
OoTheNigerian
I would really love a reference for that.

I do not doubt you. I just think it would be helpful if there was a reference.

~~~
j-v
If this survey by a mobile ad company is to be believed, things seem to have
changed dramatically from the beginning of the year:

Oct 2012: [http://venturebeat.com/2012/10/17/android-smartphones-now-
ha...](http://venturebeat.com/2012/10/17/android-smartphones-now-have-
majority-mobile-web-traffic-share/)

Jan 2012: [http://www.businessinsider.com/apple-android-mobile-web-
usag...](http://www.businessinsider.com/apple-android-mobile-web-usage-2012-6)

------
DenisM
Looks good.

To help put things in perspective - how is this different from Sencha?

~~~
michaelmior
Judging by the title, Rachet isn't designed to build a complete app, but just
a prototype for faster iteration before starting on a final native iOS app.

~~~
dhgamache
This was our intention, but that's not to say it couldn't be used to build a
real mobile app :)

------
michaelmior
Looks very cool. It would be nice to see closer parity to what's available
with native UIKit, but super fast to get started and looks pretty nice. Great
work!

------
justinph
This looks a lot like Zurb Foundation. Nice work.

------
jeffehobbs
I would feel better about this framework if the demo site worked on an iPad. I
know that is shallow, but there you have it.

~~~
dhgamache
Sadly, there is no way to fire JS while scrolling on an iPad, so we could
either serve the iPhone style docs (which look severely out of proportion,
especially on landscape), or accept that the phone will only update on stop of
the scroll.

We chose the latter, but will work to improve the docs everywhere in the
future.

------
jennyshen
Ah you beat me to it. Ratchet is a great tool...now only if you can build a
mobile web app with something like this...

------
ghostblog
You say no to a rapid prototyping environment for iPhone apps using familiar
web technologies . . . . JUICY J CAN'T

------
pspeter3
This is awesome. Thank you so much

~~~
fat
aww no problem :) Hope it's useful!

~~~
pspeter3
I'm working on a new app idea with a friend and we want to rapid prototype on
the web before we commit to native code. You just made that way easier :)

~~~
fat
awesome! This is exactly what we were running into too :D

------
continuations
Is this only for prototyping and not for production use?

What would you recommend for production use then?

------
unfuddle
It would be great if you could create an app with Ratchet, not just a
prototype.

------
denzil_correa
Wonderful home page!

------
deepuj
So much cleaner than jQuery Mobile. Cool!

------
kidfropro
Love it. Keep up the good work.

------
duked
it's a nice product I wish it would come with a visual editor to compete with
codiqa

~~~
ommunist
Codiqa is for product managers when they want to bust UI guys. I'd rather ask
Codiqa to remove visual editor feature.

~~~
yesimahuman
Haha. I'll take that as a compliment. Our goal is to enable more people to
build cool stuff, not just developers.

~~~
ommunist
You are very welcome.

------
davj
this changes everything

------
pootch
iUI gets a reboot, and its just as clunky? I think you can do better,

