- Browse tweets
- Display story inline
- Readability integration
- Filter tweet types
- Mark as read
- Filter read/unread
- J/K Navigation
Slide 23
Slide 23 text
SOPHISTICATED UI
+
PERSISTENT STATE
=
PAIN
Slide 24
Slide 24 text
DOM/AJAX/CONTROLLER
BACK &
FORTH
DANCE
Slide 25
Slide 25 text
FEELS KINDA...
DIRTY
Slide 26
Slide 26 text
JQUERY CASCADE:
PLUGIN 1
THAT WAS EASY
PLUGIN 2
THAT WAS... LESS EASY
PLUGIN 3
OH THE HUMANITY
Slide 27
Slide 27 text
2 CHOICES:
COMPROMISE ON
USER EXPERIENCE
Slide 28
Slide 28 text
NOBODY PUTS UX
IN THE CORNER
2 CHOICES:
Slide 29
Slide 29 text
2 CHOICES:
WRITE THE BALL
OF MUD
Slide 30
Slide 30 text
BALL OF MUD:
WHAT DOES IT
LOOK LIKE?
Slide 31
Slide 31 text
THE DOM IS
YOUR
PERSISTENCE
LAYER NOW.
Slide 32
Slide 32 text
2 CHOICES:
PRAY IT HOLDS
TOGETHER
Slide 33
Slide 33 text
THIS WAS
SUPPOSED
TO BE FUN
Slide 34
Slide 34 text
3rd CHOICE:
LEAN ON JS
FRAMEWORK
Slide 35
Slide 35 text
CAN BRENDAN
EVER BE HAPPY
USING A JS
FRAMEWORK?
Slide 36
Slide 36 text
JS FRAMEWORK
PROLIFERATION
Slide 37
Slide 37 text
IT’S WORTH A
SHOT, RIGHT?
Slide 38
Slide 38 text
Gemfile
gem 'ember-rails'
gem 'ember-source', '1.0.0.rc6'
from command line:
rails g ember:bootstrap
oh, and SHUT OFF TURBOLINKS
INSTALLATION
Slide 39
Slide 39 text
THIS IS A GEM
INSTALL
I KNOW THIS
Slide 40
Slide 40 text
CHALLENGES
Slide 41
Slide 41 text
I WAS
TOLD
THERE WOULD BE
SPRINKLES
Slide 42
Slide 42 text
BUT BRENDAN
SOLDIERS ON
Slide 43
Slide 43 text
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"
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
BREAK SOME
RAILS HABITS
Slide 46
Slide 46 text
MODELS
ARE MOSTLY WHAT
YOU EXPECT
Slide 47
Slide 47 text
MODELS
2 JOBS:
DEFINE AND HOLD PROPERTIES FOR
DOMAIN MODEL INSTANCES
RETRIEVE/PERSIST CHANGES IF USING
EMBER-DATA OR EMBER-MODEL
Slide 48
Slide 48 text
ROUTES
AREN’T WHAT
YOU EXPECT
Slide 49
Slide 49 text
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
Slide 50
Slide 50 text
CONTROLLERS
AREN’T WHAT
YOU EXPECT
Slide 51
Slide 51 text
CONTROLLERS
NOT AT ALL LIKE RAILS CONTROLLERS.
PURELY FOR ADDING DISPLAY LOGIC TO
THE MODEL
Slide 52
Slide 52 text
VIEWS
AREN’T WHAT
YOU EXPECT
Slide 53
Slide 53 text
VIEWS
VIEWS != TEMPLATES
VIEWS IN RAILS ARE INVISIBLE, THEY
PASS CONTEXT TO TEMPLATES
VIEWS IN EMBER ARE OPTIONAL, FOR
HANDLING USER INPUT & DISPLAY LOGIC
Slide 54
Slide 54 text
TEMPLATES
HANDLEBARS IS POWERFUL
HANDLEBARS HELPERS ARE AWESOME,
USE THEM
{{ELSE}} FOR ZERO STATE IS SO GREAT
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
Slide 71
Slide 71 text
IT WILL MAKE YOU
FOCUS LESS ON
PERSISTENCE
Slide 72
Slide 72 text
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
Slide 73
Slide 73 text
SharedItemsRoute: ‘/’
rendered into application {{outlet}}
ApplicationRoute (generated): ‘/’
SharedItemRoute: ‘/:id’
rendered into shared_items {{outlet}}
Slide 74
Slide 74 text
TWEETLINKS v1.0rc6.2b4
DEMO
Slide 75
Slide 75 text
WHAT WE
HAVEN’T DONE
COMPLEX UI
TWITTER AUTH
ANY SEMBLANCE OF REAL-LIFE USE
Slide 76
Slide 76 text
WHAT WE
HAVE DONE
DEFINE DOMAIN MODEL
URL DESIGN
DEFINE API NEEDS
STUFF ON THE SCREEN!
Slide 77
Slide 77 text
NOW WHAT?
WASN'T READY
Slide 78
Slide 78 text
NOW WHAT?
IS READY NOW
Slide 79
Slide 79 text
HARD PROBLEMS:
DATA.
AUTHENTICATION.
Slide 80
Slide 80 text
HARD PROBLEMS:
DATA.
AUTHENTICATION.
CLOSING DIV TAGS.
DROPS EMBER INTO APP
LEAVES PROJECT*
*NOT ACTUALLY A SCUMBAG, BASICALLY
MADE THIS TALK EVEN POSSIBLE
Slide 108
Slide 108 text
ASK HIM TO PAIR
CARRIES APP
OVER FINISH LINE
Slide 109
Slide 109 text
PLEASE NO
QUESTIONS
Slide 110
Slide 110 text
PLEASE NO
QUESTIONS
J/K LOL
Slide 111
Slide 111 text
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/