7 ms·

Show HN: Practical Guide to Mobile Apps Using Phonegap and Famo.us

131 points by nicholasreed 12y ago

nicholasreed 12y ago
I've been working on putting my PhoneGap/Famo.us knowledge into a consumable form. I hope this "playbook" (with the sample apps and examples) can be useful some folks who are building apps! It is still a WIP on both the copy and code ends, but I'll be adding improvements consistently.
- sbarre 12y ago
  Thank you very much for writing this, I will pay for the book when it comes out (assuming you provide a way to do so) even if you give it all away for free... This kind of step-by-step start to finish guide is exactly the kind of resource I find the most useful when I want to learn new things..
  - nicholasreed 12y ago
    Seriously, it means the world to hear this. Thank you!
lnanek2 12y ago
Kind of sad the state PhoneGap push support is in. I checked the links and they have an if else for two completely different code branches for Android or iOS and don't support anything else: http://www.practicalguidetomobileapps.com/resources/book/full_app/device_readyjs.html http://www.practicalguidetomobileapps.com/resources/book/ful... Ideally you would support more platforms and not have to make any distinction in the JavaScript and could have a single code path. Right now I pay Pushwhoosh a hefty fee per month for exactly that. I hate working with closed source stuff that I can't bug fix and improve myself. Just the current state as evidenced by this guide is so far behind commercial offerings it would take months just to get it even comparable.
- nicholasreed 12y ago
  I totally agree with the sentiment, and iOS/Android support only is unfortunate at the moment. It's only getting better though, and in a few months the improvements in Famo.us/PhoneGap will be impressive. (un)Fortunately, I've wasted the hours of getting the payload/etc support working pretty seamlessly, so handling incoming Push's is all done in one place: https://github.com/nicholasareed/internal_app/blob/master/src/lib2/utils.js#L840 https://github.com/nicholasareed/internal_app/blob/master/sr...
alashley 12y ago
This looks great! I've been wanting to get into mobile dev but stuck between choosing one of C#, Java, or Objective-C. I work with Javascript every day so this should be more familiar.
- nicholasreed 12y ago
  There is a sample node.js server for the Waiting app as well, in case you missed it. Writing everything in JS has advantages!
- allsystemsgo 12y ago
  I'd do yourself a favor and take the time to learn native mobile development.
  - Winningest 12y ago
    Why? (non-rhetorical)
    - allsystemsgo 12y ago
      I'm an iOS dev. A few reasons: 1. Payscale for native development is higher 2. Your product will look infinitely better. It can do more things that Phonegap can't. 3. Supporting future devices using Phonegap will be difficult. Apple TV SDK? What about the watch thing that could also come out? 4. Xcode is great.
    - untog 12y ago
      It's very difficult to get webviews to be as performant and "right feeling" as native. That said, I think the case is very overstated, and that majority of users (i.e., not 20-somethings from Silicon Valley) won't notice or care if your app has some rough edges. I've been working on a mobile webapp, and I'm happy with the trade offs - it's cross-platform, and it's "good enough".
      - mwcampbell 12y ago
angryasian 12y ago
I just tried out the ulu app on OnePlus(top of the line hardware) and in terms of performance I wouldn't call this acceptable.
- kirubakaran 12y ago
  It is an app optimized to teach. From what I see, it looks great for that.
  - angryasian 12y ago
    for such a small app I imagine, that the performance issue is from the tech stack itself vs anything he's coded. I would put that as a warning to those that are considering to using this stack. If it is within the code itself, he shouldn't be teaching bad code.
  - nicholasreed 12y ago
    Thanks! It definitely doesn't have a team of designers/developers behind it...which is kind of the point. If you added a competent designer, and more than a week of work, you can see how a functional, smooth app could result. Not a guarantee of course, but the foundation is there.
thebokehwokeh2 12y ago
As someone working on a phonegap project, I'd really advise against committing to this framework for mobile app development. It is good for really quick and dirty proof of concept things for devices, but for fully fledged mobile apps on iOS and android, there is an enormous gap in terms of performance. In order to get performance at least on par with native, you'd have to sacrifice TONS in terms of user experience. Want gestures? You'll have to look towards things like iScroll and hammer.js, which work "sometimes". Add that to framework issues, and momentum based scrolling that you will have to implement yourself numerous times... Oh boy. Basically, things that come out of the box on native will have to be manually implemented by yourself, and none of these solutions will even come close to native experiences. Add this to the fact that phonegap documentation is all over the place, and all you will get are senseless headaches. Save yourself the frustration of hacking the web into a mobile device and go native all the way. You will thank your self later.
- gagege 12y ago
  Just spending 5 minutes with PhoneGap was enough to convince me that it isn't ready for professional app development, performance wise. That was 2 years ago and I'd hoped it had improved quite a bit since then.
  - nicholasreed 12y ago
    PhoneGap can only do so much, it is mostly just wrapping your HTML/JS/CSS. Finally those languages are starting to get close to what a native app can do (with significantly less development time, perfect for prototyping).
    - rimantas 12y ago
      Native is not about the languages, it is about the frameworks. HTML/JS/CSS are so far away from what native SDKs offer it is not even funny.
  - thebokehwokeh2 12y ago
    The thing is, the web will never ever catch up to native. The web is too fragmented, has too many libraries, differing philosophies and paradigms, and is too far removed from the hardware to even compete. You think you'll ever see something like Flipboard built on Phonegap? Pretty unlikely.
pbreit 12y ago
Feedback on http://www.practicalguidetomobileapps.com/resources/book/phonegap_and_cordova/phonegap_build.html http://www.practicalguidetomobileapps.com/resources/book/pho... 3. don't see [New App] button 5. Broken URL (missing ".git") 6. "App must be less than 20 MB" (I'm on the Free Plan, I assume like most)
- nicholasreed 12y ago
  Thanks for the feedback! Did you see a different button? (+ new app) perhaps? I updated the url to use the git:// one. I'll have to look into the 20mb limit, I never noticed!
  - pbreit 12y ago
    Perhaps if you do not have any apps yet, it goes straight to the new app page.
untog 12y ago
I'm still confused as to why I'd want to use famo.us over an open source UI framework. From these screenshots it doesn't even look particularly good.
- nicholasreed 12y ago
  It is open source... Some development (a majority) has been behind closed doors, but they are now opening everything up.
liquimoon 12y ago
Just downloaded the book! Thanks for making it free. You are very generous! I am looking to build a quick and dirty prototype for Tinder for X, and this is a great starting point for me. Thanks Nick!
dchuk 12y ago
Anyone done any comparisons of PG/Famo.us with Ionic (http://ionicframework.com/ http://ionicframework.com/)? Seems Ionic is making a really strong case for hybrid app viability
- thomasfl 12y ago
  Ionic seems to be easy if you know some AngularJS, but I would really like to know how stable and quick these things are.
- brianchu 12y ago
  AFAIK Ionic isn't specifically engineered for performance. Famo.us is more low-level.
  - dchuk 12y ago
    I'm almost positive that native-feeling performance is the core objective of Ionic
- rahimnathwani 12y ago
  malandrew replied when I asked this question before: https://news.ycombinator.com/item?id=8009282 https://news.ycombinator.com/item?id=8009282
- kgc 12y ago
  I have used Ionic in the past. It is terribly slow and glitchy on Android. (It was ok on iOS.)
  - yesimahuman 12y ago
    (creator here). It definitely sucked on Android in the beginning, and that's on us. Some of the things we were doing on Android were subtly killing performance. But we spent a ton of time focusing on Android and fixing that, so I hope you'll take another look!
- yesimahuman 12y ago
notoriousjpg 12y ago
Does anyone know if there is a PG like tool which will help me make an app for camping/hiking routes? As in it's mostly a map, with some filters and it finds nearby locations. Been looking around but it goes from "learn to code' straight to 'map technology' to 'map access api' which combines to be pretty darn hard. Cheers
- mgkimsal 12y ago
  intel's xdk platform might be worth looking at, as is titanium.
  - notoriousjpg 12y ago
    Thank you.
  - general_failure 12y ago
    I encourage you to see Intel XDK screenshots. Just type "intel xdk" in google images. If that doesn't scare you...
- mooreds 12y ago
  I don't know if pg has changed significantly, but good maps were very hard to do when I looked at them seriously 2 years ago. Few a map centric app, JavaScript maps just don't cut it in production, an native plugins just weren't available for Android.
- tim333 12y ago
  There are some examples of how to draw routes, markers etc on maps using google maps API at https://developers.google.com/maps/documentation/javascript/examples/polyline-simple https://developers.google.com/maps/documentation/javascript/... and similar. Once you get it working on a webpage it's fairly simple to convert to an app using Phonegap. I made an app that way for finding bars open - kinda works ok. ('late bars london')
- nicholasreed 12y ago
  This sound fun, and there is an awesome Famo.us+Mapbox implementation somewhere. Shoot me an email and let's make it real quick!
stardrive 12y ago
Come on people, HTML5 is winning! Another awesome and seemingly overlooked option here is ludei.com with their Cocoon platform, launcher and cloud build service. Put that together with React/Flux and some soon to be released Famous-React for flavour and its all possible. Then top it off with Webpack and your laughing.

131 points by nicholasreed 12y ago

I've been working on putting my PhoneGap/Famo.us knowledge into a consumable form. I hope this "playbook" (with the sample apps and examples) can be useful some folks who are building apps! It is still a WIP on both the copy and code ends, but I'll be adding improvements consistently.

sbarre 12y ago
Thank you very much for writing this, I will pay for the book when it comes out (assuming you provide a way to do so) even if you give it all away for free... This kind of step-by-step start to finish guide is exactly the kind of resource I find the most useful when I want to learn new things..
- nicholasreed 12y ago
  Seriously, it means the world to hear this. Thank you!

lnanek2 12y ago

Kind of sad the state PhoneGap push support is in. I checked the links and they have an if else for two completely different code branches for Android or iOS and don't support anything else: http://www.practicalguidetomobileapps.com/resources/book/full_app/device_readyjs.html http://www.practicalguidetomobileapps.com/resources/book/ful... Ideally you would support more platforms and not have to make any distinction in the JavaScript and could have a single code path. Right now I pay Pushwhoosh a hefty fee per month for exactly that. I hate working with closed source stuff that I can't bug fix and improve myself. Just the current state as evidenced by this guide is so far behind commercial offerings it would take months just to get it even comparable.

nicholasreed 12y ago
I totally agree with the sentiment, and iOS/Android support only is unfortunate at the moment. It's only getting better though, and in a few months the improvements in Famo.us/PhoneGap will be impressive. (un)Fortunately, I've wasted the hours of getting the payload/etc support working pretty seamlessly, so handling incoming Push's is all done in one place: https://github.com/nicholasareed/internal_app/blob/master/src/lib2/utils.js#L840 https://github.com/nicholasareed/internal_app/blob/master/sr...

alashley 12y ago

This looks great! I've been wanting to get into mobile dev but stuck between choosing one of C#, Java, or Objective-C. I work with Javascript every day so this should be more familiar.

nicholasreed 12y ago
There is a sample node.js server for the Waiting app as well, in case you missed it. Writing everything in JS has advantages!
allsystemsgo 12y ago
I'd do yourself a favor and take the time to learn native mobile development.
- Winningest 12y ago
  Why? (non-rhetorical)
  - allsystemsgo 12y ago
    I'm an iOS dev. A few reasons: 1. Payscale for native development is higher 2. Your product will look infinitely better. It can do more things that Phonegap can't. 3. Supporting future devices using Phonegap will be difficult. Apple TV SDK? What about the watch thing that could also come out? 4. Xcode is great.
  - untog 12y ago
    It's very difficult to get webviews to be as performant and "right feeling" as native. That said, I think the case is very overstated, and that majority of users (i.e., not 20-somethings from Silicon Valley) won't notice or care if your app has some rough edges. I've been working on a mobile webapp, and I'm happy with the trade offs - it's cross-platform, and it's "good enough".
    - mwcampbell 12y ago

angryasian 12y ago

I just tried out the ulu app on OnePlus(top of the line hardware) and in terms of performance I wouldn't call this acceptable.

kirubakaran 12y ago
It is an app optimized to teach. From what I see, it looks great for that.
- angryasian 12y ago
  for such a small app I imagine, that the performance issue is from the tech stack itself vs anything he's coded. I would put that as a warning to those that are considering to using this stack. If it is within the code itself, he shouldn't be teaching bad code.
- nicholasreed 12y ago
  Thanks! It definitely doesn't have a team of designers/developers behind it...which is kind of the point. If you added a competent designer, and more than a week of work, you can see how a functional, smooth app could result. Not a guarantee of course, but the foundation is there.

thebokehwokeh2 12y ago

As someone working on a phonegap project, I'd really advise against committing to this framework for mobile app development. It is good for really quick and dirty proof of concept things for devices, but for fully fledged mobile apps on iOS and android, there is an enormous gap in terms of performance. In order to get performance at least on par with native, you'd have to sacrifice TONS in terms of user experience. Want gestures? You'll have to look towards things like iScroll and hammer.js, which work "sometimes". Add that to framework issues, and momentum based scrolling that you will have to implement yourself numerous times... Oh boy. Basically, things that come out of the box on native will have to be manually implemented by yourself, and none of these solutions will even come close to native experiences. Add this to the fact that phonegap documentation is all over the place, and all you will get are senseless headaches. Save yourself the frustration of hacking the web into a mobile device and go native all the way. You will thank your self later.

gagege 12y ago
Just spending 5 minutes with PhoneGap was enough to convince me that it isn't ready for professional app development, performance wise. That was 2 years ago and I'd hoped it had improved quite a bit since then.
- nicholasreed 12y ago
  PhoneGap can only do so much, it is mostly just wrapping your HTML/JS/CSS. Finally those languages are starting to get close to what a native app can do (with significantly less development time, perfect for prototyping).
  - rimantas 12y ago
    Native is not about the languages, it is about the frameworks. HTML/JS/CSS are so far away from what native SDKs offer it is not even funny.
- thebokehwokeh2 12y ago
  The thing is, the web will never ever catch up to native. The web is too fragmented, has too many libraries, differing philosophies and paradigms, and is too far removed from the hardware to even compete. You think you'll ever see something like Flipboard built on Phonegap? Pretty unlikely.

pbreit 12y ago

Feedback on http://www.practicalguidetomobileapps.com/resources/book/phonegap_and_cordova/phonegap_build.html http://www.practicalguidetomobileapps.com/resources/book/pho... 3. don't see [New App] button 5. Broken URL (missing ".git") 6. "App must be less than 20 MB" (I'm on the Free Plan, I assume like most)

nicholasreed 12y ago
Thanks for the feedback! Did you see a different button? (+ new app) perhaps? I updated the url to use the git:// one. I'll have to look into the 20mb limit, I never noticed!
- pbreit 12y ago
  Perhaps if you do not have any apps yet, it goes straight to the new app page.

untog 12y ago

I'm still confused as to why I'd want to use famo.us over an open source UI framework. From these screenshots it doesn't even look particularly good.

nicholasreed 12y ago
It is open source... Some development (a majority) has been behind closed doors, but they are now opening everything up.

liquimoon 12y ago

Just downloaded the book! Thanks for making it free. You are very generous! I am looking to build a quick and dirty prototype for Tinder for X, and this is a great starting point for me. Thanks Nick!

dchuk 12y ago

Anyone done any comparisons of PG/Famo.us with Ionic (http://ionicframework.com/ http://ionicframework.com/)? Seems Ionic is making a really strong case for hybrid app viability

thomasfl 12y ago
Ionic seems to be easy if you know some AngularJS, but I would really like to know how stable and quick these things are.
brianchu 12y ago
AFAIK Ionic isn't specifically engineered for performance. Famo.us is more low-level.
- dchuk 12y ago
  I'm almost positive that native-feeling performance is the core objective of Ionic
rahimnathwani 12y ago
malandrew replied when I asked this question before: https://news.ycombinator.com/item?id=8009282 https://news.ycombinator.com/item?id=8009282
kgc 12y ago
I have used Ionic in the past. It is terribly slow and glitchy on Android. (It was ok on iOS.)
- yesimahuman 12y ago
  (creator here). It definitely sucked on Android in the beginning, and that's on us. Some of the things we were doing on Android were subtly killing performance. But we spent a ton of time focusing on Android and fixing that, so I hope you'll take another look!
yesimahuman 12y ago

notoriousjpg 12y ago

Does anyone know if there is a PG like tool which will help me make an app for camping/hiking routes? As in it's mostly a map, with some filters and it finds nearby locations. Been looking around but it goes from "learn to code' straight to 'map technology' to 'map access api' which combines to be pretty darn hard. Cheers

mgkimsal 12y ago
intel's xdk platform might be worth looking at, as is titanium.
- notoriousjpg 12y ago
  Thank you.
- general_failure 12y ago
  I encourage you to see Intel XDK screenshots. Just type "intel xdk" in google images. If that doesn't scare you...
mooreds 12y ago
I don't know if pg has changed significantly, but good maps were very hard to do when I looked at them seriously 2 years ago. Few a map centric app, JavaScript maps just don't cut it in production, an native plugins just weren't available for Android.
tim333 12y ago
There are some examples of how to draw routes, markers etc on maps using google maps API at https://developers.google.com/maps/documentation/javascript/examples/polyline-simple https://developers.google.com/maps/documentation/javascript/... and similar. Once you get it working on a webpage it's fairly simple to convert to an app using Phonegap. I made an app that way for finding bars open - kinda works ok. ('late bars london')
nicholasreed 12y ago
This sound fun, and there is an awesome Famo.us+Mapbox implementation somewhere. Shoot me an email and let's make it real quick!

stardrive 12y ago

Come on people, HTML5 is winning! Another awesome and seemingly overlooked option here is ludei.com with their Cocoon platform, launcher and cloud build service. Put that together with React/Flux and some soon to be released Famous-React for flavour and its all possible. Then top it off with Webpack and your laughing.