

Junior - A Native-Looking and Feeling Mobile HTML5 Front-End Framework - Hirvesh
http://justspamjustin.github.com/junior/

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

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

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

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

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

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

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

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

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

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

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

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

------
TeeWEE
Good work.

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

~~~
pervert6
Solution: get an iPhone.

------
y0ghur7_xxx
How does this compare to jqMobi?

<http://www.jqmobi.com/>

------
cocoflunchy
This is pretty broken on android.

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

------
danabenson
<http://jquerymobile.com/>

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

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

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

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

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

------
kine
This looks pretty rad

------
zapt02
very cool. saved!

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

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

