Don't Rewrite, React! (Beer City Code)

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!
3. About Me Director of Engineering Sara Gibbons @saragibby
4. career company size start ups / consulting My Career Path @saragibby Don’t Rewrite, React!
5. #1: Ember Sounds Hot, We Need That @saragibby Don’t Rewrite, React! Legacy .Net App Modern One Page Hotness
6. #1: Ember Sounds Hot, We Need That @saragibby Don’t Rewrite, React! Where it failed… • size of codebase • number of use case scenarios • captive audience Result… • team had to doubled in size • costs through the roof • new app shelved
7. #2: Angular Will Fix All That Ails Us @saragibby Don’t Rewrite, React! Ruby on Rails Angular is Ahhh-mazing!
8. #2: Angular Will Fix All That Ails Us @saragibby Don’t Rewrite, React! Where it failed… • no test coverage • business logic built into code no one knew the workings of Result… • out of money • out of time
9. #3: Startup Suicide Mission @saragibby Don’t Rewrite, React! ☠ Ruby on Rails OMG! We’re the next Facebook
10. #3: Startup Suicide Mission @saragibby Don’t Rewrite, React! Where it failed… • there was absolutely nothing wrong with the app Result… • burned all time and money on new tech stack • no new funding came in • closed doors ☠
11. Beginning of the Rewrite Idea
12. Tech Debt time size GOAL TECH DEBT CODE BASE UNCONTROLLED TECH DEBT MONETARY INVESTMENT CONTROLLED TECH DEBT @saragibby Don’t Rewrite, React!
13. @saragibby Don’t Rewrite, React!
14. 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!
15. On Board A New Dev @saragibby Don’t Rewrite, React!
16. Houston we have a problem @saragibby Don’t Rewrite, React!
17. 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!
18. A Plan Is Hatched @saragibby Don’t Rewrite, React!
19. Dev Team Makeup # developers beginner senior mid @saragibby Don’t Rewrite, React!
20. Confidence : Experience @saragibby Don’t Rewrite, React!
21. Mid-level Confidence Spike experience confidence BEGINNER SENIOR MID ACTUAL SKILL PROJECTED ABILITY @saragibby Don’t Rewrite, React!
22. 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!
23. Why do we reach for the rewrite?
24. 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!
25. 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!
26. 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!
27. 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!
28. 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!
29. 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!
30. 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?
31. Enter React
32. 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!
33. 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!
34. 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!
35. Stack Overflow - 2019 Dev Survey @saragibby Don’t Rewrite, React!
36. Stack Overflow - 2019 Dev Survey @saragibby Don’t Rewrite, React!
37. React vs. Angular vs. Ember vs. …. MVC Frameworks UI Framework @saragibby Don’t Rewrite, React!
38. @saragibby Don’t Rewrite, React!
39. @saragibby Don’t Rewrite, React!
40. @saragibby Don’t Rewrite, React!
41. 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!
42. 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!
43. @saragibby Don’t Rewrite, React!
44. @saragibby Don’t Rewrite, React!
45. @saragibby Don’t Rewrite, React!
46. Using React time size ADDING REACT ORIGINAL CODE BASE MONETARY INVESTMENT REACT DEV BEGINS ORIGINAL CODE BASE @saragibby Don’t Rewrite, React!
47. • 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!
48. Getting Started
49. Setting Up The Foundation @saragibby Don’t Rewrite, React!
50. 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!
51. Foundation Pieces package manager bundler transpiler @saragibby Don’t Rewrite, React! foundation ➕
52. 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!
53. 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!
54. Bundler — webpack @saragibby Don’t Rewrite, React! https://webpack.js.org/
55. Tools — Transpiler 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!
56. Getting Ready to React @saragibby Don’t Rewrite, React!
57. package.json > yarn init https://yarnpkg.com/lang/en/docs/install/ @saragibby Don’t Rewrite, React!
58. > yarn add webpack webpack-cli - -dev Install our bundler… Creates yarn.lock @saragibby Don’t Rewrite, React! Add the packages
59. > yarn add react react-dom --dev Add the packages Add React to our package… @saragibby Don’t Rewrite, React! > yarn add @babel/core babel-loader --dev Add our transpiler…
60. > yarn add @babel/preset-env @babel/preset-react --dev Install plugins for babel… @saragibby Don’t Rewrite, React! Add the packages
61. package.json @saragibby Don’t Rewrite, React!
62. webpack.config.js @saragibby Don’t Rewrite, React!
63. .babelrc @saragibby Don’t Rewrite, React!
64. 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!
65. First Piece of React @saragibby Don’t Rewrite, React!
66. 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!
67. Basic Elements Basic elements… • heading • list • link • button @saragibby Don’t Rewrite, React!
68. Example — comprend.us @saragibby Don’t Rewrite, React!
69. Simple Example js/src/Welcome.js js/application.js @saragibby Don’t Rewrite, React!
70. Simple Example > yarn webpack @saragibby Don’t Rewrite, React!
71. Creating a Game Plan
72. Components, Components, Components @saragibby Don’t Rewrite, React!
73. 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!
74. Self Contained Components Start with components you can set data on via properties. @saragibby Don’t Rewrite, React!
75. External Plugins What outside tools are you bringing in? Can a React component replace it? • modal • date picker • select2 @saragibby Don’t Rewrite, React!
76. Third Party Integrations Any on-demand requests to third parties? • meetup • weather • availability @saragibby Don’t Rewrite, React!
77. 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!
78. Long Term Development
79. Long Term Goal @saragibby Don’t Rewrite, React! Legacy Outdated Uck front-end Full blown React app hotness continuous deployment app/product remains up and usable throughout
80. 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!
81. 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!
82. 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.
83. 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.
84. Expect Project Bloat @saragibby Don’t Rewrite, React! original app original app React components React components GOAL REALITY
85. Completed Project End Goal @saragibby Don’t Rewrite, React! original app React App
86. TIPS • Start small • Don’t do too much at once • Utilize unit/component testing • Don’t rush it! • Build your API as needed @saragibby Don’t Rewrite, React!
87. 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!
88. @saragibby saragibby@gmail.com Don’t Rewrite, React!