Don't Rewrite, React! (Codemash 2019)

The gorgeous, beautiful, gynormous, living on outdated technologies legacy application. We've all worked on at least one. We love to hate it and dream of rewriting it. It doesn't take long until we are in a hard sell to our manager to ditch the legacy app and bring in the latest framework hotness. But we overlook what we will be losing...years of code, untold amounts of business logic, depths of the application with git blame dates measured in years. A rewrite can be an undertaking that may never get fully completed but will sink a company.

Enter React.

Sure, React does a great job starting with create-react-app, but what it does extremely well is tying into existing applications so that you can slowly convert legacy apps to the new JavaScript landscape. No rewrite, no stop of feature development and all the benefits of working in ES6.

In this session, we are going to talk about why we instinctively reach for the "rewrite" solution and look at some legacy Rails app that faced distinction. Then we will talk through what React is, what it can do, how it is so beneficial and give you the tools to leave and start converting your app with React today!

Transcript

1. Don’t Rewrite, React!
2. About Me Director of Engineering Sara Gibbons @saragibby
3. career company size start ups / consulting My Career Path @saragibby Don’t Rewrite, React!
4. #1: Ember Sounds Hot, We Need That @saragibby Don’t Rewrite, React! App: Legacy .Net Goal: Rewrite to use modern technologies. Better serve customers. Missed Consideration: Size of codebase, number of use case scenarios, captive audience. Result: Team had to double in size; costs through the roof. New app shelved.
5. #2: Angular Will Fix All That Ails Us @saragibby Don’t Rewrite, React! App: Ruby on Rails Goal: One page app for real time customer reporting. Maintainable code. Missed Consideration: No test coverage. Business logic built into code no one knew the workings of. Result: Out of money out of time.
6. #3: Startup Suicide Mission @saragibby Don’t Rewrite, React! App: Ruby on Rails Goal: Need to convert to new tech stack to handle future features and load for when we hit it big. Missed Consideration: There was absolutely nothing wrong with the app. Result: Burned all time and money on new tech stack, no new funding came in. ☠
7. Beginning of the Rewrite Idea
8. Tech Debt time size GOAL TECH DEBT CODE BASE UNCONTROLLED TECH DEBT MONETARY INVESTMENT CONTROLLED TECH DEBT @saragibby Don’t Rewrite, React!
9. @saragibby Don’t Rewrite, React!
10. Ability To Change time + progress cost of change TECH DEBT ABILITY TO RESPOND TO CHANGE ACTUAL COST OF CHANGE OPTIMAL COST OF CHANGE @saragibby Don’t Rewrite, React!
11. On Board A New Dev @saragibby Don’t Rewrite, React!
12. Houston we have a problem @saragibby Don’t Rewrite, React!
13. Developers = Software engineers want to… • do cool stuff • fix things • solve problems • learn & work with new technologies Software engineers don’t want to… • waste their time • become stagnate @saragibby Don’t Rewrite, React!
14. A Plan Is Hatched @saragibby Don’t Rewrite, React!
15. Do you have the right people in the room for these conversations? @saragibby Don’t Rewrite, React!
16. Dev Team Makeup # developers beginner senior mid @saragibby Don’t Rewrite, React!
17. Confidence : Experience @saragibby Don’t Rewrite, React!
18. Mid-level Confidence Spike experience confidence BEGINNER SENIOR MID ACTUAL SKILL PROJECTED ABILITY @saragibby Don’t Rewrite, React!
19. Groupthink The practice of thinking or making decisions as a group in a way that discourages creativity or individual responsibility. @saragibby Don’t Rewrite, React!
20. Why do we reach for the rewrite?
21. Technical Debt • Managing technical debt on a project is hard. • Inherit debt when you join a project. • Hits tipping point where reversing it seems unobtainable. @saragibby Don’t Rewrite, React!
22. New Technologies • As soon as we choose a technology it is outdated • Seems like each time you Google you find a new/better solution • Experience with new technologies lead to more career opportunities @saragibby Don’t Rewrite, React!
23. Developer Ego • Our industry creates a self-promoting culture • We are constantly evaluating ourselves to others • “Fake it until you make it” @saragibby Don’t Rewrite, React!
24. Developer Laziness • We write programs to save time/steps/energy • Value efficient code • We automate ourselves • We don’t see the point of working on something we consider dumb @saragibby Don’t Rewrite, React!
25. Rewrite vs. Re-engineer • Re-engineering is not sexy • No career opportunity increase • We’ve spent X amount of time working on the same crappy code we wanted to run away from Rewrite! @saragibby Don’t Rewrite, React!
26. Missed Considerations • Large monetary investment in current software • Business depends on software success • Large codebase = huge amounts of business logic • Code written with good intentions • More career opportunities @saragibby Don’t Rewrite, React!
27. When Is Rewrite The Best Option? @saragibby Don’t Rewrite, React! • Majestic monolith in scary old technologies • Business dramatically pivoting • Decoupled frontend in Angular, Ember that isn’t working • What’s JavaScript?
28. Enter React
29. What is React? Flexible JavaScript library for building user interfaces. A template language to bundle HTML & JS, ultimately rendering HTML. View layer. @saragibby Don’t Rewrite, React!
30. What’s So Great About React? • Integrate into applications using JavaScript • Small/Simple components • New hotness • Small learning curve • Large community @saragibby Don’t Rewrite, React!
31. Stack Overflow - 2018 Dev Survey “React is the framework developers say they most want to work with if they do not already.” @saragibby Don’t Rewrite, React!
32. React vs. Angular vs. Ember vs. …. MVC Frameworks UI Framework @saragibby Don’t Rewrite, React!
33. @saragibby Don’t Rewrite, React!
34. @saragibby Don’t Rewrite, React!
35. @saragibby Don’t Rewrite, React!
36. Using an MVC Framework time size MVC FRAMEWORK ORIGINAL CODE BASE MONETARY INVESTMENT MVC DEV BEGINS OMG! ORIGINAL CODE BASE @saragibby Don’t Rewrite, React!
37. Using an MVC Framework Only works when… • Lots of time • Lots of developers • Lots of money • Business is pivoting • Tech stack is outdated & prohibiting growth Essentially a rewrite. @saragibby Don’t Rewrite, React!
38. @saragibby Don’t Rewrite, React!
41. Using React time size ADDING REACT ORIGINAL CODE BASE MONETARY INVESTMENT REACT DEV BEGINS ORIGINAL CODE BASE @saragibby Don’t Rewrite, React!
42. • Incrementally add w/small components • Integrates with current app Using React • Continuous deployment continues • Minimal dev investment to configure project • Some pieces my need more dev time if you don’t have an API endpoint @saragibby Don’t Rewrite, React!
43. Getting Started
44. Setting Up The Foundation @saragibby Don’t Rewrite, React!
45. What Is The Foundation? GOAL: Singular (or minimal #) new asset (JS and CSS) files to include in legacy application to get able to build and include React components. @saragibby Don’t Rewrite, React!
46. Tools — Package Manager A piece of software that lets you manage the dependencies (external code written by you or someone else) that your project needs to work correctly. package.json @saragibby Don’t Rewrite, React!
47. Package Managers @saragibby Don’t Rewrite, React!
48. Tools — Bundler Load all the dependencies of your application into a single bundle, or JavaScript file, that can be executed in the browser. @saragibby Don’t Rewrite, React!
49. Bundlers @saragibby Don’t Rewrite, React!
50. Bundler — webpack @saragibby Don’t Rewrite, React! https://webpack.js.org/
51. Tools — Transpiler A source to source compiler. ES2015 *.js/*.jsx Transpiler ES5 *.js @saragibby Don’t Rewrite, React!
52. Tools — Babel JavaScript transpiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser. Packaged as a node module. .babelrc configuration file @saragibby Don’t Rewrite, React!
53. Getting Ready to React @saragibby Don’t Rewrite, React!
54. Example — comprend.us @saragibby Don’t Rewrite, React!
55. package.json > yarn init https://yarnpkg.com/lang/en/docs/install/ @saragibby Don’t Rewrite, React!
56. package.json @saragibby Don’t Rewrite, React!
57. > yarn add webpack webpack-cli - -dev webpack Install our bundler… Creates yarn.lock @saragibby Don’t Rewrite, React!
58. > touch webpack.config.js webpack config Create webpack config… A JavaScript file that exports an object. Contains settings webpack will use for build. @saragibby Don’t Rewrite, React!
59. webpack.config.js entry: name of top level file, or array of files to include in build output: settings for the build/compile of the output @saragibby Don’t Rewrite, React!
60. webpack Creates dist/bundle.js > yarn webpack @saragibby Don’t Rewrite, React!
61. > yarn add @babel/core babel-loader --dev Install our transpiler… babel-loader: This package allows transpiling JavaScript files using Babel and webpack. babel-core: Babel compiler core. babel @saragibby Don’t Rewrite, React!
62. webpack.config.js rules: settings used when preprocessing files @saragibby Don’t Rewrite, React!
63. .babelrc > yarn add @babel/preset-env @babel/preset-react --dev Install language modules for Babel… babel-preset-react: Babel preset for all React plugins. babel-preset-env: Allows you to use latest JavaScript without micromananaging syntax transforms. @saragibby Don’t Rewrite, React!
64. .babelrc > touch .babelrc Create babel config file… @saragibby Don’t Rewrite, React!
65. > yarn add react react-dom --dev react Add React to our package… react-dom: Adds ability to insert react components into the DOM. react: React core. @saragibby Don’t Rewrite, React!
66. package.json @saragibby Don’t Rewrite, React!
67. Connect to your project Include the bundled (dist/bundle.js) JavaScript file in your webpage. Ready to React! > yarn install > yarn webpack @saragibby Don’t Rewrite, React!
68. First Piece of React @saragibby Don’t Rewrite, React!
69. Where to start? Start with easy & simple components. GOAL: Introduce React to project with minimal development slowdown. • Small • Testable • High reusability @saragibby Don’t Rewrite, React!
70. Basic Elements Basic elements… • Heading • List • Link • Button @saragibby Don’t Rewrite, React!
71. Example — comprend.us @saragibby Don’t Rewrite, React!
72. Simple Example js/src/Welcome.js js/application.js @saragibby Don’t Rewrite, React!
73. Simple Example > yarn webpack @saragibby Don’t Rewrite, React!
74. Creating a Game Plan
75. Components, Components, Components @saragibby Don’t Rewrite, React!
76. Organization @saragibby Don’t Rewrite, React! • Keep your React source separate from your legacy JavaScript • Decide on standard component styling rules • Decide on component organization • Set testing standards and expectations; stick to it!
77. Self Contained Components Start with components you can set data on via properties. @saragibby Don’t Rewrite, React!
78. External Plugins What outside tools are you bringing in? Can a React component replace it? • Modal • Date Picker • Select2 @saragibby Don’t Rewrite, React!
79. Third Party Integrations Any on-demand requests to third parties? • Meetup • Weather • Availability @saragibby Don’t Rewrite, React!
80. New Features - How much will it use JavaScript? • What is the UI impact of the new feature? • Old Architecture vs. New React Structure? Is… technical debt + time to rework later greater than time to develop now in React? @saragibby Don’t Rewrite, React!
81. Long Term Development
82. API • Eventually will need your own data layer. • Start simple. Begin with GET requests. • Change a set of properties to a GET request to backend API. @saragibby Don’t Rewrite, React!
83. UI Kit • Package/Library of standard elements & styles. • Use across multiple projects. Warning! Not recommended until near complete, or have need to duplicate components to different project. @saragibby Don’t Rewrite, React!
84. How To Handle Shared State @saragibby Don’t Rewrite, React! • Redux • React 16.3 - Context API Warning! This could get messy fast! Be deliberate and organized with shared state.
85. Integration Testing @saragibby Don’t Rewrite, React! • Within legacy app • Cypress.io Warning! Don’t mock your API. Don’t fully rely on integration tests; only use these for critical paths.
86. Expect Project Bloat @saragibby Don’t Rewrite, React! original app original app React components React components GOAL REALITY
87. What Did we Learn @saragibby Don’t Rewrite, React! 1. What brings projects to the point of a rewrite 2. Why we reach for the rewrite option; signs of trouble 3. When rewrite is the best option 4. Why React 5. How to get started in your project 6. Putting together a game plan 7. Long term considerations
88. Setting Up For React 1. Package manager (yarn) 2. Bundler (webpack) 3. Transpiler (babel) 4. webpack.config.js 5. .babelrc 6. Add dependencies @saragibby Don’t Rewrite, React!
89. Gameplan 1. Figure out your basic components 2. Small components that don’t require state 3. External technologies/ tools 4. Third Party Integrations 5. New Features Each phase… - Continue to create boilerplate elements - Test all the things! - Stay organized @saragibby Don’t Rewrite, React!
90. Resources Pluralsight React Course Catalog pluralsight.com/paths/react React Docs facebook.github.io/react/ Udemy React Training Videos udemy.com/topic/react/ @saragibby Don’t Rewrite, React!
91. @saragibby saragibby@gmail.com Don’t Rewrite, React!