From Ruby to JavaScript
by Wyatt Greene
@techiferous
This is where notes pertaining to each slide will be.
Rails is Dead OMG!!!
Some recent
discussion on the Internet
makes it seem like the relevance of Rails is fading. Rails is not going anywhere
anytime soon. However, the web programming environment is changing, and some of the
assumptions Rails was built upon are no longer valid. One of these is that view logic
should be on the server. We are increasingly seeing thick clients, however.
Purpose
- From DOM manipulation to general purpose programming
- Overview, pointers
- This topic is way too big
Contents
- Language
- Tools
- Building a thick-client app
- Libraries & frameworks
- Resources for further learning
- Audience input
JavaScript?! But what's wrong with CoffeeScript?
Nothing is wrong with CoffeeScript. You should try it.
Language
History of JavaScript
- invented 1995
- ECMAScript 3 (1999)
- ECMAScript 5 (2009)
- ES.Next (Harmony)
This EcmaScript 5 compatibility table
tells you which browsers support ES5.
Here is a very nice overview of
the history of JavaScript.
Organic Growth
JavaScript, like the streets of Boston, grew organically. Ruby's growth had much more
planning and maturity up front, like the streets of Washington, D.C.
Half-Built
Because of the way JavaScript has evolved, it can feel like a half-built language.
But it is not like a stagnant abandoned building; it is evolving and continually improving.
Szkieletor is the tallest building in Krakow. Construction stopped in 1981.
Image source:
http://en.wikipedia.org/wiki/File:Szkieleteor_in_krakow.JPG
Here to Stay
"the canonical programming language for the next 20+ years." -- Allen Wirfs-Brock, Mozilla Research Fellow
Objects
- associative arrays (like a hash)
- functions are objects
- prototypal inheritance
- details are complicated
You think you know how JavaScript objects work. Now go read chapters 6 and 9
of JavaScript: The Definitive Guide in order to really understand what's going on.
Class Chaos
When it comes to classes in JavaScript, it's like the wild west. Everyone does classes
differently. People even use the term "class" differently.
Image source:
http://www.flickr.com/photos/8339802@N02/1433089243/
Functional Programming
- functions are first-class citizens
- pass functions around
- callback style suits JavaScript's evented nature
- ActiveRecord callbacks
JavaScript's functional nature is awesome. Better than Ruby's, if you ask me.
Traps for Rubyists
- differing runtime environments
- this can change
- variable hoisting
- ===
- falsy values (false, null, undefined, '', 0, NaN)
- implied globals
- others?
Tools
JSHint
jsc
/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc
This JavaScript REPL is hidden on your Mac.
Building Thick Clients
Kinds of Architecture
- embedded
- split (can be hosted separately)
Embedded means there is an interactive part of your site. Split means that your application
is split cleanly between the client and the server. The client is a full-scale app,
treating the backend like a glorified database.
Decisions, Decisions, Decisions
Image source:
http://www.flickr.com/photos/8136496@N05/5402526966/
Choices
- templates
- modules
- namespacing (p. 89 of JavaScript Patterns)
- testing (Jasmine, QUnit)
Choices (split)
- minification
- concatenation
- dependency management
If you are hosting your thick client files outside of Rails, you have a lot more
concerns to manage. You no longer can take advantage of Rails' asset pipeline.
Juicer
A CSS and JavaScript packaging tool
Choices (split)
- environments
- configuration (global configuration object)
- build tool (such as rake-pipeline)
- cross-domain issues
Know what you're getting into
Hosting your thick-client app on a CDN as static files means you've got a lot more
decisions to make and processes to manage that otherwise Rails had given to you for
free. So know what you're getting into.
Image source:
http://www.flickr.com/photos/stepnout/1685549965/
Libraries & Frameworks
Finding JavaScript Libraries
Some Useful Libraries
- Underscore.js
- Backbone.js
- Ember.js
- others?