5 ms·

An open source HTML/CSS framework for prototyping native touch applications

137 points by Wolfr_ 13y ago

Wolfr_ 13y ago
When I design native apps it makes sense to prototype them in a medium where it's still cheap to make a design change. This is a framework I have for doing just that.
ackfoo 13y ago
Nice for prototyping, but it needs a button to generate the native code. That would be truly useful.
- dksidana 13y ago
  Generating native code from html is certainly not easy.
  - iancarroll 13y ago
    It's certainly easy with http://build.phonegap.com http://build.phonegap.com
    - aplummer 13y ago
      That's not native code...
      - eddieroger 13y ago
        Well, the web view it puts your app in to is native. So that counts, right?
        camus 13y ago
        no it doesnt and it certainly doesnt feel native either. especially with the latest ios and android os.
        raelshark 13y ago
        Are you saying that the webviews for some reason feel less native in the newer OS versions, or that the latest native OSes are so fast that the webview's shortcomings stand out more?
        argonaut 13y ago
        A WebView is just that - a web view. A WebView is just a fancy name for a browser window embedded inside an app. So PhoneGap applications are technically "hybrid apps." The WebView portion of the app is native code - but that really is just a technical nuance with no implications for performance (in fact, the performance implications are negative), because it's like claiming that your website is "native" since it runs in a browser (say, Safari) and the browser is written in native code. But the non-native portion of the app is what goes inside the WebView (HTML/CSS/JS).
        eddieroger 13y ago
        Sorry, I guess my sarcasm wasn't apparent. Of course it's not the same.
- aplummer 13y ago
  To be useful that would pretty much need to be actual magic
iancarroll 13y ago
What about Ratchet? How is this different?
- Wolfr_ 13y ago
  It's meant to be an evolution of Ratchet - Ratchet is great but it's a bit silent on Github. Seemingly the creators have moved on. It's all MIT licensed so the goodness can be continued.
  - shahruz 13y ago
    Ratchet's got a v2 that's being worked on right now. Last commit was 5 days ago. https://github.com/maker/ratchet/tree/2.0.0-wip https://github.com/maker/ratchet/tree/2.0.0-wip
    - Wolfr_ 13y ago
      That's great news! Ratchet is truly an example.
jdmitch 13y ago
The planned 0.2 release is delayed due to little public interest in Clank. -clank blog Is user interest enough for the OP, or are you looking for other contributors?
- Wolfr_ 13y ago
  User interest is enough but contributors would be better to raise the bar. I am specifically looking for someone with JS skills to handle building animation in between screens (similar to push.js in Ratchet http://maker.github.io/ratchet/#push http://maker.github.io/ratchet/#push ). This in turn is inspired by jquery-pjax ( https://github.com/defunkt/jquery-pjax https://github.com/defunkt/jquery-pjax ) Explained in short - there should be some way to fetch the HTML for a "new page" replacing the older page without a page refresh. This way we can have nice CSS transitions between the pages. If we can plug the effects from something like Effeckt (http://h5bp.github.io/Effeckt.css/dist/ http://h5bp.github.io/Effeckt.css/dist/) in there this could lead to nice demo/prototype material and will also give the native coders a good idea about the animation. My speciality is UI design and CSS. My JS is not solid enough for framework quality javascript. The demo UI works with Angular.js.
  - cheneytsai 13y ago
    I might be able to help a little with this. I have some code somewhere that keeps a stack of "views" and a view controller that pops them in and out of the DOM that can be easily animated to be native-like
    - Wolfr_ 13y ago
      That would be awesome!
  - crucialfelix 13y ago
    I was playing around with Ratchet last year trying to set up something exactly like this. what you have looks great so far. additionally I was getting my web app to host mockup images, sketches or just notes so I could think about the app flow and still be able to click around. I was doing it with express so I could parse markdown files (for the raw notes). I would say keep using angular as its very fast to add new pages. sliding page transitions and grabbable affordances would be the most useful things I think.
jtemplin 13y ago
Looks like a nice tool. The value of such of tool though points to one of the reasons why web technologies will ultimately prevail over native for most applications -- ease of use.
- Wolfr_ 13y ago
  I hope to see the day that given the right development attention one can make a web app that feels fast like a native app. It might already be possible for some kinds of apps. There are apps popping up that are really an ember or angular one pager wrapped in a native shell. HTML/CSS on Webkit gives you an amazing layout engine for free. Building UI for native apps feels like "web coding like it's 1999" with a lot of absolute positioning and use of sprited images. I wonder if things improved in iOS7.
  - cheneytsai 13y ago
    We're trying to do just that with Pickie (iPad personalized magazine app) . Still alot left to do to squeeze out every bit of performance though.
  - jordanthoms 13y ago
    That's an iOS issue, not one inherent with native apps. Android/Qt/Windows Phone/literally any other toolkit provide flexible layouts which are much more powerful and often easier to use than CSS. And if you need a custom layout, you can actually write a new layout manager which is just as fast or faster than the built in ones, no javascript to set absolute positions on everything.
- camus 13y ago
  > why web technologies will ultimately prevail over native for most applications All your users care about is UX and features. Native sdks provide more features than web apis, are more powerfull and your users feel the difference. Native sdks are not going away anytime soon.
  - tracker1 13y ago
aram 13y ago
For anyone interested in frameworks for Android-like UI, check out Fries: http://jaunesarmiento.me/fries/ http://jaunesarmiento.me/fries/
troels 13y ago
So what does this have over Ratchet?

137 points by Wolfr_ 13y ago

When I design native apps it makes sense to prototype them in a medium where it's still cheap to make a design change. This is a framework I have for doing just that.

ackfoo 13y ago

Nice for prototyping, but it needs a button to generate the native code. That would be truly useful.

dksidana 13y ago
Generating native code from html is certainly not easy.
- iancarroll 13y ago
  It's certainly easy with http://build.phonegap.com http://build.phonegap.com
  - aplummer 13y ago
    That's not native code...
    - eddieroger 13y ago
      Well, the web view it puts your app in to is native. So that counts, right?
      - camus 13y ago
        no it doesnt and it certainly doesnt feel native either. especially with the latest ios and android os.
        raelshark 13y ago
        Are you saying that the webviews for some reason feel less native in the newer OS versions, or that the latest native OSes are so fast that the webview's shortcomings stand out more?
        argonaut 13y ago
        A WebView is just that - a web view. A WebView is just a fancy name for a browser window embedded inside an app. So PhoneGap applications are technically "hybrid apps." The WebView portion of the app is native code - but that really is just a technical nuance with no implications for performance (in fact, the performance implications are negative), because it's like claiming that your website is "native" since it runs in a browser (say, Safari) and the browser is written in native code. But the non-native portion of the app is what goes inside the WebView (HTML/CSS/JS).
        eddieroger 13y ago
        Sorry, I guess my sarcasm wasn't apparent. Of course it's not the same.
aplummer 13y ago
To be useful that would pretty much need to be actual magic

iancarroll 13y ago

What about Ratchet? How is this different?

Wolfr_ 13y ago
It's meant to be an evolution of Ratchet - Ratchet is great but it's a bit silent on Github. Seemingly the creators have moved on. It's all MIT licensed so the goodness can be continued.
- shahruz 13y ago
  Ratchet's got a v2 that's being worked on right now. Last commit was 5 days ago. https://github.com/maker/ratchet/tree/2.0.0-wip https://github.com/maker/ratchet/tree/2.0.0-wip
  - Wolfr_ 13y ago
    That's great news! Ratchet is truly an example.

jdmitch 13y ago

The planned 0.2 release is delayed due to little public interest in Clank. -clank blog Is user interest enough for the OP, or are you looking for other contributors?

Wolfr_ 13y ago
User interest is enough but contributors would be better to raise the bar. I am specifically looking for someone with JS skills to handle building animation in between screens (similar to push.js in Ratchet http://maker.github.io/ratchet/#push http://maker.github.io/ratchet/#push ). This in turn is inspired by jquery-pjax ( https://github.com/defunkt/jquery-pjax https://github.com/defunkt/jquery-pjax ) Explained in short - there should be some way to fetch the HTML for a "new page" replacing the older page without a page refresh. This way we can have nice CSS transitions between the pages. If we can plug the effects from something like Effeckt (http://h5bp.github.io/Effeckt.css/dist/ http://h5bp.github.io/Effeckt.css/dist/) in there this could lead to nice demo/prototype material and will also give the native coders a good idea about the animation. My speciality is UI design and CSS. My JS is not solid enough for framework quality javascript. The demo UI works with Angular.js.
- cheneytsai 13y ago
  I might be able to help a little with this. I have some code somewhere that keeps a stack of "views" and a view controller that pops them in and out of the DOM that can be easily animated to be native-like
  - Wolfr_ 13y ago
    That would be awesome!
- crucialfelix 13y ago
  I was playing around with Ratchet last year trying to set up something exactly like this. what you have looks great so far. additionally I was getting my web app to host mockup images, sketches or just notes so I could think about the app flow and still be able to click around. I was doing it with express so I could parse markdown files (for the raw notes). I would say keep using angular as its very fast to add new pages. sliding page transitions and grabbable affordances would be the most useful things I think.

jtemplin 13y ago

Looks like a nice tool. The value of such of tool though points to one of the reasons why web technologies will ultimately prevail over native for most applications -- ease of use.

Wolfr_ 13y ago
I hope to see the day that given the right development attention one can make a web app that feels fast like a native app. It might already be possible for some kinds of apps. There are apps popping up that are really an ember or angular one pager wrapped in a native shell. HTML/CSS on Webkit gives you an amazing layout engine for free. Building UI for native apps feels like "web coding like it's 1999" with a lot of absolute positioning and use of sprited images. I wonder if things improved in iOS7.
- cheneytsai 13y ago
  We're trying to do just that with Pickie (iPad personalized magazine app) . Still alot left to do to squeeze out every bit of performance though.
- jordanthoms 13y ago
  That's an iOS issue, not one inherent with native apps. Android/Qt/Windows Phone/literally any other toolkit provide flexible layouts which are much more powerful and often easier to use than CSS. And if you need a custom layout, you can actually write a new layout manager which is just as fast or faster than the built in ones, no javascript to set absolute positions on everything.
camus 13y ago
> why web technologies will ultimately prevail over native for most applications All your users care about is UX and features. Native sdks provide more features than web apis, are more powerfull and your users feel the difference. Native sdks are not going away anytime soon.
- tracker1 13y ago

aram 13y ago

For anyone interested in frameworks for Android-like UI, check out Fries: http://jaunesarmiento.me/fries/ http://jaunesarmiento.me/fries/

troels 13y ago

So what does this have over Ratchet?