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 :)
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.
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.
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?
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?
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.
> Interface builder is _not_ the tool for doing this.
The Ratchet website talks about "iPhone apps" in general (not just web applications). And for non-web apps, storyboarding (in Interface Builder) is a great prototyping tool. And it has the advantage that it has all the common iOS UI concepts (and only them) and can be fleshed out into the real app afterwards.
That's an understandable point of view, save for the waste of time part, but it's not the use case they're targeting (I think). Ratchet I feel is primarily for folks who don't use Interface Builder, who aren't engineers, and who just want to test stuff out really quickly and efficiently (with HTML and CSS). Great for designers like myself who aren't as tech saavy but know the ins and outs of simple code like HTML and CSS.
As is the case with just about every other application, project, framework, and sexual intercourse: there are many ways to do the same thing and not all of them work for everyone.
First, don't believe the claim about just being a "prototyping tool". That's what any tool or library says when it's trying to be humble. This toolkit's sweet spot is PhoneGap & friends, clearly.
See, the need this fills (and apparently does a good job at) is to give front-end web devs resources to write UIs in PhoneGap that look just like Interface Builder apps. Why would you want to do this? Possibly because you don't have iOS coders. Or perhaps your coders are already familiar with the web, so why not re-use their skillz?
The assumption here is that a front-end web dev can get a native-looking iOS app together faster in PhoneGap than a native developer can get a real iOS app together. While that's not always going to be true, it is probably usually true. And for some apps (like, virtually anything that's just business-oriented and doesn't require crazy stuff), the difference will not be noticeable by end-users (although it might trigger an uncanny valley feeling).
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.
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.
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!
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?
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.
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.
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?
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! :)
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.
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?
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.
(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.)
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.
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.
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?
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?
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...
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.
88 comments
[ 5.3 ms ] story [ 131 ms ] threadIt'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.
'...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.
Users can't interact with paper mock ups.
You have to re-draw the menu on every page you mock up or tell the people you're showing the mock up to imagine it. Both of these suck.
The Ratchet website talks about "iPhone apps" in general (not just web applications). And for non-web apps, storyboarding (in Interface Builder) is a great prototyping tool. And it has the advantage that it has all the common iOS UI concepts (and only them) and can be fleshed out into the real app afterwards.
As is the case with just about every other application, project, framework, and sexual intercourse: there are many ways to do the same thing and not all of them work for everyone.
See, the need this fills (and apparently does a good job at) is to give front-end web devs resources to write UIs in PhoneGap that look just like Interface Builder apps. Why would you want to do this? Possibly because you don't have iOS coders. Or perhaps your coders are already familiar with the web, so why not re-use their skillz?
The assumption here is that a front-end web dev can get a native-looking iOS app together faster in PhoneGap than a native developer can get a real iOS app together. While that's not always going to be true, it is probably usually true. And for some apps (like, virtually anything that's just business-oriented and doesn't require crazy stuff), the difference will not be noticeable by end-users (although it might trigger an uncanny valley feeling).
Sounds great.
Edit: clarifying what I meant by HTML5 app.
To help put things in perspective - how is this different from Sencha?
Also, great product! It looks beautiful and makes for fast prototyping! I can't wait to try it out! :)
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.
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.
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
(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.)
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?
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
We chose the latter, but will work to improve the docs everywhere in the future.