React & ES6 with Sprockets

Transcript

1. React & ES6! with Sprockets Omote-sando.rb #1 June 4, 2015 by @yachibit
2. me • name: ୩಺ ༞ଠ (Yuta Yachi) • id: yachibit • founder: Omote-sando.rb • company: Grooves Inc. • love: :beers:
4. 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
5. Sprockets • Dependencies management of JS and CSS • Transpile altJS • Minify & compress assets • Inserts an MD5 fingerprint into each filename
6. Cons of Sprockets • Depend on a library version of gem • Not good compatible with JS ecosystem • browserify, babel, power-assert, jade …
7. 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
8. Use React & ES6 with Sprockets
9. Use React & ES6 with Sprockets • 1. Write JSX with ES6. e.g. `frontend/javascripts/` • 2. Transpile with gulp & babel • 3. Place transpiled files in `app/assets/javascrips/ components` • 4. Process with Sprockets
10. gulpfile.coffee
11. Why use react-rails?
12. Why use react-rails? • Server-side rendering • `react_component` helper • easily to use `renderToString` in Rails Views
13. Sample • https://github.com/yachibit-sandbox/ react_with_rails_and_gulp
14. THX :beers:
15. 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-flux • Gulp on Rails: Replacing the Asset Pipeline • http://viget.com/extend/gulp-rails-asset-pipeline
16. 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 browserified 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