Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React & Go Single Page Apps

React & Go Single Page Apps

なぜかUIデザイナーが語る、React.jsとGo言語を使ったGunosyのSPA例。

Tsuyoshi Higuchi

May 27, 2015
Tweet

More Decks by Tsuyoshi Higuchi

Other Decks in Programming

Transcript

  1. Html:jade doctype html html head meta(charset="utf-8") link(type="text/css", rel="stylesheet", media="all", href="/view.css")

    script. window.PRELOAD_DATA = {{.PreloadData}} ; title block html_title | #{page.siteName} body(role="document") #content.wrap script(type="text/javascript", src="/client.js") Goがjsonをレンダリングする
  2. Javascript:React var Component = React.createClass({ getInitialState : function(){ var data

    = window.PRELOAD_DATA.hoge; return { hogeTitle : data.title, hogeDescription : data.description } }; }); Goがレンダリングしたjsonを受け取る
  3. WebAPI PRELOAD DATA ServerSideRender View Get JSON Action Dispatcher Store

    View Intaraction Action Ajax InfiniteScrollͳͲ௥ՃͰσʔλΛऔಘ͢Δࡍ͸Action͔ΒAjaxͰऔಘ … Golang … React.js … Flux