A JavaScript Web App Deconstructed

Transcript

None

github.com/maccman/monocle

git clone https://github.com/maccman/monocle.git github.com/maccman/monocle

None

class App < Sinatra::Application use Rack::Deflater use Rack::CSRF use Brisk::Routes::Static

use Brisk::Routes::Users use Brisk::Routes::Posts use Brisk::Routes::Comments use Brisk::Routes::Client end app.rb

class App < Sinatra::Application use Rack::Deflater use Rack::CSRF use Brisk::Routes::Static

use Brisk::Routes::Users use Brisk::Routes::Posts use Brisk::Routes::Comments use Brisk::Routes::Client end app.rb

client.rb get /\A((\/\Z)|\/posts)/ do if mobile? erb :mobile else erb

:index end end helpers do def mobile? request.user_agent =~ /iPhone|iPod/ end end

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Monocle</title> <link rel="stylesheet" type="text/css"

href="<%= asset_path 'application.css' %>"> <script defer src="<%= asset_path 'application.js' %>"></script> <script defer src="/setup.js"></script> <meta name="referrer" content="always"/> <meta name="fragment" content="!"> <link rel="alternate" type="application/rss+xml" href="/feed" /> </head> <body> </body> </html> index.erb

get '/assets/*' do env['PATH_INFO'].sub!(%r{^/assets}, '') settings.assets.call(env) end get '/setup.js' do

content_type :javascript posts = Post.published.popular.limit(25).all @options = { environment: settings.environment, csrfToken: csrf_token, user: current_user, posts: posts } erb :setup end client.rb helpers do set :assets, Sprockets::Environment.new(settings.root) end

setup.erb jQuery(function($){ var App = require('app/index'); var options = <%==

@options.to_json %>; window.app = new App(options); app.$el.appendTo('body'); });

1. Browser navigates to / 2. Calls Client#/ route 3.

Returns index.erb 4. Browser fetches CSS/JS 5. Browser fetches setup.js 6. Browser instantiated Bootstrapping steps

Frontend structure

None

App Controller (index.module.coffee)

Sidebar Controller (sidebar.module.coffee)

Posts Controller (posts.module.coffee)

Details controller (posts/details.module.coffee)

Comments controller (comments.module.coffee)

CommonJS modules

CommonJS modules Gives you `require` and `exports`

gem 'sprockets' gem 'sprockets-commonjs' Gemﬁle

posts.module.coffee Controller = require('controller') class Posts extends Controller constructor: ->

# ... module.exports = Posts

Controller = require('controller') Session = require('session') Sidebar = require('app/controllers/sidebar') Posts

= require('app/controllers/posts') Post = require('app/models/post') User = require('app/models/user') State = require('app/state') Router = require('app/router') KeyBinding = require('app/key_binding') class App extends Controller className: 'app' constructor: (options = {}) -> super State.set(environment: options.environment) State.set(user: options.user and new User(options.user)) Session.setCSRFToken(options.csrfToken) Post.popular.add(options.posts) @append(@sidebar = new Sidebar) @append(@posts = new Posts) # Trigger a route (@router = new Router).change() # Add key bindings @keyBinding = new KeyBinding module.exports = App index.module.coffee

Controller = require('controller') Session = require('session') Sidebar = require('app/controllers/sidebar') Posts

Controller = require('controller') State = require('app/state') Comments = require('app/controllers/comments') Details

= require('app/controllers/posts/details') Landing = require('app/controllers/posts/landing') class Posts extends Controller className: 'posts-show' constructor: -> super State.observeKey 'post', => @render(State.get('post')) render: (@post) => @$el.empty() if @post @append(@details = new Details(post: @post)) @append(@comments = new Comments(post: @post)) else @append(@landing = new Landing) posts.module.coffee

Controllers

$ = jQuery class Controller tag: 'div' helpers: {} constructor:

(@options = {}) -> @el = @el or @options.el or document.createElement(@tag) @$el = $(@el) @$el.addClass(@className) @on('removed', @release) $: (sel) -> $(sel, @$el) on: -> @$el.on(arguments...) append: (controller) -> @$el.append(controller.el or controller) html: (controller) -> @$el.html(controller.el or controller) view: (name) => (context = {}) => context.view = @view context.helpers = @helpers @template(name)(context) template: (name) -> JST["app/views/#{name}"] release: => module.exports = Controller

$ = jQuery class Controller tag: 'div' helpers: {} constructor:

render: => rendered = @view('post')(@post) @$el.html(rendered)

$ = jQuery class Controller tag: 'div' helpers: {} constructor:

jQuery.event.special.removed = { remove: (e) -> e.handler?() } jquery.event.removed.coffee

Controller = require('controller') State = require('app/state') Comments = require('app/controllers/comments') Details

Model = require('model') class State extends Model module.exports = new

State state.module.coffee

Model = require('model') class State extends Model module.exports = new

State state.module.coffee

None

$ = jQuery Model = require('model') Collection = require('collection') PaginatedCollection

= require('collection.paginated') helpers = require('app/helpers') class Post extends Model @key 'title', String @key 'url', String @key 'user_id', String @key 'user_handle', String @url '/v1/posts' @popular: new PaginatedCollection( model: this, all: (model, options = {}) -> $.post(model.uri('popular'), options.data) comparator: (a, b) -> b.get('score') - a.get('score') ) post.module.coffee

Scoping CSS

$ = jQuery Controller = require('controller') class Landing extends Controller

className: 'posts-landing' constructor: -> super @render() render: => @html(@view('posts/landing')(this)) module.exports = Landing landing.module.coffee

$ = jQuery Controller = require('controller') class Landing extends Controller

className: 'posts-landing' constructor: -> super @render() render: => @html(@view('posts/landing')(this)) module.exports = Landing landing.module.coffee

@import '../mixins' .app .posts-landing { background: #F8FAFB position: relative height:

100% box-shadow: inset 0 0px 1px rgba(0, 0,0, 0.1) // ... } posts_landing.css.styl

@import '../mixins' .app .posts-landing { background: #F8FAFB position: relative height:

100% box-shadow: inset 0 0px 1px rgba(0, 0,0, 0.1) > nav { // ... } } posts_landing.css.styl

Creating a scrollable list

Sidebar Controller (sidebar.module.coffee)

Controller = require('controller') State = require('app/state') PostItem = require('app/controllers/posts/item') class

PostList extends Controller className: 'list posts-list' constructor: (options = {}) -> super @render() render: => @reset() @addAll() # Private reset: => @$el.empty() addOne: (post) => @append new PostItem(post: post) addAll: => @collection.each(@addOne) module.exports = PostList sidebar/post_list.module.coffee

Controller = require('controller') State = require('app/state') PostItem = require('app/controllers/posts/item') class

State = require('app/state') class PostList extends Controller className: 'list posts-list'

constructor: (options = {}) -> super # Set active state whenever someone # goes to a specific post State.change('post', @setPost) @render() # ... sidebar/post_list.module.coffee

setPost: (@post) => @setActive() setActive: => @$('.item').removeClass('active') if @post $active

= @$(".item[data-id=#{@post.getID()}]") $active.addClass('active') @$('.item.active').scrollIntoViewIfNeeded() sidebar/post_list.module.coffee

scrollIntoViewIfNeeded() https://gist.github.com/hsablonniere/2581101

up / down arrow key bindings

class Sidebar extends Controller constructor: -> super $(window).on('keydown', @keydown) keydown:

(e) => # ... # Cleanup global events release: => $(window).off('keydown', @keydown) sidebar.module.coffee

nextPost: => $active = @$('.item.active:visible:first') $active.next().click() previousPost: => $active =

@$('.item.active:visible:first') $active.prev().click() # Keybindings upKey: (e) => e.preventDefault() @previousPost() downKey: (e) => e.preventDefault() @nextPost() keyMapping: 38: 'upKey' 40: 'downKey' keydown: (e) => # Return if input return if 'value' of e.target # Are we listening for this key? mapping = @[@keyMapping[e.which]] return unless mapping mapping(e)

nextPost: => $active = @$('.item.active:visible:first') $active.next().click() previousPost: => $active =

@$('.item.active:visible:first') $active.prev().click() # Keybindings upKey: (e) => e.preventDefault() @previousPost() downKey: (e) => e.preventDefault() @nextPost() keyMapping: 38: 'upKey' 40: 'downKey' keydown: (e) => # Return if input return if 'value' of e.target # Are we listening for this key? mapping = @[@keyMapping[e.which]] return unless mapping mapping(e)

Scrolling conﬂict!

Sidebar Controller (sidebar.module.coffee) 1. 2.

$ = jQuery current = null activeArea = (e) ->

current = $(e.currentTarget) $.fn.isActiveArea = -> @is(current) $.fn.activeArea = -> @click(activeArea) jquery.activearea.coffee

# posts.module.coffee class Posts extends Controller constructor: -> super @$el.activeArea()

# sidebar.module.coffee class Sidebar extends Controller constructor: -> super @$el.activeArea()

isActiveArea: -> @$el.isActiveArea() upKey: (e) => return unless @isActiveArea() e.preventDefault()

@previousPost() downKey: (e) => return unless @isActiveArea() e.preventDefault() @nextPost() sidebar.module.coffee

Dynamic pagination

What do other people do?

“Send the server the IDs of the posts you already

have when paginating. Sort posts by score, limit to your pagination offset, and omit those supplied IDs from the returned collection.”

post '/v1/posts/popular' do posts = Post.published.popular posts = posts.exclude(id: params[:ignore])

posts = posts.limit(30).all json posts end posts.rb

Realtime streaming

Server Sent Events

streams = [] get '/subscribe', provides: 'text/event-stream' do stream :keep_open

do |out| streams << out out.callback { streams.delete(out) } end end post '/publish' do streams.each do |out| out << "data: #{params[:msg]}\n\n" end 204 end SSE example

require 'eventmachine' require 'sinatra' require 'sinatra/pubsub' register Sinatra::PubSub Sinatra::PubSub.set( cors:

true, origin: 'http://monocle.io' ) sinatra-pubsub example

register Sinatra::PubSub EventMachine.next_tick do EventMachine::PeriodicTimer.new(1) do Sinatra::PubSub.publish('tick', 'tock') end end

get '/' do erb :stream end __END__ @@ stream <pre id="log"> </pre> <script> var es = new EventSource('/subscribe/tick'); es.onmessage = function(e) { log.innerHTML += "\n" + e.data }; </script> Tick example

sinatra-pubsub-tick.herokuapp.com

Events = require('events') class Stream @::[k] = v for k,v

of Events url: 'http://stream.monocle.io/subscribe' constructor: (@url = @url) -> @source = new EventSource(@url) @source.addEventListener('message', @message, false) message: (e) => msg = JSON.parse(e.data) @trigger('message', msg) @trigger(msg.type, msg.data) module.exports = Stream stream.module.coffee

post '/v1/posts/:id/vote' do post = Post.first!(id: params[:id]) post.vote!(current_user) publish [:posts,

:vote], id: post.id json post end posts.rb

post '/v1/posts/:id/vote' do post = Post.first!(id: params[:id]) post.vote!(current_user) publish [:posts,

:vote], id: post.id json post end posts.rb

Stream = require('stream') Post = require('app/models/post') class Stream constructor: ->

super @on 'posts:vote', (msg) -> Post.find(msg.id).refresh() module.exports = Stream stream.module.coffee

SEO & JavaScript

/?_escaped_fragment_ monocle.io

None

<meta name="fragment" content="!"> index.erb

get '/posts/:slug' do if params.has_key?('_escaped_fragment_') @post = Post.first!(slug: params[:slug]) erb

:spider_page else # Render normal JS client end end posts.rb

get '/posts/:slug' do if params.has_key?('_escaped_fragment_') @post = Post.first!(slug: params[:slug]) erb

:spider_page else # Render normal JS client end end posts.rb

configure do set :spider do |enabled| condition do params.has_key?('_escaped_fragment_') end

end end get '/posts/:slug', spider: true do @post = Post.first!(slug: params[:slug]) erb :spider_page end posts.rb

<html> <head> <meta name="description" content="<%= @post.summary.truncate(150) %>"> <title><%= @post.title %></title>

</head> <body> <h1><a href="<%= @post.url %>"><%= @post.title %></a></h1> <p> <%= @post.summary %> <a href="<%= @post.url %>">Read more</a> </p> </body> </html>

site:monocle.io

‘onbeforeunload’ event

window.onbeforeunload or= -> if jQuery.active '''There are some pending network

requests which means closing the page may lose unsaved data.'''

$ = jQuery $.activeTransforms = 0 addHandler = -> window.onbeforeunload

or= -> '''There are some pending network requests which means closing the page may lose unsaved data.''' removeHandler = -> window.onbeforeunload = null $(document).ajaxSend (e, xhr, settings) -> return unless settings.warn $.activeTransforms += 1 addHandler() if $.activeTransforms $(document).ajaxComplete (e, xhr, settings) -> return unless settings.warn $.activeTransforms -= 1 removeHandler() unless $.activeTransforms jquery.onclose.coffee

A JavaScript Web App Deconstructed

A JavaScript Web App Deconstructed

More Decks by Alex MacCaw

Other Decks in Programming

Featured

Transcript