cybai (Haku) CYBAI

フロントエンドを楽にするために

Qiitaを支えたい技術 at 時雨祭

About

HN: mizchi
Qiitaの方からきました(入社半年たったらしい)
Reactオジサンはそろそろ飽きてきた
Angularに興味が無いのでこっちにきた

BigPipe and React
React components
Share state
Server Side rendering
Modularization of components
Re-initialization
- checksum
- event adding
- html bloat
JSX

Follow instructions on Mozilla Wiki or TL;DR:

$ hg clone http://hg.mozilla.org/mozilla-central spidermonkey

Or use git from the GitHub mirror.

The following command avoid clonning the whole repo, but the last commit reference and the HEAD branch

Reactjs conf 2015 Notes

react native announced
- Allows you to use react style javascript to target native ios and android, native views, live reloading
- intro pt1
- intro pt2
- facebook groups app uses react native with graphql and relay
realtime page tweaking
- rethink best practices and workflows
inmutability is a good idea

序文

筆者はもともとC/Pascal/Adaを書いていた
Standard MLを書くようになり、手続き型のデータ構造を(SMLに)変換してみた
- 幾つかのデータ構造は、簡単に変換でき、より簡潔にもなった
- ただし、必ずしも全てのデータ構造が簡単に変換できる訳ではなかった
  - 破壊的な更新が使いたい！ (けどStandard MLにはないのでどうすれば...)
  - 文献調査したけど、ほとんど情報が見つからなかった
自分で研究を始めた

Japanese translation from the original post in English.

原文: [Getting Literal With ES6 Template Strings by Addy Osmani] (http://updates.html5rocks.com/2015/01/ES6-Template-Strings)

#ES6のテンプレート文字列

従来のJavaScriptの文字列処理はPythonやRubyに比べて非力でしたが、ES6のテンプレート文字列はこの状況を根本的に覆します。（テンプレート文字列はChrome 41からサポートされています。）それによりプログラマはドメイン固有言語（domain-specific language、DSL）を定義する事が可能になります。以下はテンプレート文字列が提供する機能です。

文字列の挿入
式を文字列に埋め込む

	#!/bin/bash

	# Note your /usr/local will need to be writable by the user running it,
	# alternatively run it with `sudo`

	hasxz=$(which xzcat)
	os=$(uname \| tr '[A-Z]' '[a-z]')
	arch=$(uname -m)
	targetdir="/usr/local/"
	domain=nodejs.org

	import Component from './component';

	class Widget extends Component {
	init(ctrl) {
	var props = this.props;

	ctrl.counter = props.initialValue;

	ctrl.increment = function() {
	ctrl.counter++;

	var webpack = require('webpack');
	var HtmlWebpackPlugin = require('html-webpack-plugin');
	var path = require('path');
	var folders = {
	APP: path.resolve(__dirname, '../app'),
	BUILD: path.resolve(__dirname, '../build'),
	BOWER: path.resolve(__dirname, '../bower_components'),
	NPM: path.resolve(__dirname, '../node_modules')
	};

	import { Component } from "React";

	export var Enhance = ComposedComponent => class extends Component {
	constructor() {
	this.state = { data: null };
	}
	componentDidMount() {
	this.setState({ data: 'Hello' });
	}
	render() {