Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React.rb - all the power of react.js with all the joy of ruby


Published on

Slides for OCRuby Jan 28 2016 meeting

Published in: Software
  • Be the first to comment

React.rb - all the power of react.js with all the joy of ruby

  5. 5. REACT JS Open sourced in 2014 the "It" framework of 2015 - caught up to be top 2 framework in 2 years Huge adoption and mindshare, community Other frameworks adopted React features in response (ember wrote a virtual DOM due to a demo)
  6. 6. REACT SUMMARY React isn't an MVC framework. React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time.
  7. 7. WHY REACT? Component based - reusable tree of components Declarative - easy to understand Fast - via Virtual DOM Small - library, small API Unidirectional data flow Multiple render destinations, web, mobile, text Testable Isomorphic/Universal Javascript, domain logic, server/client rendered views Server rendered - UX performance, SEO Simple
  8. 8. IN SHORT A typical write up of a React adoption react/ In the end, React's biggest benefits are summed up with: Declarative → Predictable → Confidence
  9. 9. WHO'S USING REACT? Everyone!
  10. 10. WHO USES REACT Facebook Instagram HipChat Netflix Khan Academy Twitter - Fabric HootSuite new version of Yahoo mail to be in react
  11. 11. CONTROVERSIAL JSX var CommentList = React.createClass({ render: function() { return ( <div className="commentList"> Hello, world! I am a CommentList. </div> ); } }); JSX, "HTML" in your javascript Actually good, Many mistake separation of technologies with separation of concerns Way more concise than pure JS way of writing Most people rave about it after they get used to it
  12. 12. PRETTY AWESOME Maintainability Simplicity, dedicated focus of React, declarative Reuseable testable components Unidirectional data flow simplfies code, DRY's data flow Performance, Virtual DOM minimized costly DOM changes Universal Javascript, less code, less duplication
  13. 13. BUT Javascript! Javascript!! Additional learning curve for new backends for full benefits, esp. for Rubyists Javascript fatigue – too many choices, too much change 48d4011b6fc4#.g5zjszug3
  14. 14. REACT RESOURCES Official page Guide to the overwhelming ecosystem Steps to learn Best practices summarized For the jQuery mind application-development know jquery-programmer-background
  15. 15. UNIVERSAL (ISOMORPHIC) JAVASCRIPT Was isomorphic - Universal defined Same code for front and backend One language, no context switches Javascript only, unless you use Opal 4761051b7ae9#.rxrgqe5wb
  16. 16. UNIVERSAL RUBY? enabled by Opal (Ruby to JS transpiler and runtime) single language - Ruby on both ends shared views - Erb, Haml, and of course..
  17. 17. REACT.RB
  18. 18. WHAT IS REACT.RB Opal wrapper to React.js Best of both worlds? Leverages the Ruby based backend ecosystem you already know- esp. Rails Leverages full React.js ecosystem, but in Ruby
  19. 19. BRIEF OVERVIEW Too much to cover (much to React.js so much correspondingly for React.rb) Overview now, more details in subsequent talks All Ruby DSL Rails integration Misc
  20. 20. QUICK CODE COMPARISON Instead of this var HelloMessage = React.createClass({ propTypes: { name: React.PropTypes.string } render: function() { return <div>Hello {}</div>; } }); Write this class HelloMessage < React::Component::Base param :visitor, type: String def render div do "Hello #{}" end end end
  21. 21. CREATING A COMPONENT # can inherit class MyComponent < React::Component::Base def render # whatever end end # or include Mixin class MyComponent include React::Component def render # whatever end end
  22. 22. EVERY COMPONENT HAS A RENDER METHOD class MyComponent < React::Component::Base def render div.big_div do h1 { 'Eye Catching Headline'} p { 'Meaningful paragraph' } end end end
  23. 23. RUBY DSL INSTEAD OF JSX Resembles haml/slim/markaby haml type classes, maps _ to camel case attributes via hash Just Ruby more powerful than JSX which can't express iteration for example less jarring than than mix of languages and syntaxes
  24. 24. RUBY DSL PATTERN all HTML elements have a component that matches it's name note that p is para since Ruby/Opal has it's own p() method tag_name(attribute1 => value1, attribute2 => value2 ...) do ...nested tags... end
  25. 25. JARRING JSX import React, { Component } from 'react'; import Select from './Select'; import _ from 'lodash'; export default class App extends Component { render() { return ( <div className="container"> <ol> {_.times(3, i => <li key={i}> <Select onSelect={this.onSelect}> <option value="1">bacon</option> <option value="2">cheez</option> </Select> </li> )} </ol> </div> ); } }
  26. 26. PARAMS called props in react.js, params picked to be more familar to Rails programmers They are the "parameters" passed into a component Initial config values Immmutable Can be declared, can be typed
  27. 27. DECLARING PARAMS class IndividualParams < React::Component::Base param :items, type: [String] param :an_optional_param, default: "hello", type: String, allow_nil: true # ... end class ParamsBlock < React::Component::Base params do requires :foo requires :lorem, type: Lorem optional :bar, type: String end # ... end
  28. 28. ACCESSING PARAMS params.items.each do |item| # ... end
  29. 29. STATE same as react.js state can change values when changed, component re renders
  30. 30. DEFINING INITIAL STATE VALUES Javascript var CommentBox = React.createClass({ getInitialState: function() { return {data: []}; }, ... Opal class CommentBox include React::Component define_state data: [] # The form define_state :data will initialize to nil # rest of component end
  31. 31. ACCESSING # reader! [1, 2, 3] # writer, triggers rerender
  32. 32. REACT LIFECYCLE METHODS React Life Cycle Method Ruby Macro Name Called When componentWillMount before_mount Invoked once, both on the client and server, immediately before the initial rendering occurs componentDidMount after_mount Invoked once, only on the client. immediately after the initial rendering occurs. componentWillReceiveProps before_receive_props Invoked when a component is receiving new props. This method is not called for the initial render. componentWillUpdate before_update Invoked immediately before rendering when new props or state are being received. This method is not called for the initial render. componentDidUpdate after_update Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render. componentWillUnmount before_unmount Invoked immediately before a component is unmounted from the DOM. Perform any necessary cleanup in this method.
  33. 33. GETTING STARTED No setup required - opal-playground Rails, can setup manual, new Rails generator gem to be integrated into react.rb in the future Hello World
  34. 34. WHY REACT.RB > REACT JS One language, more so than React.js/JSX Ruby > Javascript, DSL cleaner No , tool churn, you get Ruby tools Build on top of rails JS fatigue
  35. 35. REACT.RB REFERENCES Github project: Project Page: Wiki (eventually probably all on project page): Gitter (the place to ask): Stack Overflow: My blog, lots of Opal, will have lots of React
  36. 36. RAILS INTEGRATION Opal integrations via opal-rails render_component in controler gives serverside rendering Blog post on geting started Could be it's own talk and-ruby.html
  37. 37. WEBPACK HOOK INS First class Javascript Full power of npm available Could be it's own talk
  38. 38. SOME DEMOS react.rb chat tutorial: live: partial dbmon port current Rails app
  39. 39. THAT'S IT FOR NOW lots of material/topics to cover follow up talks Blog post