Save 37% off PRO during our Black Friday Sale! »

Rails Developer's Intro to Ember

Rails Developer's Intro to Ember

So you want to make a nice shiny Ember app as your Rails API's main frontend and are not sure where to start? Lets jump into building a new Ember app integrated with Rails using the ember-cli-rails gem.

This talk was given to Ancient City Ruby 2016.

0dfd10ad198ae5a87640da046a77a90a?s=128

Robert Jackson

April 08, 2016
Tweet

Transcript

  1. Rails Dev’s Intro to Ember

  2. Who the heck is this guy? • Ember Core Team

    • General Open Source Addict • Twitch twitter: rwjblue github: rwjblue
  3. Thank You!!

  4. None
  5. ACR’s Past https://youtu.be/2aYdtS7FZJA

  6. ACR’s Past

  7. ACR - 2016

  8. ACR - 2016

  9. ACR - 2016

  10. None
  11. None
  12. Some History…. • Visual Studio: 1998 - 2006 • Ruby/Rails:

    2006 - 2014 • Ember: 2014 - Now
  13. Single Page Applications

  14. Single Page Applications • "Application" feel • Snappy interactions •

    User Experience
  15. Single Page Applications • Easier state management • No more

    jQuery soup • JavaScript "sprinkles"
  16. None
  17. None
  18. None
  19. None
  20. None
  21. Rails Development UX

  22. Rails Development gem install rails rails new acr16 cd acr16

    rails s
  23. None
  24. Rails Development bin/rails generate controller welcome index # add to

    config/routes.rb root 'welcome#index' # add to app/views/welcome/index.html.erb Welcome
  25. Rails Development

  26. Rails Development % bin/rails test Finished in 0.194783s, 5.1339 runs/s,

    5.1339 assertions/s. 1 runs, 1 assertions, 0 failures, 0 errors, 0 skips
  27. Javascript Development

  28. None
  29. JavaScript console.log(typeof null); // object console.log(NaN === NaN); // false

    console.log([] + []); // "" console.log({} + []); // 0 console.log(typeof NaN); // number let a = new Date(2016, 1, 1); let b = new Date(2016, 1, 1); console.log(a === b) // false https://www.destroyallsoftware.com/talks/wat
  30. https://www.destroyallsoftware.com/talks/wat

  31. None
  32. (╯°□°)╯︵

  33. None
  34. None
  35. None
  36. None
  37. Ember Development UX

  38. Ember Development npm install -g ember-cli ember new acr16 cd

    acr16 ember s
  39. None
  40. Ember Development % ember generate template application # add to

    app/templates/application.hbs Welcome!
  41. Ember Development % ember test 1..8 # tests 8 #

    pass 8 # skip 0 # fail 0 # ok
  42. Ember Development

  43. Rails Development gem install rails rails new acr16 cd acr16

    rails s
  44. Ember Development npm install -g ember-cli ember new acr16 cd

    acr16 ember s
  45. Rails Development bin/rails generate controller welcome index # add to

    config/routes.rb root 'welcome#index' # add to app/views/welcome/index.html.erb Welcome
  46. Ember Development % ember generate template application # add to

    app/templates/application.hbs Welcome!
  47. Ember Basics

  48. Ember Basics • Router • Route • Template • Component

  49. Ember Basics - Router

  50. Ember Basics - Route

  51. Ember Basics - Template

  52. Ember Basics - Component

  53. So What!? Make it go!

  54. Tools

  55. Tools

  56. Tools

  57. Silly Demo % gem install rails --pre % rails new

    acr16-rails-api --skip-turbolinks --api
  58. Silly Demo # edit Gemfile # uncomment: gem 'jbuilder' #

    add gem 'ember-cli-rails'
  59. Silly Demo % bin/rails generate ember:init % npm install -g

    ember-cli % ember new frontend --skip-git % cd frontend % ember install ember-cli-rails-addon
  60. Silly Demo # edit app/controllers/application_controller.rb # # not needed after:

    # github.com/thoughtbot/ember-cli-rails/pull/400 class ApplicationController < ActionController::Base end
  61. Silly Demo # config/routes.rb Rails.application.routes.draw do mount_ember_app :frontend, to: "/"

    end
  62. None
  63. Silly Demo % bin/rails s % open http://localhost:3000

  64. Silly Demo % cd frontend % ember generate template application

    % echo "<h1>Hello, Ancient City Ruby!</h1>" > \ app/templates/application.hbs
  65. None
  66. What’s Next • Testing! • Testing! • Testing!

  67. Cucumber Test

  68. Ember Acceptance Test

  69. Resources

  70. Resources - Websites • https://guides.emberjs.com/v2.4.0/ • http://emberjs.com/api/

  71. Resources - Podcasts • http://ember.land/ • https://emberweekend.com/

  72. Resources - Open Source • https://github.com/TryGhost/Ghost • https://github.com/travis-ci/travis-web

  73. The End