Ember on Rails: #REALTALK

If you work in Rails and have ever wondered about Ember.js, you should know that Ember and Rails go together like Nutella and pretzels. (Which is to say, quite well indeed.)

Get an inside look of the experience of going from having never tried Ember to shipping a production application in it. What makes Ember a good match for certain types of applications? What's so different about it compared to other frameworks? What are the drawbacks?

With this quick tour, you'll be equipped to jump in and start seeing the kind of crazy-ambitious applications you can build when you've got Ember.js in your toolset.

Presented at Lone Star Ruby Conf 2013

Transcript

1. EMBER on RAILS: #REALTALK
2. OR, RELUCTANTLY STUMBLING UPON THE FUTURE OF WEB DEVELOPMENT
3. BRANDON HAYS @TEHVIKING RUBYIST.
4. THAT’S NO MOON
5. DIDN’T USED TO PROGRAM BUT THAT’S ANOTHER STORY
6. (NOT) MY STORY
7. “BRENDAN”
8. “OH BOY, RAILS! THAT’S WHERE I’M A VIKING!”
9. source 'https://rubygems.org' gem 'architecture' gem 'design' gem 'domain_logic' gem 'agile_development' gem 'ship_it' THERE’S A GEM FOR THAT
10. BRENDAN HAS OPINIONS
11. WEB PAGE == DOCUMENT KEEP DEV SIMPLE MAKE IT SNAPPY FOCUS ON USERS
12. CHURCH OF THE 80% USE CASE
13. MVC
14. WE WORK IN 2 LANGUAGES & 2 ENVIRONMENTS
15. MVCMVC
16. VCMVCMVCMV VCMVCMVCMV VCMVCMVCMV VCMVCMVCMV BOYZ2MENABCBBD
18. “HATER” IS A STRONG WORD
19. THING IS, THERE’S THIS PROBLEM.
20. :*(
21. WE GET OUR NEWS FROM TWITTER
22. - Browse tweets - Display story inline - Readability integration - Filter tweet types - Mark as read - Filter read/unread - J/K Navigation
23. SOPHISTICATED UI + PERSISTENT STATE = PAIN
24. DOM/AJAX/CONTROLLER BACK & FORTH DANCE
25. FEELS KINDA... DIRTY
26. JQUERY CASCADE: PLUGIN 1 THAT WAS EASY PLUGIN 2 THAT WAS... LESS EASY PLUGIN 3 OH THE HUMANITY
27. 2 CHOICES: COMPROMISE ON USER EXPERIENCE
28. NOBODY PUTS UX IN THE CORNER 2 CHOICES:
29. 2 CHOICES: WRITE THE BALL OF MUD
30. BALL OF MUD: WHAT DOES IT LOOK LIKE?
31. THE DOM IS YOUR PERSISTENCE LAYER NOW.
32. 2 CHOICES: PRAY IT HOLDS TOGETHER
33. THIS WAS SUPPOSED TO BE FUN
34. 3rd CHOICE: LEAN ON JS FRAMEWORK
35. CAN BRENDAN EVER BE HAPPY USING A JS FRAMEWORK?
36. JS FRAMEWORK PROLIFERATION
37. IT’S WORTH A SHOT, RIGHT?
38. Gemfile gem 'ember-rails' gem 'ember-source', '1.0.0.rc6' from command line: rails g ember:bootstrap oh, and SHUT OFF TURBOLINKS INSTALLATION
39. THIS IS A GEM INSTALL I KNOW THIS
40. CHALLENGES
41. I WAS TOLD THERE WOULD BE SPRINKLES
42. BUT BRENDAN SOLDIERS ON
43. HOW IT WORKS app/controllers/home_controller.rb class HomeController < ApplicationController def index end end config/routes.rb match "/*path" => "home#index", via: %w(get post) root "home#index"
44. HOW IT WORKS app/assets/javascripts/router.js.coffee App.Router.map -> @route 'home', path: '/' app/assets/javascripts/templates/application.handlebars HELLO THERE BIG BEAUTIFUL WORLD! {{outlet}} WE’LL TALK ABOUT {{OUTLET}} IN A MOMENT
45. BREAK SOME RAILS HABITS
46. MODELS ARE MOSTLY WHAT YOU EXPECT
47. MODELS 2 JOBS: DEFINE AND HOLD PROPERTIES FOR DOMAIN MODEL INSTANCES RETRIEVE/PERSIST CHANGES IF USING EMBER-DATA OR EMBER-MODEL
48. ROUTES AREN’T WHAT YOU EXPECT
49. ROUTES APP_ROUTER.JS IS WHAT YOU KNOW AS "ROUTES" ROUTES DO HEAVY LIFTING. GETS YOUR MODEL OBJECT, STUFFS IT INTO A CONTROLLER, AND PASSES IT ALONG
50. CONTROLLERS AREN’T WHAT YOU EXPECT
51. CONTROLLERS NOT AT ALL LIKE RAILS CONTROLLERS. PURELY FOR ADDING DISPLAY LOGIC TO THE MODEL
52. VIEWS AREN’T WHAT YOU EXPECT
53. VIEWS VIEWS != TEMPLATES VIEWS IN RAILS ARE INVISIBLE, THEY PASS CONTEXT TO TEMPLATES VIEWS IN EMBER ARE OPTIONAL, FOR HANDLING USER INPUT & DISPLAY LOGIC
54. TEMPLATES HANDLEBARS IS POWERFUL HANDLEBARS HELPERS ARE AWESOME, USE THEM {{ELSE}} FOR ZERO STATE IS SO GREAT
55. http://jeffreybiles.com/blog/much-very-confused.html
56. (MORE) CHALLENGES
57. connectOutlets: function(router, event) { router.get('sidebarController').connectOutlet('sidebar'); router.get('contentController').connectOutlet('content'); router.get('footerController').connectOutlet('footer'); } STACK OVERFLOW
58. connectOutlets: function(router, event) { router.get('sidebarController').connectOutlet('sidebar'); router.get('contentController').connectOutlet('content'); router.get('footerController').connectOutlet('footer'); } STACK OVERFLOW WHAT?
59. EMBER-DATA
60. EMBER-DATA WH... WHAT?
61. KEEPING UP BETAS, RC1, RC2, RC3, RC4, RC5, RC6, RC6.2 EMBER-DATA BETAS HANDLEBARS BETAS
62. KEEPING UP BETAS, RC1, RC2, RC3, RC4, RC5, RC6, RC6.2 EMBER-DATA BETAS HANDLEBARS BETAS W-WH... WHAT?
63. SAY “WHAT” AGAIN I DOUBLE DARE YOU
64. THINK RAILS 0.14.3, NOT RAILS 4 (OR EVEN 2.3)
65. OK, GREAT. NOW WHAT?
66. app/assets/javascripts/routes.js.coffee App.Router.map -> @resource 'sharedItems', path: '/', -> @resource 'sharedItem', path: '/:shared_item_id' @route "fourOhFoured", path: "*:" App.Router.reopen location: 'history' DIVING IN: EMBER
67. app/assets/javascripts/routes/shared_items.js.coffee App.SharedItemsRoute = Ember.Route.extend model: -> App.SharedItem.find() setupController: (controller, model) -> controller.set('content', model) DIVING IN: EMBER
68. app/assets/javascripts/templates/shared_items.handlebars {{#each item in model}} <li>{{#linkTo 'sharedItem' item}}{{item.id}}{{/linkTo}}</ li> {{else}} No items. {{/each}} {{outlet}} DIVING IN: EMBER
69. app/assets/javascripts/templates/shared_item.handlebars <p>Shared item goes here!</p> <p>{{url}}</p> DIVING IN: EMBER
70. app/controllers/shared_items_controller.rb module Api class SharedItemsController < ApplicationController respond_to :json def index @shared_items = current_user.shared_items.all respond_with @shared_items, root: false end def show @shared_item = current_user.shared_items.find(params[:id]) respond_with @shared_item, root: false end def update @shared_item = current_user.shared_items.find(params[:id]) if @shared_item.update!(shared_item_params) respond_with @shared_item, root: false end end private def shared_item_params params.require(:shared_item).permit(:read_state) end end end API: IT’S JUST RAILS
71. IT WILL MAKE YOU FOCUS LESS ON PERSISTENCE
72. app/models/readable_item.rb class ReadableItem attr_accessor :content, :title, :author, :url def initialize(url) @url = url get_readable_content end def get_readable_content request = HTTParty.get("http:// foo.readability.com/") readability_response = request.parsed_response self.content = readability_response["content"] self.title = readability_response["title"] self.author = readability_response["author"] end end NON-PERSISTED MODELS
73. SharedItemsRoute: ‘/’ rendered into application {{outlet}} ApplicationRoute (generated): ‘/’ SharedItemRoute: ‘/:id’ rendered into shared_items {{outlet}}
74. TWEETLINKS v1.0rc6.2b4 DEMO
75. WHAT WE HAVEN’T DONE COMPLEX UI TWITTER AUTH ANY SEMBLANCE OF REAL-LIFE USE
76. WHAT WE HAVE DONE DEFINE DOMAIN MODEL URL DESIGN DEFINE API NEEDS STUFF ON THE SCREEN!
77. NOW WHAT? WASN'T READY
78. NOW WHAT? IS READY NOW
79. HARD PROBLEMS: DATA. AUTHENTICATION.
80. HARD PROBLEMS: DATA. AUTHENTICATION. CLOSING DIV TAGS.
81. app/assets/javascripts/models/shared_item.js.coffee App.SharedItem = Ember.Model.extend id: Ember.attr() twitter_username: Ember.attr() url: Ember.attr() tweet_body: Ember.attr() shared_at: Ember.attr() sharer_avatar_url: Ember.attr() App.SharedItem.url = "/api/shared_items" App.SharedItem.adapter = Ember.RESTAdapter.create() SOLUTION: DATA EMBER-MODEL
82. app/assets/javascripts/models/shared_item.js.coffee App.SharedItem.find() # Array: shared_items#index App.SharedItem.find(3) # Object: shared_items#show sharedThingy.save() # Object: shared_items#create/update ‘FRINSTANCE: App.SharedItemRoute = App.AuthenticatedRoute.extend model: (params) -> App.SharedItem.find(params.shared_item_id) SOLUTION: DATA EMBER-MODEL
83. app/views/layouts/application.html.erb <script> App.set('token', ‘<%= logged_in? ? token : '' %>'); </script> SOLUTION: AUTH ASYNC ROUTES
84. app/assets/javascripts/routes/authenticated_route.js.coffee App.AuthenticatedRoute = Ember.Route.extend beforeModel: -> if !App.get('token').length @transitionTo('landing') SOLUTION: AUTH ASYNC ROUTES
85. app/assets/javascripts/routes/shared_items_route.js.coffee App.SharedItemsRoute = App.AuthenticatedRoute.extend model: -> App.SharedItem.find() SOLUTION: AUTH ASYNC ROUTES
86. THAT’S WHEN BRENDAN FOUND THE TREASURE CHEST
87. A BACK-BREAKINGLY HUGE, HEAVY TREASURE CHEST
88. IMPERATIVE PROGRAMMING WHAT YOU WANT HOW TO DO IT
89. DECLARATIVE PROGRAMMING WHAT YOU WANT HOW TO DO IT
90. DECLARATIVE PROGRAMMING
91. FRP: WHAT IT IS DECLARATIVE PROGRAMMING
93. “PLEASE, DON’T GIVE ANOTHER TALK ABOUT WHY COMPUTED PROPERTIES ARE GREAT”
94. COMPUTED PROPERTIES ARE GREAT
95. COMPUTED PROPERTIES DEMO
96. PROFESSOR GENKI'S SUPER ETHICAL REALITY BONUS SECTION
97. SELECT FOR
98. RUBY IS LOVE
99. JAVASCRIPT IS PARTY
100. MEET PEOPLE
102. TWEETLINKS: FASTER AND CLEANER
103. A NOTE ON TESTING
104. TDD ENCOURAGED MORE DOCS COMING SOON
105. FUNCTIONAL REACTIVE PROGRAMMING
106. FRP RESOURCES BACON.JS http://joefiorini.com/posts/implementing-a-functional-reactive-search-ui-with-baconjs FRAPPUCCINO https://github.com/steveklabnik/frappuccino
107. DROPS EMBER INTO APP LEAVES PROJECT* *NOT ACTUALLY A SCUMBAG, BASICALLY MADE THIS TALK EVEN POSSIBLE
108. ASK HIM TO PAIR CARRIES APP OVER FINISH LINE
109. PLEASE NO QUESTIONS
110. PLEASE NO QUESTIONS J/K LOL
111. RESOURCES Ember.js tutorial screencast by Tom Dale http://emberjs.com/guides/ Much Very Confused: Explaining client-side MVC for the server-side dev http://jeffreybiles.com/blog/much-very-confused.html ember-rails https://github.com/emberjs/ember-rails Pure CSS Framework http://purecss.io/ Tuts+ Let's Learn Ember (FREE!) http://freecourses.tutsplus.com/lets-learn-ember/
112. CREDITS http://www.flickr.com/photos/clevercupcakes/3024650837/ http://www.flickr.com/photos/davidyuweb/6978854146 http://www.flickr.com/photos/davidyuweb/6038463502 http://commons.wikimedia.org/wiki/File:Yukihiro_Matsumoto_EuRuKo_2011.jpg Rainbow Dash Laughs http://browse.deviantart.com/art/Rainbow-Dash-laughs-260209582