React & ES6 with Sprockets

by yachibit

Slide 1

Slide 1 text

React & ES6! with Sprockets Omote-sando.rb #1 June 4, 2015 by @yachibit

Slide 2

Slide 2 text

me • name: ୩಺ ༞ଠ (Yuta Yachi) • id: yachibit • founder: Omote-sando.rb • company: Grooves Inc. • love: :beers:

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Today’s Goal • Want to use ES6 !! • Want to use browserify !!!! • Server-side rendering for SEO • Manage JS libraries with npm & gulp • Keep features of Assets-pipeline

Slide 5

Slide 5 text

Sprockets • Dependencies management of JS and CSS • Transpile altJS • Minify & compress assets • Inserts an MD5 ﬁngerprint into each ﬁlename

Slide 6

Slide 6 text

Cons of Sprockets • Depend on a library version of gem • Not good compatible with JS ecosystem • browserify, babel, power-assert, jade …

Slide 7

Slide 7 text

Pros of Sprockets • Assets are served as separate filesʢin developmentʣ • Responds with a new compiled file If files have changed • Invalidate caches by altering MD5 fingerprint

Slide 8

Slide 8 text

Use React & ES6 with Sprockets

Slide 9

Slide 9 text

Use React & ES6 with Sprockets • 1. Write JSX with ES6. e.g. `frontend/javascripts/` • 2. Transpile with gulp & babel • 3. Place transpiled ﬁles in `app/assets/javascrips/ components` • 4. Process with Sprockets

Slide 10

Slide 10 text

gulpﬁle.coffee

Slide 11

Slide 11 text

Why use react-rails?

Slide 12

Slide 12 text

Why use react-rails? • Server-side rendering • `react_component` helper • easily to use `renderToString` in Rails Views

Slide 13

Slide 13 text

Sample • https://github.com/yachibit-sandbox/ react_with_rails_and_gulp

Slide 14

Slide 14 text

THX :beers:

Slide 15

Slide 15 text

Refs • RailsGuides - The Asset Pipeline • http://guides.rubyonrails.org/asset_pipeline.html • Sprockets࠶ߟ ϞμϯͳJSͷΤίγεςϜͱRailsͷΑΓྑ͍ؔ܎Λ୳͢ • http://qiita.com/joker1007/items/9068e223744b3ac8c6dd • RailsͰࡢࠓͷJSͷΤίγεςϜ(gulpͱ͔ͦ͏͍͏ͷ)Λ࢖͏ʹ͋ͨͬͯ͜ͷΑ͏ʹͨ͠ͱ͍͏ϝϞ • http://qiita.com/oreshinya/items/3d025dde2edc56622cc4 • 3 ways to integrate Ruby on Rails + React + Flux • http://www.openmindedinnovations.com/blogs/3-ways-to-integrate-ruby-on-rails-react-ﬂux • Gulp on Rails: Replacing the Asset Pipeline • http://viget.com/extend/gulp-rails-asset-pipeline

Slide 16

Slide 16 text

Refs • Gulp - a modern approach to asset pipeline for Rails developers • http://blog.arkency.com/2015/03/gulp-modern-approach-to-asset-pipeline-for-rails-developers • Rails, React, Browserify - Packaging your React components • https://medium.com/@olance/rails-react-browserify-e315001d5974 • Can't render browseriﬁed JS on server side #181 • https://github.com/reactjs/react-rails/issues/18 • ͳͥ๻͸(2015೥ͷϑϩϯτΤϯυͰɺmakeͰ͸ͳ͘)gulpΛબͿͷ͔ • http://mizchi.hatenablog.com/entry/2015/05/11/182118 • npm Ͱґଘ΋λεΫ΋ҰݩԽ͢Δ • http://qiita.com/Jxck_/items/efaff21b977ddc782971