Lessons from-a-rewrite-gotham

Lessons from a rewrite
Rebecca Murphey • Gotham JS • New York, New York

Saturday, July 9, 2011

ere’s a subtle reason that programmers always
want to throw away the code and start over. e
reason is that they think the old code is a mess. ...
e reason that they think the old code is a mess
is because of a cardinal, fundamental law of
programming: It’s harder to read code than to
write it.
Joel Spolsky


A content management system for the rapid
creation of content-rich mobile applications.
A PhoneGap & Dojo system that consumes the
output of the CMS to generate the application.


Where a new system concept or new technology
is used, one has to build a system to throw away,
for even the best planning is not so omniscient as
to get it right the rst time. Hence plan to
throw one away; you will, anyhow.
Fred Brooks


If data is required for a
route, such as node data
or the user's favorites, the
route requests the data
prior to creating the page.

Data Page Controller
Component

Component

Page Controller Component Component

Component
Component

When the app is booted
from a "cold" state (that URL Change Router Page Factory
is, it's not fast-app- Page controllers are responsible for Components are responsible for Once components are placed on the
switched), it goes receiving data from the Page Factory. Once receiving and rendering data and page, the Page Controller brokers
through a bootstrapping The Router detects a The Route asks the page the page controller receives that data, it reacting to user interaction. communication between components.
Route determines which components to display in
process. This process change in the URL, looks factory to generate a page
for a matching route in controller. If the page its postMixInProperties method and sets up Components whose content can change Components announce events either by
ensures the application "placements," which define the components during a single page view should expose publishing a topic (for events that may
toura.app.Routes, and controller is for a node, the
is working with the that will be placed on the page and the data an API using setters (i.e. have app-wide significance) or by calling
parses any additional Page Factory figures out
most recent data, and parameters out of the URL which template (Audios, that needs to be passed to them. The _setContentAttr) that allows Page a method (such as onClick). Page
also sets up various (such as the node ID, Images, etc.) the node actual instantiation and placement of Controllers to update their content. Controllers can subscribe to these
application-wide Device Storage asset type, etc.). uses. The page factory components is handled in the postCreate topics or connect to these method calls
creates an instance of the method of toura.pageControllers._Page, Alternately, a component can define an (much like connecting to events). This
functionality, including
page controller and hands which is inherited by all Page Controllers. attributeMap object that specifies how happens in the Page Controller's
the Router, UI, Page the component should react when a postCreate method.
the created instance back
Factory, Data Store, to the Route. property is set.
and several others.

Once these pieces are
in place, the app Remote
triggers a URL change
to the home node, and
the process outlined
here begins.

Every time the user goes UI
to a new page, we check
the age of the local data; if
it is more than 8 hours old,
we see whether we need
to do an over-the-air
update.

Browser

Page Container

Old Page Controller New Page Controller

Component Component

Component Component

Component Component

The Route asks toura.app.UI to place the Page Controller in the UI; in turn, toura.app.UI sets the content
attribute of the Page Container. If there is already a page on screen, the Page Container handles the animation
between the pages, and calls the destroy method of the old page, which results in the proper teardown of the old
page and its components.

Understand
what you’re rewriting

Have we
no
loaded the Populate DB
bundled with bundled data
data?

yes

no
Is the remote
dfd.resolve()
reachable?

Get the remote
version


{
"name": "Audio Player",
"audios": [{
"audio": {
"_reference": "audio-23"
},
"caption": {
"_reference": "text-asset-64"
}
}],
"parent": {
"_reference": "node-365"
},
"page_controller": "Audios1",
"id": "node-369",
"sharing_text": null,
"sharing_url": null,
"images": [{
"caption": {
},
"image": {
"_reference": "image-174"
}
}, {
"caption": {
},
"image": {
"_reference": "image-182"
}
}, {
Saturday, July 9, 2011 "image": {

Identify pain points

/* {{^android}} */
var mediaPath = "www/media/" + toura.pages.currentId +
"/";
/* {{/android}} */
/* {{#android}} */
var mediaPath = [Toura.getTouraPath(),
toura.pages.currentId].join("/");
/* {{/android}} */
var imagesList = [], dimensionsList = [], namesList = [],
thumbsList = [];
var pos = -1, count = 0;
/* {{#android}} */
var pos = 0, count = 0;
/* {{/android}} */


toura.app.Has = function() {
var device = toura.app.Config.get('device');

return {
cssBackgroundContain : function() {
return !(
device.os === 'android' &&
device.version === '2-1'
);
},

html5Player : function() {
return device.os !== 'android';
},

iScrollZoom : function() {
return device.os !== 'android';
}
};
};


//>>excludeStart('production', kwArgs.production);
if (toura.features.debugToolbar) { toura.app._Debug(); }
//>>excludeEnd('production');


Develop a
communication
manifesto


Writing to be read means writing code ... with
the idea that someone else will read it. is
fact alone will make you edit and think of better
ways to solve the problem you have at hand.
Stoyan Stefanov


myComponent.set(key, val)
to change state

myComponent.on<Evt>(data)
to announce state changes

myComponent.connect(evt, handler)
to listen for events & methods

myComponent.subscribe(topic)
to react to published topics

dojo.publish(topic, data)
to announce occurrences of app-wide interest


Search Input

toura.app.Data.search(term)
searchInputInstance.onSearch(term)

Search Page
Controller Application Data

searchResults.set('results', resultSet)
return resultSet

Search Results
Display


dojo.declare(
'toura.pageControllers.search.Search',
[ toura.pageControllers._Page ], {

// ...

postCreate : function() {
// ...
this.connect(this.searchInput, 'onSearch', '_handleSearch');
},

_handleSearch : function(term) {
if (term === this.lastSearchTerm) { return; }
this.searchResults.set('results', toura.app.Data.search(term));
},

// ...
});


Sanify
asynchronicity


old & busted
images = toura.sqlite.getMedias(id, "image");

var onGetComplete = setInterval(function() {
if (images.incomplete)
return;

clearInterval(onGetComplete);
showImagesHelper(images.objs, choice)
}, 10);

new hotness
toura.app.Data.get(id, 'image').then(showImages, showImagesFail);


dojo.when(fn(), win, fail)
react to maybe-asynchronous things,
including promises


Naming things is hard

ere are only two hard things in
Computer Science: cache invalidation
and naming things.
Phil Karlton


yellow
red
blue

Never write large apps


e secret to building large apps is
never build large apps. Break up your
applications into small pieces. en,
assemble those testable, bite-sized pieces
into your big application.
Justin Meyer


this.connect(this.videoList, 'onSelect', function(assetId) {
var video = this._videoById(assetId);
this.videoCaption.set('content', video.caption || '');
this.videoPlayer.play(assetId);
});


videoPlayer.set('mediaId', mediaId);

_setMediaIdAttr : function(mediaId) {
var media = this.media = this.mediasCache[mediaId];

if (this.useHtml5Player && !this.player) {
this._queuedMedia = media;
return;
}

this._queuedMedia = null;

if (this.player) {
this.player.src = media.url;
}
},


It takes con dence to throw work away ...
When people rst start drawing, they’re often
reluctant to redo parts that aren’t right ...
they convince themselves that the drawing
is not that bad, really — in fact, maybe they
meant it to look that way.
Paul Graham


http://pinboard.in/u:rmurphey/t:lessons-from-a-rewrite/

http://spkr8.com/t/7930

rebeccamurphey.com • blog.rebeccamurphey.com • @rmurphey


Lessons from-a-rewrite-gotham

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Lessons from-a-rewrite-gotham

Semelhante a Lessons from-a-rewrite-gotham (20)

Mais de Rebecca Murphey

Mais de Rebecca Murphey (9)

Último

Último (20)

Lessons from-a-rewrite-gotham