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.

49612ba6e616ca3c4c668ad35e3e84ce?s=128

Luke Melia

April 24, 2014
Tweet

Transcript

  1. Ember.js with Rails: From Development
 To Deployment Luke Melia Chicago

    Ember.js April 24th, 2014 1
  2. About this Embereño 2

  3. Overview of this talk ★ Walkthrough an Ember + Rails

    App ★ Compare and Contrast ★ Development Tools ★ API ★ Deployment Approaches ★ Common Questions 3
  4. Walkthrough an Ember+Rails app 4

  5. Compare & Contrast 5

  6. 6 Server Browser The Roles of Ember & Rails RESTful

    API endpoints (JSON) User interface & user interactions
  7. 7 Differences in Development Mindsets Request / response-based Long-lived state

    Lifetime of state measured in milliseconds Lifetime of state measured in minutes
  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. ≠
  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
  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
  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
  12. 12 Ember Takes Inspiration From Ruby ★ A focus on

    developer happiness ★ Object model: classical inheritance,
 mix-ins, class reopening
  13. 13 Ember & Rails Share a @wycats

  14. Development Tools 14

  15. Development Tools 15 ★ asset pipeline ★ ember-rails ★ ember-appkit-rails

    ★ …or, develop separate from your Rails app
  16. Development Tools: Asset Pipeline 16 ★ Manage Javascript files yourself

    ★ Embed Handlebars templates in HTML and let Ember parse them at runtime
  17. Development Tools: Ember Rails 17 ★ Official interop supported by

    Ember Core ★ Generators ★ Template pre-compilation
  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
  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
  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.
  21. Development Tools: Tips 21 ★ Development vs. Production builds of

    Ember ★ Ember Inspector extension for Chrome & Firefox ★ Learn the Chrome Dev Tools. Better.
  22. Implementing Your API with Rails 22

  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
  24. Options for API rendering ★ ERB ★ JBuilder ★ RABL

    ★ Active Model Serializers 24
  25. Options for API rendering: ERB 25

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

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

  28. Options for API rendering:
 Active Model Serializers 28 https://github.com/rails-api/active_model_serializers

  29. Options for API rendering ★ ERB ★ JBuilder ★ RABL

    ★ Active Model Serializers: Recommended 29
  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
  31. Deployment Approaches 31

  32. Two Options for Deployment ★ Deploy with your Rails app

    ★ Simple, but slow ! ★ Deploy independently ★ Fast, but more complex 32
  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
  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
  35. Common Questions 35

  36. “If I have MVC on the server and MVC on

    the client, am I doing double the work?” 36
  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.
  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.
  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.
  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.
  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
  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
  43. Stefan Penner, Kris Selden, Ray Cohen & me 43 Yapp

    Labs ! Ember.js Consulting & Training
  44. Q&A Creative Commons photo credits: None 44 Follow me @lukemelia