$30 off During Our Annual Pro Sale. View Details »

Ember with Rails: From Development to Deployment

Ember with Rails: From Development to Deployment

This talk covers the options for structuring concurrent Rails and Ember development, strategies for creating backend APIs that work well with Ember apps, and some innovative ideas around deploying your Ember and Rails apps into production.

Luke Melia

April 24, 2014
Tweet

More Decks by Luke Melia

Other Decks in Technology

Transcript

  1. Ember.js with Rails:
    From Development

    To Deployment
    Luke Melia
    Chicago Ember.js
    April 24th, 2014
    1

    View Slide

  2. About this Embereño
    2

    View Slide

  3. Overview of this talk
    ★ Walkthrough an Ember + Rails App
    ★ Compare and Contrast
    ★ Development Tools
    ★ API
    ★ Deployment Approaches
    ★ Common Questions
    3

    View Slide

  4. Walkthrough an Ember+Rails app 4

    View Slide

  5. Compare & Contrast 5

    View Slide

  6. 6
    Server
    Browser
    The Roles of Ember & Rails
    RESTful API endpoints (JSON)
    User interface & user interactions

    View Slide

  7. 7
    Differences in Development Mindsets
    Request / response-based
    Long-lived state
    Lifetime of state measured in milliseconds
    Lifetime of state measured in minutes

    View Slide

  8. 8
    Differences in Development Mindsets
    MVC with a router
    MVC with a router
    Sounds the same,

    but they are not.


    Do not plan on

    applying your

    Rails MVC

    vocabulary to

    Ember.

    View Slide

  9. 9
    Data Flow in Rails
    Browser
    Controller
    View (Template)
    Router
    Model
    Controller updates /
    queries models
    Sends HTML to Browser for
    to use to create DOM
    Sends requests via HTTP
    Generates HTML

    View Slide

  10. 10
    Router Controller Controller
    View View
    Template
    Model Model Model Model
    Data flows down from
    models via bindings
    Events flow up from
    view layer to the router
    Router updates models &
    controllers based on events
    Data Flow in Ember

    View Slide

  11. 11
    Ember Takes Inspiration From Rails
    ★ Convention over configuration
    ★ “Look at all the code I’m not writing!”
    ★ Internal DSLs for expressiveness
    ★ An engaged, vibrant community

    View Slide

  12. 12
    Ember Takes Inspiration From Ruby
    ★ A focus on developer happiness
    ★ Object model: classical inheritance,

    mix-ins, class reopening

    View Slide

  13. 13
    Ember & Rails Share a @wycats

    View Slide

  14. Development Tools 14

    View Slide

  15. Development Tools 15
    ★ asset pipeline
    ★ ember-rails
    ★ ember-appkit-rails
    ★ …or, develop separate from your Rails app

    View Slide

  16. Development Tools: Asset Pipeline 16
    ★ Manage Javascript files yourself
    ★ Embed Handlebars templates in HTML and let
    Ember parse them at runtime

    View Slide

  17. Development Tools: Ember Rails 17
    ★ Official interop supported by Ember Core
    ★ Generators
    ★ Template pre-compilation

    View Slide

  18. Development Tools: Ember AppKit Rails 18
    ★ Based on ember-appkit, from my colleague
    Stefan Penner, which uses ES6 modules and a
    custom resolver
    ★ Used by Tilde & Dockyard
    ★ Future uncertain

    View Slide

  19. Development Tools: Separate From Rails 19
    ★ Separate repo for your Ember app from
    your Rails app. Proxy in development.
    ★ Use any build tools, including grunt, gulp,
    brunch, or broccoli.
    ★ ember-cli is likely to be the future, still a
    work-in-progress

    View Slide

  20. Development Tools: Separate From Rails (cont.) 20
    ★ Many JS build tools have option to proxy.
    Set it up to send /api traffic to Rails.
    ★ Or, run nginx locally and set up proxy rules
    accordingly.

    View Slide

  21. Development Tools: Tips 21
    ★ Development vs. Production builds of Ember
    ★ Ember Inspector extension for Chrome & Firefox
    ★ Learn the Chrome Dev Tools. Better.

    View Slide

  22. Implementing Your API with Rails 22

    View Slide

  23. Analogy to Traditional Rails Data Flow
    ★ In traditional Rails apps, controllers make
    instance variables available to be rendered
    using ERB
    ★ In a Ember+Rails app, controllers instead
    serialize these “instance variables” into JSON
    and make it available to Ember to render
    23

    View Slide

  24. Options for API rendering
    ★ ERB
    ★ JBuilder
    ★ RABL
    ★ Active Model Serializers
    24

    View Slide

  25. Options for API rendering: ERB 25

    View Slide

  26. Options for API rendering: JBuilder 26
    https://github.com/rails/jbuilder

    View Slide

  27. Options for API rendering: RABL 27
    https://github.com/nesquena/rabl

    View Slide

  28. Options for API rendering:

    Active Model Serializers 28
    https://github.com/rails-api/active_model_serializers

    View Slide

  29. Options for API rendering
    ★ ERB
    ★ JBuilder
    ★ RABL
    ★ Active Model Serializers: Recommended
    29

    View Slide

  30. CORS
    ★ It will be much easier to work with your API if
    your Ember app is served off the same domain
    as your Rails app is
    ★ If you must cross domains, check out the rack-
    cors gem.
    30
    https://github.com/cyu/rack-cors

    View Slide

  31. Deployment Approaches 31

    View Slide

  32. Two Options for Deployment
    ★ Deploy with your Rails app
    ★ Simple, but slow
    !
    ★ Deploy independently
    ★ Fast, but more complex
    32

    View Slide

  33. 33
    Simple, but Ember apps changes are as
    slow to deploy as Rails app changes
    Rails server
    Dev or CI
    API requests
    dynamic Rails pages
    HTML for JS App
    JS for JS App
    CSS, Images for JS App
    AWS
    Cloudfront
    Deploy Rails

    app code, HTML,

    JS, CSS, images

    View Slide

  34. 34
    More complex, but fast to deploy
    Static assets server
    (AWS S3)
    Rails server
    Dev or CI
    Deploy

    JS, CSS, images
    (additive)
    API requests
    dynamic Rails pages
    HTML for JS App
    JS for JS App
    CSS, Images for JS App
    Deploy HTML
    AWS Cloudfront
    Deploy Rails

    app code
    https://speakerdeck.com/lukemelia/lightning-fast-deployment-of-your-rails-backed-javascript-app

    View Slide

  35. Common Questions 35

    View Slide

  36. “If I have MVC on the server and MVC on the
    client, am I doing double the work?” 36

    View Slide

  37. “If I have MVC on the server and MVC on the
    client, am I doing double the work?” (cont.) 37
    ★ As Andre Malan said, “Your front end is not your
    back end”
    ★ Your Rails and Ember apps have separate
    responsibilities. Duplicated work on client and
    server is unusual.

    View Slide

  38. “What is the difference between a Rails
    controller and an Ember controller?” 38
    ★ A Rails controller is responsible for doing some
    queries or work and initiating the rendering of
    JSON or HTML
    ★ An Ember controller is more akin to a “view model”
    or “presenter” in Rails land. It is responsible for
    presenting bindable data to templates for
    rendering by proxying models and maintaining
    non-model state and computed properties.

    View Slide

  39. “Should I match my Ember routes to my
    Rails routes?” 39
    ★ No.
    ★ Rails routes are typically based on REST
    principles.
    ★ Ember routes map to the URLs a users sees as
    they move through the app and are nested to
    match the nested structure of the UI.

    View Slide

  40. “How do I implement authentication with
    Ember?” 40
    ★ Simplest: Separate log-in page. Standard Rails
    cookie-based auth. (Must be on same domain.)
    ★ More complicated: Token-based authentication.
    Login with username / password, receive bearer
    token. Send bearer token in Authorization header
    with all API requests.

    View Slide

  41. “How do I implement authentication with
    Ember?” (continued) 41
    ★ Most Ember apps have a UserController or
    MeController to allow routes and other
    controllers access to information about the
    current user.
    https://github.com/simplabs/ember-simple-auth

    View Slide

  42. “How do I implement authentication with
    Ember?” (continued) 42
    ★ Tips
    ★ Consider ember-simple-auth, plus ember-
    simple-auth-devise.
    ★ Use HTTPS.
    https://github.com/simplabs/ember-simple-auth

    View Slide

  43. Stefan Penner, Kris Selden, Ray Cohen & me
    43
    Yapp Labs
    !
    Ember.js
    Consulting & Training

    View Slide

  44. Q&A
    Creative Commons photo credits: None
    44
    Follow me @lukemelia

    View Slide