Blockchain Part 2 – ReactJs portal for Dynamics 365

Continuing our journey down the chain as you can see in the architecture diagram I shared in my previous post NodeJs (the green patch) is our middleware that makes the commuicaiton possible. As of now Dynamics offers no direct connection to any blockchain. Let alone direct connection, there are not even any connector available. See that’s the joy of working on the cutting edge – you get to invent. Necessity is the mother of invention. So I thought of building some kind of middleware and NodeJs was a great choice as it will broker the communication between Dynamics, Portal and the blockchain.

 

The following are the main roles of the NodeJs layer in this architecture

Retrieving and storing information into Dynamics using Web API

For this I had to register my application inside the Azure AD as a native app.

Module Bundling

I used Webpack 3.0 as my module bundler and Babel as my transpiler. The main purpose of these components is to convert the higher level code like React, Web3 into plain Javascript which browsers can understand.

State Management using Redux

The Redux package has been used for state management which basically means storing data in session and collections and keeping it up to do as users interact with the portal. If you see the demo animation which I attached at the bottom of the previous post – where a user clicks on Add button and products keep getting added into the Shopping cart in realtime. That is made possible by Redux and all done on the client side – hence great UX. Shopping Cart and Product Catalog are different components and they communicate with each other using a common Redux Store using event/listener based communication

Communicating with Smart Contracts

Smart contracts are to Blockchain, what plugins are to Dynamics. They contain business logic which can be triggered by external calls. Smart Contracts execute in the blockchain and manipulate the transactions. There are written in a language called Solidity and get deployed to the blockchain. The Smart Contracts are invoked by a NodeJS package called Web3 which runs on client side.

 

There are lot of things at play here, lot of moving parts that need to be setup in a proper fashion for the end to end communication to work. So far I have only listed half of things I had to use, many others, which I will cover in the next post.

 

React JS Components

React JS is a wonderful language for functional programming, it makes writing advanced components possible that can scale. It is a micro – components architecture where you application is built of small compoents that talk to each other rather than a heavy monolith design like MVC. In React every component is self sufficient, it uses its own state and its context is localised. There are clear boundaries in what a component gets passed into (Properties) and what it manipulates (State). I loved this new pattern for working with Web apps and much better than the spaghetti style MVC pattern.

 

Below diagram shows how communication happens in React components. Every event (e.g. when I click on Add button of a particular shopping item) goes via this route. The sequence is

  1. On Click and event is generated by the Action Creator
  2. That event is dispatched by the dispatcher
  3. Reducers listen for events and update the big Store object
  4. Then update store is passed back into the components are properties

 

This is a highly scalable pattern called Flux

blockchain-shopping

Show me some code

Below is some of the code for the Catalog Item component to give you an idea. As you can see the bindings, markup, properties and events of this components are all contained in one file. For a new developer, so easy to understand what is going on as do not need to go through five files to connect the jig saw pieces, its all there at one place. I have put some labels that explain what is going in various sections of the code

code1

How it connects to Dynamics

I have used a Node JS package called https which is basically to makes HTTPS requests to any endpoint. You set the url, you set the headers, make a call and get the results. One limitation I saw with this package was that it uses callbacks. I changed the code to use promises which is a better framework.

Some of the code is shown below

code2

That covers the communication between the ReactJs and Dynamics 365. In next blog we will look at the Blockchain communication

Advertisements

2 thoughts on “Blockchain Part 2 – ReactJs portal for Dynamics 365

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s