Asset Pipeline or Webpack? Why not both!

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

Bcb446d5ebec71979786a22e56794c32?s=128

Gonzalo Maldonado

May 10, 2018
Tweet

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