search

Jasonette / JASONETTE-Android

📡 Native App over HTTP, on Android
https://www.jasonette.com
Other
1.6k stars 270 forks source link

improve debugging ux #134

Open maks opened 7 years ago

maks commented 7 years ago

Currently the debugging ux is pretty bad. Actions with invalid JS in template expressions silently fail, tracing action calls is not possible, seeing the call-stack now that lambdas are available is not possible. Forgetting to return a value from a exprssion with multiple js expressions fails silently.

Console.log is available for use within expression templates but is very cumbersome to use.

I've had an initial look at j2v8 usage within jasonette but it doesn't seem to expose errors as exceptions thrown into Java. It does appear to have a Debug API available but it does not appear to be documented.

maks commented 7 years ago

As a starting point I've added Stetho just for network requests and UI structure viewing https://github.com/Jasonette/JASONETTE-Android/pull/133

maks commented 7 years ago

This question may point the way to adding support to debug the V8 instance supplied by j2v8

maks commented 7 years ago

Looks like per this article the author of j2v8 uses Stetho to provide Dev tools debugging for their product too. And they too are currently limited to basically just break-point setting because that is all their DebugAPI class provides. I'll try to implement that too, though @gliechtenstein do you think that will be helpful as currently JS is just limited to template expressions? I wonder if this might be a prompt to allow more JS support (JSAction?) rather than relying on the inline JS within expressions?

maks commented 7 years ago

Sadly it appears that there is no existing support in Stetho for exposing the JS runtime debugging functionality of a JS runtime to Dev Tools via the debug protocol, but the infrastructure is there for it to be added, it would just need work on Stetho itself. I do have an idea on how to approach this from a different angle, so I'll try to build a proof of concept first.

maks commented 7 years ago

@gliechtenstein As a side note, it appears that PonyDebugger provides similar functionality for iOS, though not quite as nicely out-of-the-box as its needs a gateway server as well.

gliechtenstein commented 7 years ago

@maks PonyDebugger looks great! And I like how both stetho and ponydebugger are based on chrome (consistent UX)

I also did some research and found another alternative for iOS https://github.com/Flipboard/FLEX This one looks great and is similar to what you were trying to do for Android. The difference from ponydebugger is that it's an in-app tool instead of using chrome. I guess there are pros and cons for this.

Anyway, after seeing what stetho can do, I think we should package these debugging tools into the core and release them as official features. Maybe even write up some documentation on how to use over at https://github.com/Jasonette/documentation

Would you like to try the documentation for Android stetho part? I'm thinking something similar to what I did here http://docs.jasonette.com/android/ Doesn't have to be super thorough but would be nice to have a step by step walkthrough.

maks commented 7 years ago

Wow, thanks for the ref to FLEX, thats exactly what I had in mind for a "builder app". But that much bigger long term project then Stetho and Pony so I think its worth doing/having both.

Bit embarrassed by lack of docs I've done for adding Stetho, very happy to do them - I'll get that them done as top priority.

maks commented 7 years ago

documentation: https://github.com/Jasonette/documentation/pull/65

gliechtenstein commented 7 years ago

Decided to incorporate FLEX to iOS dev mode by default. Here's the PR (along with a link to the demo video) https://github.com/Jasonette/JASONETTE-iOS/pull/254.

It's pretty amazing what it can do right out of the box, but I think this can potentially evolve so that users can simply drag stuff around in the screen and it generates JSON WITHOUT even having to use a computer to write JSON.

I'm guessing this is along the lines of what you were envisioning :)

maks commented 7 years ago

@gliechtenstein Yes thats exactly what I had in mind. In some ways this goes far beyond what can be done with DevTools. Just imagine something like a Flex's UI making changes not in-memory but to the Jasonette JSON "DOM", automatically calling $render to show changes on the fly, plus the changes are text based unlike purely in-memory so can be written out to file, which can be version tracked, "diffs" could be displayed in the UI (eg. transistion back-forwards) not just as plaintext diffs. What I have in mind is not just a "debugging" UI more a "builder UI" which can also be aware of all the actions in the registry along with the options they take so could present that in a nice UI too. The potential here is huge :-)