< Return to Video

RailsConf 2014 - The "Rails of JavaScript" Won't be a Framework by Justin Searls

  • 0:19 - 0:20
    JUSTIN SEARLS: Good morning everybody.
  • 0:20 - 0:21
    That was an excellent talk that we just
  • 0:21 - 0:23
    saw from Brandon. Happy Friday.
  • 0:23 - 0:25
    It's been a long conference.
  • 0:25 - 0:28
    Thanks for being here. Friday hug to you all.
  • 0:28 - 0:29
    This, if the house lights were
  • 0:29 - 0:31
    up I'd take a picture. Yes.
  • 0:31 - 0:34
    The title of this talk is The Rails of
  • 0:34 - 0:36
    JavaScript won't be a framework.
  • 0:36 - 0:37
    And the slightly less
  • 0:37 - 0:40
    provocative version of that title is, the
    Rails of
  • 0:40 - 0:44
    JavaScript will be more than just a framework.
  • 0:44 - 0:47
    My name is Justin. We're not gonna have time
  • 0:47 - 0:49
    for questions afterwards. It's gonna be a
    very, very
  • 0:49 - 0:52
    fast talk-y slide-decky thing.
  • 0:52 - 0:53
    So please Tweet me with
  • 0:53 - 0:56
    questions, feedback, praise is always
  • 0:56 - 0:58
    welcome, at searls, and
  • 0:58 - 0:59
    critical feedback is always welcome
  • 0:59 - 1:00
    at hello at testdouble
  • 1:00 - 1:01
    dot com.
  • 1:01 - 1:05
    Let's just talk about three of my favorite
    things.
  • 1:05 - 1:08
    One is cupcakes. Two is the planet earth.
    And
  • 1:08 - 1:14
    three is monolithic application architecture.
    So, on cupcakes, say
  • 1:14 - 1:18
    that you own a bakery and a customer walks
  • 1:18 - 1:20
    in and they say they want something sweet.
    So
  • 1:20 - 1:23
    you bake them up a beautiful cupcake, and
    they
  • 1:23 - 1:24
    say hey, you know, this is really good but
  • 1:24 - 1:27
    I like a little bit more sweetness. Maybe
    a
  • 1:27 - 1:29
    little crunch. So you put some sprinkles on
    top.
  • 1:29 - 1:31
    The customer is, like, digging the cupcake,
    but says
  • 1:31 - 1:33
    you know, on second thought, I really think
    I
  • 1:33 - 1:35
    want something like with some hot fruit filling.
    And
  • 1:35 - 1:37
    then you just think to yourself as the baker,
  • 1:37 - 1:40
    ah god damn it. What they really wanted was
  • 1:40 - 1:42
    a fresh-baked pie.
  • 1:42 - 1:44
    So you throw away the cupcake and you make
  • 1:44 - 1:45
    them a pie. And that's an honest mistake if
  • 1:45 - 1:47
    it happens once. But if your workflow as a
  • 1:47 - 1:50
    baker is to assume everyone needs a cupcake
    only
  • 1:50 - 1:52
    to have to inevitably throw it away and then
  • 1:52 - 1:55
    bake something else, that's a real problem,
    you know,
  • 1:55 - 1:56
    for your business.
  • 1:56 - 2:00
    So say you own a software studio, and a
  • 2:00 - 2:02
    customer walks in and says hey, I need a
  • 2:02 - 2:03
    web application, and so you say, oh great.
    What's
  • 2:03 - 2:09
    its name so that I can type rails new.
  • 2:09 - 2:11
    And you build them a little graph, you know,
  • 2:11 - 2:12
    you render it on the server and they say,
  • 2:12 - 2:14
    hey, you know, this graph is great but I
  • 2:14 - 2:16
    need some zooms and some filters. And so you're
  • 2:16 - 2:19
    like, hey, you know, I, we can do that.
  • 2:19 - 2:21
    Sprinkle some JavaScript on top. And then
    they say,
  • 2:21 - 2:23
    you know, this is awesome, but let's load
    all
  • 2:23 - 2:25
    of the data all at once so that the
  • 2:25 - 2:28
    user can really, really like just see absolutely
    everything
  • 2:28 - 2:31
    at a glance, really dynamically, like an app,
    you
  • 2:31 - 2:32
    know? And then you, the developer, are like
    ah,
  • 2:32 - 2:36
    god damn it. Cause there's no logical path
    from
  • 2:36 - 2:38
    that solution to what they really wanted,
    which was
  • 2:38 - 2:39
    a fat-client JavaScript application.
  • 2:39 - 2:42
    I mean, Rails is probably still involved,
    providing API
  • 2:42 - 2:45
    services. But it's not the center of the application.
  • 2:45 - 2:49
    That monolithic approach doesn't work. And
    it's an honest
  • 2:49 - 2:51
    mistake, if it happens once. But if part of
  • 2:51 - 2:54
    your workflow is to immediately assume that
    Rails is
  • 2:54 - 2:56
    the solution to every single web application,
    and then
  • 2:56 - 2:58
    you only realize later that you've guilt a
    gigantic
  • 2:58 - 3:02
    mess with JavaScript, that's a problem.
  • 3:02 - 3:03
    The reason that I think that a lot of
  • 3:03 - 3:05
    web developers fall into this trap is that
    Rails
  • 3:05 - 3:10
    is too convenient. When you're a Ruby developer,
    you
  • 3:10 - 3:12
    have all these awesome tools right at your
    disposal.
  • 3:12 - 3:14
    We've got this great convention-based framework
    so I can
  • 3:14 - 3:16
    just add a gem and it, maybe a couple
  • 3:16 - 3:18
    lines, and then I get all this great behavior
  • 3:18 - 3:21
    on the cheap. And when we ask Ruby developers
  • 3:21 - 3:23
    about their favorite client-side tools, they
    usually come up
  • 3:23 - 3:28
    empty. Nobody hates JavaScript more than Rubyists.
  • 3:28 - 3:30
    So they, they, they just can't think of any.
  • 3:30 - 3:32
    And of course it's not like there's no client-side
  • 3:32 - 3:35
    tools. I'm just kidding. There are plenty
    of client-side
  • 3:35 - 3:42
    tools available to Rubyists. But this is their
    reputation,
  • 3:42 - 3:46
    right. They're jagged and rusty and terrible.
    So, every
  • 3:46 - 3:47
    time a new story comes down the pike, we
  • 3:47 - 3:50
    have to make a decision, right. Where's the
    best
  • 3:50 - 3:52
    place for this to live? What's the concern
    here.
  • 3:52 - 3:55
    If a user brings me a, a user interface
  • 3:55 - 3:57
    card, it might be that the best place to
  • 3:57 - 3:58
    write that, the best place for that to live
  • 3:58 - 4:00
    is in the browser. But the second thing I
  • 4:00 - 4:02
    ask when I get a new card is like
  • 4:02 - 4:04
    hey, where's, what'd be the easiest thing
    for me
  • 4:04 - 4:06
    to actually do to build this? Take the least
  • 4:06 - 4:08
    time? Be the quickest to market? And because
    Rails
  • 4:08 - 4:12
    is so convenient, the answer is often Rails.
    So
  • 4:12 - 4:13
    even though the best place for the code to
  • 4:13 - 4:17
    live might be the frontend, I'm incentivised
    to start
  • 4:17 - 4:20
    solving client-side problems on the server-side,
    and taken to
  • 4:20 - 4:22
    an extreme that's really unhealthy.
  • 4:22 - 4:25
    So I have a provocative statement to make.
    Non-Rubyists
  • 4:25 - 4:29
    write better JavaScript. I went to a dot NET
  • 4:29 - 4:31
    conference, my first dot NET conference, last
    year in
  • 4:31 - 4:35
    Sophia, Bulgaria, and I was blown away by
    how
  • 4:35 - 4:37
    much we were talking the same language. We
    were
  • 4:37 - 4:41
    using great, brand new node.js based tooling.
    Everyone was
  • 4:41 - 4:45
    talking about and excited about Angular, even
    Ember. But
  • 4:45 - 4:48
    what my expectations were was it's dot NET,
    this
  • 4:48 - 4:50
    is crusty, you know. And what I found in
  • 4:50 - 4:53
    actually talking to people was, because dot
    net wasn't
  • 4:53 - 4:57
    so incredibly awesome, they didn't have that
    same moral
  • 4:57 - 4:59
    hazard, you know. They were willing to solve
    the
  • 4:59 - 5:02
    problem in the right place.
  • 5:02 - 5:04
    And when I think back over my own experience,
  • 5:04 - 5:08
    before Rails was easy, for me, whether that
    was
  • 5:08 - 5:10
    before 2005 or when I was doing projects in
  • 5:10 - 5:14
    other tech stacks, JavaScript wasn't hard.
    You know, I
  • 5:14 - 5:17
    actually really quite enjoyed JavaScript until
    I was told,
  • 5:17 - 5:18
    you know, to hate it.
  • 5:18 - 5:22
    And granted, we can have a long discussion.
    We
  • 5:22 - 5:25
    can have a lot, like, screencast here about
    why,
  • 5:25 - 5:27
    is asking, is JavaScript a terrible language?
    And I
  • 5:27 - 5:33
    would just like clear the air, right. Yes
    definitely.
  • 5:33 - 5:35
    I spend most of my time in JavaScript. I
  • 5:35 - 5:37
    agree, it is terrible. But I'm careful not
    to
  • 5:37 - 5:41
    conflate that with hey, well, is that why
    writing
  • 5:41 - 5:44
    JavaScript is terrible? The problems I have
    always had
  • 5:44 - 5:46
    with JavaScript have nothing to do with, have
    nothing
  • 5:46 - 5:48
    to do with map and parsein and fundamental
    problems
  • 5:48 - 5:49
    with the language, because I'm usually working
    at a
  • 5:49 - 5:50
    higher level of abstraction, right.
  • 5:50 - 5:52
    The problems I have with JavaScript are all
    of
  • 5:52 - 5:56
    the tooling. The ecosystem. The community.
    So I, I
  • 5:56 - 5:58
    challenge you to ask again later if you think
  • 5:58 - 6:02
    the language is the one at fault. After this
  • 6:02 - 6:04
    talk, hopefully I'll be able to persuade you
    a
  • 6:04 - 6:05
    little bit.
  • 6:05 - 6:09
    Let's talk about the planet earth. I love
    Ruby
  • 6:09 - 6:12
    and I love Ruby mostly for the community.
    I
  • 6:12 - 6:14
    love the language, but I love the community,
    because
  • 6:14 - 6:16
    they changed the world when it comes to web
  • 6:16 - 6:19
    application development. If you were to chart
    all of
  • 6:19 - 6:20
    the great new tools for the web that have
  • 6:20 - 6:24
    released over time, starting in 2005, the
    fantastic gems
  • 6:24 - 6:26
    that were sort of the foundation for, for,
    for
  • 6:26 - 6:30
    Ruby on Rails and this community. Over time,
    haml,
  • 6:30 - 6:33
    sass, all of these great extensions. Alternate
    stacks that
  • 6:33 - 6:35
    we can have an Omakase and a Prime stack.
  • 6:35 - 6:38
    Rspec. Cucumber. These great innovations,
    helping us build better
  • 6:38 - 6:42
    web applications. The world, Ruby with gems
    became this
  • 6:42 - 6:45
    mature market place of free stuff that would
    help
  • 6:45 - 6:46
    us write better code.
  • 6:46 - 6:49
    But then, right around 2012, I started to
    notice
  • 6:49 - 6:52
    that when a new feature would come out for,
  • 6:52 - 6:55
    like, say, webkit, it wasn't immediately followed
    by gems
  • 6:55 - 6:58
    that would exploit it. Instead I was finding
    JavaScript
  • 6:58 - 7:02
    tooling written in JavaScript on node. And
    that started
  • 7:02 - 7:04
    popping up, and in 2013 it really seemed to
  • 7:04 - 7:06
    take off. And you come into 2014 and a
  • 7:06 - 7:08
    lot of Rubyists, I think, have this latent
    fear
  • 7:08 - 7:13
    that JavaScript is gonna devour planet earth.
    And I'm
  • 7:13 - 7:17
    here to tell you that it probably will.
  • 7:17 - 7:18
    Where the best tools? If you were to ask
  • 7:18 - 7:19
    yourself this, you can add up a, add up
  • 7:19 - 7:22
    a bunch of fact values. For example, Ruby's
    tool
  • 7:22 - 7:25
    ecosystem, it's mature but it's crowded. That's
    not a
  • 7:25 - 7:27
    lot of room for growth because everyone already
    has
  • 7:27 - 7:29
    a lot of tools available that they, that they
  • 7:29 - 7:34
    love. But node's ecosystem, it's immature,
    right. It's innovative,
  • 7:34 - 7:37
    because so much new stuff gets pushed up,
    and
  • 7:37 - 7:40
    it's frustrating, but it's great, because
    as soon as
  • 7:40 - 7:41
    a new feature hits a browser, there's a tool
  • 7:41 - 7:43
    to exploit it. I mean, granted, I get as
  • 7:43 - 7:45
    frustrated as anybody else that when I run
    MPM
  • 7:45 - 7:47
    install on something, like, by the time the
    install
  • 7:47 - 7:50
    finally finishes at least two of those dependencies
    have
  • 7:50 - 7:53
    probably had updates pushed.
  • 7:53 - 7:55
    But that's the fantastic, that's what I loved
    about
  • 7:55 - 8:00
    Ruby in 2006 and 2007. And tool authors are
  • 8:00 - 8:01
    not immune to trends. I read a lot of,
  • 8:01 - 8:03
    like, open source tools and I want to go
  • 8:03 - 8:05
    where the people are. I want to go where
  • 8:05 - 8:07
    I'm gonna have a big impact. And so tool
  • 8:07 - 8:09
    authors are now gravitating to, to the world
    of
  • 8:09 - 8:11
    JavaScript, because the universe of people
    who have to
  • 8:11 - 8:14
    deal with JavaScript is about seven billion
    people, and
  • 8:14 - 8:15
    the universe of people who have to deal with
  • 8:15 - 8:18
    Ruby is in the tens of thousands.
  • 8:18 - 8:22
    Yeah. All seven billion are JavaScript developers.
    I realize
  • 8:22 - 8:22
    that's flawed.
  • 8:22 - 8:27
    Also, tools, they address the problems of
    their day.
  • 8:27 - 8:29
    A gem that was written in 2008 was written
  • 8:29 - 8:32
    to solve problems that person was facing in
    2008.
  • 8:32 - 8:35
    Not 2014. A tool that was written in 2014
  • 8:35 - 8:37
    surely must be useful in 2014, and so it's
  • 8:37 - 8:39
    just a better fit for the web as it
  • 8:39 - 8:41
    exists today. You add all that up and I,
  • 8:41 - 8:43
    you know, I really believe that web tools
    in
  • 8:43 - 8:46
    node tend to better solve today's problems.
  • 8:46 - 8:49
    And this is maddening for those who insist
    on
  • 8:49 - 8:52
    only using Rails for absolutely everything.
    But, hey, speaking
  • 8:52 - 8:57
    of Rails, let's talk about monolithic application
    architecture.
  • 8:57 - 8:59
    Rails won the war, right, on web application
    frameworks.
  • 8:59 - 9:01
    It came in with a whole bunch of great
  • 9:01 - 9:04
    reasons that we can go into later about why
  • 9:04 - 9:05
    it was just the best. It was, it was
  • 9:05 - 9:09
    fantastic, and all of these frameworks since
    then have
  • 9:09 - 9:11
    adopted a ton of great ideas from Rails. But
  • 9:11 - 9:14
    what we don't often think about when we consider
  • 9:14 - 9:17
    that phenomenon is to ask ourselves, which
    war did
  • 9:17 - 9:21
    Rails win? All web applications? Like, generally?
    Or is
  • 9:21 - 9:23
    there some sub-set of applications for the
    web that
  • 9:23 - 9:25
    are a better fit for Rails than others?
  • 9:25 - 9:28
    DHH last year at RailsConf said that good
    frameworks
  • 9:28 - 9:32
    are extractions, not inventions. Extracted
    from real applications and
  • 9:32 - 9:35
    not just invented. And so when you look at
  • 9:35 - 9:38
    Rails, obviously the story is that the company
    Basecamp
  • 9:38 - 9:41
    made Basecamp and they extracted the good
    bits, the
  • 9:41 - 9:42
    common bits that they were seeing across a
    lot
  • 9:42 - 9:46
    of their projects into Ruby on Rails.
  • 9:46 - 9:47
    And those kinds of bits that are common to
  • 9:47 - 9:51
    many of us, almost all web applications: url
    routing,
  • 9:51 - 9:55
    to point you to custom actions that you write.
  • 9:55 - 9:57
    Modeling behavior of, of the models in your
    objects,
  • 9:57 - 9:59
    the validations and all of that at a fundamental
  • 9:59 - 10:03
    level. Persistence. Storing stuff in a database,
    querying for
  • 10:03 - 10:07
    the stuff. The relationships between stuff.
    Session management and,
  • 10:07 - 10:09
    in a way that's abstracted from where the
    session
  • 10:09 - 10:12
    stuff was stored was hugely convenient, obviously.
    All of
  • 10:12 - 10:13
    those ancillary concerns of the wheels that
    you don't
  • 10:13 - 10:16
    want to reinvent like mailers. And then there's
    this
  • 10:16 - 10:19
    last little bit that's like all these JavaScript
    alternatives.
  • 10:19 - 10:22
    Like there's sort of like the, the means by
  • 10:22 - 10:24
    which to sprinkle JavaScript on top. Like,
    AJAX erb
  • 10:24 - 10:27
    tags that dump a whole bunch of JavaScript
    into
  • 10:27 - 10:30
    your on-click handlers in your, in your markup,
    or
  • 10:30 - 10:34
    later on r.js, or later on unintrusive AJAX
    erb
  • 10:34 - 10:38
    tags. Or later on, turbolinks, right. It's
    not that
  • 10:38 - 10:41
    those are bad, that those alternatives are
    bad tools.
  • 10:41 - 10:43
    It's that they're there to solve, they've
    been abstracted
  • 10:43 - 10:46
    from an application that just didn't have
    the problem
  • 10:46 - 10:49
    of trying to solve and, and write JavaScript
    in
  • 10:49 - 10:51
    the way that I want to write JavaScript.
  • 10:51 - 10:53
    Because if you consider Basecamp, you start
    a page.
  • 10:53 - 10:55
    It's a traditional web workflow. You start
    on a
  • 10:55 - 10:56
    page, you click on a thing, you get another
  • 10:56 - 10:57
    page, you click on a thing, you get another
  • 10:57 - 11:00
    page. It's a, it's a multi-break process,
    and that
  • 11:00 - 11:03
    represents a huge proportion of the web. And
    that
  • 11:03 - 11:05
    percentage of the web was almost 100% in 2005
  • 11:05 - 11:08
    but it's much lower now. If your app isn't
  • 11:08 - 11:09
    a one to one mapping of, like, CRUD in
  • 11:09 - 11:11
    the database and you're just exposing that
    as an
  • 11:11 - 11:14
    interface to users, if there's any layer of
    indirection
  • 11:14 - 11:16
    you, it might not be a good fit.
  • 11:16 - 11:22
    Yesterday, Sandi Metz made the comment, as
    an aside,
  • 11:22 - 11:23
    that there are Rails apps and then there are
  • 11:23 - 11:26
    apps that use Rails. I'm finding that more
    and
  • 11:26 - 11:28
    more, the apps that I'm writing are apps that
  • 11:28 - 11:30
    use Rails. I can love Rails and not necessarily
  • 11:30 - 11:32
    take advantage or, or really find a lot of
  • 11:32 - 11:36
    benefit from the front-end aspects.
  • 11:36 - 11:40
    So Rails promotes an html user interface in
    the
  • 11:40 - 11:43
    frontend, cause that's what Basecamp needed.
    And what I
  • 11:43 - 11:44
    mean when I say that is you're writing stuff
  • 11:44 - 11:46
    like html markup. I have an anchor tag here
  • 11:46 - 11:48
    with a, with a ref and, and content, or
  • 11:48 - 11:50
    I might have a form action here with, you
  • 11:50 - 11:53
    know, an input submit, and when you're writing
    html
  • 11:53 - 11:56
    like this, it feels like you're making the
    UI.
  • 11:56 - 11:58
    But you're not writing, like, UI programming.
    What this
  • 11:58 - 12:01
    is is this is the specification of a UI.
  • 12:01 - 12:03
    The user agent, the browser, is the thing
    responsible
  • 12:03 - 12:04
    for figuring out how to render a link and
  • 12:04 - 12:06
    what to do when you click it. It's how
  • 12:06 - 12:08
    to render and what to do when, you know,
  • 12:08 - 12:10
    how to paint a button and so forth.
  • 12:10 - 12:13
    It's, you're not, you're kind of outsourcing
    the UI
  • 12:13 - 12:16
    programming. If you're building an application
    with the browser
  • 12:16 - 12:17
    as your runtime, though, I'd call that a JavaScript
  • 12:17 - 12:20
    UI, and fundamentally the activity is just
    different and
  • 12:20 - 12:23
    more complex. You know, you're responsible
    for finding the
  • 12:23 - 12:24
    point and the DOM where you want to render
  • 12:24 - 12:27
    stuff into. Or you're responsible for binding
    to an
  • 12:27 - 12:29
    event that the user does something, and then
    you
  • 12:29 - 12:31
    need to take some custom action. You're the
    one
  • 12:31 - 12:35
    in the driver's seat. They're fundamentally
    different concerns.
  • 12:35 - 12:39
    But our tools, I think, file, I like tree,
  • 12:39 - 12:41
    to tree stuff out, because I think that tools
  • 12:41 - 12:44
    tend to betray their biases based on the layout
  • 12:44 - 12:46
    of the files that they give us. You know,
  • 12:46 - 12:48
    a naive Rails app might look like this, and
  • 12:48 - 12:52
    it screams MVC and it screams server-side.
    But, of
  • 12:52 - 12:54
    course, in reality, one of the kind of, like,
  • 12:54 - 12:57
    you know, dust-bin corners is that we have
    this,
  • 12:57 - 13:01
    this ghetto, right, under assets, and then
    the most,
  • 13:01 - 13:06
    you know, unfortunately named directory ever,
    javascripts, and then
  • 13:06 - 13:08
    application.js, and it's telling us, all this
    stuff at
  • 13:08 - 13:10
    the top - this matters. And this thing at
  • 13:10 - 13:12
    the bottom, just write one big long bowl of
  • 13:12 - 13:14
    spaghetti, and it'll work out. And that's
    how a
  • 13:14 - 13:16
    lot of people write, you know, JavaScript
    and Rails
  • 13:16 - 13:18
    applications, still.
  • 13:18 - 13:20
    Some people, though, that's not good enough,
    and so
  • 13:20 - 13:22
    they, they, they realize that they need to
    write
  • 13:22 - 13:24
    more structured JavaScript, and so we end
    up with
  • 13:24 - 13:27
    this new thing, like an html UI and a,
  • 13:27 - 13:29
    and a JavaScript UI combined. And you might
    notice
  • 13:29 - 13:32
    a pattern here, right. There is a, a, an
  • 13:32 - 13:34
    MVC in the back, and then it's also MVC
  • 13:34 - 13:38
    in the front. It makes command T really difficult,
  • 13:38 - 13:41
    but it, you know, we see this duplication
    of
  • 13:41 - 13:45
    backend concerns and frontend concerns, and
    there's also this,
  • 13:45 - 13:49
    this little nit, negging doubt about, do we
    really
  • 13:49 - 13:50
    need this views here? Right, if we're building
    a
  • 13:50 - 13:54
    full-blown fat-client JavaScript application,
    the backend views that Rails
  • 13:54 - 13:56
    provides just are less useful. So those often
    get
  • 13:56 - 13:59
    cut out now, and we, we just have sort
  • 13:59 - 14:01
    of a JSON API in Rails, and then this
  • 14:01 - 14:03
    deeply-nested JavaScript UI.
  • 14:03 - 14:04
    And so at this point, if like a new
  • 14:04 - 14:06
    person comes to your project and they ask,
    hey,
  • 14:06 - 14:09
    so what exactly is that thing? Right. I would
  • 14:09 - 14:12
    call that a vestigial appendage. Because it
    can only
  • 14:12 - 14:15
    be explained in terms of the past. You have
  • 14:15 - 14:17
    to pull up your, you know, your forensics
    of
  • 14:17 - 14:19
    like, well, in 2008 we were all, you know,
  • 14:19 - 14:22
    thinking this and now it's still like this.
  • 14:22 - 14:24
    What's wrong with that vestigial appendage?
    Well, what's fundamentally
  • 14:24 - 14:28
    wrong is that, a fundamental problem in, in
    programming,
  • 14:28 - 14:30
    is that when we move way faster when we
  • 14:30 - 14:32
    can fit the whole application in our head
    at
  • 14:32 - 14:34
    once, and when, on day one of any project,
  • 14:34 - 14:35
    you can fit the whole thing in your head
  • 14:35 - 14:37
    at once. But on day 1000 of the project
  • 14:37 - 14:38
    that's probably not gonna be true.
  • 14:38 - 14:40
    So if you build a monolithic thing up front,
  • 14:40 - 14:42
    as that app gets bigger, eventually you reach
    a
  • 14:42 - 14:43
    point where you can't fit it all in your
  • 14:43 - 14:46
    head and you start to page, right. Part of
  • 14:46 - 14:48
    the application that you're working in you
    can think
  • 14:48 - 14:50
    of, and then over here you sort of page
  • 14:50 - 14:52
    out. And if you don't modularize things well,
    then
  • 14:52 - 14:55
    that, that, that thrashing is really, really
    risky. Because
  • 14:55 - 14:57
    it might mean that, like, I'm in this part
  • 14:57 - 14:58
    of the app, and I just kind of have
  • 14:58 - 15:00
    to hope that my tests are gonna cover me.
  • 15:00 - 15:02
    Although by the time you're this big, your
    tests
  • 15:02 - 15:04
    in a typical Rails app are like ten hours
  • 15:04 - 15:06
    long. So maybe tomorrow you can find out that
  • 15:06 - 15:08
    it worked.
  • 15:08 - 15:10
    But if you, via common concerns, and find
    a
  • 15:10 - 15:14
    good module point to, to separate on, if you
  • 15:14 - 15:16
    were to identify that you could have, like,
    a
  • 15:16 - 15:18
    frontend app and a backend app, as those two
  • 15:18 - 15:21
    things grew, even if the net complexity is
    higher,
  • 15:21 - 15:22
    at some point they're not gonna fit in your
  • 15:22 - 15:26
    head either, but the paging story is much
    nicer.
  • 15:26 - 15:29
    Because they have a clean, well-defined separate
    contract. So
  • 15:29 - 15:33
    the application that you're working in the
    backend application,
  • 15:33 - 15:34
    if you have to work in it, you can
  • 15:34 - 15:36
    work in it, and then when you page out,
  • 15:36 - 15:38
    it's not thrashing, cause there's a clear,
    understood contract
  • 15:38 - 15:41
    between the two.
  • 15:41 - 15:43
    Relatedly, I like to say that late extraction
    costs
  • 15:43 - 15:46
    more than early abstraction. Yesterday, Sandi's
    talk was great
  • 15:46 - 15:49
    at telling us about wrong abstractions that
    have been
  • 15:49 - 15:51
    found and refactoring away from those, but
    when we've
  • 15:51 - 15:54
    seen the same project a dozen different times,
    I
  • 15:54 - 16:00
    would much rather extract seldom and, and,
    and abstract
  • 16:00 - 16:02
    early, and that's really confusing sounded
    so I'm gonna
  • 16:02 - 16:04
    talk about yarn now.
  • 16:04 - 16:08
    Imagine you have two balls of yarn. If you
  • 16:08 - 16:09
    decided, like, man, I really just wish instead
    of
  • 16:09 - 16:11
    these two ugly balls of yarn, I had a
  • 16:11 - 16:14
    big know of yarn all tangled together, that's
    really
  • 16:14 - 16:16
    easy to do, thanks to the basic laws of
  • 16:16 - 16:18
    entropy. But if I have a big tangled know
  • 16:18 - 16:20
    of yarn and decide that I really would love
  • 16:20 - 16:24
    two nicely-balled, you know, nice balls of
    yarn, turns
  • 16:24 - 16:27
    out that's very, very difficult to do. That
    doesn't
  • 16:27 - 16:28
    work.
  • 16:28 - 16:29
    So that's why, what I mean when I say
  • 16:29 - 16:32
    that late abstraction, all of these, like,
    fancy refactorings
  • 16:32 - 16:34
    that we can do, cost a lot more than
  • 16:34 - 16:36
    just knowing you needed two things in the
    first
  • 16:36 - 16:40
    place. So, back to this, this two step that
  • 16:40 - 16:42
    I see in a lot of Rails applications, where
  • 16:42 - 16:43
    one project, you've got the JSON API but you
  • 16:43 - 16:46
    also have all the JavaScript. This isn't problematic
    until
  • 16:46 - 16:50
    you consider this kind of stuff. You, you
    have
  • 16:50 - 16:52
    a template that renders a script tag at the
  • 16:52 - 16:55
    top, and then in the erb certain bits of
  • 16:55 - 16:58
    data are kind of taking this sneaky back door
  • 16:58 - 17:01
    instead of actually using the, the proper
    API, to
  • 17:01 - 17:04
    just dump data into the JavaScript application
    needs. When
  • 17:04 - 17:06
    you see this, it really means your yarn is
  • 17:06 - 17:08
    tangled, right. Even though you think you
    have separate
  • 17:08 - 17:10
    things. And your API is a lie. Because it
  • 17:10 - 17:12
    means that even though your application is
    mostly using
  • 17:12 - 17:14
    that API, if somebody were to come and say,
  • 17:14 - 17:15
    hey, I want to build a mobile app for
  • 17:15 - 17:16
    your site, they're gonna have to spend a month
  • 17:16 - 17:21
    figuring out how to get that token, right.
  • 17:21 - 17:23
    But it's hard not to cheat. And I agree.
  • 17:23 - 17:25
    It's very, very difficult, especially given
    what we talked
  • 17:25 - 17:28
    about earlier, where the tooling is so bad.
    So
  • 17:28 - 17:29
    my objective in the last four years of, of,
  • 17:29 - 17:32
    of my, my open source contributions, and now
    at
  • 17:32 - 17:35
    TestDouble, where we spend a lot of our time?
  • 17:35 - 17:38
    We want to help make JavaScript apps easy.
    As
  • 17:38 - 17:39
    easy as Rails.
  • 17:39 - 17:42
    When you think about Rails and the responsibilities
    of
  • 17:42 - 17:46
    Rails, there's really three distinct parts.
    We have an
  • 17:46 - 17:48
    application framework. Stuff that we extend
    - ActionController and
  • 17:48 - 17:51
    so forth. We have conventions and configurations
    that are
  • 17:51 - 17:53
    laid out for us, that we learn through the
  • 17:53 - 17:56
    community and the documentation. And we have
    build automation
  • 17:56 - 18:01
    stuff, like Rails CLI and Rake. And Rails
    owns
  • 18:01 - 18:02
    the whole stack.
  • 18:02 - 18:04
    If I had to grade them separately, I'd say
  • 18:04 - 18:06
    that Rails as an application framework - when
    I
  • 18:06 - 18:08
    first found it, I loved it. But I found
  • 18:08 - 18:10
    on, like, many year, five year, six year projects,
  • 18:10 - 18:12
    it encourages a lot of things that problematic.
    So
  • 18:12 - 18:14
    maybe I'd give that a B minus, if I
  • 18:14 - 18:17
    was grading it separately. But the conventions
    and configurations,
  • 18:17 - 18:18
    that's awesome. I love that I can hit a
  • 18:18 - 18:21
    new Rails team's project and, because of the
    tribal
  • 18:21 - 18:22
    knowledge that we have as well as the conventions
  • 18:22 - 18:24
    laid out and the sensible defaults, I can
    see
  • 18:24 - 18:26
    how is their app different from the norm really
  • 18:26 - 18:28
    easily.
  • 18:28 - 18:30
    Build automation stuff is pretty good. I think
    it's
  • 18:30 - 18:32
    gotten a little bit stagnant. Fantastic in
    2005 and
  • 18:32 - 18:34
    I haven't seen a lot of really cool stuff
  • 18:34 - 18:37
    lately. But it's still solid. What I really
    want
  • 18:37 - 18:40
    to talk about today is convention and configuration
    and
  • 18:40 - 18:41
    the value that that can bring to our JavaScript
  • 18:41 - 18:44
    tooling. Also keep in mind that a lot of
  • 18:44 - 18:45
    people that are new in Rails or have only
  • 18:45 - 18:47
    ever worked in Rails just see one big things.
  • 18:47 - 18:49
    They don't see these as separate problems.
    So if
  • 18:49 - 18:52
    that's you, try to think about these responsibilities
    separately,
  • 18:52 - 18:54
    because I think they can be solved by separate
  • 18:54 - 18:54
    tools.
  • 18:54 - 18:58
    For example, in JavaScript, application frameworks
    are everywhere. If
  • 18:58 - 18:59
    I decided I wanted to solve that middle problem
  • 18:59 - 19:02
    by writing another application framework,
    then I'd have to,
  • 19:02 - 19:04
    you know, go and popularize it against all
    the
  • 19:04 - 19:06
    other application frameworks. I think that
    they can be
  • 19:06 - 19:09
    separated. You know, whether I'm writing backbone
    or Angular
  • 19:09 - 19:11
    or Ember - lately I've been writing a lot
  • 19:11 - 19:13
    of Ember and I love it. But every six
  • 19:13 - 19:15
    months I keep changing my mind. It's a fact.
  • 19:15 - 19:17
    So, so at this point I just wanna be
  • 19:17 - 19:19
    like, eh, I want to write awesome tools that
  • 19:19 - 19:21
    are framework agnostic that anybody can, can
    exploit.
  • 19:21 - 19:26
    From the build automation perspective, like
    I said, the
  • 19:26 - 19:29
    community is already in node.js. Worldwide.
    As soon as
  • 19:29 - 19:31
    stuff is happening, great tools are showing
    up in
  • 19:31 - 19:34
    node.js first. I just want to be this little
  • 19:34 - 19:35
    guy in the middle, right. I want to be
  • 19:35 - 19:37
    the convention and the configuration, right.
    And that's why
  • 19:37 - 19:38
    we built lineman.
  • 19:38 - 19:43
    Lineman, like a, like a lineman on a railroad,
  • 19:43 - 19:45
    is on Twitter here, and you can find his
  • 19:45 - 19:48
    url. And you install him with npm. So you
  • 19:48 - 19:49
    have node.js install and you can just say
    npm
  • 19:49 - 19:52
    install globally lineman, and you create a
    new app
  • 19:52 - 19:54
    really easily with the cli, just like Rails.
    Lineman
  • 19:54 - 19:56
    new app.
  • 19:56 - 20:00
    So, here's me typing in lineman new, start
    a
  • 20:00 - 20:02
    new project, and I get a little. I get
  • 20:02 - 20:05
    a handful of commands that I can run. But
  • 20:05 - 20:08
    first I'm just gonna cd in and I'm gonna
  • 20:08 - 20:11
    tree out all of the files that I have.
  • 20:11 - 20:13
    Like I said, it betrays the biases, right.
    One
  • 20:13 - 20:15
    way to learn the conventions is see what it
  • 20:15 - 20:17
    generates. So you can see I have an app
  • 20:17 - 20:19
    directory with css and images and JavaScript
    and then
  • 20:19 - 20:21
    pages that render on the backend and templates
    on
  • 20:21 - 20:24
    the front. A handful of configuration files.
    A whole
  • 20:24 - 20:26
    bunch of spec helpers to help you test. And
  • 20:26 - 20:31
    then places for all of your vendored third-party
    libraries.
  • 20:31 - 20:33
    And it's convenient, right. It's nice to get
    that
  • 20:33 - 20:35
    bootstrap for you. But our goal is to make
  • 20:35 - 20:37
    it convenient throughout, to switch between
    projects to reduce
  • 20:37 - 20:40
    duplication to make things more common across
    all of
  • 20:40 - 20:42
    our work.
  • 20:42 - 20:45
    One aspect of that is our productivity workflow.
    I
  • 20:45 - 20:46
    want to be able to write some code, save
  • 20:46 - 20:49
    the code, have that code automatically compile
    for me
  • 20:49 - 20:51
    every time I save. Have it concatenate every
    time
  • 20:51 - 20:53
    that I save, and then I want to be
  • 20:53 - 20:55
    able to hit command r and refresh and play
  • 20:55 - 20:56
    with it. But I want to be able to
  • 20:56 - 20:58
    do all of that in less than a hundred
  • 20:58 - 20:59
    milliseconds, because I want a fast feedback
    loop so
  • 20:59 - 21:01
    that I can keep working quickly.
  • 21:01 - 21:02
    In lineman, we do this with a command called
  • 21:02 - 21:05
    lineman run. So you say lineman run, it does
  • 21:05 - 21:07
    a whole bunch of initial build stuff, but
    then
  • 21:07 - 21:08
    it just starts watching for file changes.
    So I
  • 21:08 - 21:11
    can hit this server, the dev server. It says
  • 21:11 - 21:14
    Hello, World! I'm gonna make a quick changes,
    say
  • 21:14 - 21:17
    Goodbye, World! It's already updated. I refresh
    the page
  • 21:17 - 21:18
    and that's that.
  • 21:18 - 21:20
    Now, this is a simple app, but even on
  • 21:20 - 21:22
    large apps it scales very well. On our large
  • 21:22 - 21:26
    applications it's still roughly a hundred
    milliseconds.
  • 21:26 - 21:31
    So, this is great. But command-r driven development
    isn't
  • 21:31 - 21:33
    the whole story, right. I also like to write
  • 21:33 - 21:35
    tests, too. Sometimes I'm doing test-driven
    development. When I
  • 21:35 - 21:39
    do, I also want the same story to slot
  • 21:39 - 21:42
    in really nicely with, with tests. And I want
  • 21:42 - 21:45
    the same feedback cycle to be super duper
    fast.
  • 21:45 - 21:48
    Lineman ships with a cool tool called testem,
    written
  • 21:48 - 21:50
    by Toby Ho, that's really fantastic. What
    you do
  • 21:50 - 21:52
    is you open up another shell, a second shell,
  • 21:52 - 21:54
    and you run lineman spec. And you get this
  • 21:54 - 21:58
    interactive test runner, launches Chrome here,
    and here I'm
  • 21:58 - 22:02
    running a test already. Gonna just change
    the spec
  • 22:02 - 22:04
    to say that I'm specifying that that function
    returned
  • 22:04 - 22:06
    Goodbye, World!
  • 22:06 - 22:10
    Save it off. Got a failure. That quickly.
    I
  • 22:10 - 22:12
    can debug cause it's in the browser. I'm just
  • 22:12 - 22:15
    gonna fix it. Save. And that's it. My tests
  • 22:15 - 22:17
    are passing. In addition to the interactive
    runner, we
  • 22:17 - 22:20
    want a really solid CI story. So you just
  • 22:20 - 22:22
    quit out of testem with the q key, and
  • 22:22 - 22:24
    you can type lineman spec ci, and this is
  • 22:24 - 22:27
    gonna run it all in phantom.js with a nice
  • 22:27 - 22:31
    reporter output. And every lineman project
    generates a travis.yml
  • 22:31 - 22:33
    file when you lineman new. So you literally
    just
  • 22:33 - 22:35
    push it to GitHub, and if you use Travis
  • 22:35 - 22:37
    as your CI service, it's a one button thing
  • 22:37 - 22:38
    and now you have a CI build for your
  • 22:38 - 22:41
    JavaScript. Which if we were to ask people
    to
  • 22:41 - 22:43
    raise hands, I don't think every hand would
    go
  • 22:43 - 22:47
    up if, if I asked if you have one.
  • 22:47 - 22:49
    The deploy story is similar easy, because
    since lineman
  • 22:49 - 22:52
    is just a static asset generating tool, can
    your
  • 22:52 - 22:55
    server host static files? Then yeah, you're
    good. When
  • 22:55 - 22:57
    you write a lineman build, and then you tree
  • 22:57 - 22:59
    out its dist directory, which is where it
    puts
  • 22:59 - 23:01
    its built artifacts, it looks a little like
    this
  • 23:01 - 23:03
    out of the box. You have an html file
  • 23:03 - 23:05
    that references a css file and a JavaScript
    file
  • 23:05 - 23:06
    and both of those have already been concatted
    and
  • 23:06 - 23:09
    minified for you and they're ready to deploy.
  • 23:09 - 23:10
    There's a single flag in the config that you
  • 23:10 - 23:12
    can set, and then just like Rails, you get
  • 23:12 - 23:14
    asset fingerprinted that makes it really nice
    for deploying
  • 23:14 - 23:17
    when you have a CDN. Everything else that
    ever
  • 23:17 - 23:18
    is gonna end up in your dist directory is
  • 23:18 - 23:20
    gonna be stuff that you added, so it'll be
  • 23:20 - 23:23
    stuff that you understand. It's a really easy
    build
  • 23:23 - 23:25
    story.
  • 23:25 - 23:27
    Pushing to Heroku is also really easy. We
    host
  • 23:27 - 23:30
    most of our testable stuff on Heroku, so we
  • 23:30 - 23:32
    just set, we wrote a custom buildpack. You
    set
  • 23:32 - 23:34
    that up and then you say git push. It'll
  • 23:34 - 23:37
    build it with node.js, but then at runtime
    we
  • 23:37 - 23:38
    don't need it and so it just runs statically
  • 23:38 - 23:42
    without node.
  • 23:42 - 23:43
    And we also have a whole bunch of starter
  • 23:43 - 23:45
    projects to help get people up and running
    quickly.
  • 23:45 - 23:48
    Not everyone's just writing vanilla JavaScript,
    right. We have
  • 23:48 - 23:50
    some people who want to get started with Angular
  • 23:50 - 23:54
    quickly, Backbone or Ember. You can just clone
    and
  • 23:54 - 23:56
    go. Clone the project and get started. You'll
    have
  • 23:56 - 23:57
    a little bit of example code. It's a great
  • 23:57 - 23:59
    way, if you want to learn Angular or learn
  • 23:59 - 24:01
    Ember, just to clone our example project,
    because it'll
  • 24:01 - 24:03
    build right away. Like, you already know how
    to
  • 24:03 - 24:04
    run it.
  • 24:04 - 24:07
    We also have a, a really cool. It's because
  • 24:07 - 24:08
    it's all flexible, we also use lineman to
    build
  • 24:08 - 24:12
    all of our JavaScript libs, libs that we maintain,
  • 24:12 - 24:14
    as well as our blog and, and you're free
  • 24:14 - 24:16
    to use lineman, of course, to, to write a
  • 24:16 - 24:19
    markdown blog. It's really, really convenient.
  • 24:19 - 24:24
    So back to planet earth. We're using Grunt.
    We,
  • 24:24 - 24:27
    Grunt is a build tool descended from, you
    know,
  • 24:27 - 24:30
    a whole bunch of other build tools, that is
  • 24:30 - 24:32
    used for task definition. There's a lot of
    different,
  • 24:32 - 24:33
    there's a lot of competition here right now
    in
  • 24:33 - 24:35
    node.js. A lot of people using Gulp. A thing
  • 24:35 - 24:38
    called Broccoli came out recently. It's really
    cool. But
  • 24:38 - 24:41
    what we use Grunt for, primarily, is a place
  • 24:41 - 24:44
    to get awesome stuff from the community.
  • 24:44 - 24:46
    All these tasks ship with lineman out of the
  • 24:46 - 24:48
    box. Or are, and, and so many more are
  • 24:48 - 24:52
    available. We really, really love that we're
    able to
  • 24:52 - 24:57
    so easily pull in new behavior through Grunt
    in
  • 24:57 - 25:01
    a consistent manner. Lineman itself is comically
    extensible. We
  • 25:01 - 25:03
    have a plugin system that is built a little
  • 25:03 - 25:06
    bit around this mental model. We'll talk about
    it
  • 25:06 - 25:09
    in a second. But it's really easy from a
  • 25:09 - 25:12
    user's perspective. All you do is save it.
    npm
  • 25:12 - 25:16
    install, then you save the, save the dependency.
    Run,
  • 25:16 - 25:19
    like, lineman-bower. When you do that, after
    you run
  • 25:19 - 25:21
    lineman run, the next time after you save
    that,
  • 25:21 - 25:22
    lineman will pick it up from your packaged
    JSON,
  • 25:22 - 25:24
    know that it needs to load it, and bower
  • 25:24 - 25:26
    will be slotted in at the appropriate step
    into
  • 25:26 - 25:29
    your build's workflow. No more configuration.
    It even generates
  • 25:29 - 25:30
    your bower JSON for you if it's not there.
  • 25:30 - 25:34
    Cause deep down, there is an npm module out
  • 25:34 - 25:37
    there, bower, right, published by Twitter,
    and around it
  • 25:37 - 25:40
    is the, a, a grunt-bower-task that somebody
    in the
  • 25:40 - 25:42
    community published, and then at the top we
    have
  • 25:42 - 25:45
    this lineman-bower plugin that we maintain.
    Bower is the
  • 25:45 - 25:47
    thing that actually does the thing. That's
    where most
  • 25:47 - 25:48
    of the hard work is.
  • 25:48 - 25:52
    This, this power-task here, from Grunt, it
    automates the
  • 25:52 - 25:55
    thing. There's a lot of hard work there, too.
  • 25:55 - 25:57
    What lineman does is it just knows, given
    lineman's
  • 25:57 - 25:59
    conventions, how to configure the thing for
    you. And
  • 25:59 - 26:01
    so we have this kind of boxed approached to,
  • 26:01 - 26:04
    to how we conceptualize plugins.
  • 26:04 - 26:05
    So you, in your application, you might have
    a
  • 26:05 - 26:07
    lineman-bower plugin that you use, but you
    can also
  • 26:07 - 26:09
    have a lineman-ember plugin that's gonna handle
    all your
  • 26:09 - 26:11
    templates the way that Ember likes to see
    it.
  • 26:11 - 26:14
    And recently we, we learned and were really
    excited
  • 26:14 - 26:17
    that RackSpace is adopting lineman for its
    frontend development,
  • 26:17 - 26:20
    and I encouraged them to write a metaplugin,
    because
  • 26:20 - 26:23
    you can have recursively arbitrarily many
    plugins down the
  • 26:23 - 26:25
    line. So this plugin here - name it whatever
  • 26:25 - 26:27
    you want. Maybe your company's stack or something.
    It
  • 26:27 - 26:29
    can bundle as many plugins at the appropriate
    versions
  • 26:29 - 26:31
    that you want, but you can also override any
  • 26:31 - 26:33
    of the configurations in those plugins, get
    them just
  • 26:33 - 26:34
    how you like. That way you don't have all
  • 26:34 - 26:37
    this duplicated configuration across all of
    your team's files,
  • 26:37 - 26:40
    team's project.
  • 26:40 - 26:43
    Back to monolithic application architecture,
    I've painted a picture
  • 26:43 - 26:44
    where we can separate into two things. But
    I
  • 26:44 - 26:45
    want to talk a little bit more about the
  • 26:45 - 26:47
    benefits of doing that. So say that you have
  • 26:47 - 26:49
    a client in the server. One of the first
  • 26:49 - 26:51
    questions that comes up is like, hey, well,
    how
  • 26:51 - 26:54
    am I gonna run stuff in development, but it
  • 26:54 - 26:55
    still needs to see the server? I'm not gonna
  • 26:55 - 26:58
    build all these extra stubs for my server
    side.
  • 26:58 - 27:01
    And we agree. That would be really onerous.
    So
  • 27:01 - 27:02
    we built a feature into lineman that we call
  • 27:02 - 27:07
    API Proxying. Basically, think of the browser
    hitting lineman,
  • 27:07 - 27:10
    and maybe we have Sinatra in the backend.
    The
  • 27:10 - 27:12
    browser's only gonna know about lineman. It's
    gonna make
  • 27:12 - 27:14
    all of its requests to lineman. But whenever
    they
  • 27:14 - 27:16
    ask for any API routes that lineman doesn't
    know
  • 27:16 - 27:19
    how to respond to, we've got it configured
    to
  • 27:19 - 27:22
    call back to Sinatra. Sinatra responds and
    then lineman
  • 27:22 - 27:24
    proxies that request back to the browser.
  • 27:24 - 27:26
    So it's a seamless environment. It's as if
    you're
  • 27:26 - 27:28
    developing on one thing at runtime even though
    the
  • 27:28 - 27:30
    code has all the benefits of, of, of physical
  • 27:30 - 27:31
    separation.
  • 27:31 - 27:33
    It looks a little bit like this. So here
  • 27:33 - 27:36
    I'm gonna uncomment a little bit of configuration
    that
  • 27:36 - 27:38
    we give you. Change the port to 4567, for
  • 27:38 - 27:45
    Sinatra. My application's real simple. It's
    just got a
  • 27:46 - 27:48
    simple route hi. It gets it and then it
  • 27:48 - 27:52
    paints it onto the screen, whatever the text
    is.
  • 27:52 - 27:54
    And my Sinatra app just returns I heart Ruby
  • 27:54 - 27:58
    at that particular route.
  • 27:58 - 28:02
    So when I write lineman run, you can see
  • 28:02 - 28:04
    it, instead of proxying I'm gonna look at
    Sinatra's
  • 28:04 - 28:06
    logs. I refresh, and it got the request from
  • 28:06 - 28:11
    lineman and it returned through the browser.
    Super easy.
  • 28:11 - 28:13
    Now there's other cases, too, cause the benefit
    of
  • 28:13 - 28:15
    separating frontend and backend, a big part
    of that
  • 28:15 - 28:17
    story is that now development of those two
    things
  • 28:17 - 28:20
    doesn't have to run in lock step, right. We
  • 28:20 - 28:21
    can make a little bit of extra progress in
  • 28:21 - 28:23
    the frontend, maybe do some prototyping. We
    can have
  • 28:23 - 28:27
    a separate backend team after we get big.
    But
  • 28:27 - 28:29
    a lot of times we have, like, you know,
  • 28:29 - 28:30
    it being handy to be able to stub stuff
  • 28:30 - 28:32
    out that doesn't actually exist on the server
    yet,
  • 28:32 - 28:34
    so we can get faster feedback cycles while
    we're
  • 28:34 - 28:35
    developing our frontend.
  • 28:35 - 28:37
    And we offered this in lineman with a tool
  • 28:37 - 28:40
    that we called API stubbing. So same situation.
    We
  • 28:40 - 28:44
    have a browser and it's gonna be hitting lineman.
  • 28:44 - 28:45
    And instead of actually phoning through to
    Sinatra, we're
  • 28:45 - 28:47
    gonna kind of stub our a particular route
    and
  • 28:47 - 28:50
    prevent Sinatra from getting it. And we're
    gonna return
  • 28:50 - 28:53
    that stub back to the browser.
  • 28:53 - 28:55
    So same, same, same exact code base. We're
    gonna
  • 28:55 - 28:58
    go into config slash server.js. This is a,
    an
  • 28:58 - 29:01
    express application that's just kind of bundled
    in. We
  • 29:01 - 29:03
    can define any route we'd like. We can overwrite
  • 29:03 - 29:07
    that hi route. And we're gonna, we're gonna
    troll
  • 29:07 - 29:11
    our coworkers here by sending that We heart
    Node
  • 29:11 - 29:14
    Even More. Sacrilege.
  • 29:14 - 29:17
    So run lineman. Refresh the page. And now
    our
  • 29:17 - 29:19
    stubbing is in place. You can build entire
    toy
  • 29:19 - 29:22
    applications inside of that express application.
    We've had clients
  • 29:22 - 29:25
    in the past, TestDouble is an agency, and
    so
  • 29:25 - 29:26
    we're, we're as consultants. We've had clients
    in the
  • 29:26 - 29:28
    past who've asked us, hey just give us the
  • 29:28 - 29:30
    specifications of the services that you want,
    and our
  • 29:30 - 29:32
    specification is a living document of, well,
    just make
  • 29:32 - 29:34
    it do this. And it's been a really, really
  • 29:34 - 29:39
    seamless - it's certainly better than traditional
    documentation.
  • 29:39 - 29:40
    Another case that I like a lot is I
  • 29:40 - 29:43
    had a project once with a thirty-minute long
    test
  • 29:43 - 29:47
    build, and I split it up into, I split
  • 29:47 - 29:49
    the application up into two. A frontend and
    a
  • 29:49 - 29:52
    backend, just like we're talking about. Then
    I went
  • 29:52 - 29:54
    to recover that new application with tests,
    and I
  • 29:54 - 29:57
    found that the frontend tests had a runtime
    of
  • 29:57 - 30:00
    only four minutes. That made me very worried
    about
  • 30:00 - 30:01
    the state of affairs in the backend. I figured
  • 30:01 - 30:03
    that might mean that the twenty-six minutes
    was hiding
  • 30:03 - 30:06
    there somewhere. But as it turns out, I wrote
  • 30:06 - 30:08
    that, and that only took four minutes, too.
  • 30:08 - 30:09
    So then I got really suspicious and I'm like,
  • 30:09 - 30:11
    I should probably have some smoke test to
    make
  • 30:11 - 30:12
    sure that when this is all plugged into, plugged
  • 30:12 - 30:15
    together correctly, it works. And the smoke
    test, of
  • 30:15 - 30:16
    course, when you plug it in both, it's a
  • 30:16 - 30:18
    little bit slower, and that ran at a whole
  • 30:18 - 30:20
    two minutes.
  • 30:20 - 30:23
    So this thirty-minute test suite somehow got
    reduce to
  • 30:23 - 30:24
    a ten minute build, even though the next,
    the
  • 30:24 - 30:27
    logical and physical complexity of the system
    increased. And
  • 30:27 - 30:30
    if you understand how build duration tends
    to build
  • 30:30 - 30:32
    super linearly, any savings that you can get
    upfront
  • 30:32 - 30:34
    in the beginning are going to mean a big
  • 30:34 - 30:37
    difference, you're going to get a lot longer
    runway
  • 30:37 - 30:39
    and traction out of the build suite in the
  • 30:39 - 30:40
    far future.
  • 30:40 - 30:44
    And, additionally, it's habit-forming, right.
    I mean, having a,
  • 30:44 - 30:46
    a, there's a lot of operational problems that
    you
  • 30:46 - 30:48
    have to solve when you have two different
    things
  • 30:48 - 30:51
    to maintain and manage and version, as a deploy
  • 30:51 - 30:54
    story, two different projects. You can make
    it simple,
  • 30:54 - 30:57
    but I mean, once you solve that problem, once,
  • 30:57 - 31:02
    you can have arbitrarily many microservices
    popping up.
  • 31:02 - 31:04
    And if you're viewing the world as going in
  • 31:04 - 31:06
    that direction, it's a great problem to solve
    now
  • 31:06 - 31:09
    with a problem that you already understand
    really well.
  • 31:09 - 31:10
    Frontends and backends.
  • 31:10 - 31:14
    Additionally, this is not a frontend versus
    Rails talk.
  • 31:14 - 31:16
    It's an and. We love Rails. We use Rails
  • 31:16 - 31:19
    all the time for our services. And lineman
    and
  • 31:19 - 31:21
    Rails play together really nicely. We've got
    a gem
  • 31:21 - 31:24
    called Rails lineman and lineman plugin called
    lineman-rails. You
  • 31:24 - 31:27
    install both those things and you just magically,
    everything
  • 31:27 - 31:30
    gets auto-configured. And, and your development
    story is great
  • 31:30 - 31:33
    and assets precompile is just wrapped with
    a lineman
  • 31:33 - 31:34
    build first.
  • 31:34 - 31:36
    You can learn more about that at linemanjs
    dot
  • 31:36 - 31:39
    com dlash rails dot html. And we have this
  • 31:39 - 31:42
    fantastic little documentation site put together
    for us by
  • 31:42 - 31:46
    Derrick Briggs from neo. More recently, you
    can actually
  • 31:46 - 31:49
    see me do this myself, live coding, unedited,
    in
  • 31:49 - 31:52
    an Ember screencast that I did - how to
  • 31:52 - 31:54
    get setup, like we would setup a project.
    And
  • 31:54 - 31:57
    that's at our blog. It's the current, most
    recent
  • 31:57 - 31:59
    article. So just hit the blog dot testdouble
    dot
  • 31:59 - 32:03
    com and you'll see the, the embedded screencast.
  • 32:03 - 32:05
    It's a fantastic tool. We love working with
    it.
  • 32:05 - 32:08
    I also, real quickly, I just want to thank
  • 32:08 - 32:11
    my friend Marissa Hile. She's a visual designer
    who's
  • 32:11 - 32:13
    available for contract. She did all of the
    good
  • 32:13 - 32:20
    illustrations in this talk. And, and, you
    know, we'd
  • 32:20 - 32:22
    love to help you. If these are problems that
  • 32:22 - 32:24
    are, that are, that are new and hard for
  • 32:24 - 32:26
    your team, let us know. You know, we are
  • 32:26 - 32:28
    consultants, and we'd love to like, engage
    with your
  • 32:28 - 32:30
    company and, and, and work on great stuff
    alongside
  • 32:30 - 32:32
    you, but we'd also just love to answer your
  • 32:32 - 32:34
    questions, because I think we want to all
    make
  • 32:34 - 32:37
    an impact and, and move the conversation forward.
  • 32:37 - 32:41
    Also, like everyone else at RailsConf, we
    are hiring.
  • 32:41 - 32:42
    Just set an email to join at testdouble dot
  • 32:42 - 32:44
    com and we'll respond to you promptly and
    have,
  • 32:44 - 32:49
    start the conversation. Also, a couple of
    my fellow
  • 32:49 - 32:53
    double agents, Todd Coffman and Zack Briggs,
    are giving
  • 32:53 - 32:55
    a, a workshop this afternoon on JavaScript
    testing. I
  • 32:55 - 32:57
    think they'll probably be using lineman. So
    it might
  • 32:57 - 32:58
    be a good place to practice both of those
  • 32:58 - 33:00
    things.
  • 33:00 - 33:02
    And I want to thank you. You know, please
  • 33:02 - 33:04
    reach out. I'd love to hear from you. It
  • 33:04 - 33:05
    was an absolute honor and a privilege to get
  • 33:05 - 33:07
    to speak to you today. Thank you very much.
Title:
RailsConf 2014 - The "Rails of JavaScript" Won't be a Framework by Justin Searls
Description:

more » « less
Duration:
33:34

English subtitles

Revisions