Junior - A Native-Looking and Feeling Mobile HTML5 Front-End Framework | Hacker News Reader

Junior - A Native-Looking and Feeling Mobile HTML5 Front-End Framework

justspamjustin.github.com

147 pointsHirvesh31 comments

It looks great, but I'd call it a Native-Looking and Feeling iOS HTML5 Front-End Framework. Sure doesn't look native on Android, BlackBerry or Windows Phone.

Lovely!

It might just be my pea brain, but it was not obvious at first that the phone on the right is a demo, even though it says so in the phone.

I'd strongly suggest putting the phone on the left of the page instead of the right, and additionally having some text in the intro mention that it is a live demo.

It wasn't obvious to me either, but to be fair I think they could the best they could to make it clear.

We made a similar tool for making apps like this to make our mobile Reddit app. It works really well on iOS and Android, blending into their UI design.

http://reddit.kik.com

Framework: https://github.com/kikinteractive/app

Is this reddit app itself open-sourced?

This is the best reddit mobile version I have seen that is not native. If you aren't intending to have login and comments, then as it stands it is really very good.

Where are you drawing the line for features and completeness?

Assuming there is to be no login feature, the bugs I found that make it a bit of a showstopper for me are:

1. Finding sub-reddit's: you can only search, and the second you click on a result, it is auto-added. I have added 'todayilearned' which was auto added. When I select it, I am told there is "Nothing To See Here". I suspect this is because the URL's are case sensitive and I didn't "spell" it correctly. Some way to preview this would be nice. And a way to just enter in /r/whatever-the-heck-i-want would be cool too.

2. There doesn't seem to be access to comments, which are arguably more valuable than the source links in most cases.

3. Adding to your home screen looks terrible as there is either no favicon.ico or the one that is there is not a well suited image.

4. URL bar and bottom buttons do not go away, even if launched from a home screen bookmark.

5. Search for a sub-reddit should probably have spelling auto-correct disabled.

6. After performing a search, there is no way to preview the sub-reddit's validity. It is auto-added immediately. Perhaps take the user to that sub-reddit and allow them to.preview it. A floating bar at the top much like Apple's "Open In App" feature, or your own pop over for "Are you sure you want to remove this sub-reddit" could be implemented in this case.

7. The "Preview" overlay seems nicer if it were off by default, or preference controlled. But keep the back button and other navigation ative. Just remove the stuff that is obscuring the image.

8. There is no way to pinch and zoom, double-tap, etc., on an image.

9. kik logo and "reddit head" icons do nothing, and are not clear what they would do if they worked.

10. If possible to work reliably, unlike reddit's own mobile app, the "next" at the bottom could be an "infiniscroll" type feature instead.

11. The site Only seems to show pics, I can't find a single self post. Is this a static list of test entries? It is not matching the home page in any way I can understand.

12. The left and right "<" ">" navigation buttons on images don't entirely make sense. Are they moving through the posts, or are there more than one image posted to the post ( gallery )? If it is the former, I would suggest removing them, as it takes you completely out of the context in which you were in.

Other than those small issues, this is very nice. Exceptionally fast on an older 4s and equally responsive. I would love to see something like this for Hacker News.

Hey guys,

Great to see open source, light-weight, backbone based, frameworks =D

I am building a mobile application for a project I am working on and for this I have also (after using a lot of other libraries) built my own framework.

It consists of 3 packages.

1) sass-ratchet (repo: https://github.com/jocks/sass-ratchet)

This is my sass port of ratchet (just starting). It basically adds vendor prefixes, and puts a couple of main colors in a variable, and calculates all colors with the darken() method in sass. I am not really happy with the variable names yet, so expect a lot of change in this repo.

2) jocks (repo: https://github.com/jocks/jocks) (docs: http://jocks.koenschmeets.nl/#!/api)

Jocks (JavaScript Blocks) is based on Backbone + MarionetteJS, it allows me to have JavaScript create the DOM elements for me (and keeping a reference to it), and allows me to define methods on a block to manipulate it easily after it has rendered. Basically, any component will only be rendered once, after that, it's manipulation. I am planning on wrapping up Bootstrap too, and use it for building web applications.

3) jockstrap-ratchet

This library is based on tbranyen's excellent backbone-boilerplate (https://github.com/tbranyen/backbone-boilerplate), extends the "jocks blocks" to make it play nice with the phone, and includes a nice build process to minify all your stuff into 3 files.

I would love to see how we can help each other out, for example, a good start would be to put both our efforts in creating and maintaining a single sass / less port for Ratchet.

Oh, I'll put my project on Hackers News once it is more complete (along with a demo and a getting started guide).

There's somehow a recurrent trend of people building frameworks and libraries to try and make HTML5 apps look like native ones. I am somehow dubious as to wether it is indeed a problem that should be solved: jQuery mobile for example is a nightmare when it comes to customizing the styling to your own taste and has a whole range of embedded mechanisms (routing anyone?) which create a swarm of conflicts when trying to use any modern JS MV* framework out there.

A half decent designer will have no issue styling in a day the bulk of you app using simply CSS (and it can look gorgeous, especially on the iPhone), as long as you don't cripple your boilerplate with unnecessary iOS-ish effects and provide him with clean markup.

Nice work, it's a simple and clean extension on ratchet. It's not clear in the github post but that means it's not optimized for many devices/browsers that aren't iOS/safari/chrome, but it's a great start.

This is a native look only in iOS, and the only reason not to actually develop natively is because you want it to work cross platform with minimum effort (or you're too lazy to learn a new language, which you can do in a couple of weeks). If you're then only going to style it for iOS you're making the app next to useless on other platforms, which gets rid of the point of using HTML5 to make it cross platform.

I like it; much lighter-weight and simple than jQuery Mobile. However, I do wish it wasn't so iOS-focused; in my mind, the core strength of HTML5 apps is that they are (mostly) platform-agnostic, and I would love to see CSS wrappers for Android and (eventually) Firefox OS and Ubuntu Mobile.

Also (and this is a nitpick), this library fails my standard test for emulated iOS controls: the checkbox toggle cannot be dragged left or right in addition to being tapped. (Very few libraries pass that test.) :)

Looks good. Try making your github repo include a full working example to get people more interested.

Edit: Just started a new repo to put together a working example of this, I'm interested to see it on a phone https://github.com/thewebguy/junior-example

Also realized subby is not the developer.

yup, not dev here, found this and thought HN might find it interesting too - and was right! :)

Good work.

However feels like an html5 app on my galaxy nexus. Doesnt feel native (even iphone native) at all. Its just to slow.

Solution: get an iPhone.

How does this compare to jqMobi?

http://www.jqmobi.com/

This is pretty broken on android.

More or less unusable on latest Opera Mobile for Android. At least the demo site.

http://jquerymobile.com/

http://mobello.github.com/

I just checked out morello, it has page flashes when animations finish, which is a big disappointment .

As you are apparently a fan, could you show me a snazzy app, published in play or appstore made with jqm without too much hacking? Jqm apps are horrible in general; they are very flaky for users without a LOT of work. In our experience.

jQuery Mobile shares my record for dropping something that I've started hacking with enthusiastically.

Hate to say it but this doesn't "feel" native in the same way that I know it is possible to make. Great effort though and keep optimizing to get it there. For 100% native feel check out splitsville.

How about footers? Most of these things break down when you have an iOS alike header AND footer (both fixed).

can someone update me on this? looks like it's using ratchet for the styles. ratchet hasn't been updated in months.

This looks pretty rad

very cool. saved!

If you want to build a native app, build a native app. These sorts of things look worse than amateurish when you're not on iOS. There are parts of this that seem useful, but why force the iOS style? It's not like iOS is some bastion of great style anymore... at all.

Two words: Ruby Motion.

I especially dislike the fact that "native app" means iOS. Like it would be the de facto standard for mobile apps. I have sadness in my heart.

Reply on news.ycombinator.com