maintainable javascript carsonified
TRANSCRIPT
![Page 1: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/1.jpg)
Maintainable JavaScript
Chris&an HeilmannCarsonfied online conference, September 2010
![Page 2: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/2.jpg)
JavaScript is awesome!
![Page 3: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/3.jpg)
Nowadays writing JavaScript is wonderfully easy.
![Page 4: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/4.jpg)
Libraries patch the support holes in browsers.
![Page 5: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/5.jpg)
Pure JavaScript environments allow us to really play with the language.
![Page 6: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/6.jpg)
JavaScript is dead easy to learn and the first steps are already very rewarding.
![Page 7: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/7.jpg)
This is also the problem of JavaScript.
![Page 8: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/8.jpg)
The web is not a closed environment where we can dictate the technologies people use.
![Page 9: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/9.jpg)
Some of the things I will talk about today will seem outdated or overly cautious.
![Page 10: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/10.jpg)
The reason is that I want to build a web that works.
![Page 11: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/11.jpg)
For far too long we have built a mess that barely functions and is hard to change.
![Page 12: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/12.jpg)
So here are a few ideas and concepts you should follow if you write JavaScript.
![Page 13: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/13.jpg)
★ Using, not abusing libraries
★ Separation of concerns
★ Building for extensibility
★ Documenting your work
★ Planning for performance
★ Avoiding double maintenance
★ Live code vs. development code
![Page 14: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/14.jpg)
Libraries fix browsers and make the complex simple.
![Page 15: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/15.jpg)
They make web development predictable.
![Page 16: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/16.jpg)
Building without libraries means constant catch-up with the browser market.
![Page 17: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/17.jpg)
Do not mix and match libraries though.
![Page 18: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/18.jpg)
Stick with one and use it to its strengths.
![Page 19: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/19.jpg)
If the library totally re-invents JS as we know it, this is fine.
![Page 20: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/20.jpg)
But: writing in an abstraction syntax is not writing JavaScript.
![Page 21: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/21.jpg)
Quick two-liners do not replace architecting and planning.
![Page 22: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/22.jpg)
Professional libraries come as a pick and mix solution.
![Page 23: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/23.jpg)
Include what you need and when you need it - not the kitchen sink approach.
![Page 24: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/24.jpg)
One big danger of libraries is to tie the markup and your scripts far too close to each other.
![Page 25: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/25.jpg)
Small looking loops can actually be very slow.
![Page 26: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/26.jpg)
Long CSS selectors are dangerous.
![Page 27: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/27.jpg)
Pick your plugins by how well they are documented, how well supported and how easy they are to extend.
![Page 28: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/28.jpg)
Not by how flashy they are.
![Page 29: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/29.jpg)
★ Using, not abusing libraries
★ Separation of concerns
★ Building for extensibility
★ Documenting your work
★ Planning for performance
★ Avoiding double maintenance
★ Live code vs. development code
![Page 30: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/30.jpg)
This is old news.
![Page 31: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/31.jpg)
Take each technology on the web and use it for what it was meant to.
![Page 32: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/32.jpg)
HTML that works without JavaScript should not be aded using JavaScript.
![Page 33: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/33.jpg)
HTML that only makes sense when JavaScript is available should be added with JavaScript.
![Page 34: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/34.jpg)
Instructions that describe functionality that is dependent on JS should also be added by it.
![Page 35: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/35.jpg)
Text, classes and ID names are very much prone to change.
![Page 36: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/36.jpg)
So don’t spread them all over your scripts but keep them in one place for maintenance.
![Page 37: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/37.jpg)
Public configuration objects are a great idea.
![Page 38: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/38.jpg)
Most underused element:
<button>
![Page 39: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/39.jpg)
Buttons by definition are there to trigger script functionality - so use them instead of links.
![Page 40: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/40.jpg)
Links should point to a real resource - a url, a server endpoint or an anchor.
![Page 41: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/41.jpg)
Empty links, void(0) # and other hacks don’t make any sense.
![Page 42: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/42.jpg)
Styling should be done in CSS, not in your JavaScript.
![Page 43: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/43.jpg)
Calculated positions are of course the exception to that rule.
![Page 44: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/44.jpg)
Adding and removing classes makes sure designers have a handle and you don’t have to worry.
![Page 45: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/45.jpg)
By adding a class to a parent element you can swiftly hide a lot of elements you’d otherwise have to loop over.
![Page 46: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/46.jpg)
Adding a “js” class to the body means CSS designers can define two views easily.
![Page 47: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/47.jpg)
Make maintainers not have to know JS or change yours!
![Page 48: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/48.jpg)
★ Using, not abusing libraries
★ Separation of concerns
★ Building for extensibility
★ Documenting your work
★ Planning for performance
★ Avoiding double maintenance
★ Live code vs. development code
![Page 49: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/49.jpg)
Using libraries means using a lot of anonymous functions.
![Page 50: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/50.jpg)
Most of the time at the end of a massive chain of methods or for every click().
![Page 51: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/51.jpg)
Naming and calling these methods makes more sense as you create a single space to maintain.
![Page 52: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/52.jpg)
Never think your script is done and you thought of all use cases.
![Page 53: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/53.jpg)
This is why we have dozens of lightbox plugins in jQuery all doing almost the same thing.
![Page 54: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/54.jpg)
Instead of building a “one size fits all” solution, split it up into small solutions that do one thing and allow for mixing and matching.
![Page 55: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/55.jpg)
Think about firing off custom events at interesting moments.
![Page 56: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/56.jpg)
This allows people who want to extend your solution to do so without having to touch the main code.
![Page 57: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/57.jpg)
Don’t limit anything to a fixed size or amount. Instead make it a variable in the configuration object.
![Page 58: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/58.jpg)
★ Using, not abusing libraries
★ Separation of concerns
★ Building for extensibility
★ Documenting your work
★ Planning for performance
★ Avoiding double maintenance
★ Live code vs. development code
![Page 59: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/59.jpg)
Documentation is what we rely on when we get lost.
![Page 60: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/60.jpg)
People think documentation replaces good code examples.
![Page 61: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/61.jpg)
The issue is that as developers, we almost never start with the documentation.
![Page 62: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/62.jpg)
Instead we dive into the code and mess about with it.
![Page 63: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/63.jpg)
We read the documentation when we get stuck.
![Page 64: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/64.jpg)
Which is why code comments and descriptive variable and function names make your code easy to maintain.
![Page 65: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/65.jpg)
Comment the special case, not the obvious.
![Page 66: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/66.jpg)
Keep function and variable names short and to the point.
![Page 67: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/67.jpg)
Your documentation should explain applying and extending the code, not the code itself.
![Page 68: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/68.jpg)
Don’t worry about the size of comments - a good process deals with that.
![Page 69: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/69.jpg)
GitHub and Google Code is the new View-Source, so add value, not only solutions.
![Page 70: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/70.jpg)
★ Using, not abusing libraries
★ Separation of concerns
★ Building for extensibility
★ Documenting your work
★ Planning for performance
★ Avoiding double maintenance
★ Live code vs. development code
![Page 71: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/71.jpg)
You can find a lot of great performance tricks on the web when it comes to JS.
![Page 72: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/72.jpg)
Read those with the use case in mind.
![Page 73: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/73.jpg)
Tricks necessary to make Google Mail on mobiles run smooth are edge cases.
![Page 74: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/74.jpg)
Performance is a specialist topic and can be handled a lot in build processes.
![Page 75: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/75.jpg)
If a performance change means re-educating a whole team of developers it is probably not worth it.
![Page 76: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/76.jpg)
Scripts can convert and change code written in a predictable fashion.
![Page 77: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/77.jpg)
Hacks and shortcuts need to be fixed by humans.
![Page 78: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/78.jpg)
The performance of JS itself is not really the issue you should be concentrating on.
![Page 79: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/79.jpg)
Slowness of the DOM and reflow of the interface is where users get hurt.
![Page 80: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/80.jpg)
So use DOM access sparingly.
![Page 81: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/81.jpg)
Assemble HTML as as string and use innerHTML once instead of adding to it.
![Page 82: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/82.jpg)
Use Event Delegation instead of hundreds of event handlers.
![Page 83: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/83.jpg)
Store information in JS objects instead of HTML attributes.
![Page 84: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/84.jpg)
Make your code easy to understand and clean and add a performance review and refactoring step at the end.
![Page 85: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/85.jpg)
★ Using, not abusing libraries
★ Separation of concerns
★ Building for extensibility
★ Documenting your work
★ Planning for performance
★ Avoiding double maintenance
★ Live code vs. development code
![Page 86: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/86.jpg)
Double maintenance of code is a bad idea.
![Page 87: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/87.jpg)
Validation rules might get out of sync.
![Page 88: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/88.jpg)
This is always the killer argument of enemies of progressive enhancement.
![Page 89: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/89.jpg)
I spend a lot of time doing form validation in JavaScript - why should I repeat the same on the server side?
“
“
![Page 90: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/90.jpg)
Because there is no security in JavaScript!
![Page 91: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/91.jpg)
If all you do is validate in JS, attackers will have a field day with your server.
![Page 92: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/92.jpg)
Besides, there is no need to repeat validation rules.
![Page 93: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/93.jpg)
![Page 94: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/94.jpg)
![Page 95: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/95.jpg)
That way you validate on the server and you can use the same rules for your JS...
![Page 96: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/96.jpg)
![Page 97: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/97.jpg)
Form validation scripts are annoying.
![Page 98: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/98.jpg)
You need to access the right parts, read and write from the DOM, change styles and and and...
![Page 99: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/99.jpg)
You can leave it all to the server and still save your users a full page reload.
![Page 100: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/100.jpg)
Request type switching is the answer.
![Page 101: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/101.jpg)
JavaScript libraries add a special footprint to the server request when calling content via Ajax.
![Page 102: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/102.jpg)
![Page 103: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/103.jpg)
(so should your own Ajax solutions, btw)
![Page 104: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/104.jpg)
You can use this to send content to Ajax requests and other content to normal requests.
![Page 105: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/105.jpg)
![Page 106: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/106.jpg)
You can use this to render a form completely server side and just send a string back for each request.
http://github.com/codepo8/validationdemo
![Page 107: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/107.jpg)
![Page 108: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/108.jpg)
Filter inputs for nasties and include the rules.
![Page 109: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/109.jpg)
If the form has not been submitted, include the form code.
![Page 110: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/110.jpg)
Otherwise loop through the rules and check the data that was sent against them.
this is like /pattern/.test($(name).value)
![Page 111: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/111.jpg)
If there was an error - show the form again. Otherwise say thanks.
![Page 112: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/112.jpg)
The form itself is a simple HTML form doing all the dynamic rendering with PHP...
![Page 113: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/113.jpg)
![Page 114: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/114.jpg)
Check for the error array and if there is an error, show it. Otherwise show a * to indicate required field.
![Page 115: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/115.jpg)
Check if the form was sent via Ajax - if not, render the form element.
![Page 116: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/116.jpg)
If there was an error, say so. At the field show the error or the * SPAN.
![Page 117: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/117.jpg)
And all you then need to do in JavaScript is to override the form submission.
![Page 118: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/118.jpg)
And instead replace the innerHTML of the form on every submit.
![Page 119: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/119.jpg)
An example using YUI3...
![Page 120: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/120.jpg)
Load the IO and Node module.Define the configuration for the Ajax call.
On submission of the form load the validate.php file with the config and don’t send off the form.
![Page 121: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/121.jpg)
If the Ajax call was a success, replace the innerHTML of the form with the HTML returned from validate.php
![Page 122: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/122.jpg)
In addition to that, focus on the first element with an error message - this helps with assistive technology.
![Page 123: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/123.jpg)
If the Ajax call failed, send the form.
![Page 124: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/124.jpg)
Subscribe to the Ajax events.
![Page 125: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/125.jpg)
Writing lots of HTML with JavaScript is painful.
![Page 126: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/126.jpg)
So if you can avoid it, avoid it :)
![Page 127: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/127.jpg)
You can take this concept further.
![Page 128: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/128.jpg)
Make the backend render HTML to use with include() in PHP and load the same with Ajax.
![Page 129: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/129.jpg)
http://github.com/codepo8/flickrcollector
http://isithackday.com/hacks/flickrcollector/
![Page 130: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/130.jpg)
Using Node.js you can move that later on to a pure JavaScript solution.
![Page 131: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/131.jpg)
http://www.yuiblog.com/blog/2010/04/09/node-js-yui-3-dom-manipulation-oh-my/
![Page 132: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/132.jpg)
★ Using, not abusing libraries
★ Separation of concerns
★ Building for extensibility
★ Documenting your work
★ Planning for performance
★ Avoiding double maintenance
★ Live code vs. development code
![Page 133: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/133.jpg)
Live code is not development code.
![Page 134: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/134.jpg)
If you really get to a high traffic level with your scripts you should have a build process.
![Page 135: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/135.jpg)
A build process should do a few things for you.
![Page 136: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/136.jpg)
★ Remove comments★ Remove whitespace★ Bundle lots of files into one★ Pack the code★ Version, add the author and
date.★ Validate + Lint
![Page 137: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/137.jpg)
http://developer.yahoo.com/yui/compressor/
http://yuiblog.com/blog/2008/02/11/helping-the-yui-compressor
http://refresh-sf.com/yui/
http://code.google.com/closure/compiler/docs/gettingstarted_api.html
http://closure-compiler.appspot.com/home
http://jslint.com/
http://blog.macromates.com/2007/javascript-tools/
Toolshttp://www.ejeliot.com/blog/73
![Page 138: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/138.jpg)
Some examples of great practices in the wild.
![Page 139: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/139.jpg)
Give browsers what they can do and use what they do better!
![Page 140: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/140.jpg)
![Page 141: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/141.jpg)
Easing the use of web fonts for better typography.
![Page 142: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/142.jpg)
http://code.google.com/webfonts/preview#font-family=Lobster
![Page 143: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/143.jpg)
Simply adding a link doesn’t give you feedback though...
![Page 144: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/144.jpg)
Using JS to load the fonts on the other hand does.
![Page 145: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/145.jpg)
![Page 146: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/146.jpg)
http://code.google.com/apis/webfonts/docs/webfont_loader.html
Classes added to the root element by the Google WebFont loader
.wf-inactive
.wf-active
.wf-tangerine-n4-inactive
.wf-tangerine-n7-active
.wf-droidsans-n4-inactive[...]
n4 - normal i4 - italicn7 - bold i7 - bold italic
![Page 147: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/147.jpg)
http://code.google.com/apis/webfonts/docs/webfont_loader.html
<style type="text/css"> .wf-inactive p { font-family: serif; font-size:12px; } .wf-active p { font-family: 'Tangerine', serif; font-size:20px; } .wf-inactive h1 { font-family: serif; font-size: 16px } .wf-active h1 { font-family: 'Cantarell', serif; font-size: 35px }</style>
![Page 148: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/148.jpg)
WebFontConfig = { google: { families: [ 'Tangerine', 'Cantarell' ] }, typekit: { id: 'myKitId' }, loading: function() { }, fontloading: function(family, info) {}, fontactive: function(family, info) {}, fontinactive: function(family, info) {}, active: function() {}, inactive: function() {}};
![Page 149: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/149.jpg)
And that’s that. A lot about writing maintainable JavaScript is to avoid writing it yourself :)
![Page 150: Maintainable Javascript carsonified](https://reader033.vdocuments.mx/reader033/viewer/2022052410/554a0216b4c905e56c8b5194/html5/thumbnails/150.jpg)
Christian Heilmann http://wait-till-i.com http://developer-evangelism.com http://twitter.com/codepo8
Thanks!