Best Practices Every HTML5 Developer Should Know

Best Practices
every HTML5
developer should
know
Michael Mahemoff, Nuvomondo Ltd
At Intel AppLab, Mobile World Congress
t: @mahemoff
g: +mahemoff

Will be online at Intel AppUp blog

http://intel.ly/appupblog

Please use #html5best hashtag

#html5best - @mahemoff - Intel AppUp - MWC

ABOUT YOUR SPEAKER
UX

http://www.ﬂickr.com/photos/ideapaint/4821634406/sizes/l/in/photostream/


ABOUT YOUR SPEAKER
UX

2005

http://www.ﬂickr.com/photos/ideapaint/4821634406/sizes/l/in/photostream/


1. Up and Running

2. Move Fast

3. Grow


Up and
Running
ﬁrst steps to glory

EARLY FEEDBACK:
FAIL EARLY, FAIL FAST


REUSE


Libraries: Syntactic Sugar

Generic Libraries

DOM Manipulation
$(‘.food’).delete();

Networking
$.put(‘/orders’, { foods: [‘sushi’, ‘yakitori’] });

Data Wrangling
_(foods).select(function(food) { return food.isCold(); });


Reuse

Specialised libraries and frameworks

Graphics
Parsing
Verticals (e.g. gaming)
etc etc


A Layout Example: Pinterest in 4 Lines ;)
$(‘.container’).masonry({
itemSelector: ‘.item’,
columnWidth: 240
});


Web Components: Roll-Your-Own?

<element extends="button" name="x-spreadsheet">
…

Very
</element>

Expe!
<x-spreadsheet>

mental
10,5,1,8, ...
</x-spreadsheet>
http://dvcs.w3.org/hg/webcomponents/raw-ﬁle/tip/explainer/index.html


FRAMEWORKS


Twitter Bootstrap


Responsive Web Design


.column { width: 240px; }


.column { width: 240px; }
@media (max-width: 480px) {
.column { width: 100%; }
}


http://musicmak.es


Move
Fast
optimising for productivity

Single Page App is Here

RESTful Services

Single Page App

@mahemoff - Intel AppUp - MWC

MODERN SPA:
BETTER SYNTAX

CSS++

JS++

HTML++


CSS: Don’t Repeat Yourself

div {
background: rgb(136, 33, 149);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#882195',
endColorstr='#A43CB3',GradientType=0);
background-image: linear-gradient(bottom, rgb(104,7,114) 46%, rgb(136,33,149) 73%,
rgb(164,60,179) 87%);
background-image: -o-linear-gradient(bottom, rgb(104,7,114) 46%, rgb(136,33,149)
73%, rgb(164,60,179) 87%);
background-image: -moz-linear-gradient(bottom, rgb(104,7,114) 46%, rgb(136,33,149)
73%, rgb(164,60,179) 87%);
background-image: -webkit-linear-gradient(bottom, rgb(104,7,114) 46%,
rgb(136,33,149) 73%, rgb(164,60,179) 87%);
background-image: -ms-linear-gradient(bottom, rgb(104,7,114) 46%, rgb(136,33,149)
73%, rgb(164,60,179) 87%);
background-image: -webkit-gradient(
! linear, left bottom, left top, color-stop(0.46, rgb(104,7,114)), color-stop(0.73,
rgb(136,33,149)),
color-stop(0.87, rgb(164,60,179))
);
}


STYLUS: A “CSS++” COMPILER

Stylus

div {
background-image: linear-gradient
(bottom,
rgb(104,7,114) 46%,
rgb(136,33,149) 73%, rgb(164,60,179) 87%);
}


STYLUS

Stylus
div
background-image linear-gradient
(bottom,
rgb(104,7,114) 46%,
rgb(136,33,149) 73%,
rgb(164,60,179) 87%)


STYLUS

Stylus

div
background triple-gradient
(rgb(104,7,114), rgb(136,33,149), rgb(164,60,179))


STYLUS
Stylus

themeBG = rgb(78,155,100)
div
background triple-gradient
(themeBG, themeBG*1.2, themeBG*1.2 + #003)


COFFEESCRIPT
eat = -> f.delete()
function eat() {
f.delete();
}

eat sushi
eat(sushi);

$(‘.meal’).whenServed -> eat food
$(‘.meal’).whenServed(function() {
eat(food);
});


COFFEESCRIPT
foods =
miso: 4
teriyaki: 6
sushi: 12

condiments = (food.sauce for food of foods)
price = (if sushi then 12 else 4)

fetch chopsticks if food isnt miso
fetch chopsticks unless food is miso


JADE
!!! 5
html(lang="en")
head
title= pageTitle
script(type='text/javascript')
if (foo) {
bar()
}
body
h1 Jade - node template engine
#container
- if (youAreUsingJade)
p You are amazing
- else
p Get on it!


Grow
more features, less headaches

Modules


#HighCohesion #LowCoupling
#Modularity #Isolation
#SeparationOfConcerns

#Widget #WebComponent
#DomainObject #Module

A runtime conﬁguration

Mediator


Good: No more coupling

Good: Reuse elsewhere

Test
Driver

Good: We can test!

Model-View
Separation

Manage Your Architecture


var Book = <article class=”bookThumbnail”>
Backbone.Model.extend({ ...
function countWords() {...} </article>
});
var BookThumbnail =
Backbone.View.extend({...}


Templating
<article class=‘bookThumbnail’>
<header>
<h1 class=’title’>{{title}}</h1>
<img class=’hero’>{{hero}}</img>
</header>
<div class=‘author’>{{author}}</div>
</article>


Templating
<header> <article class=‘bookThumbnail’>

<h1 class=’title’>{{title}}</h1> Model C <header>
<h1 class=’title’>Barcelona at Noon</h1>
<img class=’hero’>{{hero}}</img> <img class=’hero’>bnoon.png</img>
</header>
</header> <div class=‘author’>A. Medio</div>
<div class=‘author’>{{author}}</div> </article>
</article>
Model B
Model A
<article class=‘bookThumbnail’> <header>
<header> <h1 class=’title’>Barcelona Nights</h1>
<h1 class=’title’>Barcelona Days</h1> <img class=’hero’>bnights.png</img>
<img class=’hero’>bdays.png</img> </header>
</header> <div class=‘author’>A. Nochez</div>
<div class=‘author’>A. Diaz</div> </article>
</article>


OOCSS
Credit: Nicole Sullivan


h1 #account{
background: blue;
font-family: arial;
}

#app h1 #account {
background: red;
}

#footer #account {
border-color: black;
}

The Problem:
CSS Jungle

.account {
background: #f9a;
}

.heading {
color: #882;
}

Solution:
Use classes, not IDs or Tags

.account {
background: #f9a;
}

.heading {
color: #882;
}

Solution:
Avoid hierarchies

Classy
HTML

Logged in?
Show name

Allowed to Managing your
rate? page?
Show thumbs Show edit controls

Leaving a comment?
Show textarea

The Problem: Display Logic

function startEditing() {
$(‘.titleInput’).show();
$(‘.mixPanel’).slideDown();
$(‘.comments’).fadeOut();
}

function stopEditing() {
$(‘.titleInput’).hide();
$(‘.mixPanel’).slideUp();
$(‘.comments’).fadeIn();
}

The Problem: Display Logic

$('html’).addClass(‘editing’);
$('html’).removeClass(‘editing’);

.mixPanel {
display: none;
}

.editing .mixPanel {
display: block;
}

Solution: Root-level class

<div class=‘mixPanel forEditing’>
...
</div>

.forEditing {
display: none;
}

.editing .forEditing {
display: block;
}

Generalising It

ONLINE RESOURCES

http://diveintohtml5.info http://developer.mozilla.org

http://html5rocks.com http://is.gd/frontendfeeds

Resources

http://addyosmani.com/blog/patterns-for-large-scale-javascript-application-architecture/


Resources

http://www.slideshare.net/nzakas/scalable-javascript-application-architecture


Thankyou
Online at http://intel.ly/appupblog soon ...

Michael Mahemoff
@mahemoff
+mahemoff

Best Practices Every HTML5 Developer Should Know

Recomendados

Recomendados

Mais conteúdo relacionado

Último

Último (20)

Destaque

Destaque (20)

Best Practices Every HTML5 Developer Should Know

Notas do Editor