JavaScript on the server:
Client-side JavaScript MV* frameworks:
One language, client and server
Instead of coding in one language, we're actually coding in two. One is the subset [of] JavaScript that can be run in all browsers, and another is the set of JavaScript that can be run by Node.
Highly abstracted server MVC frameworks gain popularity
Rendering is done on the server, and outputs HTML
Client-side MV* frameworks gain popularity
Server outputs JSON, and the client renders the data into HTML
Benefits:
Drawbacks:
...We've been working to take back control of our front-end performance by moving the rendering to the server. This has allowed us to drop our initial page load times to 1/5th of what they were...
Render the first page load completely on the server
Incrementally update sections of the page through client-side rendering
/* File name: WeatherModel.common.js */
YUI.add('WeatherModel', function(Y, NAME) {
Y.mojito.models[NAME] = {
/* Client and server code can both use the same 'fetch' method to get data */
fetch: function(location, callback) {
var query = 'SELECT * FROM weather.forecast WHERE location=' + location;
Y.YQL(query, function (response) {
/* Parse the data from the response here */
callback(error, data);
});
}
};
}, '0.0.1', {requires: ['yql', 'jsonp-url']});
Three major client/server frameworks as of September 2012
<html>
<head>
<title>Default View</title>
</head>
<body>
<div id="{{mojit_view_id}}" class="mojit">
<h2>Hi {{name}}, it looks like you're visiting us from a regular browser!</h2>
</div>
</body>
</html>
<html>
<head>
<title>iPhone View</title>
</head>
<body>
<div id="{{mojit_view_id}}" class="mojit">
<h2>Hi {{name}}, it looks like you're visiting us from an iPhone!</h2>
</div>
</body>
</html>
Derby's model synchronization engine: Racer
## Use experimental operational transformation plugin in Racer ##
racer.use require 'racer/lib/ot'
## Operational transformation text insertion ##
model.on 'otInsert', '_room.text', (pos, text, isLocal) ->
return if isLocal
replaceText editor.value[...pos] + text + editor.value[pos..], (cursor) ->
if pos <= cursor then cursor + text.length else cursor
## Operational transformation text deletion ##
model.on 'otDel', '_room.text', (pos, text, isLocal) ->
return if isLocal
replaceText editor.value[...pos] + editor.value[pos + text.length..], (cursor) ->
if pos < cursor then cursor - Math.min(text.length, cursor - pos) else cursor
Use the same familiar MongoDB API whether you're on the server or client.
// Publish all room documents, and per-room messages
Meteor.publish("chatrooms");
Meteor.publish("messages", function (room_id) {
return Messages.find({room: room_id});
});
// Subscribe to all rooms, and messages in the first room
Meteor.subscribe("chatrooms");
Meteor.subscribe("messages", Chatrooms.find()[0]._id);
Meteor contains its own packaging system to quickly install dependencies.
# Use jQuery and Backbone within your Meteor application
$ meteor add jquery backbone
# Remove Twitter Bootstrap from your Meteor application
$ meteor remove bootstrap
It also provides an infrastructure to quickly deploy your application online.
# Quickly deploy to a Meteor domain
$ meteor deploy myapp.meteor.com
# Or set a CNAME and deploy to your own
$ meteor deploy www.myapp.com
Who's using these frameworks today?
You can find me online in the following places: