This document appears to be a presentation about modern web application architecture using the Backbone JavaScript framework and Node.js. It discusses using Backbone for the client-side model-view-controller (MVC) pattern and Node.js for the server with technologies like CoffeeScript, Express, Jade, and interacting with APIs like Twitter. The presentation provides an overview and walkthrough of building an app with these technologies to handle real-time updates using web sockets. It is authored by Adam Roderick of Aspenware and includes links to source code and slides.
Adam roderick application architecture featuring node and backbone
1. 6000 Greenwood Plaza Blvd
Suite 110
Greenwood Village, CO 80111
303.798.5458
www.aspenware.com
Modern Web App Architecture
featuring Backbone and Node
@adamroderick
a.roderick@aspenware.com
10. Browser
Server
Standard HTTP
HTML
CoffeeScript
CSS
Node
JavaScript
Express
jQuery
XmlHttpRequest (HTTP) Jade
Backbone
Underscore
Web Sockets (TCP)
Twitter API
14. 6000 Greenwood Plaza Blvd
Suite 110
Greenwood Village, CO 80111
303.798.5458
www.aspenware.com
Adam Roderick
@adamroderick
a.roderick@aspenware.com
https://github.com/aspenware/shouting-match
http://www.slideshare.net/aroder/adam-roderick-application-architecture-
featuring-node-and-backbone
Editor's Notes
Architecture is about solving constraints.
Architecture is about dealing with constraints. I used to think architecture was magical, and I had to learn some special trick to making it work.
Like baking. You have to be a special kind of person to like baking, and be able to follow a recipe exactly. I don’t like baking. I can’t get it right because you have to be so exact. Everything has to be perfect.Architecture is not like baking. Operations is like baking. Or maybe being a junior programmer. Also maybe auditing is like baking. If you like baking, work in operations or auditing.http://www.mandoladeli.com/images/chuy.jpg
Architecture is more like grilling. You must understand principles. Some constraints you learn quickly, like don’t touch the grill with your finger, and don’t sneak bites without blowing on them first. You understand that the meat needs to heat up, needs to take its time. You get a feel for when to put seasoning on. You branch out and start to understand how different kinds of meat work on the grill. And the more you do it, the better you get. Principles and experience. And at some point you start swapping stories and tactics about what and how you grill. And so you learnAs we individually learn how to design applications and systems, we learn. Some principles we learn quickly, and others take more time. Principles and experience, we learn and get better. As we share our learning with each other, we get better.http://www.dachomerenovations.com/blog/media/blogs/tbin/grill.jpg?mtime=1306848057
The more we learn about the frameworks we work with, the better we are able to address constraints.
App works by everyone posting to a shared twitter account, @shouting_match. The tweets that get the most retweets will show up at the top. Also, we keep a running track of recent tweets.Constraints we dealt with in preparing our presentations:App someone might useMust utilize node, backboneDemonstrate modern web app techniquesUnderstandable to developers with .NET web dev backgroundTwitter has throttle limitsNode is still young on windows
In the browser: - Stateful - Single Page - MVC using Backbone http://backbonejs.org - Templating using Underscore http://underscorejs.orgOn the server: - Node as web server http://nodejs.org/ - MVC using Express - Templating using JadeInitial request is made with standard HTTP and downloads index page, CSS, and javascriptsShout creation and loudest shouts are with standard AJAXRecent shouts are updated with web socketsHow different is this from ASP.NET MVC and jQuery?
Why Node?Apache and IIS use threads to handle each incoming request. Handles multiple requests really nicely. Node uses a single thread with an event loop. Server-side javascript done right, super fast V8 engine, asynchronous everything (evented I/O). javascript was designed to work in a single threaded, event-loop environment: the browser. Node doesn't have to be strictly for web development, can be any kind of server development. Can't do window.. but can do setTimeout, for example.picture of evented I/ONode Package ManagerActive and lively developer communityis THE way to manage modules and dependenciesThink of it like Nuget.Node and Windowsoriginally written in C and C++ and targeted Unix systems. Recently expanded support to WindowsNode and IISNode is an executable and can run https://github.com/tjanczuk/iisnodenode is single threaded therefor is in one process. iisnode provides ability to run multiple instances and load balances HTTP traffic among them. No infrastructure code to go multi-core!Autoupdate - not inherently provided by nodeNot necessary to write a windows service to start, stop, monitor, etcthe best part - take advantage of IIS features - security, port sharing, URL rewriting, compression, caching, logginghttp://www.hanselman.com/blog/InstallingAndRunningNodejsApplicationsWithinIISOnWindowsAreYouMad.aspx
Client-side MVCRequires very little dependency on the $. Relegates jQuery to what it is good at—browser event handling, animation, AJAX, DOM manipulation. Provides an application framework based on the MVC patternBut as we get started—Node will be similar to what we are used to in ASP.NET MVC. Backbone is opinionated and different. In fact, none of the javascript MVC frameworks I’ve evaluated are the same, and none of them are quite like ASP.NET MVC. It is the result of the rich-client constraints being different from server-side constraints. So, clear your mind before we get started.
apps, bin, config, helpers, initializers, node_modules all server side codePublic contains paths references to javascripts and CSS filesMixed REST API and standard HTTP routes. Probably should separate them out into two folders in the apps folder. These are a lot like Areas in ASP.NET MVCEverything gets kicked off in app.js. This is kind of like Global.asax or the Main method of a console app. Ours is configured to use express and the /apps directory to set up the application/apps/shouts/controllers//apps/shouts/models//apps/shouts/viewsviews vs. tmplMain Routes (/apps/shouts/routes.coffee)GET / main, serves up HTML pageGET/shouts API, returns recent shoutsPOST /shouts API, creates a shoutGET /shouts/loudest API, returns loudest shoutsClient side/public/img/public/stylesheets/public/javascriptsHow to download the HTML Page?route //apps/views/index.jade/apps/shouts/views/layout.jadeHow to set up the client-side application?/public/javascripts/main.jsServer side responsibilities & patternsConfigurationIinitializationSingleton, GlobalAPI client proxyFilesystem accessTemplatingDependency managementClient-side responsibilities and patternsView extend render initialize el Underscore _.extend _.first([1, 2, 3, 4]) --> 1 _.template(templateString, [data])Model extend get, set fetch save destroy Collection extend model urlRoot add, removeRouterConfigurationFakingTemplating and RenderingSocketsPollingDuplex MessagingNeed better dependency management – standards emerging around modules and dependencies