Don't Rewrite, React!

Legacy web applications live all around us. But in today's ES6 world what do we do with all these apps? Sure we would each love to say "Let's rewrite it!" But what do we do when that's not an option.

Enter React.

Let's face it, most apps take year to build. Time, money... it's not something you can easily toss aside for the latest JS Framework hotness. The great thing about React is that it's a library. A library that can easily be integrated to bring these legacy apps into an ES6/one-page world.

In this session we are going to talk about what React is, what it can do, and how to integrate it into your existing legacy apps.

Transcript

1. Don’t Rewrite, React!
2. About Me Sr. Tech Lead Sara Gibbons @saragibby
3. career company size start ups / consulting My Career Path
5. Tech Debt Buildup time size GOAL TECH DEBT CODE BASE UNCONTROLLED TECH DEBT MONETARY INVESTMENT ACTUAL TECH DEBT
6. Beginning of the Rewrite Idea
8. Ability To Change time + progress cost of change TECH DEBT ABILITY TO RESPOND TO CHANGE ACTUAL COST OF CHANGE OPTIMAL COST OF CHANGE
9. On Board A New Dev
10. Houston we have a problem
11. 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
12. A Plan Is Hatched
13. Do you have the right people in the room for these conversations?
14. Dev Team Makeup # developers beginner senior mid
15. Confidence : Experience
16. Mid-level Confidence Spike experience confidence BEGINNER SENIOR MID ACTUAL SKILL PROJECTED ABILITY
17. Groupthink group•think The practice of thinking or making decisions as a group in a way that discourages creativity or individual responsibility
18. Why do we reach for the rewrite?
19. 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.
20. New Technologies • As soon as we choose a technology it is outdated. • Seems like each time you Google you find a new/better solution • Expereince with new technologies lead to more career opportunities
21. Developer Ego • Our industry creates a self-promoting culture. • We are constantly evaluating ourselves to others. • “Fake it until you make it” • To be successful we need to be self promoting.
22. 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
23. 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!
24. 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
25. Enter React
26. What is React? re•act Flexible JavaScript library for building user interfaces. A template language to bundle HTML & JS, ultimately rendering HTML. View layer.
27. What’s So Great About React? • Integrate into existing JS friendly applications • Small/Simple components • New hotness • Small learning curve • Large community
28. Stack Overflow - 2016 Dev Survey
29. React vs. Angular vs. Ember vs. …. MVC Frameworks UI Framework
33. Using an MVC Framework time size MVC FRAMEWORK ORIGINAL CODE BASE MONETARY INVESTMENT MVC DEV BEGINS OMG!
34. 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.
38. Using React time size ADDING REACT ORIGINAL CODE BASE MONETARY INVESTMENT REACT DEV BEGINS
39. • Incrementally add w/small components an new functionality • Integrates with current app Using React • Continuous deployment continues • Initial dev investment to configure project • Some pieces my need more dev time if you don’t have an API endpoint
40. Getting Started
41. Setting Up The Foundation
42. 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. pack•age man•ag•er package.json
43. npm Package Manager — npm Default package manager we all know and love. Bundled with each Node.js release By default has non-deterministic installs (no lock file).
44. yarn Package Manager — yarn Use deterministic installs because it uses a lockfile to lockdown all the dependencies recursively at the application level.
45. Tools — Bundler Load all the dependencies of your application into a single bundle, or JavaScript file, that can be executed in the browser. bundler
46. brow•ser•if•y Bundler — browserify Simple. But will require additional tools for bundling, minifying, etc.
47. web•pack Bundler — webpack Works out of the box. No additional tools needed. Build process defined through a config file.
48. Bundler — webpack
49. Tools — Transpiler A source to source compiler. trans•pil•er ES2015 *.js/*.jsx Transpiler ES5 *.js
50. ba•bel Tools — Babel JavaScript transpiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser. Packaged as an node module. .babelrc configuration file
51. Getting Ready to React
52. package.json > yarn init
53. package.json
54. > yarn add --dev webpack webpack Install our bundler… package.json Creates yarn.lock
55. > touch webpack.config.js webpack config Create webpack config… A JavaScript file that exports an object. Contains settings webpack will use for build.
56. 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
57. webpack Creates bundle.js > webpack
58. > yarn add --dev babel-core babel-loader Install our transpiler… babel-loader: This package allows transpiling JavaScript files using Babel and webpack. babel-core: Babel compiler core. babel
59. webpack.config.js rules: settings used when preprocessing files.
60. .babelrc > yarn add --dev babel-preset-env babel-preset-react Install language modules for Babel… babel-preset-env: Babel preset that can automatically determine the plugins and polyfills you need based on your supported environments. babel-preset-react: Babel preset for all React plugins.
61. .babelrc > touch .babelrc .babelrc Create babel config file…
62. > yarn add --dev react react-dom react Add React to our package… react-dom: Adds ability to insert react components into the DOM. react: React core.
63. package.json package.json
64. Connect to your project Include the bundled JavaScript file on your webpage. > yarn install > webpack
65. First Piece of React
66. Where to start? Start with easy & simple components. GOAL: Introduce React to project with minimal development slowdown. • Small • Testable • High reusability
67. Basic Elements / Boilerplate Basic elements… • Heading • List • Link • Button
68. Simple Example js/react/Welcome.jsx js/application.js
69. Simple Example > webpack
70. Creating a Game Plan
71. Components, Components, Components
72. Components, Components, Components
73. Stateless (Functional Components) Start with components you can set data on via properties.
74. Stateless (Functional Components)
75. External Plugins What outside tools are you bringing in? Can a React component replace it? • Modal • Date Picker • Select2
76. Third Party Integrations Any on-demand requests to third parties? • Meetup • Weather • Availability
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?
78. API • Eventually will need your own data layer. • Start simple. Begin with GET requests. • Replace setting of properties to a GET request to API.
79. 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.
80. Setting Up For React 1. Package manager (yarn) 2. Bundler (webpack) 3. Transpiler (babel) 4. webpack.config.js 5. .babelrc 6. Add dependencies
81. Gameplan 1. Figure out your basic components 2. External Plugins 3. Third Party Integrations 4. New Features 5. API 6. UI Kit Each phase… - Continue to create boilerplate elements - Test all the things!
82. Don’t Rewrite, React! @saragibby saragibby@gmail.com