Slide 1

Slide 1 text

Give a second chance to Rails frontend!

Slide 2

Slide 2 text

theseguys.io · Uses Rails, React, Ember.js · Worked in Smartomato and Evil Martians Who is Alexey Taktarov? · Code Hipsters community and ficus.io · Now one of These Guys, working on resume.io

Slide 3

Slide 3 text

resume.io

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Famous record setter Sir Malcom Campbell with a Bugatti in a garage setting, http://theoldmotor.com/ Sprockets — is a traditional way to build assets in Rails

Slide 7

Slide 7 text

1962 Porsche 804, https://iedeiblog.com build speed 1 Tired of waiting 4s until page is refreshed

Slide 8

Slide 8 text

An electrical engineering course from the 1970's, https://engineering.lafayette.edu/150th/ dependency management 2

Slide 9

Slide 9 text

|-- vendor `-- assets |-- javascripts |-- cookie.js |-- fontfaceobserver.js |-- imagesloaded.js `-- uri.js

Slide 10

Slide 10 text

|-- vendor `-- assets |-- javascripts |-- cookie.js |-- fontfaceobserver.js |-- imagesloaded.js `-- uri.js Gemfile jquery-rails

Slide 11

Slide 11 text

> rails-assets.org

Slide 12

Slide 12 text

H. G. J. Moseley in the Balliol-Trinity Laboratories, Oxford, 1910. http://akkadium.com/ What about require order? How do I include images/fonts? Is it scalable?

Slide 13

Slide 13 text

Hewlett-Packard Archive, http://www.hparchive.com/ limited access to modern frontend tools 3

Slide 14

Slide 14 text

NY Central Railroad c.1910, Public Domain FRONTEND inevitable is

Slide 15

Slide 15 text

Everybody is tired of JavaScript… This weekend I wanted to make a feather app with the service worker containing the logic and virtual DOM inside. First day I was looking for a library which computes diffs and makes patching separately, the second day I was fighting Rollup and Buble making a conclusion that I cannot avoid Webpack no matter how much I wanted to. Victor Suzdalev · Code Hipsters

Slide 16

Slide 16 text

source medium.com

Slide 17

Slide 17 text

fatigue source medium.com

Slide 18

Slide 18 text

React VirtualDOM Babel Webpack Promise ES2016 ServiceWorker fetch module bundler NPM yarn tree shaking async/await Redux isomorphic web app Flow GraphQL ble Immut TypeS deco s

Slide 19

Slide 19 text

Ybor cigar rollers ply their craft c.1920, Public Domain Build the right hype-chain!

Slide 20

Slide 20 text

<%= react_component('HelloMessage', name: 'John') %> React Rails react-rails ̣ 3,505 㱺

Slide 21

Slide 21 text

<%= react_component('HelloMessage', name: 'John') %> React Rails react-rails ̣ 3,505 㱺 Ember Rails ember-rails ̣ 1,384 㱺

Slide 22

Slide 22 text

React Redux react-redux-rails Rails 㱺 A Rails wrapper for the react-redux React wrapper for redux <%= react_component('HelloMessage', name: 'John') %> React Rails react-rails ̣ 3,505 㱺 Ember Rails ember-rails ̣ 1,384 㱺

Slide 23

Slide 23 text

Direct integrations are usually useless http://www.laboiteverte.fr/

Slide 24

Slide 24 text

They don’t scale well and make everything complicated http://www.laboiteverte.fr/

Slide 25

Slide 25 text

–Johnny Appleseed Watchmen, copyright DC Comics Treat JavaScript as a first-class citizen!

Slide 26

Slide 26 text

Package manager bower, npm, yarn Tests and test-runners mocha, karma … Linters eslint, stylelint … Builders and module bundlers Grunt, Gulp, Brocolli, Brunch, Webpack …

Slide 27

Slide 27 text

JS JS JS CSS PNG CSS JS JS WOFF https://frontend.center/ Webpack

Slide 28

Slide 28 text

JS JS JS CSS PNG CSS JS JS WOFF https://frontend.center/ Webpack

Slide 29

Slide 29 text

JS JS JS CSS PNG CSS JS JS WOFF https://frontend.center/ Webpack it can load everything, just write a loader

Slide 30

Slide 30 text

C C A B C A B Commons Chunk Extraction

Slide 31

Slide 31 text

C C A B C A B Commons Chunk Extraction C A B Hot Module Replacement C A B C* A B C

Slide 32

Slide 32 text

C C A B C A B Commons Chunk Extraction C A B Hot Module Replacement C A B C* A B C A Code Splitting A B C A B async require.ensure async require.ensure

Slide 33

Slide 33 text

https://mountainx.com Hammers in the Mountain, 1900 How to use it in Rails project

Slide 34

Slide 34 text

webpack-dev-server

Slide 35

Slide 35 text

webpack-dev-server manifest.json Build status, errors and entry points plugin, e.g. webpack-stats-plugin

Slide 36

Slide 36 text

Rails Is everything ok? <%= webpack_include_tag %> webpack-dev-server manifest.json

Slide 37

Slide 37 text

Rails Cool! http://localhost:3535/ <%= webpack_include_tag %> webpack-dev-server manifest.json

Slide 38

Slide 38 text

# public # `-- webpack # |-- application-14dc232d.js # `-- manifest.json def webpack_asset_paths(bundle) manifest = Manifest.load if manifest.build_errors? # ... show build errors end if Rails.env.production? # ~> public/webpack/application-14dc232d.js manifest.path_for(bundle) else # ~> http://localhost:3808/webpack/application.js manifest.dev_server_path_for(bundle) end end

Slide 39

Slide 39 text

Use any other module bundler Webpack Brunch Gulp Rollup Broccoli

Slide 40

Slide 40 text

Texas, 1939 Public Domain Your frontend guy feels at home You can use webpack-rails or homemade solution (like Evil Martians do)

Slide 41

Slide 41 text

monolithic SPA sometimes it’s hard to maintain it

Slide 42

Slide 42 text

multiple entry points Webpack allows to use global dependencies through expose loader Use Commons Chunk extraction to reduce file sizes

Slide 43

Slide 43 text

«Old School» just use the right convention

Slide 44

Slide 44 text

|-- javascripts |-- components | |-- top-bar.js.es6 | |-- trix-editor.js.es6 | ... `-- views |-- account-view.js.es6 |-- contact-view.js.es6 ...

Slide 45

Slide 45 text

class AccountView { constructor (el) { this.rootEl = el // listen for events } handleLogoClick (event) { // ... } } document.addEventListener('DOMContentLoaded', () => { const viewEl = document.querySelector('.account-view') if (viewEl) { const view = new AccountView(viewEl) } })

Slide 46

Slide 46 text

Chinatown by Roman Polanski tools you use should be simple and understandable choose them based on team size and the budget frontend = first-class citizen

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

Rails 5.1 now supports Webpack and Yarn!

Slide 49

Slide 49 text

|-- app |-- front | |-- src | | `-- application.js | `-- webpack.config.js |-- node_modules `-- package.json localhost:3808/webpack/application.js |-- app | - packs | |-- editor.js | `-- payment.js |-- config | - webpack.config.js |-- public | - packs | |-- editor.js | `-- payment.js `-- vendor |-- node_modules `-- package.json rails/webpacker resume.io RAILS_ENV=development

Slide 50

Slide 50 text

rails/webpacker resume.io RAILS_ENV=production |-- app | - packs | |-- editor.js | `-- payment.js |-- config | - webpack.config.js |-- public | - packs | |-- editor-8c3423.js | `-- payment-f92348.js `-- vendor |-- node_modules `-- package.json |-- app |-- front | |-- src | | `-- application.js | `-- webpack.config.js |-- node_modules |-- package.json `-- public `-- webpack |-- application-087e34.js `-- manifest.json

Slide 51

Slide 51 text

References github.com/mipearson/webpack-rails frontend.center rails-assets.org github.com/rails/webpacker Contact github.com/molefrog ficus.io resume.io theseguys.io сodehipsters.com hot! !