WingNews logo WingNews GitHub [2]
top | item 4746257

Ratchet: Prototyping iPhone apps in simple HTML, CSS, and JS

394 points| uggedal | 13 years ago |maker.github.com

83 comments

order
[+] netghost|13 years ago|reply
I was pleasantly surprised when I realized that as I scrolled the example on the right changed. Really nice site guys.
[+] 8ig8|13 years ago|reply
I wish it worked on my 1st gen iPad. I get the first component, but everything after that is semi-transparent.

Sounds great.

[+] mybbor|13 years ago|reply
Agreed, the landing page design and UX is really top notch!
[+] bobdole3|13 years ago|reply
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.
[+] brianr|13 years ago|reply
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

[+] xradionut|13 years ago|reply
Or the programming language Racket...
[+] jgv|13 years ago|reply
you forgot about juicy j
[+] ayanb|13 years ago|reply
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|13 years ago|reply
Considering that, I find it odd that the Ratchet homepage doesn't appear to be using Bootstrap.
[+] icambron|13 years ago|reply
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|13 years ago|reply
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.
[+] connorsears|13 years ago|reply
We've already had a few engineer friends use Ratchet to do just that. Let us know if you do it. We'd love to see it in action.
[+] jyap|13 years ago|reply
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|13 years ago|reply
:) 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.

[+] chaselee|13 years ago|reply
While that would be cool, I'm not sure what Rachet really does for me above JQM. JQM could be better on performance, sure, but all in all, I don't see any other compelling reason to use Rachet. Is there something I'm missing?
[+] zem|13 years ago|reply
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|13 years ago|reply
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?

[+] superasn|13 years ago|reply
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|13 years ago|reply
Just tried this on my iPhone, the buttons feel native, impressive. Awesome work! Already have a use case for this
[+] rcchen|13 years ago|reply
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|13 years ago|reply
I don't think so. It doesn't support non-Webkit browsers, while jQM / SensaTouch and their friends do.
[+] jahewson|13 years ago|reply
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|13 years ago|reply
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|13 years ago|reply
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|13 years ago|reply
One of the best User interfaces I've seen, period. Scrolling is the best part. Kudos guys.
[+] yesimahuman|13 years ago|reply
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?
[+] dhgamache|13 years ago|reply
Ratchet is starting with iPhone prototyping. It hasn't been tested on Android/Windows devices. That said, if the components were tested it could totally work for mobile web apps.
[+] KingMob|13 years ago|reply
jQuery Mobile's components are mobile-oriented, but don't by default capture the look-and-feel of iOS.
[+] perfunctory|13 years ago|reply
I don't understand how the word "simple" can go together with "html, css, js"
[+] alpb|13 years ago|reply
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|13 years ago|reply
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|13 years ago|reply
I know. Because only 7-8% of mobile generated Internet traffic accounts for Android.