An open source HTML/CSS framework for prototyping native touch applications | Hacker News Reader

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

getclank.com

137 pointsWolfr_32 comments

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.

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?

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 ). This in turn is inspired by 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/) 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.

Angular 1.2 supports animations between ng-views, which would mean you wouldn't have to build very much.

http://www.yearofmoo.com/2013/08/remastered-animation-in-ang...

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

That would be awesome!

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.

Nice work. You may want to look into collaborating with these guys: https://github.com/angular-widgets/angular-jqm Basically, they are using the jQuery Mobile CSS (no jQuery though) with Angular.

For anyone interested in frameworks for Android-like UI, check out Fries:

http://jaunesarmiento.me/fries/

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.

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.

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.

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.

My sense was the opposite: the same thing built natively would be superior and naturally draw usage.

> 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.

While I don't think that native SDKs are going away any time soon, there are huge classes of applications where those additional features aren't needed, and even more that can us in between solutions like phonegap. I think that very few applications outside of games really need features that a web-based UI can't provide on modern mobile devices.

Didn't Facebook famously switch from HTML5 to Native for their iOS app? If a company with the resources of Facebook can't do it effectively, I think you underestimate the problem or overestimate web-tech capabilities.

http://www.theverge.com/2012/8/23/3262782/facebook-for-ios-n...

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

Generating native code from html is certainly not easy.

It's certainly easy with http://build.phonegap.com

That's not native code...

Well, the web view it puts your app in to is native. So that counts, right?

no it doesnt and it certainly doesnt feel native either. especially with the latest ios and android os.

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?

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).

Sorry, I guess my sarcasm wasn't apparent. Of course it's not the same.

To be useful that would pretty much need to be actual magic

What about Ratchet? How is this different?

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.

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

That's great news! Ratchet is truly an example.

So what does this have over Ratchet?

Reply on news.ycombinator.com