TypeScriptとJSX

naoyaサンのスライド見てたら思い出した

Cycle.js、あらためてトップページの概念図とか見るだけで惚れ惚れするが、当時今ぐらいTypeScriptが広く普及していたらもっと流行ったんじゃないかと思ったり。

現同僚いわく「思想は良さそうだけど第一印象とっつきづらいと思った。JSXでHTMLライクに書けますみたいなサンプルがないときつそう」とのこと、当時はJSXも「こんなん流行るわけないやろｗ」みたいな空気が5割ぐらい流れてた気がするのでたしかに。TypeScriptとJSX。

code:main.js

import {run} from '@cycle/run'

import {div, label, input, hr, h1, makeDOMDriver} from '@cycle/dom'

function main(sources) {

const input$ = sources.DOM.select('.field').events('input')

const name$ = input$.map(ev => ev.target.value).startWith('')

const vdom$ = name$.map(name =>

div([

label('Name:'),

input('.field', {attrs: {type: 'text'}}),

hr(),

h1('Hello ' + name),

])

)

return { DOM: vdom$ }

}

run(main, { DOM: makeDOMDriver('#app-container') })

Cycle.jsの一発目の、つまりアイキャッチ代わりのコードサンプルがこれだからな…これは流行らんだろ。DOMの部分、逆に今見ると「なんでこれでイケると思った?」って見えてくる...w

一応、JSXもつかえます(補足)

スポンサーにHerpいてさすが、Haskellのバックエンド、Cycle.jsのフロントエンドってどんな桃源郷