Building a decentralized app doesn’t have to be hard, use these tools from NEO•ONE to make it quick and easy.
In addition to the client APIs we’ve already walked through, there are a few properties on the Client
that help make your app reactive. We’ll also cover using the NEO•ONE Developer Tools to help speed up manual testing of your dapp.
NEO•ONE uses Observables with RxJS to enable reactivity in dapps. The Client
class has several Observable
properties that can be subscribed to in order to update application state and the application UI. The most commonly used is the block$
property:
The Observable
emits a value whenever a new block is persisted to the blockchain for the given network. The network
property corresponds to the currently selected user account’s network. The Observable
automatically updates to start emitting new blocks from another network whenever the underlying network changes due to a change in the selected user account.
We can update application state that depends on new blocks by subscribing to the block$
Observable
:
Tip
If you’re using React, check out the
FromStream
component in the React advanced guide for a streamlined way to integrateObservable
s in your application. If you’re using Angular or Vue, check out the Angular or Vue advanced guides for examples with those frameworks.
One common use-case is to update the user balance whenever a new block is persisted. For example, if we’re displaying the user’s NEO and GAS balance:
This is a fairly common pattern, so Client
already exposes an Observable
for it:
Thus, we can simplify the above example to just:
Take a look at the @neo-one/client reference for details on all available Observable
s.
Developer Tools have not been thoroughly tested for N3 yet and may not work at this point in time.
NEO•ONE Developer Tools simplify the process of developing and manually testing your dapp. They contain all of the functionality necessary to control your private network:
Enabling the Developer Tools is easy:
Simply use the generated helper functions in src/neo-one/client.ts
to construct the various clients the Developer Tools require and then call enable
.
Note
If you’ve integrated NEO•ONE using the React advanced guide, then the Developer Tools are automatically enabled with no additional calls or configuration required.
When building for production, the Developer Tools are automatically replaced with an empty implementation, so they won’t show up for your users nor affect the bundle size.