1. Nestoria New Design
Savio Dimatteo
Perl Developer,
Lokku Ltd.
Commercial Computing Lecture Series
Birmingham University
5 December 2013

2. Who am I?
● Savio Dimatteo
● Perl Developer at Nestoria property search engine
● working on a LAMP stack since 2 years
[ “P” = “Perl” ]
● maintenance/frontend/backend projects
● currently working on: “Nestoria New Design”

3. Lokku
● dev team: 6 people
● product team: 2 people
● commercial team: 8 people

4. Nestoria
● property search engine
● 8 countries, 6 languages
● 1.3 million search requests per day
● 10 million properties indexed every day

5. Nestoria

6. Nestoria Internally

7. Nestoria Internally

8. Nestoria Externally

9. Nestoria Externally

10. Nestoria Externally

11. Nestoria Externally

12. Nestoria Stack
● HTML::Mason
● jQuery/jQueryUI
● XHTML Strict
● Apache, mod_perl
● MySQL

13. Nestoria Over Time

14. Nestoria Over Time

15. Legible Listings Layout

16. Legible Listings Layout
● ~200KB more CSS
● + ~6% daily clicks than in previous design
● exception: India
○ older devices
■ lower resolutions
■ slower connections

17. Nestoria New Design

18. Nestoria New Design

19. Setting and Resources
● ~4 months time

20. Nestoria New Design

21. Challenges

22. Challenge #1
Getting the Design Right

23. New Design Specs
What you get:
○ spacing
○ fonts
○ colors
○ sizes
● Looks good!

24. New Design Specs
What you get:
○ spacing
○ fonts
○ colors
○ sizes
● Looks good! BUT

25. Improvement via user tests

26. Improvement via user tests

27. Smaller Graphical Tweaks

28. Logic not yet implemented

29. Exact dimensions

30. “Australian” Prices?
● Offers Above $545,000
● $439,950-$469,950
● POA
● Supurb Value offers above $1.49M

31. “Australian” Prices?

32. Implementing “impossible” specs
1. stick to the spec as much as possible
2. follow the principles the spec is based on
3. be inventive
4. talk to people

33. Implementing “impossible” specs
1. stick to the spec as much as possible
2. follow the principles the spec is based on
3. be inventive
4. talk to people
Australian prices!

34. Australian Prices!
● no collision
● leave as is

35. Australian Prices!
● collision
● detect collision (Javascript)
if ($titleLink.position().left + $titleLink.width() >= $titleAside.position().left) {
}

36. Australian Prices!
● detect collision (Javascript)
if ($titleLink.position().left + $titleLink.width() >= $titleAside.position().left) {
…
$listingContainer.addClass(‘nst-collision-detected’);
…
}
● Add ‘nst-collision-detected’ CSS rule to fix the issue

37. Challenge #2
Building UI components

38. New Sliders

39. New Sliders
● disabled (any price allowed)

40. New Sliders
● left-bounded range

41. New Sliders
● bounded range

42. New Sliders
● single value

43. New Sliders - click

44. New Sliders - click

45. New Sliders - click and drag

46. New Sliders - touch

47. New Sliders - touch and drag

48. How would you do create a slider like that?

49. jQueryUI
“ jQuery UI is a curated set of user interface interactions,
effects, widgets, and themes built on top of the jQuery
JavaScript Library. ”

50. jQueryUI - sliders

51. jQueryUI - sliders

52. jQueryUI - sliders
Can’t click!

53. jQueryUI - sliders
Can’t click!
Can’t touch!

54. jQueryUI - touch support
● jQuery UI Touch Punch
“ jQuery UI Touch Punch is a small hack that enables the
use of touch events on sites using the jQuery UI user
interface library. ”
● Can’t touch sliders on Silk Browser (Kindle Fire HD).

55. Why building our own sliders?
● complex yet specific user interactions
● it’s tempting to hack into jQuery UI sliders to add touch
support (forbidden!)
● would need to include jQuery UI (23KB, minified)
● we already plan to increase complexity of slider UI!

56. jquery.nstSlider.js - usage
<div class="nst-slider-outer" data-step="20" data-min="20” data-max="220">
<div class="nst-slider-inner">
<div class="nst-slider-grip-left"></div>
<div class="nst-slider-grip-right"></div>
</div>
</div>

57. jquery.nstSlider.js - usage
$('.nst-slider-outer').nstSlider({
'valueChangedCallback' : function(min, max) {
$('.nst-slider-min').text(min);
$('.nst-slider-max').text(max);
}
});

58. jquery.nstSlider.js - Idea
left
grip
right
grip
position:absolute;
left: 0px;
inner bar
position:relative;
position:absolute;
right: 0px;
outer bar
(gray bar)

59. jquery.nstSlider.js - Idea
left
grip
left
right
grip barinnergrip
inner
bar
outer bar
(gray bar)

60. jquery.nstSlider.js - Idea
<sth>
left
grip
inner bar
right
grip
left: <sth>px;
outer bar
(gray bar)

61. jquery.nstSlider.js - Idea
<sth>
left
grip
inner bar
<sthElse>
right
grip
left: <sth>px;
width: <sthElse>px;
outer bar
(gray bar)

62. jquery.nstSlider.js - Moving left handle
left
grip
inner bar
right
grip

63. jquery.nstSlider.js - Moving left handle
left
grip
inner bar
right
grip

64. jquery.nstSlider.js - Moving left handle
left
grip
deltaPx
● track deltaPx
inner bar
right
grip

65. jquery.nstSlider.js - Moving left handle
deltaPx
left
grip
inner bar
● track deltaPx
● add deltaPx to left CSS property of inner bar
right
grip

66. jquery.nstSlider.js - Moving left handle
deltaPx
left
grip
inner bar
● track deltaPx
● add deltaPx to left CSS property of inner bar
right
grip

67. jquery.nstSlider.js - Moving left handle
left
grip
inner bar
right
grip
● track deltaPx
● add deltaPx to left CSS property of inner bar
● remove deltaPx from width CSS property of inner bar
- deltaPx

68. jquery.nstSlider.js - Moving left handle
left
left + width
left
grip
inner bar
right
grip
● track deltaPx
● add deltaPx to left CSS property of inner bar
● remove deltaPx from width CSS property of inner bar
● map left , left + width into [rangeMin, rangeMax]

69. jquery.nstSlider.js - Moving left handle
left
grip
inner bar
right
grip
● track deltaPx
● add deltaPx to left CSS property of inner bar
● remove deltaPx from width CSS property of inner bar
● map left , left + width into [rangeMin, rangeMax]
→ notify values have changed

70. jquery.nstSlider.js
● easy to use as others jQuery plugins
● highly cross-browser (IE7+, iPhones, not Windows Phones
though)
● ~6KB minified (Closure compiler)
● easily customisable
● more code to maintain
● fixed size for now

71. Challenge #3
Javascript Mistakes

72. Javascript
● more interactive compontents → more Javascript code
● Javascript:
○ Interacting with the DOM
○ Asynchronous event-handling
○ Single threaded
○ Multiple browsers and devices
○ many libraries out there

73. Scoping
var result = 1;
function oneOrMore(n) {
result = n;
if (n <= 0) {
var result = Math.abs(n);
result = 1 + result;
}
return result;
}

74. Scoping
var result = 1;
var result = 1;
function oneOrMore(n) {
function oneOrMore(n) {
var result;
result = n;
result = n;
if (n <= 0) {
if (n <= 0) {
var result = Math.abs(n);
result = Math.abs(n);
result = 1 + result;
result = 1 + result;
}
}
return result;
}
return result;
}

75. How to not iterate through Javascript arrays
Array.prototype.extraFunc = function () { … };
var myArray = [1, 2, 3, 4];
for (var x in myArray) {
console.log(x);
}

76. How to not iterate through Javascript arrays
1
Array.prototype.extraFunc = function () { … };
var myArray = [1, 2, 3, 4];
for (var x in myArray) {
2
3
4
console.log(x);
extraFunc
}

77. How to iterate through Javascript arrays
Array.prototype.extraFunc = function () { … };
var myArray = [1, 2, 3, 4];
for (var i=0; i<myArray.length; i++) {
console.log(myArray[i]);
}

78. How to not iterate through Javascript objects
var myObj = {
‘key1’ : 1,
‘key2’ : 2,
‘key3’ : 3
};
var k;
for (k in myObj) {
console.log(k, myObj[k]);
}

79. How to iterate through Javascript objects
var myObj = {
‘key1’ : 1, ‘key2’ : 2,
};
‘key3’ : 3
var k;
for (k in myObj) {
if (myObj.hasOwnProperty(k)) {
console.log(k, myObj[k]);
}
}

80. Javascript Code Validation - JSHint
● Java-based tool
● parser-based validation
● easy to configure
● very flexible configuration
○ trailing whitespaces
○ naming conventions
○ undeclared variables

81. JSHint configuration
{
"curly" : true,
"camelcase": false,
"globals" : {
"eqeqeq" : true,
"Modernizr" : true,
"forin" : true,
"$j" : true,
"unused" : true,
"google" : true,
"es3" : true,
"LokkuMap" : true,
"trailing" : false,
"GoogleLokkuMap" : true,
"devel" : false,
"LeafletLokkuMap" : true,
"undef" : true,
"L": true
"jquery" : true,
"browser" : true,
}
}

82. Conclusions
● talk to members of your team during your project
● changing a component completely? just build your own!
● Javascript → mistakes!
○ use code quality tools to avoid mistakes

85. Conclusions: Nestoria New Design
● New design is now live
○ ~3% more daily clicks (all countries)
○ users feel it’s fast (i.e., more clicks per users)
○ we can improve its speed further
○ works in India too!
● the amount Javascript in our codebase is going to grow
○ old motto: “avoid Javascript as much as possible”
○ new motto: “write better Javascript”

86. Thank you!
http://www.nestoria.com - find a property
http://www.github.com/lokku - open source code
http://www.lokku.com/jobs - work with us!