Community Round-up #13

Happy holidays! This blog post is a little-late Christmas present for all the React users. Hopefully it will inspire you to write awesome web apps in 2014!

React Touch

Pete Hunt wrote three demos showing that React can be used to run 60fps native-like experiences on mobile web. A frosted glass effect, an image gallery with 3d animations and an infinite scroll view.

Try out the demos!

Introduction to React

Stoyan Stefanov talked at Joe Dev On Tech about React. He goes over all the features of the library and ends with a concrete example.

JSX: E4X The Good Parts

JSX is often compared to the now defunct E4X, Vjeux went over all the E4X features and explained how JSX is different and hopefully doesn’t repeat the same mistakes.

E4X (ECMAScript for XML) is a JavaScript syntax extension and a runtime to manipulate XML. It was promoted by Mozilla but failed to become mainstream and is now deprecated. JSX was inspired by E4X. In this article, I’m going to go over all the features of E4X and explain the design decisions behind JSX.

Historical Context

E4X has been created in 2002 by John Schneider. This was the golden age of XML where it was being used for everything: data, configuration files, code, interfaces (DOM) … E4X was first implemented inside of Rhino, a JavaScript implementation from Mozilla written in Java.

Continue reading …

React + Socket.io

Geert Pasteels made a small experiment with Socket.io. He wrote a very small mixin that synchronizes React state with the server. Just include this mixin to your React component and it is now live!

changeHandler: function (data) {
  if (!_.isEqual(data.state, this.state) && this.path === data.path) {
    this.setState(data.state);
  }
},
componentDidMount: function (root) {
  this.path = utils.nodePath(root);
  socket.on('component-change', this.changeHandler);
},
componentWillUpdate: function (props, state) {
  socket.emit('component-change', { path: this.path, state: state });
},
componentWillUnmount: function () {
  socket.removeListener('component-change', this.change);
}

Check it out on GitHub…

cssobjectify

Andrey Popp implemented a source transform that takes a CSS file and converts it to JSON. This integrates pretty nicely with React.

/* style.css */
MyComponent {
  font-size: 12px;
  background-color: red;
}

/* myapp.js */
var React = require('react-tools/build/modules/React');
var Styles = require('./styles.css');

var MyComponent = React.createClass({
  render: function() {
    return (
      <div style={Styles.MyComponent}>
        Hello, world!
      </div>
    )
  }
});

Check it out on GitHub…

ngReact

David Chang working at HasOffer wanted to speed up his Angular app and replaced Angular primitives by React at different layers. When using React naively it is 67% faster, but when combining it with angular’s transclusion it is 450% slower.

Rendering this takes 803ms for 10 iterations, hovering around 35 and 55ms for each data reload (that’s 67% faster). You’ll notice that the first load takes a little longer than successive loads, and the second load REALLY struggles — here, it’s 433ms, which is more than half of the total time!

Read the full article…

vim-jsx

Max Wang made a vim syntax highlighting and indentation plugin for vim.

Syntax highlighting and indenting for JSX. JSX is a JavaScript syntax transformer which translates inline XML document fragments into JavaScript objects. It was developed by Facebook alongside React.

This bundle requires pangloss’s vim-javascript syntax highlighting.

Vim support for inline XML in JS is remarkably similar to the same for PHP.

View on GitHub…

Random Tweet