Sneaking structure into your DOM-based application

sneaking structure into
your DOM-based
application

Sunday, April 17, 2011

ohai

☛ Garann Means
☛ Vast

☛ Austin All-Girl Hack Night
☛ @garannm / garann.com


$(document).ready(function() {
! $.get("pages/title.html",function(r) {
! ! $(".page_text").html(r);
! }, "html");
! setInterval(function() {
! ! var currentpage = parseInt($("#currentpage").val()),
! ! ! num = window.location.hash.substring(1) || 0;
! ! if (currentpage != num) {
! ! ! goToPage(num);
! ! }
! }, 100);
! $(".continue a").click(function(e) {
! ! e.preventDefault();
! ! goToPage(parseInt($("#currentpage").val())+1);
! });!
! $(".choose a").click(function(e) {
! ! var newpage = $(this).attr("rel");
! ! goToPage(newpage);
! });!
! $(document).bind("keydown",function(e) {! !
! ! clearTimeout(typingPause);! !
! ! var currentpage = parseInt($("#currentpage").val());
! ! var k = keys[e.keyCode];
! ! if (k == "left") {
! ! ! currentpage--;
! ! ! goToPage(currentpage);
! ! } else if (k == "right") {
! ! ! currentpage++;
! ! ! goToPage(currentpage);
! ! } else if (k) {
! ! ! newpage += "" + k;
! ! ! typingPause = setTimeout(
! ! ! ! function() {
! ! ! ! ! goToPage(newpage);
! ! ! ! }, 500);
! ! }! !
! });!
! $('.pan-container').each(function(){
! ! var $this=$(this).css({position:'relative', overflow:'hidden', cursor:'move'})
! ! var $img=$this.children().eq(0) //image to pan
! ! var options={$pancontainer:$this, pos:$this.attr('data-orient'), curzoom:1, canzoom:$this.attr('data-canzoom'), wrappersize:[$this.width(),
! ! $img.imgmover(options)
! })
});

var newpage = "";
var typingPause;

function goToPage(pagenum, pagetext, pageimg) {!
! $("#currentpage").val(pagenum);
! window.location.hash = pagenum;!
! newpage = "";
! parseInt(pagenum) ? $("h3 span").text(pagenum) : $("h3 span").text("");! !
! $.get("pages/" + pagetext,function(r) {
! ! $(".page_text").html(r);! !
! ! pageimg ? $(".page_image").html('<img src="img/' + pageimg + '" />') : $(".page_image").html("");
! ! if ($(".page_image").children().length) {
! ! ! $(".page_image").children().each(function() {
! ! ! ! $(this).zoomin({
! ! ! ! ! bgcolor: "#999"
! ! ! ! });
! ! ! });
! ! }! !
! ! $(".continue a").click(function(e) {
! ! ! e.preventDefault();
! ! ! goToPage(parseInt($("#currentpage").val())+1);
! ! });! !
! ! $(".choose a").click(function(e) {
! ! ! var newpage = $(this).attr("rel");
! ! ! goToPage(newpage);
! ! });


you have a problem.

☛ old code
☛ other people’s code
☛ written too fast
☛ scope creep


but..

http://www.ﬂickr.com/photos/vintagechica/5597949576/


your baby is ugly.

http://www.ﬂickr.com/photos/quinnanya/2885102816/in/photostream/


your baby is ugly.
☛ window.everything

☛ data in HTML
☛ all the plugins ever!!
☛ $(...).click(manageState)

☛ jQuery 1.oldAndBusted


wontfix?

☛ performance gets worse
☛ hacks beget hacks
☛ unmaintainable

☛ un-upgradable


rewrite from scratch?
☛ undocumented business logic
☛ new bugs for old bugs
☛ business people will freak out
☛ users will be impatient
☛ how long you got?


code written under
duress is probably what
got you here


why ‘sneaky’

☛ business people see their features
☛ users see bugs fixed
☛ you see something other than the back of a
giant boulder


it’s gonna get dirty

http://www.ﬂickr.com/photos/johnpaulgoguen/3359392738/


it’s gonna get ridiculous

http://www.ﬂickr.com/photos/mhaithaca/447863503/


where you want to be


where you want to be
☛ namespacing

☛ data separate from DOM
☛ not dependent on plugins
☛ state management separate from DOM
☛ jQuery 1.newHotness


(and then you can think
about..)
☛ MVC

☛ AMD

☛ unit tests
☛ event delegation
☛ deferreds

☛ etc.


keep it simple

☛ one release at a time
☛ stick to the plan
☛ don’t get scared


let’s get cracking


release 0

☛ take stock
☛ add TODOs
☛ basic reuse


TODO
! // TODO: find something less icky
! setInterval(function() {
! ! var currentpage = parseInt($("#currentpage").val()),
! ! ! num = window.location.hash.substring(1) || 0;
! ! if (currentpage != num) {
! ! ! goToPage(num);
! ! }
! }, 100);
!
! // TODO: rethink this whole thing
! $(document).bind("keydown",function(e) {
! !
! ! clearTimeout(typingPause);
! ! ...
! ! var currentpage = parseInt($("#currentpage").val());
! ! var k = keys[e.keyCode];


cache/improve selectors
! newpage = "";
! parseInt(pagenum) ?
! ! $("h3 span").text(pagenum) :
! ! $("h3 span").text("");!
! ! pageimg ?
! ! ! $(".page_image").html('<img src="img/' + pageimg + '"
! ! ! $(".page_image").html("");
! ! if ($(".page_image").children().length) {
! ! ! $(".page_image").children().each(function() {
! ! ! ! ! bgcolor: "#999"
! ! ! ! });
! ! ! });
! ! }
! ! ...

cache/improve selectors
! // r0: saved .page_image selector
! var $h = $("h3 span"),
! ! $p = $("div.page_image");
! newpage = "";
! parseInt(pagenum) ? $h.text(pagenum) : $h.text("");!
! ! pageimg ?
! ! ! $p.html('<img src="img/' + pageimg + '" />') :
! ! ! $p.html("");
! ! var imgs = $p.children();
! ! if (imgs.length) {
! ! ! $.each(imgs,function() {
! ! ! ! ! bgcolor: "#999"
! ! ! ! });
! ! ! });

avoid repetition
! $.get("pages/title.html",function(r) {
! ! $(".page_text").html(r);
! }, "html");
!
! $(".continue a").click(function(e) {
! ! goToPage(parseInt($("#currentpage").val())+1);
! });
!
! $(".choose a").click(function(e) {
! ! var newpage = $(this).attr("rel");
! ! goToPage(newpage);
! });
});


avoid repetition
!
! // r0: removed repeated code (+ link wireups)
! goToPage(0);

});


now you have..

☛ tasks defined
☛ reuse

☛ abstraction


release 1

☛ all your code under one namespace
☛ that’s it.
☛ find, replace, test
☛ memory lane


leave window alone
var newpage = "";
// TODO: is this necessary?
var keys = {
! "37": "left",
! "39": "right"
};
var typingPause;

// TODO: fewer arguments
function goToPage(pagenum, pagetext, pageimg) {
! ...


leave window alone
// r1: added this namespace
var cyoa = cyoa || {
! ! newpage: "",
! ! // TODO: is this necessary?
! ! keys: {
! ! ! "37": "left",
! ! ! "39": "right"
! ! },
! ! typingPause: null
! };

cyoa.goToPage = function(pagenum, pagetext, pageimg) {


check for inline JS
<a href=”javascript:goToPage(9)”>click here!!1</a>

<script type=”text/javascript”>
if (newpage == “”) document.write(“no new page to load”);
</script>


check external code
// r1: added this namespace
var cyoa = cyoa || {
! ! newpage: "",
! ! ...
! ! typingPause: null
! };

// r1: well it would have been cool, anyway..
var newpage = function() {
! return cyoa.newpage;
};


now you have..

☛ your stuff is isolated
☛ group pieces of app
☛ good overview


release 2

☛ hidden fields
☛ attributes

☛ add new objects at the right level
☛ stay out of display code.. for now


val()

! ...

! $("#currentpage").val(pagenum);
! window.location.hash = pagenum;


val()

! ...

! cyoa.currentPage = pagenum;
! window.location.hash = pagenum;


attr()
<a rel="4">If you decide to refactor, turn to page 4.</a>

$("div.choose a").click(function(e) {
! e.preventDefault();
! var newpage = $(this).attr("rel");
! cyoa.goToPage(newpage);
});


attr()
<a href="#4">If you decide to refactor, turn to page 4.</a>

(or)

// TODO: add to state object
$("div.choose a").click(function(e) {
! e.preventDefault();
! var newpage = $(this).attr("rel");
! cyoa.goToPage(newpage);
});


now you have..

☛ DOM data vs. non-DOM data
☛ access data more quickly
☛ change HTML without breaking app


release 3

☛ isolate existing plugins
☛ formalize widgets
☛ my.plugin = function($t) or $.fn.plugin


wrapping plugins
! ! var imgs = $p.children();
! ! if (imgs.length) {
! ! ! $.each(imgs,function() {
! ! ! ! ! bgcolor: "#999"
! ! ! ! });
! ! ! });
! ! }


wrapping plugins
! ! // r3: removed plugin setup code
! ! cyoa.setUpZoom($p.children());
...
cyoa = {
! ! setUpZoom: function($t) {
! ! ! if ($t.length) {
! ! ! ! $t.each(function() {
! ! ! ! ! cyoa.zoomin($(this), {
! ! ! ! ! ! bgcolor: "#999"
! ! ! ! ! });
! ! ! ! });
! ! ! }
! ! }
}


not $.fn.everything
☛ known element type?
☛ known class?
☛ known properties?
☛ known length?
☛ that’s a widget, y’all


now you have..

☛ easy plugin swap/upgrade
☛ app-specific stock of widgets
☛ your junk out of $.fn.*
☛ widgets within relevant state in...


release 4
☛ state objects
☛ steps in arrays
☛ non-linear states: myApp.states[“thisState”]
☛ state functions
☛ init

☛ change state
☛ error


confine state info

! // TODO: put this logic someplace else
! if (!pagetext) {
! ! switch (parseInt(pagenum)) {
! ! ! case 0:
! ! ! ! cyoa.goToPage0();
! ! ! ! break;
! ! ! case 1:
! ! ! ! break;
! ! ! case 2:
! ! ! ! break;
! ! ! ...


confine state info
// r4: added more structured state management
cyoa.state = {
! init: function() {
! ! var num = window.location.hash.substring(1) || 0;
! ! cyoa.state.goToPage(num);
! },
!
! goToPage: function(pagenum) {
! !
! ! // r4: check that page is valid
! ! pagenum = parseInt(pagenum);
! ! if (pagenum < 0 || pagenum >= cyoa.states.length)
! ! ! return;
! !
! ! cyoa.currentPage = pagenum;
! ! window.location.hash = pagenum;


confine state info
// TODO: NOT THIS.
cyoa.goToPage0 = function() {
! cyoa.goToPage(0,"title.html");
}
! cyoa.goToPage(1,"whatToDo.html");
}
! cyoa.goToPage(2,"youHaveDied.html","explosion.jpg");
}
! cyoa.goToPage(3,"youHaveDied.html","sisyphus.jpg");
}
! cyoa.goToPage(4,"sellIt.html");
}


confine state info
// r4: created array with page/state info
cyoa.states = [
! {page: "title.html"},!
! {page: "whatToDo.html"},!
! {page: "youHaveDied.html", image: "explosion.jpg"},!
! {page: "youHaveDied.html", image: "sisyphus.jpg"},!
! {page: "sellIt.html"}
];
// extra credit: routing info


now you have..
☛ state differences encapsulated
☛ single place to switch state
☛ clear definitions
☛ add states cleanly
☛ add in routing with less risk


release 5

☛ pub/sub instead of event handlers
☛ reduce anonymous functions
☛ event handlers manage $(this)
☛ onreadystatechange publishes


publish/subscribe
! ! $.get("pages/" + state.page,function(r) {
! ! ! $("div.page_text").html(r);
! ! !
! ! ! img ?
! ! ! ! $p.html('<img src="img/' + img + '" />') :
! ! ! ! $p.html("");
! ! ! // r3: removed plugin setup code
! ! ! cyoa.setUpZoom($p.children());
! ! !
! ! ! $("div.continue a").click(function(e) {
! ! ! ! e.preventDefault();
! ! ! ! cyoa.state.goToPage(cyoa.currentPage+1);
! ! ! });
! ! !
! ! ! ...!
! ! !
! ! }, "html");

publish/subscribe
! ! $.get("pages/" + state.page,function(r) {!
! !
! ! ! cyoa.event.publish("pageLoaded", [r]);!
! ! }, "html");

...

! cyoa.event.subscribe("pageLoaded", function(r) {!
! !
! ! $("div.page_text").html(r);
! !
! ! $("div.continue a").click(function(e) {
! ! ! cyoa.currentPage += 1;
! ! });
! ! !
! });


pub/sub and get/set
cyoa = {
! ! _currentPage: 0,
! ! // r5: getter and setter for currentPage
! ! get currentPage() { return this._currentPage; },
! ! set currentPage(n) {
! ! ! if (n < 0 || n >= cyoa.states.length) return;
! ! ! this._currentPage = n;
! ! ! cyoa.event.publish("pageChanged");
! ! }
}
...
cyoa.event.subscribe("pageChanged", function(r) {!!
! cyoa.state.goToPage();
});


now you have..

☛ application events vs. DOM events
☛ no manual callback chains
☛ easily add features that observe events
☛ control state through properties


release 6
☛ upgrade

☛ regression test
☛ swap out non-forward-compatible plugins
☛ regression test
☛ maybe roll back (sorries :( )


upgrade and test
! cyoa.event.subscribe("pageLoaded", function(r) {!
! !
! ! $("div.page_text").html(r);
! !
! ! $("div.continue a").click(function(e) {
! ! ! cyoa.currentPage += 1;
! ! });
! ! !
! });


upgrade and test
! // r6: don't keep binding this every time
! $("div.page_text")
! ! .delegate("div.continue a","click",function(e) {

! ! cyoa.currentPage += 1;

! });


when you can’t upgrade

☛ bugs should be easier to find
☛ fix them
☛ keep trying
☛ ala carte features


but once you do.. !!
☛ dependency management
☛ event delegation
☛ deferreds

☛ unit tests
☛ documentation

☛ ..framework? maybe?


nobody saw a thing

☛ business people: “Oh I thought you finished
that five releases ago?”
☛ users: less “It’s too slow,” more “Why can’t I
make this have polka dots?”


you:
☛ “:D”

☛ can develop faster
☛ can fix easier
☛ can get hit by all the buses you want


hey, since you did such a
super job on that
refactor...


thanks!

☛ who’s got questions?
☛ shy questions:
☛ @garannm

☛ garann@gmail.com


Sneaking structure into your DOM-based application

Recommandé

Recommandé

Contenu connexe

Dernier

Dernier (20)

En vedette

En vedette (20)

Sneaking structure into your DOM-based application