Prototyping with Marvel and Sketch: Part 2 | Hacker News Reader

Prototyping with Marvel and Sketch: Part 2

medium.com

13 pointsthemmed4 comments

If you want to make this same kind of app prototype, but in a way that goes much further, check out Neonto:

One of the template projects called "Photo Diary" is almost exactly this same concept: camera + note attached to photos + gallery of photos taken by the user...

But instead of just an <iframe> with hotspots, the tool gives you working source code for iOS and Android. You can install the prototype on a phone and everything works! For prototyping a camera app, isn't a working camera view and a working list of saved photos much better than a static stock photo?

(Disclaimer -- I wrote a large chunk of the Neonto Studio app, so I'm biased.)

Very interesting. After looking at the site and watching a few videos, I gather that there's no facility to round-trip code -- any code that's generated is one-way only and blows away your existing project. Presumably anything custom you want to do to extend the already-generated code would need to be handled via a plugin, so is there documentation on writing those? And/or is there a clever way to extend the generated code's functionality so you can do some advanced stuff directly in Xcode but keep prototyping new functionality in Neonto and re-generating the code doesn't blow away your extensions?

Right, there's no roundtrip for code, except wrapping it in a plugin.

One way of handling the situation where you have hand-made changes in the code but still want to update the UI from Neonto Studio is to use git branches... Put Neonto's output in its own branch, then merge from that into the main. That works surprisingly well because git is pretty smart (though only if the project's structure stays mostly intact).

Neonto Studio plugins are written in JavaScript, and they can write out iOS / Android code with specific hooks. Unfortunately the documentation for plugins is in a fairly miserable state... Here's all that exists so far:

http://neonto.com/developer

There's a bunch of examples there. Due to the lack of real documentation, the only reasonable way to write a plugin is to pick one of the examples and modify it.

Our prototyping app Framer, also deeply integrates with Sketch.

http://framerjs.com

Reply on news.ycombinator.com