Enrique Amodeo

• In the business since 2000
• Software developer
• Consulting & Mentoring
• Javascript/AJAX/RIA developer since 2006
• Doing agile & lean since 2005 (I like it!)
• Mail me at eamodeorubio@gmail.com
• Read my rants at http://eamodeorubio.wordpress.com/
• Follow me! @eamodeorubio & Google+

A good web application is not enough!

• A lot of web applications out there!
• You need to beat your rivals
• You need to develop faster than them
• Your app need to be cooler than theirs

• Don't worry
• I'll hire the best team out there

• A top rated web designer!



• ...that knows the last html5/css3 tricks

• The best code developers !



• They know some HTML & CSS too !

• Put them to work together...



• ...using that agile stuff

Problems ahead !

• They have a communication problem
• Different skills
• Different languages
• Different visions of the world

The mythical Designgeneer

• Ok, I've changed my mind
• I'll hire a Designgeneer!
• An army of one!

• Ok, perhaps this guy does not exists



• Or I can't afford him

• Candidates were more like this:



• Better return to my first idea!

Better a team working...together??

• A classic workflow

• Not very agile!

Problems with traditional workflow

• More misunderstandings, hence more ceremony
• Changes in UI are stuck in development phase
• Development is blocked by UI design
• Error prone
• Double maintenance
• Slow feedback & development cycle!

Decouple code from details in UI

• Change code only when user interaction changes
• App code should be HTML & CSS agnostic
• UI Design and Development in parallel
• Less interference

But need to agree on user interaction

• Work together on a disposable prototype
• Could be a paper one
• Or an HTML/JS one
• No CSS or aesthetics involved
• No software quality intended

Define a neutral contract!

• Build a contract on common ground
• A good set of common key selectors
• Use OO CSS
• See Nicole Sullivan (@stubbornella) for more details
• Si quieres una presentación en en español puedes ver la mía

OO CSS... in short!

• Semantic CSS selectors
• Decoupled from HTML
• Reusable in several context
• Extensible
• Could use small snippets of reusable HTML

UI proof software architecture

Templates are blocking our workflow!

• The design need to be transformed to templates
• Double maintenance
• Designer and developers work on different artifacts
• Can you do pair programming with your designer?

Templates are a solution from the past

• When HTML was generated in servers...
• ...and servers didn't understand HTML DOM
• We have better technology now!

Knockout.js

• Annotates the HTML with microdata
• Easier for the designer can ignore microdata
• And designer can ignore microdata
• ...but is not so easy with lists!

HTML animation

• Use the original HTML
• Use CSS selectors and jQuery/Zepto
• ...to animate the HTML

HTML Animation steps

• Fetch HTML examples using selectors
• Hide/remove the original HTML
• Make a clone for each model instance
• Insert the clone into the document
• Modify the new DOM with the model data

HTML Animation benefits

• The original HTML is enriched not send to thrash
• Everybody can work on the same artifact
• They are a team now!