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
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!
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
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