{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2013/12/30/community-roundup-13.html","result":{"data":{"markdownRemark":{"html":"

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!

\n

React Touch

\n

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.

\n
\n

Try out the demos!

\n

Introduction to React

\n

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.

\n
\n

JSX: E4X The Good Parts

\n

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.

\n
\n

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.

\n

Historical Context

\n

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.

\n

Continue reading …

\n
\n

React + Socket.io

\n

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!

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

Check it out on GitHub…

\n

cssobjectify

\n

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

\n
/* style.css */\nMyComponent {\n  font-size: 12px;\n  background-color: red;\n}\n\n/* myapp.js */\nvar React = require('react-tools/build/modules/React');\nvar Styles = require('./styles.css');\n\nvar MyComponent = React.createClass({\n  render: function() {\n    return (\n      <div style={Styles.MyComponent}>\n        Hello, world!\n      </div>\n    )\n  }\n});
\n

Check it out on GitHub…

\n

ngReact

\n

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.

\n
\n

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!

\n
\n \n \n \"ngreact\"\n \n \n
\n

Read the full article…

\n
\n

vim-jsx

\n

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

\n
\n

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.

\n

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

\n

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

\n

View on GitHub…

\n
\n

Random Tweet

\n

I may be starting to get annoying with this, but ReactJS is really exciting. I truly feel the virtual DOM is a game changer.

— Eric Florenzano (@ericflo) December 20, 2013
","excerpt":"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…","frontmatter":{"title":"Community Round-up #13","next":null,"prev":null,"author":[{"frontmatter":{"name":"Vjeux","url":"https://twitter.com/vjeux"}}]},"fields":{"date":"December 30, 2013","path":"content/blog/2013-12-30-community-roundup-13.md","slug":"/blog/2013/12/30/community-roundup-13.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"Introducing the New JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Release Candidate: No New Features"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Building Great User Experiences with Concurrent Mode and Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparing for the Future with React Prereleases"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Introducing the New React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 and the Roadmap Update"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"Is React Translated Yet? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: The One With Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}},{"node":{"frontmatter":{"title":"React v16.7: No, This Is Not the One With Hooks"},"fields":{"slug":"/blog/2018/12/19/react-v-16-7.html"}}}]}},"pageContext":{"slug":"/blog/2013/12/30/community-roundup-13.html"}},"staticQueryHashes":[]}