How you can use React in brownfield Web Applications, with an example for a Knockout application. Full slides @ http://2017-lochlan-react-in-brownfields.surge.sh/

1. REACT IN
BROWNFIELDS
@loklaan @rexsoftware
Drunk proposal #1/3

2. Greenfields
New product
Fresh design & code
Limited features
Unlimited possibilities

3. Brownfields
Been around for awhile
Many features in the wild
Made a killing by now
Still has resources improving it
Di cult to change early
choices
Not using React *

4. REX
MEETS REACT

5. Integrating your UI stack
Building modern javascript
Establishing guidelines
PLACING REACT WITH CARE

6. Integrating your UI stack
EMBEDDING REACT COMPONENTS

7. But first, a
Knockout
Demo
1. <div id="x" data-bind="visible: showMessage">
2.
3. When "showMessage" holds a true
4. value, you'll see me.
5.
6. </div>
7.
8.

8. Embedding
React in
Knockout
1. <div data-bind="react: {
2. class: Todo,
3. props: todoProps
4. }">
5. </div>
6.
7.
8. <script type="text/javascript">

9. Integrating your UI stack
SYNCING STATE

10. 41. function unmountReact (element) {
42. ReactDOM.unmountComponentAtNode(element);
43. }
44.
31. ReactDOM.render(
32. <Component {...props} />,
33. element
34. );
35.
36. return { controlsDescendantBindings: true };
37. }
38.
39.
40.
45.
46.
47. ko.applyBinding(
48. viewModel,
49. document.getElementById("x")
50. );

11. Integrating your UI stack
(USE GOOGLE / GITHUB)
DIFFICULTY WILL VARY.

12. Integrating your UI stack
Continue using current strategies
Research and appreciate options
Wait for my next talk, wink
Make an informed decision
STYLING

13. YOUR BUILD
PIPELINE
IS PROBABLY OLD
JAVASCRIPT FATIGUE AMIRITE?

14. REX CRM
PHP asset pipeline (all server-side)
No webpack / browserify
But, codesplitting!
And static dependency graphs!

15. REX CRM
PIPELINE REHAUL
New code: browserify & babel
Old code: old pipeline logic ported to gulp
New Modules exposed on window
And still, codesplitting!
Also a faster development experience

16. Document everything
Write guides
ESTABLISHING GUIDELINES

17. RESOURCES
BASIC REACT INSTALLATION
https://facebook.github.io/react/docs/installation.html
INTEGRATING REACT IN THIRDY PARTY
LIBRARIES
https://facebook.github.io/react/docs/integrating-with-
other-libraries
AIRBNB, REACT NATIVE IN BROWNFIELDS
https://www.youtube.com/watch?v=tWitQoPgs8w