VIMOC Technologies (Mountain View, CA) is running several full scale “Smart City” pilot programs of its Landscape-Computing platform (e.g. Palo Alto, CA, Newcastle, NSW). In Newcastle, the Kaooma project delivers a stream of data that includes pedestrian counting, environmental sensing (temperature, humidity and light), and car parking for the purpose of benefitting business owners by delivering consumer behavior and offering ways to better meet customer demands.
VIMOC Technologies has engaged xgen.io to build a “client-side SDK” to the VIMOC API with the goal of attracting a large community of developers that want to develop solutions that leverage VIMOC Landscape-Computing Platform (LCP) and the rapidly growing number of underlying sensors.
Xgen.io suggested to use React.js to build the SDK, as a set of React components. React.js is a very innovative, open source, project lead by Facebook that enables developers to rapidly build AJAX based Web (and native) applications. React is using a “reactive” pattern to render the UI each time the underlying data changes. This approach make writing applications a lot simpler and faster. In addition React.js is architecture neutral and can be embedded in any Web or native application.
For instance, all that is needed to embed a component is a <div>:
The React component calls the corresponding VIMOC API, in this case, fetches the site coordinates and displays the location site location on a google map React component.
A typical architecture for a Web application using the VIMOC SDK is as follows:
Although the SDK can be configured directly to call the VIMOC API gateway, it is advised to use a reverse proxy to avoid exposing the API shared secret to the browser. The typical flow is for a form component to instantiate an API call component, which fetches the corresponding data from the VIMOC API and renders it with a view component. This separation of concerns allows VIMOC to publish updates to the SDK without disrupting existing applications as developers would customize the form and the view to taylor their needs.
On submit, the form instantiates the API call component (2) which renders after fetching the corresponding data (3,4) via the reverse proxy.
When the API component renders, it instantiates one or more views (5).
VIMOC and xgen.io jointly published a specification of this architecture / pattern, called “ReaCall”. You can learn more about ReaCall and download sample code here.