1. Best practices for JavaScript RIAs
Carlos Ble | www.carlosble.com | @carlosble
Thanks to MadridJS.org
January 2013

2. Know the history

3. Table of contents
●
Is it an application or is it a website?
●
Is it a library, a framework, or application code?
●
Am I test-driving the code or not?
●
Testing tools
●
Testing techniques
●
Design patterns and architecture
●
Client-Sever?

4. What kind of JavaScript are you
writing?
●
For frameworks and libraries:
if (someVariable === undefined)...
●
For applications, without automated tests:
●
Test-first JavaScript:
if (someVariable)...
- Duck typing is OK.
- No need for lots of JavaScript patterns.
- Write code for humans.
Functional or Object Oriented? Just make it SOLID
●

5. TDD with JavaScript
●
Tddjs.com
●
DirigidoPorTests.com/el-libro

6. Testing tools
There are new tools every day!
Some tools I use, thanks to @pasku1 & @eamodeorubio
(follow these guys):
Jasmine/Mocha
Jasmine-node
Chai – chaijs.com
CasperJS / PhantomJS
JsTestDriver
Believe me, tools are there to support concepts,
they are not important themselves!

7. Testing Rules
&
Test-First Rules
●
Test-first is absolutely different from testing.
●
Do not mock artifacts you don't own.
●
Use stubs for queries and mocks/spies for actions.
●
Exploratory testing is always necessary.

8. Widgets are objects, not pictures

9. Events: DOM level 0 – Traditional model
(one2one: a nice kind of dependency injection)
Events: Observer (one2many)
& Pub/Sub (many2many)

10. Passive View
http://martinfowler.com/eaaDev/PassiveScreen.html

11. Factory
Singleton
More patterns:
http://addyosmani.com/resources/essentialjsdesignpatterns/book

12. Optimal code for machines
is hard to read for humans
●
Don't write code for machines, write it for humans
●
Do you really have performance metrics?
●
Google Closure Compiler
●
CoffeeScript
●
Do performance testing often

13. Smart client, dumb server
●
Let the client side application contain all the business
logic you can.
●
Keep the server just as an event bus for clients to
interact with each other.
●
Examples:
- TeamMonitor in LiveTeamApp.com
- Skype and TeamViewer clients can connect directly
between them (OK, this is not JavaScript).
●
Advantages:
- Ease of testing.
- Ease of maintenance.
- Scalability.

14. Sample app: LiveTeamApp

15. Conclusions
●
JavaScript is too big. Consider the context to make
decisions.
●
Retrieve best practices from the desktop development
age, those days back in the 90's.
●
Read books, the good ones don't get old.
●
Try to understand the concepts, not just the tools.
●
You usually don't need frameworks you need libraries.
●
Care about your code and your tests . Test-drive
your code.