Asset Pipeline or Webpack? Why not both!

Short talk about how to slowly transition a Rails app frontend from HAML/Sass with the Asset Pipeline into React with Webpacker

Transcript

1. @elg0nz - Lumosity - #MadRuby2018
2. We build games to train your brain —to help you be better at things like Number Sensing @elg0nz - Lumosity - #MadRuby2018
3. Naming things is hard Specially Talks. Here are a couple different options I explored: @elg0nz - Lumosity - #MadRuby2018
4. How to Future-proof your Frontend @elg0nz - Lumosity - #MadRuby2018
5. How to Survive an app Rebranding @elg0nz - Lumosity - #MadRuby2018
6. Why some people still want to use Makefiles to build Javascript? @elg0nz - Lumosity - #MadRuby2018
7. How to Fix Impedance Mismatches through shared Abstractions (Thanks Coraline Ada for the inspiration) @elg0nz - Lumosity - #MadRuby2018
8. Let's go with this next one instead. @elg0nz - Lumosity - #MadRuby2018
9. Asset Pipeline or Webpack: when and why to use both. @elg0nz - Lumosity - #MadRuby2018
10. Why do you want to add Webpack? —Maybe just want to try React on your app —Or you need to completely change the look and feel of your app (aka the infamous Rebranding) What's Stopping you? @elg0nz - Lumosity - #MadRuby2018
11. What's is (or was) stopping you? —Before Webpacker integrating the Asset Pipeline with a React app, wasn't trivial. —There is no easy way to port your current HTML/ CSS to React —The current CSS styles clash with your React Apps —It's not clear how to prevent those clashes @elg0nz - Lumosity - #MadRuby2018
12. What's is REALLY stopping you? —Not using the right tool for the job —An Impedance mismatch** ** Term borrowed from Electrical engineering that means having incompatible interfaces @elg0nz - Lumosity - #MadRuby2018
13. Let's start with the easy part. What kind of tools are Webpack and the asset pipeline? @elg0nz - Lumosity - #MadRuby2018
14. Development before the Asset Pipeline —You had to manually download libraries into your public folder —And then include a script tag —If two libraries had the same dependency, you had two copies of it on different folders —You had to be careful to change your Javascript file names to invalidate the browsers caches @elg0nz - Lumosity - #MadRuby2018
15. What is the asset pipeline It is a Rails library that does: * Linking: Allows you to 'require' other Javascript files, either internal or third party * Dependency Management: Makes sure your dependencies are properly set * Concatenating: Packs all your javascript code into a single deployable asset. * Minifying: Compresses the Pack above to reduce time * Transpiling: Optimizes your code by transpiling to the most optimal JS possible. @elg0nz - Lumosity - #MadRuby2018
16. What is the asset pipeline In other words, it is a tool to Build your Javascript. @elg0nz - Lumosity - #MadRuby2018
17. Sounds great! So now why are there people telling me to use other build tools? —Because you want your System to be ALIVE @elg0nz - Lumosity - #MadRuby2018
18. Systems are like Living Organisms —There's a whole discipline called Cybernetics around this idea —In living organisms cells are regenerated, resilient systems act the same way —In order to your system to survive, you will eventually have to replace parts of it (Chad Fowler's Legacy talk goes over this idea at great detail). @elg0nz - Lumosity - #MadRuby2018
19. Better tools make life easier —Yes, you can write web code on assembly, but that's just painful [Insert XKCD comic about Real Programmers] @elg0nz - Lumosity - #MadRuby2018
20. Sometimes the most dangerous thing is to do nothing at all —One of our duties as SW engineers is to be proactive towards potential threats to our systems —Our best tool is use our Radars @elg0nz - Lumosity - #MadRuby2018
21. Tech Radars —Neal Ford from Thoughtworks created this framework to protect his consulting company after discovering that the Market had shifted away from the technology they used —The tldr; of it, is that when talking about new technologies you should sort them into three buckets: hold, assess, adopt. @elg0nz - Lumosity - #MadRuby2018
22. Javascript Build tools Radar —HOLD Makefiles (1995?-2018?): with Makefiles you will eventually need a scripting language. —HOLD Dojo Builder (2008): Dojo is still around but not widely used. —ADOPT Asset Pipeline (2011, Rails 3.1) : —HOLD Grunt/Gulp/Bower (2012): The library creators recommend switching to Webpack —ADOPT Webpack (2012): ! —ASSESS Rollup (2015) Looks promising, but it's early —ASSESS Phoenix Asset Pipeline @elg0nz - Lumosity - #MadRuby2018
23. Webpack is a Javascript Build tool Killer features: * ES6 modules suppport * Hot reloading in development @elg0nz - Lumosity - #MadRuby2018
24. Now, if they do the same thing, why do I need them both? —A to keep your existing code around —To rebrand your site incrementally —To enable embedding React into your Rails App @elg0nz - Lumosity - #MadRuby2018
25. React's most important features (which other libraries are now adopting too) —CSS-in-JS —Uni-Directional data flow —Virtual DOM —Component Thinking @elg0nz - Lumosity - #MadRuby2018
26. React's most important features (which other libraries are now adopting too) —CSS-in-JS —Uni-Directional data flow —Virtual DOM — ! Component Thinking @elg0nz - Lumosity - #MadRuby2018
27. Getting back to the Impedance Mismatch —What's the biggest obstacle when mixing your Frontend code with React code? Usually, it's the evil global CSS. @elg0nz - Lumosity - #MadRuby2018
28. How can we get rid of that evil global CSS? —By refactoring our CSS to Components (what is a component?). @elg0nz - Lumosity - #MadRuby2018
29. All physical things are made of Atoms @elg0nz - Lumosity - #MadRuby2018
30. Like wise, most new Designers are using Atomic Design —(Like we just learned on Shay Howe's talk Yesterday) @elg0nz - Lumosity - #MadRuby2018
31. Components are React's Atoms @elg0nz - Lumosity - #MadRuby2018
32. Components are React's Atoms @elg0nz - Lumosity - #MadRuby2018
33. Components are React's Atoms @elg0nz - Lumosity - #MadRuby2018
34. Wait isn't this just an application of the SOLID principles we use on Ruby? Yes. In particular: —"Single Responsibility" You should limit the obligations of each components. —"Open/Closed Principle" Your components should be easier to extend than modify. —(Shay also mentioned this yesterday ) @elg0nz - Lumosity - #MadRuby2018
35. Why you should use Components —Write once, reuse everywhere —Fix once, fix everywhere —Encapsulation/Modularization —Helps you Divide and Conquer complex UIs @elg0nz - Lumosity - #MadRuby2018
36. BEM allows us to create Atoms in CSS and HTML —BEM is a CSS technique to apply those solid principles by using the following convention for selectors —Block: Standalone Entities —Element: Part of a block that has no standalone meaning —Modifier: Flag or alteration on an element. A state change usually triggers them. @elg0nz - Lumosity - #MadRuby2018
37. HTML <button class="button"> Normal button </button> <button class="button button--state-success"> Success button </button> <button class="button button--state-danger"> Danger button </button> CSS .button { display: inline-block; border-radius: 3px; padding: 7px 12px; border: 1px solid #D5D5D5; background-image: linear-gradient(#EEE, #DDD); font: 700 13px/18px Helvetica, arial; } .button--state-success { ... } .button--state-danger { color: #900; } @elg0nz - Lumosity - #MadRuby2018
38. Partials in irb/Haml make this even more powerful —Use Partials to require blocks only as needed —Yes, there is a small performance penalty, but it's worth it. https://medium.com/@coorasse/partial- rendering-performance-in-rails-101fdfb6ffb9 @elg0nz - Lumosity - #MadRuby2018
39. Now with a clean CSS porting things to React should be simple —If you use CSS-In-JS you guarantee your styles are localized per component —We'll see an example later @elg0nz - Lumosity - #MadRuby2018
40. Integration patterns When integrating a React App into a React app: * Make sure your API (either REST, GraphQL, etc.) can be integrated with your React SPA * If you feel you can't trust your existing code at all, start putting your app using IFRAMEs (Slightly hacky, but it's a great way to guarantee 0% chance of collisions) * If you want to keep all your code on Rails, use react_rails * If your code is clean, you can use JS packs to mount your SPAs where they are needed. @elg0nz - Lumosity - #MadRuby2018
41. How does a Webpacker app look like? @elg0nz - Lumosity - #MadRuby2018
42. React structure app/javascript ├── packs │ ├── application.js │ └── quotes.js └── quotes ├── components │ ├── App.jsx │ ├── QuoteFooter.jsx │ ├── QuoteNavigation.jsx │ ├── QuoteText.jsx │ └── QuotesDisplay.jsx └── index.js @elg0nz - Lumosity - #MadRuby2018
43. // app/javascript/quotes/components/Quote.jsx import React from 'react'; class Quote extends React.Component { constructor () { super(); this.state = { quote: {} }; } fetchQuote (id) { ... } componentDidMount () { this.fetchQuote(this.quoteId); } render () { return ( <div> <p styles={{ padding: '10px' }}>{this.state.quote.text}</p> <p styles={{ }}>{this.state.quote.author}</p> </div> ); } } export default Quote; @elg0nz - Lumosity - #MadRuby2018
44. // app/javascript/packs/quotes.js import 'quotes' // app/javascript/quotes/index.js import React from 'react' import ReactDOM from 'react-dom' import Quote from './components/Quote' const quotes = document.querySelector('#quotes') ReactDOM.render(<Quote />, quotes) // app/views/pages/home.html.erb <div id="quotes"></div> <%= javascript_pack_tag 'quotes' %> @elg0nz - Lumosity - #MadRuby2018
45. Tradeoffs when doing a Hybrid architecture —Unless your app is really small, you will have to incrementally port Components from haml/sass to React —Some duplication will happen —You are still deploying backend and frontend code together —Webpack can be hard to configure (and harder with webpacker) @elg0nz - Lumosity - #MadRuby2018
46. Are we future proof yet? —Hopefully. Keeping our components modular will make it easier to jump to the next tech stack. —"Regardless of how many movers you have, It's always easier to move small/medium boxes than a couple Large ones." —Aspire to "keep your desk clean" (nod Betsy, Sarah Mei) —Keep your Radar on! @elg0nz - Lumosity - #MadRuby2018
47. Thanks —Madison+Ruby for building such a diverse conference/community —To you for being you! References —http://getbem.com/ —https://github.com/rails/webpacker/ —https://x-team.com/blog/get-in-full-stack-shape-with-rails-5-1-webpacker-and- reactjs/ —https://www.youtube.com/watch?v=YruzQgWdv48 < Youtube Chad Fowler Legacy @elg0nz - Lumosity - #MadRuby2018