Daily Javascript

Conflux (GitHub: ben-ng/conflux, License: MIT, npm: conflux)

Conflux is Redux implantation for distributed systems. As the developer says: Distributed systems are hard. Conflux tries to make distributed systems more understandable. It aims to do what Redux did for Flux, and what Raft did for Paxos. Natrually, it does this by composing the two ideas.

So what does it really do?

You can build serverless applications. Which does not mean “serverless” as in it uses AWS Lambda. Serverless as in there is no central server, like how BitTorrent works just a cluster of nodes that coordinate with each other. The developer let’s know that he is working an a few example applications to help you get going.

A quick example provided by the developer:

var node = conflux({
    id: uuid.v4(),
    // how many nodes are in the cluster?
    clusterSize: 5,
    // how should nodes communicate?
    channel: {
        name: 'redis'
    },
    // define your action creators
    methods: {
        append(thing){
            return thing;
        }
    },
    // define your reducer
    reduce(state, action) {
        state = state == null ? [] : state;
        return state.concat(action);
    },
});

// subscribe to changes
node.subscribe(() => {
    console.log(nodeB.getState().log.join(' '));
});

// perform an action
node.perform('append', ['foo']);

When you have worked with Redux before Conflux should feel very familiar. You subscribe() to a Conflux instance, and call getState() inside to get the current state. Instead of dispatching actions directly, you perform() methods that dispatch() them. The methods are declared when you construct a Conflux instance which is the equivalent to how Action Creators work in Redux.

MarsDB (GitHub: c58/marsdb, License: MIT, npm: mardb)

MarsDB is a very lightweight client-side database. It is inspired by a Meteor’s minimongo matching/modifying implementation. The library has a Promise based interface and can be backed with any storage implementation such as:

• In-memory storage (built-in default)
• LocalForage storage – fastest in-browser storage (InexedDB, WebSQL and fallback to localStorage)
• LocalStorage storage – not recommended, better prefer LocalForage
• LevelUP storage – lightweight server-less Node.js storage
• MongoDB wrapper – use MarsDB for comfortable work with MongoDB

Besides all of this MarsDB supports observable cursors which is very nice addition to the toolbelt. The database supports any kind of find/update/remove operations that Meteor’s minimongo would also support. When you need a reference on how theses queries work go to the Meteor docs for supported query/modifier operations.

Let’s first create a collection of posts.

import Collection from 'marsdb';
import LocalStorageManager from 'marsdb-localstorage';

// Setup different id generator and storage managers
// Default storage is in-memory
Collection.defaultStorageManager(LocalStorageManager);
Collection.defaultIdGenerator(() => {
  return {
    value: Math.random(),
    seed: 0,
  };
});

const posts = new Collection('posts');

Now we can populate it with some data:

// To insert one
posts.insert({text: 'MarsDB is awesome'}).then(docId => {
  // Invoked after persisting document
});

// To insert a bulk
posts.insertAll(
  {text: 'MarsDB'},
  {text: 'is'},
  {text: 'awesome'}
).then(docsIds => {
    console.log('--->>', docsIds);
});

And we can retrieve one of the saved item like so:

posts.find({text: 'MarsDB'})
  .sort(['createdAt'])
  .then(docs => {
      console.log('-->>', docs);
  });

For more in depth examples and documentation check the README file.

A small reminder to challenge yourself. This week we will be focusing on transferring knowledge using the workshopper framework head over to the challenge page for more details.

Preact (GitHub: developit/preact, License: MIT, npm: preact)

Preact is an attempt to recreate the core value proposition of React using as little code as possible. It is far to say that the developers succeeded in this, since it’s only around 3kb when minified and gzipped.

The library retains a large amount of compatibility with React. Note that only the stateless functional components and ES6 Classes interface are available for use.

It already has a few add-ons such as a router, an universal renderer and a compatibility layer for other React modules.

A full list of demo’s, add-ons and libraries can be found on the Github Page.

Let’s take a look on how we work with it.

// import the stuff we want to use
import { h, render, Component } from 'preact';

// Tell Babel to transform JSX into h() calls:
/** @jsx h */

class App extends Component {
    render() {
        return <h1>My Super Awesome App</h1>;
    }
}

// render an instance of App into <body>:
render(<App />, document.body);

As you can see it’s very similar to React but only 3kb. It comes with the same set of lifecycle events:

• componentWillMount
• componentDidMount
• componentWillUnmount
• componentDidUnmount
• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• componentDidUpdate

For more examples check the README or the Github Page where you can find some amazing examples posted by the developer.

Pressure (GitHub: yamartino/pressure, License: MIT, npm: pressure)

Pressure is a library which makes dealing with Apple’s “Force Touch” and “3D Touch” simpler. At the time of writing this update the support for Force Touch was:

• iPhone 6s
• iPhone 6s Plus
• MacBook 2015
  • 13” MacBook Pro 2015
  • 15” MacBook Pro 2015
• Magic Trackpad 2

And sadly it only works inside Safari. The developer has let us know that when there are more devices or browsers to support, that it will also be supported by Pressure.

Future devices and browser that support force will be added when they come out

The library is constructed in a way that Force Touch for new Macs and 3D Touch for the new iPhone 6s and 6s Plus are all bundled under one roof with a simple API. By example:

var Pressure = require('pressure');

Pressure.set('#myAwesomeElement', {
    change: (force) => {
        this.innerHTML = force;
    }
});

What this will do is render the “amount” of pressure put on #myAwesomeElement. The rest of the API is just as straight forward. Use end to know when the user has stopped putting pressure on your awesome element. startDeepPress to know if the user is applying deep pressure and endDeepPress to know when it stopped. And as a curtesy there is unsupported which tell’s you if Force Touch is available.

If you want to know more head over to the Github Page and check the documentation. The developer also implemented a very nice demo on that same page.

Since it’s the first day of the week I would like to remind you to challenge yourself this week. This weeks challenge is to create a workshop about a topic you care about or want to research. The only way you can be sure of knowing something is when you can teach it to somebody else.

Head over to the Workshopper Challenge section for more details.

As first point of today here are last weeks results. Sadly still not a lot of submissions. The submissions I did receive are amazing great work guys. I am curious about the reason behind the low number of submissions, is this because the challenges are to hard? Or because they are not challenging enough? Maybe you guys don’t like the topics. I do not know. Please tell me if you have any ideas on how I can get you guys to work on challenging problems and you will have fun.

For this weeks challenge I had a fun idea, but sadly I did not find the time this week to prepare it. So that will have to wait for some other week. This week we are gonna think about how to transfer knowledge.

Pick a topic which you feel comfortable with or something you find interesting and create a workshop for that topic. You will be using the Workshopper framework which I mentioned this week. For more detail on the challenge go to the challenge page.