Contenu connexe Similaire à Building with JavaScript - write less by using the right tools Similaire à Building with JavaScript - write less by using the right tools (20) Plus de Christian Heilmann Plus de Christian Heilmann (20) Building with JavaScript - write less by using the right tools1. Building with
JavaScript
write less by using the right tools
Christian Heilmann
Framsia Meetup, Oslo, Norway, October 2010
3. The reason is that its
syntax is forgiving and
that it comes with a few
incredibly powerful
tools.
4. The other reason is that
libraries allow us to
write JavaScript instead
of catering to browsers
and fixing them.
9. If writing a few more
lines of code makes it
easier for others to use
what you have done
then you built a
professional product.
10. If you are the only one
understanding what is
going on you used the
web as a dumping
ground.
11. You can write incredibly
small solutions that
work for everyone.
13. If you want to build for
people, use progressive
enhancement.
17. A pair of scissors
cannot change
themselves when a left-
handed person picks
them up instead of a
right-handed person.
20. A lot of the criticism of
progressive
enhancement is based
on people working in
walled-off
environments.
21. If all you write is an
iPad app or something
for the iPhone you have
it much easier than
building a web app.
23. On the other hand an
Opera extension is a
W3C widget and also
works on Vodafone
mobile phones.
24. And all 20 users will be
very excited about that.
27. This is a system where I
was only allowed to use
JavaScript.
28. Were this to be a
product, I’d have taken
another approach -
more later.
30. Get all the geographical
information of all the
countries in the world
using the Yahoo
GeoPlanet API.
34. I am using buttons for
the navigation
elements. Why?
35. There is no real
navigation happening
here. Everything is
dependent on JS. This is
what buttons are for.
And they are keyboard
accessible.
39. Then show the first
entry and make the
buttons trigger the right
functionality.
40. Instead of storing data
in DOM elements with
custom attributes I have
two variables to store
the currently shown
section and the full data
set.
42. Instead of looping a lot
of elements and
assigning redundant
event handlers one
event does the whole
job.
43. The differentiator is the
length of the button
text. If it is one
character show the
section - otherwise load
the country info.
47. Read the country name
from the button and get
the value which is the
number of the data set.
50. That did it - a bit more
code than “real” jQuery
developers would have
done...
51. ...but it is bullet proof
and does the least
amount of DOM lookups
possible.
53. As you’ve seen earlier, it
loads much faster the
second time you go to
the page.
54. The trick is that I am
using “HTML5 Storage”
to cache the whole
navigation.
56. That way the interface
is loaded from HD and
not from the web.
68. All you need to do in JS
then is to override the
requests with Ajax calls.
71. And you still use the
goodness that is
JavaScript on top of
that.
73. Getting JSON-P data in
jQuery:
$.ajax({
url: url,
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'datain'
});
function datain(data){
}
77. As each request has a
unique URL - even when
you ask for the same
data...
81. The danger of quick
solutions is that people
tend to copy and paste
them and not try to
integrate them.
82. And if we put together
solutions from lots of
copy and paste
examples they become
huge and hard to
understand.
85. ★ Progressive Enhancement with
the correct HTML
★ Event Delegation
★ Adding CSS classes instead of
using hide()
★ Rendering on the server side.
★ Caching on the client side.
★ Configuration objects and
variable caches instead of
custom attributes.
86. Keep an eye out on how
libraries help you with
writing bullet proof code
- not how to write small
scripts.