Introducing the SAFE API library for web-apps + ReactJS helpers + demo app

EDIT 4/12/16:
Low level javascript API: GitHub - eblanshey/safenet: Low-level javascript API wrapper for communicating with the SAFE Network launcher
Playground on SAFE: http://app.playground.safenet/

Original Post:

Today I am excited to share with you something I’ve been working on in my spare time: a preliminary javascript library that makes building web-apps for the SAFE Network easy and fun.

Purpose: to make it as easy as possible to make web apps that interact with the SAFE Network created by MaidSafe

As of this writing (2016-02-14) the SAFE api has not been released, but a general idea of its workings allows for an api to be created that will resemble the real thing. This library serves multiple purposes:

  • provides an API wrapper that makes CRUD operations on SAFE very easy
  • establishes guidelines on how to structure/organize entities and collections in an app
  • takes care of state and cache management
  • provides an additional wrapper that makes writing React apps a breeze

The “network” currently uses Firebase to replicate SAFE functionality, as they offer many similarities such as built-in authentication, URI based data, GET/PUT/DELETE functionality, etc. Firebase will be replaced with the test network as soon as possible.

I won’t keep you waiting any longer:

API source and documentation

Demo app that utilizes the API and React helpers

Demo app source code

Note: this is a personal project–I am not affiliated with MaidSafe.

Contributions, questions, ideas, pull requests, github issues, and discussions are all welcome!

48 Likes

Raaaaaad. As if by magic when I was wanting to start playing with this very stuff.

3 Likes

Wooo. Was looking for redux in there!

@eblanshey Are you using redux here just for the api? (I don’t have a lot of time before work to read the full API, so just skimming now). ie. The app can use whatever it wants for data management? Any app would not really be aware of the api store?

I love the internet. This is exactly the sort of thing I was going to start looking at tomorrow. Good work!

4 Likes

Very glad you made the official announcement!

Looking forward to seeing what people make with it.

And I hope everyone lists their creations on the POC SAFE App Store! :slight_smile: Glad that we have very complementing projects here

Great work @eblanshey!

5 Likes

Hi five Ephi :rocket:

I wish I fully understood this and had time to dive in but I can see that this is a fantastic development. :slightly_smiling:

7 Likes

I’ll be gone for two weeks, but as soon as I get back, I’ll be spending some nights looking into. Great stuff @eblanshey.

4 Likes

Major props, this took time, effort, and foresight. Great job man! :smile:

5 Likes

You say you’re not but you should be - “in any way” :grinning:

4 Likes

That’s right! Only the API uses it primarily for caching, error messages, and loading indicators. The app can use whatever it wants for data management, but it has access to the Redux store should the dev want to use the SAFE store in more complex ways.

Let me know how it works out for you!

2 Likes

Ouch. Javascript. Cringe. I guess I have no choice but to learn javascript. I been bashing against JS for many many years, and all I see is increase usage of JS. Le sigh.

Thanks for building it though!

1 Like

this is where i got started a few years ago @anon81773980:

Honestly, code academy doesn’t help mainly because, “monkey see, monkey do.” It doesn’t teach you how to think like a programmer.

Luckily enough, I am learning rust. I am pouring all of my time into rust ecosystem.

2 Likes

You’re not going to build browser-based apps with any other language, sorry to say :wink:

1 Like

If you’re figuring out Reactjs these little cheat sheets are sometimes helpful. Egghead.io also has a lot of short videos about React as well. Enjoy…

https://egghead.io/react-redux-cheatsheets

Great work, @eblanshey. I have not yet worked on a React Flux App (just know what it is), but will try to cope up soon and contribute to your project :slightly_smiling: I guess, the launcher APIs in the first version should be sufficient to expand your project to the SAFENetwork, because your approach seems to store the data in the drive of the user.

We are just there, the API will be documented and published sooner. This would be good chance to get the feed back and keep improving the APIs too. Once again, GREAT WORK :slight_smile:

7 Likes

I’d say avoid the confusion of flux and go straight to redux. It’s wayyyy simpler.

(I went flux > altjs > redux; life is better now :smiley: )

2 Likes

:+1: I got a lot confused when I strated with Flux and Reflux, I didn’t spend a lot of time on it though. Thanks a lot for your input, will definitely checkout

Great, I look forward to working together!

I guess, the launcher APIs in the first version should be sufficient to
expand your project to the SAFENetwork, because your approach seems to
store the data in the drive of the user.

That’s the idea!

We are just there, the API will be documented and published sooner. This
would be good chance to get the feed back and keep improving the APIs
too. Once again, GREAT WORK

That’s exactly what I was hoping for! Hopefully this will help things get ironed out faster :slightly_smiling:

3 Likes

I went the Reflux → Redux route. I personally found Reflux faster to grasp, but Redux is definitely more logical and worthwhile to fully understand. It’s also much easier to unit test.

Not to be pedantic, but Redux is technically a Flux implementation, so when you learn Redux, you learn Flux as well. The Redux documentation is the best way to get started IMO. Let me know if you have any questions, I’ll be happy to help.

2 Likes

One comment for how: superb documentation Ephi :slight_smile:

4 Likes