Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Robert Jackson

April 08, 2016
Tweet

More Decks by Robert Jackson

Other Decks in Programming

Transcript

  1. Rails Dev’s Intro to
    Ember

    View full-size slide

  2. Who the heck is this guy?
    ● Ember Core Team
    ● General Open Source Addict
    ● Twitch
    twitter: rwjblue
    github: rwjblue

    View full-size slide

  3. ACR’s Past
    https://youtu.be/2aYdtS7FZJA

    View full-size slide

  4. ACR’s Past

    View full-size slide

  5. Some History….
    ● Visual Studio: 1998 - 2006
    ● Ruby/Rails: 2006 - 2014
    ● Ember: 2014 - Now

    View full-size slide

  6. Single Page Applications

    View full-size slide

  7. Single Page Applications
    ● "Application" feel
    ● Snappy interactions
    ● User Experience

    View full-size slide

  8. Single Page Applications
    ● Easier state management
    ● No more jQuery soup
    ● JavaScript "sprinkles"

    View full-size slide

  9. Rails Development UX

    View full-size slide

  10. Rails Development
    gem install rails
    rails new acr16
    cd acr16
    rails s

    View full-size slide

  11. 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

    View full-size slide

  12. Rails Development

    View full-size slide

  13. 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

    View full-size slide

  14. Javascript Development

    View full-size slide

  15. 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

    View full-size slide

  16. https://www.destroyallsoftware.com/talks/wat

    View full-size slide

  17. (╯°□°)╯︵

    View full-size slide

  18. Ember Development UX

    View full-size slide

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

    View full-size slide

  20. Ember Development
    % ember generate template application
    # add to app/templates/application.hbs
    Welcome!

    View full-size slide

  21. Ember Development
    % ember test
    1..8
    # tests 8
    # pass 8
    # skip 0
    # fail 0
    # ok

    View full-size slide

  22. Ember Development

    View full-size slide

  23. Rails Development
    gem install rails
    rails new acr16
    cd acr16
    rails s

    View full-size slide

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

    View full-size slide

  25. 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

    View full-size slide

  26. Ember Development
    % ember generate template application
    # add to app/templates/application.hbs
    Welcome!

    View full-size slide

  27. Ember Basics

    View full-size slide

  28. Ember Basics
    ● Router
    ● Route
    ● Template
    ● Component

    View full-size slide

  29. Ember Basics - Router

    View full-size slide

  30. Ember Basics - Route

    View full-size slide

  31. Ember Basics - Template

    View full-size slide

  32. Ember Basics - Component

    View full-size slide

  33. So What!? Make it go!

    View full-size slide

  34. Silly Demo
    % gem install rails --pre
    % rails new acr16-rails-api --skip-turbolinks --api

    View full-size slide

  35. Silly Demo
    # edit Gemfile
    # uncomment:
    gem 'jbuilder'
    # add
    gem 'ember-cli-rails'

    View full-size slide

  36. 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

    View full-size slide

  37. Silly Demo
    # edit app/controllers/application_controller.rb
    #
    # not needed after:
    # github.com/thoughtbot/ember-cli-rails/pull/400
    class ApplicationController < ActionController::Base
    end

    View full-size slide

  38. Silly Demo
    # config/routes.rb
    Rails.application.routes.draw do
    mount_ember_app :frontend, to: "/"
    end

    View full-size slide

  39. Silly Demo
    % bin/rails s
    % open http://localhost:3000

    View full-size slide

  40. Silly Demo
    % cd frontend
    % ember generate template application
    % echo "Hello, Ancient City Ruby!" > \
    app/templates/application.hbs

    View full-size slide

  41. What’s Next
    ● Testing!
    ● Testing!
    ● Testing!

    View full-size slide

  42. Cucumber Test

    View full-size slide

  43. Ember Acceptance Test

    View full-size slide

  44. Resources - Websites
    ● https://guides.emberjs.com/v2.4.0/
    ● http://emberjs.com/api/

    View full-size slide

  45. Resources - Podcasts
    ● http://ember.land/
    ● https://emberweekend.com/

    View full-size slide

  46. Resources - Open Source
    ● https://github.com/TryGhost/Ghost
    ● https://github.com/travis-ci/travis-web

    View full-size slide