A JavaScript Web App Deconstructed
summary
Monocle.io is an open‑source CoffeeScript + Ruby link site served from GitHub and built on Sinatra + Sprockets with CommonJS modules; the app boots via a preloaded setup.js and scopes CSS per controller. It implements keyboard navigation with focus tracking, a jQuery removed event to reliably release controllers, pagination that posts previously seen IDs to avoid duplicates, and realtime updates via server‑sent events pubsub. Practical gotchas include beforeunload guarded by jQuery.active and wake detection by timer drift.
AI-written summary · about
chapters (20)
- 0:00Introduction
- 1:13What is Monocle
- 1:47Download Monocle
- 2:13Sinatra
- 2:47Sinatra middleware
- 5:44Steps
- 6:04Frontend
- 7:11CommonJS Modules
- 9:26Controllers
- 15:38CSS
- 18:56Post
- 19:59Scroll into view
- 20:30Updown keyboard navigation
- 22:12Scrolling conflict
- 24:25Dynamic pagination
- 25:02Expired pagination
- 26:56Serverside events
- 28:51Streaming
- 32:16Unload
- 34:09Wake
related talks
51mBuilding Amazing Single Page Applications the Right Way
01h 32mIOC + Javascript
35mWriting web application in Ruby
29mThe Front-end Takeover
30mBeyond the DOM: Sane Structure for JS Apps
30mVanilla JS: You Might Not Need that Library
28mBuilding in Rails, Backbone, and CoffeeScript
51mFrontend Monoliths: Run if you can!