Planning JavaScript for Larger Teams - Draft & Handout version
-
Upload
christian-heilmann -
Category
Technology
-
view
6.312 -
download
2
description
Transcript of Planning JavaScript for Larger Teams - Draft & Handout version
![Page 1: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/1.jpg)
Planning JavaScript and Ajax for larger teams
Christian Heilmann@media Ajax, London, November 2007
![Page 2: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/2.jpg)
Achtung alles Lookenpeepers!Dies Machine is nicht fur gefingerpoken
und mittengraben. Is easy schnappen der springenwerk, blowenfusen und poppencorken mit spitzensparken. Is nicht fur gewerken by das dummkopfen. Das rubbernecken sightseeren keepen Cottenpickenen hands in das pockets - relaxen und Watch Das Blinken Lights.
![Page 3: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/3.jpg)
Do not fiddle with other people’s knobs unless you know what you are doing.
![Page 4: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/4.jpg)
Spoilers:– Some of the following advice will
seem very basic to you.– This is not based on me thinking
you need this.– It is meant as a reminder. Next
time you encounter these problems you won’t have to think about them.
… and Harry Potter dies, but comes back using a magic stone which is a third of the Deathly Hallows.
![Page 5: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/5.jpg)
There is one main fatal mistake any developer
can make:
![Page 6: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/6.jpg)
There is one main fatal mistake any developer
can make:
Make assumptions
![Page 7: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/7.jpg)
“I don’t need to tell people that, they know
already.”
![Page 8: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/8.jpg)
“Surely this has been done already, and by
people better than me.”
![Page 9: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/9.jpg)
“This works right now, there won’t be a need to
change it.”
![Page 10: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/10.jpg)
“This never worked in the past, it won’t work now.”
![Page 11: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/11.jpg)
“We hack that now, and will get time later to fix
it.”
![Page 12: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/12.jpg)
“This is a minor issue only for this instance, no need
to file a bug.”
![Page 13: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/13.jpg)
All these mistakes are yours to make.
![Page 14: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/14.jpg)
Sometimes they need to be made in order to prove a new point or prove an issue and its solution.
![Page 15: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/15.jpg)
However, avoiding them means you help all of us
working together.
![Page 16: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/16.jpg)
No more heroes!
![Page 17: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/17.jpg)
A good developer is not a very gifted and
impressive developer.
![Page 18: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/18.jpg)
It is a developer that can work with others and
works for the next developer to take over.
![Page 19: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/19.jpg)
People will move from product to product or leave the company.
![Page 20: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/20.jpg)
Web products are never finished.
![Page 21: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/21.jpg)
Don’t leave a mess behind; work as if you
won’t see the code ever again.
![Page 22: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/22.jpg)
Mistakes we make:
![Page 23: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/23.jpg)
1. Mixing structure, presentation and behaviour.
2. Trusting the browser.3. Trusting the markup.4. Not planning for inclusion.5. Not planning for failure.6. Premature optimization.
![Page 24: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/24.jpg)
This should be a no-brainer by now but we
still do it.
![Page 25: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/25.jpg)
Separation means:
–Working in parallel (to an extend)
–Re-skinning an application by changing the style sheet
–Caching, Minimizing, Optimizing for speed and delivery.
![Page 26: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/26.jpg)
Not separating means:
–Harder maintenance –Larger and slower sites –Several sources for bugs without an easy way to track them.
![Page 27: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/27.jpg)
1. Mixing structure, presentation and behaviour.
2. Trusting the browser.3. Trusting the markup.4. Not planning for inclusion.5. Not planning for failure.6. Premature optimization.
![Page 28: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/28.jpg)
The last thing to trust is the browser.
![Page 29: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/29.jpg)
They all have shifty eyes and will steal your loose change when you don’t
look.
![Page 30: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/30.jpg)
Testing for a browser name and assuming it
can do certain things is a bad plan.
![Page 31: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/31.jpg)
Browsers come in all kind of setups and with all kind of extensions.
![Page 32: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/32.jpg)
Assume the browser will fail and keep poking it
until it tells you all is OK.
![Page 33: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/33.jpg)
Making assumptions:
function showMessage(elm, message){
elm.firstChild.nodeValue = message;
}
![Page 34: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/34.jpg)
function showMessage(id,message){ if(document.getElementById){ var elm = document.getElementById(id); if(elm){ if(elm.firstChild){ if(elm.firstChild.nodeType === 3){ elm.firstChild.nodeValue = message; } else { var t = document.createTextNode(message); elm.insertBefore(t,elm.firstChild); } } else { var t = document.createTextNode(message); elm.appendChild(t,elm.firstChild); } } }}
![Page 35: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/35.jpg)
function showMessage(id,message){ if(document.getElementById){ var elm = document.getElementById(id); if(elm){ if(elm.firstChild){ if(elm.firstChild.nodeType === 3){ elm.firstChild.nodeValue = message; } else { var t = document.createTextNode(message); elm.insertBefore(t,elm.firstChild); } } else { var t = document.createTextNode(message); elm.appendChild(t,elm.firstChild); } } }}
![Page 36: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/36.jpg)
function showMessage(id,message){ if(document.getElementById){ var elm = document.getElementById(id); if(elm){ if(elm.firstChild){ if(elm.firstChild.nodeType === 3){ elm.firstChild.nodeValue = message; } else { var t = document.createTextNode(message); elm.insertBefore(t,elm.firstChild); } } else { var t = document.createTextNode(message); elm.appendChild(t,elm.firstChild); } } }}
![Page 37: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/37.jpg)
function showMessage(id,message){ if(document.getElementById){ var elm = document.getElementById(id); if(elm){ if(elm.firstChild){ if(elm.firstChild.nodeType === 3){ elm.firstChild.nodeValue = message; } else { var t = document.createTextNode(message); elm.insertBefore(t,elm.firstChild); } } else { var t = document.createTextNode(message); elm.appendChild(t,elm.firstChild); } } }}
![Page 38: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/38.jpg)
function showMessage(id,message){ if(document.getElementById){ var elm = document.getElementById(id); if(elm){ if(elm.firstChild){ if(elm.firstChild.nodeType === 3){ elm.firstChild.nodeValue = message; } else { var t = document.createTextNode(message); elm.insertBefore(t,elm.firstChild); } } else { var t = document.createTextNode(message); elm.appendChild(t,elm.firstChild); } } }}
![Page 39: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/39.jpg)
function showMessage(id,message){ if(document.getElementById){ var elm = document.getElementById(id); if(elm){ if(elm.firstChild){ if(elm.firstChild.nodeType === 3){ elm.firstChild.nodeValue = message; } else { var t = document.createTextNode(message); elm.insertBefore(t,elm.firstChild); } } else { var t = document.createTextNode(message); elm.appendChild(t,elm.firstChild); } } }}
![Page 40: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/40.jpg)
function showMessage(id,message){ if(document.getElementById){ var elm = document.getElementById(id); if(elm){ if(elm.firstChild){ if(elm.firstChild.nodeType === 3){ elm.firstChild.nodeValue = message; } else { var t = document.createTextNode(message); elm.insertBefore(t,elm.firstChild); } } else { var t = document.createTextNode(message); elm.appendChild(t,elm.firstChild); } } }}
![Page 41: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/41.jpg)
function showMessage(id,message){ if(document.getElementById){ var elm = document.getElementById(id); if(elm){ if(elm.firstChild){ if(elm.firstChild.nodeType === 3){ elm.firstChild.nodeValue = message; } else { var t = document.createTextNode(message); elm.insertBefore(t,elm.firstChild); } } else { var t = document.createTextNode(message); elm.appendChild(t,elm.firstChild); } } }}
![Page 42: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/42.jpg)
function showMessage(id,message){ if(document.getElementById){ var elm = document.getElementById(id); if(elm){ if(elm.firstChild){ if(elm.firstChild.nodeType === 3){ elm.firstChild.nodeValue = message; } else { var t = document.createTextNode(message); elm.insertBefore(t,elm.firstChild); } } else { var t = document.createTextNode(message); elm.appendChild(t,elm.firstChild); } } }}
![Page 43: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/43.jpg)
function showMessage(id,message){ if(document.getElementById){ var elm = document.getElementById(id); if(elm){ if(elm.firstChild){ if(elm.firstChild.nodeType === 3){ elm.firstChild.nodeValue = message; } else { var t = document.createTextNode(message); elm.insertBefore(t,elm.firstChild); } } else { var t = document.createTextNode(message); elm.appendChild(t,elm.firstChild); } } }}
![Page 44: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/44.jpg)
Bit overkill, isn’t it?
![Page 45: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/45.jpg)
–Add tests for the browser early (init method)
–Use library functions that do the testing for you.
![Page 46: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/46.jpg)
1. Mixing structure, presentation and behaviour.
2. Trusting the browser.3. Trusting the markup.4. Not planning for inclusion.5. Not planning for failure.6. Premature optimization.
![Page 47: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/47.jpg)
HTML markup of the document is never set in
stone.
![Page 48: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/48.jpg)
Don’t rely on it.
![Page 49: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/49.jpg)
document.getElementById('nav').getElementsByTagName('li')[3].firstChild.getElmentsByTagName('span')[2].nodeValue = 'offline';
![Page 50: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/50.jpg)
document.getElementById('nav').getElementsByTagName('li')[3].firstChild.getElmentsByTagName('span')[2].nodeValue = 'offline';
![Page 51: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/51.jpg)
1. Mixing structure, presentation and behaviour.
2. Trusting the browser.3. Trusting the markup.4. Not planning for inclusion.5. Not planning for failure.6. Premature optimization.
![Page 52: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/52.jpg)
Assuming your script is the only one included in
the document:
![Page 53: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/53.jpg)
Assuming your script is the only one included in
the document:
hasfail = true;
![Page 54: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/54.jpg)
Namespace your scripts, follow a naming
convention and don’t leave any global variables
or methods.
![Page 55: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/55.jpg)
That way your script will run even if it has to work
alongside bad code.
![Page 56: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/56.jpg)
Bad code will be added to your documents, most of the time in the form of
advertisements or tracking code.
![Page 57: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/57.jpg)
1. Mixing structure, presentation and behaviour.
2. Trusting the browser.3. Trusting the markup.4. Not planning for inclusion.5. Not planning for failure.6. Premature optimization.
![Page 58: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/58.jpg)
Things will fail, plan for it!
– JavaScript will not be available.–Ajax connections will take too long or return wrong data.
–Plan for a fallback option (redirect to a static page, show an error message)
![Page 59: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/59.jpg)
<a href="javascript:ajaxmagic('panda')">
Show results for 'panda'
</a>
![Page 60: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/60.jpg)
<a href="javascript:ajaxmagic('panda')">
Show results for 'panda'
</a>
![Page 61: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/61.jpg)
<a href="search.php?term=panda" id="searchlink">
Show results for 'panda‘
</a>
var YE = YAHOO.util.Event;
YE.on('searchlink','click',ajaxmagic);
function ajaxmagic(e){
var t = YE.getTarget(e);
var url = t.href.split('=')[1];
ajaxcode(url);
YE.preventDefault(e);
}
![Page 62: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/62.jpg)
Re-use the backend script
function ajaxmagic(e){
var t = YE.getTarget(e);
var url = t.href + &output=json';
ajaxcode(url);
YE.preventDefault(e);
}
![Page 63: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/63.jpg)
1. Mixing structure, presentation and behaviour.
2. Trusting the browser.3. Trusting the markup.4. Not planning for inclusion.5. Not planning for failure.6. Premature optimization.
![Page 64: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/64.jpg)
Each of us has a little hacker inside who wants
to get out.
![Page 65: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/65.jpg)
This little hacker wants to make things as fast, small
and cool as possible.
![Page 66: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/66.jpg)
This little hacker is also very competitive and doesn’t trust reused
code or libraries.
![Page 67: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/67.jpg)
![Page 68: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/68.jpg)
Our job is not to give in to it when we produce production code.
![Page 69: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/69.jpg)
Production code does not need to be optimized
from the start.
![Page 70: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/70.jpg)
It needs to be understandable and
maintainable.
![Page 71: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/71.jpg)
–use library code, even if it appears huge (a lot of the size is a myth)
–Use comments to explain what is going on
–Use explanatory variable and method names
–Don’t reinvent the wheel even if you consider yours superior.
![Page 72: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/72.jpg)
Enough bad. Give us some tips!
![Page 73: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/73.jpg)
1. Follow a diet plan.2. Have a build process.3. Have a code standard and
documentation process.4. Review and reuse code.5. Plan for extension.6. Think maintenance
![Page 74: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/74.jpg)
Try to avoid traps that make your code hungry:
–Cut down on DOM interaction –Minimize the amount of loops –Build tool methods to deal with reoccurring problems
![Page 75: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/75.jpg)
Use shortcut notations in JavaScript.
![Page 76: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/76.jpg)
var links = new Array();
links[0]='http://icant.co.uk';
links[1]='http://wait-till-i.com';
links[2]='http://onlinetools.org';
![Page 77: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/77.jpg)
var links = new Array();
links[0]='http://icant.co.uk';
links[1]='http://wait-till-i.com';
links[2]='http://onlinetools.org';
var links = [
'http://icant.co.uk', 'http://wait-till-i.com', 'http://onlinetools.org‘
];
![Page 78: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/78.jpg)
var contact = new Object();
contact.name = 'Christian';
contact.surName = 'Heilmann';
contact.age = 32;
contact.hair = 'slightly red';
![Page 79: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/79.jpg)
var contact = new Object();contact.name = 'Christian';contact.surName = 'Heilmann';contact.age = 32;contact.hair = 'slightly red';
var contact = {name:'Christian',surName:'Heilmann',age:32,hair:'slightly red'
};
![Page 80: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/80.jpg)
if(hasCheeseburger){cat.mood = 'happy';
} else {cat.mood = 'sad';
}
![Page 81: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/81.jpg)
if(hasCheeseburger){cat.mood = 'happy';
} else {cat.mood = 'sad';
}
cat.mood = hasCheeseburger?'happy':'sad';
![Page 82: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/82.jpg)
if(hasCheeseburger){cat.mood = 'happy';
} else {cat.mood = 'sad';
}
cat.mood = hasCheeseburger?'happy':'sad';
condition
![Page 83: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/83.jpg)
if(hasCheeseburger){cat.mood = 'happy';
} else {cat.mood = 'sad';
}
cat.mood = hasCheeseburger?'happy':'sad';
true case
![Page 84: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/84.jpg)
if(hasCheeseburger){cat.mood = 'happy';
} else {cat.mood = 'sad';
}
cat.mood = hasCheeseburger?'happy':'sad';
false case
![Page 85: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/85.jpg)
if(obj.getClass()==='full'){var x = screen.left;
} else {var x = current;
}
![Page 86: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/86.jpg)
if(obj.getClass()==='full'){var x = screen.left;
} else {var x = current;
}
var x = (obj.hasClass()==='full') ? screen.left : current;
![Page 87: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/87.jpg)
var cat;
if(canHasCheeseburger){
cat = canHasCheeseburger;
};
if(garfield){
cat = garfield;
};
![Page 88: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/88.jpg)
var cat;
if(canHasCheeseburger){
cat = canHasCheeseburger;
};
if(garfield){
cat = garfield;
};
var cat = canHasCheeseburger || garfield;
![Page 89: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/89.jpg)
var cat;
if(canHasCheeseburger){
cat = canHasCheeseburger;
};
if(garfield){
cat = garfield;
};
var cat = canHasCheeseburger || garfield;
one or the other, defining a fallback
![Page 90: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/90.jpg)
var massive.name.with.long.namespace = { ...private stuff... return{ init:function(){ massive.name.with.long.namespace.show();
}, show:function(){ massive.name.with.long.namespace.test();
}, test:function(){ } }}();
![Page 91: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/91.jpg)
var massive.name.with.long.namespace = { var pub = {};...private stuff...pub.init = function(){
pub.show();};pub.show = function(){
pub.test();};pub.test = function(){};return pub;
}();massive.name.with.long.namespace.init();
![Page 92: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/92.jpg)
var massive.name.with.long.namespace = {function init(){
show();};function show(){
test();};function test(){};return {
init:init;show:show;test:test;
};}();massive.name.with.long.namespace.init();
![Page 93: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/93.jpg)
1. Follow a diet plan.2. Have a build process.3. Have a code standard and
documentation process.4. Review and reuse code.5. Plan for extension.6. Think maintenance
![Page 94: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/94.jpg)
–Production code is not live code.
–That doesn’t happen on the back-end and it shouldn’t happen on the front-end.
–Live code is there for machines, production code is there for humans.
![Page 95: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/95.jpg)
Build process:–Validation (Tidy, JSLint)–Minification (JSMin, CSS minifier)
–Consolidation (one CSS and one JS instead of dozens)
–Tagging as “live code” – do not edit!
![Page 96: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/96.jpg)
1. Follow a diet plan.2. Have a build process.3. Have a code standard and
documentation process.4. Review and reuse code.5. Plan for extension.6. Think maintenance
![Page 97: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/97.jpg)
Following a code standard means you can:–Assess quality of code –Find bugs easily and create reproducible bug reports
–Have quick handover from developer to developer
–Have reliable version control
![Page 98: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/98.jpg)
What code standard?
![Page 99: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/99.jpg)
Whatever the team agrees on and feels comfortable with.
![Page 100: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/100.jpg)
Document it and other teams can validate what
you have done.
![Page 101: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/101.jpg)
In the perfect world, we’ll all follow the same code
standard.
![Page 102: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/102.jpg)
Let’s meet again in a year! :-)
![Page 103: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/103.jpg)
Comments are good, but they are not
documentation.
![Page 104: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/104.jpg)
Write documentation in peer review - as the
developer you are too close to the subject.
![Page 105: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/105.jpg)
Plan and ask for time to document what you have
done.
![Page 106: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/106.jpg)
1. Follow a diet plan.2. Have a build process.3. Have a code standard and
documentation process.4. Review and reuse code.5. Plan for extension.6. Think maintenance
![Page 107: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/107.jpg)
Conduct Code reviews–You find problems and solutions you can share in the team.
–You find out who knows what well and who needs training in what
–You share the knowledge throughout the team = no Divas.
![Page 108: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/108.jpg)
– If you keep finding the same problem and different solutions for it, find a generic solution and re-use that one.
–Look at what other people have done (libraries).
–Bounce your solutions off other development teams.
![Page 109: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/109.jpg)
1. Follow a diet plan.2. Have a build process.3. Have a code standard and
documentation process.4. Review and reuse your code.5. Plan for extension.6. Think maintenance
![Page 110: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/110.jpg)
Whenever you write some code, don’t think that
your implementation will be the end of it.
![Page 111: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/111.jpg)
Make sure that your code can be extended by
other people and try to build it as modular as
possible.
![Page 112: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/112.jpg)
1. Follow a diet plan.2. Have a build process.3. Have a code standard and
documentation process.4. Review and reuse your code.5. Plan for extension.6. Think maintenance
![Page 113: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/113.jpg)
Not everybody maintaining your code will be as good as you
are.
![Page 114: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/114.jpg)
Trying to find where to change what in a piece of
code is terribly frustrating.
![Page 115: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/115.jpg)
Separate out as much of the look and feel as you
can.
![Page 116: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/116.jpg)
Also separate out labels that are likely to change and the names of CSS classes and IDs in use.
![Page 117: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/117.jpg)
So how do you plan JavaScript and Ajax for
larger teams?
![Page 118: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/118.jpg)
Get the team to talk and agree on what works
best.
![Page 119: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/119.jpg)
Involve Design and Engineering in the
process and explain the rationale of your plan.
![Page 120: Planning JavaScript for Larger Teams - Draft & Handout version](https://reader036.fdocuments.in/reader036/viewer/2022070317/5562d835d8b42a6c498b51f4/html5/thumbnails/120.jpg)
Communication and sharing information is
better than any architectural blueprint you or I could come up
with.