How to port BitShares JavaScript UI to native Android?

[jakub]

Well the major issue here is that you'd need to port all the crypto stuff, the transaction processing, signing etc, to Java. It would be great if you did that though don't get me wrong, but I think it's fairly involved. @jcalfee might have an opinion on how much work it would be since he wrote it all.

@jcalfee1 , would you comment on this?
What are the most important / difficult to implement aspects of the code you created?

Isn't @ElMato 's limewallet written in Java?
https://github.com/limewallet/limewallet

Not sure if it is graphene compatible already

Nope, I'm quite sure it's javascript.

[xeroc]

Well the major issue here is that you'd need to port all the crypto stuff, the transaction processing, signing etc, to Java. It would be great if you did that though don't get me wrong, but I think it's fairly involved. @jcalfee might have an opinion on how much work it would be since he wrote it all.

@jcalfee1 , would you comment on this?
What are the most important / difficult to implement aspects of the code you created?

Isn't @ElMato 's limewallet written in Java?
https://github.com/limewallet/limewallet

Not sure if it is graphene compatible already

[jakub]

Well the major issue here is that you'd need to port all the crypto stuff, the transaction processing, signing etc, to Java. It would be great if you did that though don't get me wrong, but I think it's fairly involved. @jcalfee might have an opinion on how much work it would be since he wrote it all.

@jcalfee1 , would you comment on this?
What are the most important / difficult to implement aspects of the code you created?

[xeroc]

It is indeed fairly involved and I am still struggling with the python implementation of it

@xeroc ,

(1) Where can I find the source code for "the python implementation of it"?

(2) What areas does your python implementation cover?
Is it more like a python port of the data layer of the web GUI?
Or is it more like a python port of the CLI functionality?

(3) What is the goal of your python implementation?
Does it do anything that the CLI / web GUI cannot do?

You can see all of the code here:
https://github.com/xeroc/python-graphenelib/blob/master/graphenebase/transactions.py

Essentially, it will (hopefully) allow to construct and sign (which is the hard part) your transactions with any kind of operations in it.
I am struggling because I seem to miss something so that my signed demo transfer is smaller in size than a reference transaction (serialized) from the cli-wallet.

It does not do anything that couldn't also be handled by the CLI(C++) or the GUI(JavaScript) but would essentially allow to use Python instead of C++/JS

[jakub]

It is indeed fairly involved and I am still struggling with the python implementation of it

@xeroc ,

(1) Where can I find the source code for "the python implementation of it"?

(2) What areas does your python implementation cover?
Is it more like a python port of the data layer of the web GUI?
Or is it more like a python port of the CLI functionality?

(3) What is the goal of your python implementation?
Does it do anything that the CLI / web GUI cannot do?

[xeroc]

In my case, the temptation to port stems from my skill-set.
I am familiar with Java and Android but have almost no experience with js, so React Native is a mixed blessing for me:
- It gives me a good head-start as all I need to do is build on top of the existing js code.
- I need to learn a completely new coding environment - and this takes time.

So I look forward to svk's docs and then I'll decide how much stuff I'd need to port.
If it's all very complex, I might stick to js.

Well the major issue here is that you'd need to port all the crypto stuff, the transaction processing, signing etc, to Java. It would be great if you did that though don't get me wrong, but I think it's fairly involved. @jcalfee might have an opinion on how much work it would be since he wrote it all.

It is indeed fairly involved and I am still struggleing with the python implementation of it

[svk]

In my case, the temptation to port stems from my skill-set.
I am familiar with Java and Android but have almost no experience with js, so React Native is a mixed blessing for me:
- It gives me a good head-start as all I need to do is build on top of the existing js code.
- I need to learn a completely new coding environment - and this takes time.

So I look forward to svk's docs and then I'll decide how much stuff I'd need to port.
If it's all very complex, I might stick to js.

Well the major issue here is that you'd need to port all the crypto stuff, the transaction processing, signing etc, to Java. It would be great if you did that though don't get me wrong, but I think it's fairly involved. @jcalfee might have an opinion on how much work it would be since he wrote it all.

[jakub]

In my case, the temptation to port stems from my skill-set.
I am familiar with Java and Android but have almost no experience with js, so React Native is a mixed blessing for me:
- It gives me a good head-start as all I need to do is build on top of the existing js code.
- I need to learn a completely new coding environment - and this takes time.

So I look forward to svk's docs and then I'll decide how much stuff I'd need to port.
If it's all very complex, I might stick to js.

[fav]

what's the needed github rep for porting over? I got an idea for a chrome app

[valzav]

@jakub, I would recommend you to use react native and reuse the code from dl folder rather than porting it to another language

[jakub]

I was thinking yesterday that I should write some docs on how the whole thing works, I might do that next week actually.

I did update the readme a little, think I removed the mentions of the CLI cause I don't think it works anymore, and the environment stuff which I for one never used..

@svk , if you could do that, it would be fantastic.
It doesn't need to be a detailed description, just a general concept of the architecture, the major points.
Also, a list of deprecated stuff would be great. Things which are part of the code-base but not actually used are especially misleading.

It would help me a lot. This UI code might be clear for an experienced js dev but for me it's a lot of guessing.
In turn, once I get a grasp of it, I could write some guide for porting it outside js.

[svk]

I was thinking yesterday that I should write some docs on how the whole thing works, I might do that next week actually.

I did update the readme a little, think I removed the mentions of the CLI cause I don't think it works anymore, and the environment stuff which I for one never used..

[valzav]

Does the data layer have anything to do with React or is it pure JavaScript/CoffeeScript project?

It doesn't depend on React, it includes Alt flux stores and actions though - we keep app's state in them, if you don't need them just nuke stores and actions folder and alt-instance.js.

(b) Is the data layer able to work "on its own", i.e. without the UI layer? If so, what is the best way to try it out?

Just create your own test app, import ChainStore.js and play around with it.

(2) Would you be so kind and describe briefly the workflow of the GUI? Especially, I'm curious about these aspec

Look at ChainStore.js and its init() method. We use BindToChainState decorator to connect React components to ChainStore.

This will be a really stupid question: how do I launch this JavaScript CLI?

Goto cli folder and type: npm i && npm start
Please note that cli is slightly outdated and don't use ChainStore that is now official way to query blockchain state and bind it to React components.

(4) If I wanted to run the UI step by step in a debug mode, do I need to have it compiled locally with Nodejs or will it be enough to debug the production code hosted on OpenLedger?
If the former is true, does the whole thing compile on Windows? I've had some problems with it.

For development, run it locally using "npm start" command in web folder, no point to use OL compiled js. It should work on windows but I think it's not tested much.

(5) In the Environment section of your README file you mention those system variables:

I think you can skip this step.

(6) For educational purposes which repository would you recommend me to use: cryptonomex/graphene-ui or bitshares/bitshares-2-ui

cryptonomex/graphene-ui is the primary source, this is where all the development happens, so it's most up-to-date.

[jakub]

@valzav @svk

Let's assume I wanted to build a BitShares UI in the form of a native Android app.
I have little experience with JavaScript, nevertheless I've looked into the BitShares-UI source code and tried my best to understand the architecture of this project.

My plan is to reverse-engineer it a little bit so that I can judge how difficult it would be to port the JavaScript code into Android's native code.
I have these "stupid" questions:

(1) My understanding is that there are two crucial layers in your design:
- the data layer (the dl folder)
- the UI layer (the web folder)
The UI layer is clearly a React.js project.
(a) Does the data layer have anything to do with React or is it pure JavaScript/CoffeeScript project?
(b) Is the data layer able to work "on its own", i.e. without the UI layer? If so, what is the best way to try it out?

(2) Would you be so kind and describe briefly the workflow of the GUI? Especially, I'm curious about these aspects:
(a) What is the sequence of events that happens from the moment the app launches till the moment the it is fully displayed on the screen?
(b) How is caching of data solved? As a GUI user I've noticed that most data is loaded sequentially (i.e. only when it's needed) - is it the case?
(c) How does the UI layer communicate with the data layer? How are changes in the data layer pushed to the UI?

(3) In your README file you mention that:

A javascript CLI environment is also available in the ./cli folder.

This will be a really stupid question: how do I launch this JavaScript CLI?

(4) If I wanted to run the UI step by step in a debug mode, do I need to have it compiled locally with Nodejs or will it be enough to debug the production code hosted on OpenLedger?
If the former is true, does the whole thing compile on Windows? I've had some problems with it.

(5) In the Environment section of your README file you mention those system variables:

Code: [Select]

GRAPHENE_UI_HOME=$HOME/bitshares/graphene-ui
export NODE_PATH="$NODE_PATH:$GRAPHENE_UI_HOME/dl/src:$GRAPHENE_UI_HOME/web/app"
When do I need them?

(6) For educational purposes which repository would you recommend me to use: cryptonomex/graphene-ui or bitshares/bitshares-2-ui?
Also, the README file is different between those repositories - which one is more up-to-date?

-------------------
I realize I've asked lots questions here and you guys are quite busy with coding.
If that's too much, just answer whatever part of it - every little detail will be helpful for my understanding.
Thank you.