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.

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!!
5. ACR’s Past https://youtu.be/2aYdtS7FZJA
6. ACR’s Past
7. ACR - 2016
8. ACR - 2016
9. ACR - 2016
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"
21. Rails Development UX
22. Rails Development gem install rails rails new acr16 cd acr16 rails s
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
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
32. (╯°□°)╯︵
37. Ember Development UX
38. Ember Development npm install -g ember-cli ember new acr16 cd acr16 ember s
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
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
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