DailyJS

DailyJS

The JavaScript blog.


Tagfacebook
Featured

facebook reactive

Fluxxor for React

Posted on .

Flux

Fluxxor (GitHub: BinaryMuse / fluxxor, License: MIT, Bower: fluxxor) by Brandon Tilley is a library designed to work with Facebook's React. It provides an application architecture that's based around a dispatcher, stores, and views.

Instantiating a Flux application looks like this:

var flux = new Fluxxor.Flux(stores, actions);  

The stores object contains classes that are created with Fluxxor.createStore, and the actions object is a set of methods that invoke that dispatcher:

var actions = {  
  addTodo: function(text) {
    this.dispatch("ADD_TODO", {text: text});
  },

  toggleTodo: function(todo) {
    this.dispatch("TOGGLE_TODO", {todo: todo});
  },

  clearTodos: function() {
    this.dispatch("CLEAR_TODOS");
  }
};

These examples were taken from the Fluxxor quick start guide, which explains how to write a to-do list with Flux.

Fluxxor provides more tools as well. Fluxxor.FluxMixin can be used to make Flux instances available to React components, and Fluxxor.StoreWatchMixin allows you to watch for change events on Flux stores.

You can use Fluxxor outside of React, and it's installable with Bower as fluxxor. Brandon, the author of the library, pointed out that Fluxxor is his personal implementation of the Flux pattern which was created by Jing Chen at Facebook.

Featured

frameworks ui facebook reactive

A Look at Facebook's React

Posted on .

React

React (GitHub: facebook / react, License: Apache 2.0, npm: react-tools, bower: react) from Facebook and Instagram is a UI framework. It's maintained by Paul O'Shannessy, and Paul and Christopher Chedeau both post to the React blog regularly about new features and community news.

React is meant to be a declarative framework, so it focuses on transforming data into interface components. Data can come from servers and user input -- there's no specific transport layer support, instead other libraries like jQuery are relied on.

The first thing you'll notice about React is it mixes HTML and JavaScript:

var HelloMessage = React.createClass({  
  render: function() {
    return <div>{'Hello ' + this.props.name}</div>;
  }
});

React.renderComponent(<HelloMessage name="John" />, mountNode);  

What's going on? Well, this snippet is intended to be placed inside a script tag, with the type attribute set to text/jsx. JSX is React's XML-based template language. It doesn't hit the DOM until it needs to: instead a mock DOM, or faked browser is used to maintain an in-memory representation of your templates. Be aware that this comes with caveats: everything is escaped by default, so HTML entities can easily be double escaped.

You don't need to use JSX, however: React.DOM.div({}, 'Hello ' + this.props.name) is equivalent to the previous example.

Applications made with React are based on components. Components are created with React.createClass method (not React.createComponent). Components have a "state" and "props": the state is private, and mutable. If the state is updated, then the component will be re-rendered: this is known as reactive state, and is how React models reactive data flows. React doesn't re-render the entire component, it tries to only render what changed:

render() methods return a description of the DOM, and React can diff this description with the in-memory representation to compute the fastest way to update the browser.

React plays well with Node-based build systems: there's a Grunt task for building JSX, in case you don't want to render everything in the browser. The documentation has a section on React's tooling integration.

The documentation for React is straightforward and easy to follow: there's a tutorial that introduces the main aspects of the framework. It's difficult to say how it compares to other frameworks like AngularJS, but I like the distinction between mutable and immutable state and properties for modeling reactive data flows.

Featured

node modules scraping social facebook

Node Roundup: hotcode, fbgraph, browser

Posted on .

You can send your node modules and articles in for review through our [contact form](/contact.html) or [@dailyjs](http://twitter.com/dailyjs).

hotcode

hotcode (License: MIT, npm: hotcode) by Mathias Pettersson is a small Express app that watches for changes on a given path, then reloads an associated app when files
change.

To use it, follow the instructions in the project's README file. When
hotcode is run it'll print out a link to some JavaScript
(it should be http://127.0.0.1:8080/static/injected.js) -- this will need to be added to your project to get automatic reloading in
the browser.

Projects can be configured in ~/.hotcode so the path
doesn't need to be entered each time hotcode is started.
This can be set per-domain as well.

One of the interesting things about hotcode is it can be run against
practically any app in any language. If you're sick of having to restart
your app and refresh the browser every time you make a change, then
you're going to love this.

fbgraph

fbgraph (GitHub: criso / fbgraph, License: MIT, npm:
fbgraph) by Cristiano Oliveira provides consistent access to the Facebook graph API. According to the author:

All calls will return json. Facebook sometimes decides to just return a string or true or redirects directly to an image.

Given suitable configuration options, people can be authorised using
getOauthUrl:

var graph = require('fbgraph')
  , authUrl = graph.getOauthUrl({
      'client_id':    conf.client_id
    , 'redirect_uri': conf.redirect_uri
  });

Once the Facebook dialog has been displayed,
graph.authorize is called to complete the process and get
the access token.

API calls are made with graph.get or
graph.post, so most of the API is oriented around HTTP
methods:

graph.get('zuck', function(err, res) {
  console.log(res); // { id: '4', name: 'Mark Zuckerberg'... }
});

graph.post(userId + '/feed', wallPost, function(err, res) {
  // returns the post id
  console.log(res); // { id: xxxxx}
});

This is a clean, well-documented, and well-tested Facebook library,
which is surprisingly refreshing.

browser

browser (License: MIT, npm: browser) by Shin Suzuki is an event-based library for browsing and scraping URLs, whilst maintaining cookies. Requests are built up using
the library's object, and then triggered with .run():

var $b = require('browser');
$b.browse('https://example.com/');
$b.run();

Building up a sequence of events is possible with the after
method:

var $b = require('browser');

$b.browse('https://example.com/sign-in');

$b.browse('https://example.com/account')
  .after(); // browse after previously registered function

$b.run();

Event callbacks can also be registered:

$b.on('end', function(err, res) {
});

Now load up jsdom and you'll be able
to scrape faster than you can say "deep-linking lawsuit"!