App.js: Mobile webapps made easy

http://code.kik.com/app/2/index.html

by tdrnd • 12 years ago

132 38 12 years ago

code.kik.com

gearoidoc2• 12 years ago

Looks nice but I'm just wondering what this offers above Mobile Angular.js?

joshmn• 12 years ago

I'm not a Javascript guy by any means but from what it looks like this is a library whereas Mobile Angular.js is a framework.

gearoidoc2• 12 years ago

Sorry, should have specified - it looks to me that Angular mobile provides a similar theme out of the box plus the awesome Angular stuff on top of it.

What I'm saying is this is like a plain donut whereas a donut with sweet, sweet toppings already exists :D

sehr• 12 years ago

The fact that you aren't tied to a specific framework for the entirety of your app's lifetime.

notduncansmith• 12 years ago

Not to be confused with AppJS[0], a (recently deprecated) SDK for building native desktop apps with Node.js.

[0] https://github.com/appjs/appjs

evv2• 12 years ago

And if you want an actively-maintained alternative, check out https://github.com/rogerwang/node-webkit

evv2• 12 years ago

I would be a bigger fan if there were some included phonegap utilities & tutorials.

Famo.us is making the same mistake for some reason. Aggressively targeting mobile, with half of the toolchain missing to actually shipping mobile apps.

Not that I can blame the OP, who is likely not a SF startup with millions in funding.

jmonegro• 12 years ago

It's actually a Canadian startup with millions in funding, but this is not their product. It's the Kik messenger, which has a built-in browser. They provide this library to make making apps for their messenger easier.

Kiro• 12 years ago

Not that I can blame the OP, who is likely not a SF startup with millions in funding.

Funding: $27.50M

http://www.crunchbase.com/organization/kik-interactive

rodion_894• 12 years ago

Like the others said, this is written by Kik Interactive (http://kik.com/) which is well-funded.

The idea is that Kik's browser has the PhoneGap-like utilities that you described built-in, while this is a library for building the UI of an application. http://dev.kik.com/

d4m0• 12 years ago

Offers similar functionality to http://chocolatechip-ui.com/

finalight• 12 years ago

i'm taking note of this website right now

it seems that there's really a lot of javascript framework/ui for mobile and i'm interested to find which one offers the best performance/ui ratio

collyw2• 12 years ago

I am trying to learn Javascript, coming from a Perl / Python / RDBMS background.

What a mess the JS landscape is. There are so many frameworks, and no clear reason to choose one over the other. Angular has a reputation as being one of the better ones, but it seems overly complex, the documentation is terrible, and the learning curve is steep. And its still one of the better of the ones that I have tried.

qhoc3• 12 years ago

chocolatechip-ui is a nightmare, at least for me. It has tons of micro-issues. Mostly just awkward interaction / behavior and missing key basic features.

eli• 12 years ago

So is it intended to be a lighter weight version of JQuery Mobile? http://demos.jquerymobile.com/1.4.2/

msoad• 12 years ago

Nice to see the effort for making mobile web apps more mainstream.

There is also http://goratchet.com/components/

yaeger• 12 years ago

The interesting thing is, Apple originally intended that this should be the goto way to get user generated applications on the iPhone.

But then, the jailbreak scene came up and somehow Apple changed their stance by creating the app store and thus the possibility to control what kind of native applications will run on the devices.

Of course this way has the advantage of not needing a paid developer account or need to have the app approved by Apple but then again, such a webapp is harder to monetize if that's what you are after than to simply write a native app and sell it in the app store.

neoveller• 12 years ago

If someone built one of these mobile webapp frameworks using famo.us, but exposed it to the developer as something much less alien vs actual famo.us... I would be so happy.

comex• 12 years ago

From some quick testing of the demo on iOS:

If you pull a list down from the top or up from the bottom, the wrong thing scrolls. Not sure whether this is possible to work around.

iOS 7-style back gesture does not work.

In the input demo, pressing return on the Subject field submits the form. Demo bug?

Occasional popping when switching screens.

Nevertheless, seems pretty solid in general. I like it.

oahziur• 12 years ago

It seems this is really good for single page (WebView) embedded in a native app. I am curious whether the wrong scrolls will happen if turn off the scroll functionality of the WebView on iOS or Android.

rodion_894• 12 years ago

It'll continue I work in webview with panning (bounce) turned off. In fact that's usually the most optimal experience

qhoc3• 12 years ago

Scrolling is a big issue here. I haven't looked into the source carefully but I saw the same behavior of wrong thing getting scrolled. My experience tells me that it's because they use div's scroll or multiple iframes. HTML in mobile browser is terrible at handling multiple scroller because it doesn't know where people touch or intend to scroll. Only famo.us seems to fix this problem by re-writing the whole scrolling feature. However, they screwed it up on some other parts (lolz..) which we heard things might improve.

rodion_894• 12 years ago

It's actually just using the browsers scrolling mechanism. Android 4+, iOS 5+ ship with touch-scrolling that you can enable on an element so it's as close to native scrolling as you can get.

Just add this CSS:

    overflow: scroll;
    -webkit-overflow-scrolling: touch;

rodion_894• 12 years ago

Thanks for the feedback!

* Fixed the scrolling issue. Ios safari doesn't let you disable the bounce so there is a workaround now.

* Ios back gesture works fine... Except in mobile safari, again because there is no way to disable apples back gesture. This would work best in phonegap or Kik where you can control these kinds of things

* Will fix subject bug in demo soon..

cromwellian• 12 years ago

If you're a Java aficionado GWT has a similar stack of widgets mGWT http://mobilegwt.appspot.com/showcase/ which actually are tuned to produce optimal repaints/scrolls in WebKit/Chrome with minimal DOMs. Combine with gwt-phonegap to produce native deployable apps for AppStore and Play.

canehdian• 12 years ago

Does anyone know how this compares to Sencha Touch?

dirtyaura• 12 years ago

Seems pretty solid! I tested on iPhone 4, which I use for my subjective performance testing when comparing libraries.

Transitions worked nicely, both meme and YouTube video thumbnail views were smooth. Compared to a possible native implementation the image search didn't work that smoothly during image loading, but it was still usable after all images were loaded. Also the list view for long lists with presumably dynamic loading (UITableView style) wasn't that smooth during scrolling.

All in all, kudos for the good work!

themodelplumber• 12 years ago

Longer title tag, please. I just bookmarked the site and found "App.js" in my database with no other context :-( Should help with search bots, too, IIRC~

batuhanicoz• 12 years ago

I use http://ionicframework.com in this area because I like Angular and there are a lot of content on it all over the web.

Most of my friends use http://www.idangero.us/framework7/, which is also good and has many components. (Though I didn't really used it myself)

App.js doesn't look like it has enough components ATM.

passfree• 12 years ago

My personal take is that you should always develop for the platform you are targeting.

It is not so much about weather the UI is drawn so that it looks native and it is not about performance (although important). It is more about what you can and cannot do natively. For example, in iOS/Mac certain things are not easy to do because the UI components that you are extending are not designed to work in they way you want them to work. This may look like a limitation but I see it as an enabler because it forces applications to have more or less the same behaviour. This is what makes AppKit/Cocoa etc. a better platform for development on iOS/Mac.

collyw2• 12 years ago

I think most people want to target all platforms, or as many as possible.

_random_• 12 years ago

"Cross Platform. Native transitions and more on Android 2.2+ & iOS 4.3+"

Cross Two Platform.

lucian1900• 12 years ago

It would also look out of place on Android.

martin-adams• 12 years ago

The live demo doesn't work with a mouse on desktop Chrome on a Microsoft 8.1 Surface as it thinks it's a touch screen only. I'm experiencing more and more issues with this, one a large UK retailer's e-commerce web site hit this issue and the Ghost blogging platform.

JacksonGariety• 12 years ago

Isn't this like [ratchet] [1]?

[1] http://goratchet.com

aceperry• 12 years ago

I am just amazed at all of the new cross platform toolkits and frameworks popping up nowadays. Seems to rival the number of new javascript libraries. The attempt to bring cross platform development to mobile is reaching a fever pitch. So many approaches, but there are still compromises or shortcomings from them all. One thing that I've noticed is that most of the newer frameworks are based on web tech and stacks. Which I guess is a good thing, or maybe not.

App.js: Mobile webapps made easy

Related Stories