The reTHINK framework is an implementation of the Decentralized Communications concept providing trustworthy communication among any peers without central authorities or communication monopolies.

It introduces a new service paradigm - Hyperties - to facilitate the development of complex decentralized Web Applications according to Microservices architectural patterns.

Interoperability: Protostubs

In a standard Web Application, developers need to know in advance with which services providers it will be necessary to interact. The number of protocols an application can speak is limited in implementation time and it can not change without modifying the code. In reTHINK the protocol-on-the-fly concept is used. If you need to interact with a service which uses protocol A, the framework will provide you on-the-fly a piece of code called protostub which will be executed in the right sandbox. This protostub will speak protocol A and it will expose a common API to the Hyperty Core Runtime. The Web Developer will not need to deal with this complexity.

Identity management.

The identity management is normally coupled to the service logic and there are many different standard protocols for authentication and Identity management that makes it harder to achieve interoperability between different services. The reTHINK framework decouples the service logic from the Identity Management logic and provides a common Identity Management API that is agnostic of protocols used. The protocol-on-the-fly mechanism is also used to provide you on-the-fly the right protostub (here called IDP Proxy) to interact with each Identity Provider selected by the end-user.

How to use Hyperties in Web Applications

Developers can use Hyperties in Applications by using any Web framework with a few lines of code. Let’s see how the Hello World Reporter Hyperty is able to invite a remote Hello World Observer Hyperty and say “Hello” to it.

1: let’s first get the address from the remote Observer Hyperty. In anonymous mode, open a new browser windows to run the HelloWorldObserver Hyperty, and take note of its address:

2- import the following script in your HTML:

  
    <script src="https://rethink.alticelabs.com/.well-known/runtime/rethink.js"></script>
  

3- Add these lines in your javascript to instantiate the Hypert Runtime

  
    let config = {
      "domain": "rethink.alticelabs.com"
    }

    let runtime;
    let hypertyCatalogueURL = 'https://'+config.domain + '/.well-known/hyperty/HelloWorldReporter.hy.js';

    let observer ='hyperty://hybroker.rethink.ptinovacao.pt/d35a4bce-e281-4125-8536-a6daa24ea9ce'; // Address from the Observer Hyperty

    rethink.rethink.install(config).then(function(result) {

      runtime = result;

      deployHyperty();

    }).catch(function(reason) {
      console.error(reason);
    });
  

Note that the observer variable was set with the address from the Hello World Observer Hyperty that is running in the anonymous window.

4- then load and deploy the HelloWorldReporter Hyperty from the Catalogue

  
    function deployHyperty(){
      runtime.requireHyperty(hypertyCatalogueURL).then( function(hyperty) {
          startUsingDeployedHperty(hyperty);
        }).catch(function(reason) {
        errorMessage(reason);
      });
    }
  

5- and invoke Hyperty functions from its API as a common Javascript Lib:

  
  function startUsingDeployedHperty(hyperty){
    hyperty.hello(observer).then( function(hello) {
      helloObj = hello;
      console.log('[SimpleHelloWorld.hello] ', helloObj.data);
      });
    }
  

6- Run your App and you should see the Hello messages in the HelloWorldObserver page, something like this:

Cool?

7- let’s go a bit further. In the browser console, if you look for the [SimpleHelloWorld.hello] log, you will see the contents of the Hello Data Object that is now synchronised between the Hello World Reporter Hyperty and the Hello World Observer Hyperty. For example, if you call the bye() function, the Hello Data Object is changed and immediately propagated to the Hello World Observer Hyperty. Let’s try. Change your startUsingDeployedHperty like this:

  
    function startUsingDeployedHperty(hyperty){
      hyperty.hello(observer).then( function(hello) {
        helloObj = hello;
        console.log('[SimpleHelloWorld.hello] ', helloObj.data);
        setTimeout(function(){ sayBye(hyperty);}, 3000);
        });
      }
  

Note: the setTimout is used to give time to setup the sync data stream between the Reporter and the Observer. In more complete Hyperties, a listener should be set to handle events about data sync stream setup status.

… add a new sayBye function:

  
    function sayBye(hyperty){
      hyperty.bye();
      console.log('[SimpleHelloWorld.sayBye] ', helloObj.data);
      }
  

… and run again your App. Now you should also see a “bye bye” message on the remote Observer Hyperty … Cool?

8- The App itself can directly change the Hello data object. Lets add another function, sayHelloAgain, to do that:

  
    function sayBye(hyperty){
      hyperty.bye();
      console.log('[SimpleHelloWorld.sayBye] ', helloObj.data);
      setTimeout(function(){ sayHelloAgain();}, 3000);
    }

    function sayHelloAgain(){
      helloObj.data.hello = 'Hello Again :)';
      console.log('[SimpleHelloWorld.sayHelloAgain] ', helloObj.data);
    }
  

… run your App again and you should see a new “Hello Again” message on the remote Observer Hyperty and … Cool?

Check the complete source code here.

Next steps:

• play with available Hyperties that are in the Hyperty Catalogue.

• develop your own Hyperty in a few steps as explained here.