In the last post we were introduced to Maid’s SAFE Network. Now we’ll get started with the basics of developing for the network. There’s a forum just for developers, which has an awesome starting guide with how to take care of basic setup and mocking for the network.

To get a quick glimpse of what API is like we can simply git clone https://github.com/maid_safe/safe_examples.git to get all the oficial examples.

SAFE Browser Authenticator

The SAFE Browser

Introduction

Just like the web, Maid uses a browser as the entry point to the network. The SAFE Browser is based on one of my personal favorite projects, Beaker Browser. But the differences are important. The SAFE Browser only navigates on the SAFE Network, completely closed from the http web (but open to WebRTC). It also serves as entry point to the SAFE Network API through the SAFE App Beaker Plugin and takes care of authenticating user by using the Authenticator Beaker Plugin.

Developing web applications for the SAFE Browser is just like developing any

other web app with the additional SAFE API through the window object (and the fact you are completely closed from the “corporate web” ). Here’s a short cheat-sheet of how the parts connect, thanks Joseph Meagher for this:

Safe Network API flow

A good place to check what actual code looks like is within the web-api-playground, which has some snippets thought out to us by the core team. And there’s a even a web_starter by hunterlester written in simple JS.

Getting started

The test network has a limit per user of 1000 PUTS per user, so in order to

get some real development done we have to mock the network. You can read the official post on the topic to getter a better understanding. But it simply means:

When the SAFE Browser, or another application, is built with mock-routing

enabled, it’s not connecting to a live network, it’s interfacing with a local

database that is created on your system to simulate network operations. This saves a great deal of time and provides a safe space for your application

or website to initially test operations.

Grab a copy of the latest mock executable on Github. Open it and create an account like you would do in the real network but using anything as an Invitation Token.

type anything to get in

Once you signup and sign in you can start developing without worrying about PUT limits. Now we can start experimenting with the API by running any local server and pointing to this weird address:

safe://localhost://p:3000

To get it up to the alpha network just use the Web Hosting Manager and upload your build.

Developer Experience

Lately more and more developers have gotten accustomed to having a good DX (Developer Experience) by using tools for observing and time traveling app state like redux-dev-tools and tools to keep development app in sync with code, while maintaining state changes across reloads, like react-hot-reloading. We tested React and Preact and neither worked with live-reloading much less with hot-reloading, and we’re still trying to understand why. But as pointed by bzee, Vue’s webpack template which comes with hot -reloading and works perfectly with the browser, so it’s a good starting point for app development.

Desktop and Mobile Platforms

Maid supports all platforms: web, native desktop and native mobile. There are examples for all of them, but for mobile they’re using Xamarin, which is not something I’m really into as a Javascript developer. It would be nice to have a React Native lib to make it simple to run, read and experiment with, like they’re doing with the rest of the examples using plain js or React and Redux. Maybe we could even try running it with something like react-native-node.

For native desktop applications the oficial examples use the well known

Electron framework. Since Electron runs on Node.js they make use of the safe-node-app lib. We can see what it’s API is like on the Web Hosting Manager and Email App examples. But even when developing stand alone desktop apps we need to have the SAFE Browser running to authenticate.

Extras

Since the the SAFE Browser is such a controlled environment we can just write ES7 with no need for transpilling, like this:

async function sendMessage() {

try {

const mutationHandle = await window.safeMutableData.newMutation(auth) const date = new Date()

const time = date.getTime() await window.safeMutableDataMutation.insert(mutationHandle, time.toString(), textarea.value) await window.safeMutableData.applyEntriesMutation(mdHandle, mutationHandle) Materialize.toast('Message has been sent to the network', 3000, 'rounded')

window.safeMutableDataMutation.free(mutationHandle)

getMutableDataHandle('getMessages') textarea.value = ''

} catch (err) {

console.log(err)

}

}

Next steps

Our mission is to document while we build a wallet inside the SAFE Network so users can create and exchange tokens and benefit from the network’s security, privacy, speed and cost, which will be more efficient than blockchain-based technologies. The project’s code is open-source and lives on Github.

In the next posts we’ll dive deeper on developing for the SAFE Browser while explaining the SafeWallet application we’re developing.

Introduction to the SAFE Network

Developing for the SAFE Browser

Authorizing and Authenticating a SAFE Application (soon)

Working with Data in SAFE (soon)

A special thanks to Eddy Johnson who has been keeping us posted on Safe Network updates, and sponsoring our explorations; and Jabba who has taken his time to review and edit the articles.