React on Rails - RailsConf 2017 (Phoenix)
0 likes322 views
The document summarizes the evolution of using React within a Rails application. It describes initially using jQuery and Bootstrap for front-end development needs. It then covers adopting React to take advantage of its one-way data flow and component-based approach. Key steps included embracing ES6 syntax, adding Webpack, introducing Jest for testing, and migrating from Sprockets to manage assets. Over time, React Router and Redux were added for routing and state management. The document concludes by noting ongoing work to improve consistency.
![🌵
function mountComponents() {
$('[data-react-component]').toArray().map(node => {
const typeName = $(node).data('react-component');
mountComponent(getRegisteredComponentType(typeName), node);
});
}
function mountComponent(ComponentType, node) {
const props = Immutable.fromJS($(node).data('react-props')).toObject();
const element = <ComponentType {...props} />;
ReactDOM.render(element, node);
}
$(() => {
ready = true;
mountComponents();
});](https://image.slidesharecdn.com/railsconf-reactpresentation-v2-170519064020/85/React-on-Rails-RailsConf-2017-Phoenix-24-320.jpg)
![🌵
function mountComponents() {
$('[data-react-component]').toArray().map(node => {
const typeName = $(node).data('react-component');
mountComponent(getRegisteredComponentType(typeName), node);
});
}
function mountComponent(ComponentType, node) {
const props = Immutable.fromJS($(node).data('react-props')).toObject();
const element = <ComponentType {...props} />;
ReactDOM.render(element, node);
}
$(() => {
ready = true;
mountComponents();
});](https://image.slidesharecdn.com/railsconf-reactpresentation-v2-170519064020/85/React-on-Rails-RailsConf-2017-Phoenix-25-320.jpg)
React on Rails - RailsConf 2017 (Phoenix)
- 2. 🌵
- 3. 🌵 The Product and Market The Front End Development Scene The Evolution The Need for Change THE BEGINNING …
- 4. 🌵
- 5. 🌵
- 6. 🌵 Designed to change the way that you write JavaScript “Write less, do more.” Included by default in Rails 3.1 Why jQuery?
- 7. 🌵 Library of layout and grid components Easy to add via CDN or files Create a reasonably nice UI Smooth interactions Avoid spending hours playing with JS and CSS Why Bootstrap?
- 9. 🌵 MEANWHILE, THE WORLD MOVED ON … Browsers were standardising Mobile internet usage created new demands JavaScript was becoming a First Class Language Test frameworks became mainstream
- 10. 🌵
- 11. 🌵 The Emergence of React The Decision Evolution of the Asset Pipeline Building the First Components THE CHANGE!
- 12. 🌵 One way data flow Components represent the UI in a specific state JSX supported HTML and custom component tags Why is React Different?
- 13. 🌵 render() { return ( <aside className={this.getContainerStyle()} data-automation-id="Application_Navigation" > <div className={styles.top}> {this.renderCultureAmpLogo()} {this.renderEnvLabel()} <img src={Loader} className="loader" /> </div> <div className={styles.middle}> {this.renderNavigationLinks()} </div> <div className={styles.bottom}> {this.renderMasquradeUser()} {this.renderSuperUserAccount()} {this.renderUserAccount()} </div> </aside> ); }
- 14. 🌵 Why is React Different? One way data flow Components represent the UI in a specific state JSX supported HTML and custom component tags Re-renders when state changes Virtual DOM Backed by Facebook Easy to integrate without migrating everything
- 15. 🌵 Most of our users access our app using desktop browsers We can restrict support to modern browsers We hired a React export to help us through the transition SEO was not a concern Why React Suited Us One size DOESN’T fit all teams!
- 16. 🌵 Step 1: Embracing ES6 Block Scoping Immutable Constants Arrow Functions String Interpolation Spread Operator Classes For more: Luke Hoban’s es6features repo
- 17. 🌵
- 18. 🌵 Sprockets Default Rails Asset Pipeline Browser-ready assets Rails assets
- 19. 🌵 Sprockets webpack-bundled assets webpack React components Rails assets Browser-ready assets Adding Webpack - Step 1
- 20. 🌵 Sprockets webpack-bundled assets webpack React components Rails assets Browser-ready assets Adding Webpack - Step 1
- 21. 🌵 Sprockets Browser-ready assets Adding Webpack - Step 2 webpack React components webpack-bundled assets Rails assets
- 22. 🌵 Outputting a React Component in Haml def react_component(name, props = nil) content_tag( :div, nil, data: { react_component: name, react_props: props } ) end
- 23. 🌵 Registering and Rendering React Components function registerComponentType(typeName, ComponentType) { if (registeredComponentTypes.has(typeName)) { throw new Error(`component class "${typeName}" already registered`); } registeredComponentTypes.set(typeName, ComponentType); if (ready) mountComponents(typeName); } ... registerComponentType('NavigationBarApp', NavigationBarApp);
- 24. 🌵 function mountComponents() { $('[data-react-component]').toArray().map(node => { const typeName = $(node).data('react-component'); mountComponent(getRegisteredComponentType(typeName), node); }); } function mountComponent(ComponentType, node) { const props = Immutable.fromJS($(node).data('react-props')).toObject(); const element = <ComponentType {...props} />; ReactDOM.render(element, node); } $(() => { ready = true; mountComponents(); });
- 25. 🌵 function mountComponents() { $('[data-react-component]').toArray().map(node => { const typeName = $(node).data('react-component'); mountComponent(getRegisteredComponentType(typeName), node); }); } function mountComponent(ComponentType, node) { const props = Immutable.fromJS($(node).data('react-props')).toObject(); const element = <ComponentType {...props} />; ReactDOM.render(element, node); } $(() => { ready = true; mountComponents(); });
- 26. 🌵 Adding Jest Tests CSS Modules Losing Sprockets Introducing React Router and Redux Animations Immutable State THE EVOLUTION
- 27. 🌵 Created to work with React Originally mocked everything by default Difficult learning curve and bad developer experience Ultimately leads to cleaner code Jest now allows you to choose and by default does not mock by default Introducing Jest (and Mocking by Default)
- 28. 🌵 Testing Component Output with Shallow Rendering import TestUtils from 'react-addons-test-utils'; export default function shallowRender(element) { const shallowRenderer = TestUtils.createRenderer(); shallowRenderer.render(element); return shallowRenderer.getRenderOutput(); }
- 29. 🌵 Testing Component Output with Shallow Rendering it('should render the icon component', () => { const icon = shallowRender( <ShortcutLink label="label" icon="life-saver" popupMenuItems={items} /> ); const link = ShallowTestUtils.findWithType(icon, 'a'); ... });
- 30. 🌵 Testing Component Output with Snapshot Tests it('renders correctly when it is active', () => { const navigationLink = shallowRender( <NavigationLink linkText="text" path="path" isActive={true} iconType="icon" onClick={onClick} /> ); expect(navigationLink).toMatchSnapshot(); });
- 32. 🌵 .linkItem { color: red; font-size: 3em; text-align: center; &:hover { color: #fff; } } ... import styles from './NavigationBarApp.scss'; ... renderCultureAmpLogo() { return ( <a href="/"> <i className={styles.linkItem} /> </a> ); } SCSS File JavaScript File
- 33. 🌵 webpack Browser-ready assets Rails assets React components Getting rid of Sprockets
- 34. 🌵 Adding Single Page Transitions
- 36. 🌵 JavaScript Routing Library New version matches components to URL sections Old version maintained indefinitely React Router
- 37. 🌵 User clicks Action: URL Changed Action: Check if data required Action: Ajax Request Promise Resolved Action: Data Updated Reducer processes data Components rerender
- 38. 🌵 npm Package Supports Springs Realistic animation curves Interruptible animations Issues: rendering PDFs and tests React Motion
- 39. 🌵 Immutable JS Immutable Objects Most useful: Map, List Methods return a new collection Protects against subtle bugs Highly optimised const { Map } = require('immutable') const map1 = Map({ a: 1, b: 2, c: 3 }) const map2 = map1.set('b', 50) map1.get('b') // 2 map2.get('b') // 50
- 40. 🌵 export const Score = StrongRecord( { favorable: null, unfavorable: null, neutral: null, significant: null, }, 'Score' ); ... SignificantScore.propTypes = { score: React.PropTypes.instanceOf(Score).isRequired, children: React.PropTypes.node, hero: React.PropTypes.bool, }; Using Defined Record Types
- 41. 🌵 New and better patterns for structuring code Functional programming principles How to write cleaner code that is easier to test What have we learned?
- 42. 🌵 Legacy JavaScript is still a thing Massive library of components Little thought for reusability so far Lack of overall consistency in CSS HAPPY EVER AFTER?
- 43. 🌵 EPILOGUE Moving towards a shared component library Experimenting with alternatives like Elm Starting a team to own the front end experience