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.

ShehackBoston-2018

61 views

Published on

Shehack boston slide deck .

Published in: Technology
  • Be the first to comment

  • Be the first to like this

ShehackBoston-2018

  1. 1. © 2016 Move, Inc. All rights reserved. Do not copy or distribute. 1 ReactJS - Front End migration story @ Realtor.com Khanh Dao 1/26/2018
  2. 2. © 2016 Move, Inc. All rights reserved. Do not copy or distribute. ● A walk down memory lane ● Technical Debt ● ReactJS to rescue? ● Deep dive and lesson learned ● Q&A Agenda 2
  3. 3. © 2016 Move, Inc. All rights reserved. Do not copy or distribute. Recalling the past... 3
  4. 4. © 2016 Move, Inc. All rights reserved. Do not copy or distribute. ● NodeJS/NPM system ● Custom Bootstrap ● jQuery and plugins ● DustJS ● Bimo ● PubSub pattern Recalling the past…(cont.)
  5. 5. © 2016 Move, Inc. All rights reserved. Do not copy or distribute. ● Large scale UI component and modular support ● When application grow larger, heavy DOM manipulation slow down client rendering and performance. ● Lacking of data management system that should only change the data needed to be change on DOM rendering, state management of data is confusing. Why didn’t it work for us?
  6. 6. © 2016 Move, Inc. All rights reserved. Do not copy or distribute. “React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.” Reference: https://reactjs.org/
  7. 7. © 2016 Move, Inc. All rights reserved. Do not copy or distribute. ● Abstraction of actual HTML DOM ● Store state independent of the DOM and allow compare to the DOM What is a Virtual DOM?
  8. 8. © 2016 Move, Inc. All rights reserved. Do not copy or distribute.
  9. 9. © 2016 Move, Inc. All rights reserved. Do not copy or distribute. Prop: ● Parameter to a function ● React.PropTypes is used for data sanitization States ● Hold the current state inside component ○ getInitialState ○ setState Ref ● Keep reference to component Prop, State, Ref class Button extends React.Component { constructor() { super(); this.state = { count: 0, }; } updateCount() { this.setState((prevState, props) => { return { count: prevState.count + 1 } }); } render() { return ( <button onClick={() => this.updateCount()}> {this.props.name}: {this.state.count} </button>); } } ReactDOM.render(<Button name=”Click me” />, mountNode);
  10. 10. © 2016 Move, Inc. All rights reserved. Do not copy or distribute. https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/the_life_cycle_recap.html React LifeCycle
  11. 11. © 2016 Move, Inc. All rights reserved. Do not copy or distribute. React Component
  12. 12. © 2016 Move, Inc. All rights reserved. Do not copy or distribute. ● Block of text ● Block of HTML ● Mixture of text and HTML ● A container for other components What is a Component…?
  13. 13. © 2016 Move, Inc. All rights reserved. Do not copy or distribute. Why Components are important? ● Accelerate development with reusability so you don’t repeat yourself ● Keep a consistent user experience across pages for the same parts of your pages ● Optimize requirement and design process ● Speed up the transition from design to development
  14. 14. © 2016 Move, Inc. All rights reserved. Do not copy or distribute. ● Presentational components ○ How things look ○ Accept props from container to render HTML block ○ No dependencies with application code ● Container components ○ How things work ○ Behavioral components Patterns of developing component
  15. 15. © 2016 Move, Inc. All rights reserved. Do not copy or distribute. - One way directional data flow is definitely produce more stable and predictable code - Stable in-house eco system for share and reuse - Unit test to ensure code quality. - We’ve developed over 30 presentational UI components and over 8 behavioral components that share across multiple teams - Faster UX/UI cycle as team can adopt a change in component more quickly through seamless API interface, while expecting less bugs React Benefits
  16. 16. THANK YOU© 2016 Move, Inc. All rights reserved. Do not copy or distribute. 16 khanh.dao@move.com https://github.com/lelea2

×