Nestoria New Design
Savio Dimatteo
Perl Developer,
Lokku Ltd.

Commercial Computing Lecture Series
Birmingham University
5...
Who am I?
● Savio Dimatteo
● Perl Developer at Nestoria property search engine
● working on a LAMP stack since 2 years

[ ...
Lokku

● dev team: 6 people
● product team: 2 people
● commercial team: 8 people
Nestoria
● property search engine
● 8 countries, 6 languages
● 1.3 million search requests per day
● 10 million properties...
Nestoria
Nestoria Internally
Nestoria Internally
Nestoria Externally
Nestoria Externally
Nestoria Externally
Nestoria Externally
Nestoria Stack
● HTML::Mason
● jQuery/jQueryUI
● XHTML Strict
● Apache, mod_perl
● MySQL
Nestoria Over Time
Nestoria Over Time
Legible Listings Layout
Legible Listings Layout
● ~200KB more CSS
● + ~6% daily clicks than in previous design
● exception: India
○ older devices
...
Nestoria New Design
Nestoria New Design
Setting and Resources
● ~4 months time
Nestoria New Design
Challenges
Challenge #1
Getting the Design Right
New Design Specs
What you get:
○ spacing
○ fonts
○ colors
○ sizes
● Looks good!
New Design Specs
What you get:
○ spacing
○ fonts
○ colors
○ sizes
● Looks good! BUT
Improvement via user tests
Improvement via user tests
Smaller Graphical Tweaks
Logic not yet implemented
Exact dimensions
“Australian” Prices?
● Offers Above $545,000
● $439,950-$469,950
● POA
● Supurb Value offers above $1.49M
“Australian” Prices?
Implementing “impossible” specs
1. stick to the spec as much as possible
2. follow the principles the spec is based on
3. ...
Implementing “impossible” specs
1. stick to the spec as much as possible
2. follow the principles the spec is based on
3. ...
Australian Prices!
● no collision
● leave as is
Australian Prices!
● collision

● detect collision (Javascript)
if ($titleLink.position().left + $titleLink.width() >= $ti...
Australian Prices!
● detect collision (Javascript)
if ($titleLink.position().left + $titleLink.width() >= $titleAside.posi...
Challenge #2
Building UI components
New Sliders
New Sliders
● disabled (any price allowed)
New Sliders
● left-bounded range
New Sliders
● bounded range
New Sliders
● single value
New Sliders - click
New Sliders - click
New Sliders - click and drag
New Sliders - touch
New Sliders - touch and drag
How would you do create a slider like that?
jQueryUI
“ jQuery UI is a curated set of user interface interactions,
effects, widgets, and themes built on top of the jQu...
jQueryUI - sliders
jQueryUI - sliders
jQueryUI - sliders
Can’t click!
jQueryUI - sliders
Can’t click!

Can’t touch!
jQueryUI - touch support
● jQuery UI Touch Punch
“ jQuery UI Touch Punch is a small hack that enables the
use of touch eve...
Why building our own sliders?
● complex yet specific user interactions
● it’s tempting to hack into jQuery UI sliders to a...
jquery.nstSlider.js - usage

<div class="nst-slider-outer" data-step="20" data-min="20” data-max="220">
<div class="nst-sl...
jquery.nstSlider.js - usage

$('.nst-slider-outer').nstSlider({
'valueChangedCallback' : function(min, max) {
$('.nst-slid...
jquery.nstSlider.js - Idea
left
grip
right
grip

position:absolute;
left: 0px;

inner bar
position:relative;
position:abso...
jquery.nstSlider.js - Idea
left
grip

left
right
grip barinnergrip
inner
bar

outer bar
(gray bar)
jquery.nstSlider.js - Idea

<sth>

left
grip

inner bar

right
grip

left: <sth>px;

outer bar
(gray bar)
jquery.nstSlider.js - Idea

<sth>

left
grip

inner bar

<sthElse>

right
grip

left: <sth>px;
width: <sthElse>px;

outer ...
jquery.nstSlider.js - Moving left handle
left
grip

inner bar

right
grip
jquery.nstSlider.js - Moving left handle
left
grip

inner bar

right
grip
jquery.nstSlider.js - Moving left handle
left
grip
deltaPx

● track deltaPx

inner bar

right
grip
jquery.nstSlider.js - Moving left handle
deltaPx

left
grip

inner bar

● track deltaPx
● add deltaPx to left CSS property...
jquery.nstSlider.js - Moving left handle
deltaPx

left
grip

inner bar

● track deltaPx
● add deltaPx to left CSS property...
jquery.nstSlider.js - Moving left handle
left
grip

inner bar

right
grip

● track deltaPx
● add deltaPx to left CSS prope...
jquery.nstSlider.js - Moving left handle
left

left + width
left
grip

inner bar

right
grip

● track deltaPx
● add deltaP...
jquery.nstSlider.js - Moving left handle
left
grip

inner bar

right
grip

● track deltaPx
● add deltaPx to left CSS prope...
jquery.nstSlider.js
● easy to use as others jQuery plugins
● highly cross-browser (IE7+, iPhones, not Windows Phones
thoug...
Challenge #3
Javascript Mistakes
Javascript
● more interactive compontents → more Javascript code
● Javascript:
○ Interacting with the DOM
○ Asynchronous e...
Scoping
var result = 1;
function oneOrMore(n) {
result = n;
if (n <= 0) {
var result = Math.abs(n);
result = 1 + result;
}...
Scoping
var result = 1;

var result = 1;

function oneOrMore(n) {

function oneOrMore(n) {
var result;

result = n;

resul...
How to not iterate through Javascript arrays

Array.prototype.extraFunc = function () { … };

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

var myArray = [1, 2, 3, 4];...
How to iterate through Javascript arrays

Array.prototype.extraFunc = function () { … };

var myArray = [1, 2, 3, 4];
for ...
How to not iterate through Javascript objects

var myObj = {
‘key1’ : 1,

‘key2’ : 2,

‘key3’ : 3

};

var k;
for (k in my...
How to iterate through Javascript objects
var myObj = {
‘key1’ : 1, ‘key2’ : 2,
};

‘key3’ : 3

var k;
for (k in myObj) {
...
Javascript Code Validation - JSHint
● Java-based tool
● parser-based validation
● easy to configure
● very flexible config...
JSHint configuration
{
"curly" : true,
"camelcase": false,

"globals" : {

"eqeqeq" : true,

"Modernizr" : true,

"forin" ...
Conclusions
● talk to members of your team during your project
● changing a component completely? just build your own!
● J...
Conclusions: Nestoria New Design
● New design is now live
○ ~3% more daily clicks (all countries)
○ users feel it’s fast (...
Thank you!
http://www.nestoria.com - find a property
http://www.github.com/lokku - open source code
http://www.lokku.com/j...
Nestoria new design
Nestoria new design
Upcoming SlideShare
Loading in...5
×

Nestoria new design

846

Published on

Nestoria is a property search engine that indexes millions of properties every day. Since mid 2006 the product has evolved into a service must run on multiple devices and browsers. In this talk I introduce Nestoria New Design and the context in which this project was born, and discuss some of the challenges our company has faced during the project. This talk was presented as part of the Commercial Computing Lecture Series at the University of Birmingham.

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
846
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Nestoria new design

  1. 1. Nestoria New Design Savio Dimatteo Perl Developer, Lokku Ltd. Commercial Computing Lecture Series Birmingham University 5 December 2013
  2. 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. 3. Lokku ● dev team: 6 people ● product team: 2 people ● commercial team: 8 people
  4. 4. Nestoria ● property search engine ● 8 countries, 6 languages ● 1.3 million search requests per day ● 10 million properties indexed every day
  5. 5. Nestoria
  6. 6. Nestoria Internally
  7. 7. Nestoria Internally
  8. 8. Nestoria Externally
  9. 9. Nestoria Externally
  10. 10. Nestoria Externally
  11. 11. Nestoria Externally
  12. 12. Nestoria Stack ● HTML::Mason ● jQuery/jQueryUI ● XHTML Strict ● Apache, mod_perl ● MySQL
  13. 13. Nestoria Over Time
  14. 14. Nestoria Over Time
  15. 15. Legible Listings Layout
  16. 16. Legible Listings Layout ● ~200KB more CSS ● + ~6% daily clicks than in previous design ● exception: India ○ older devices ■ lower resolutions ■ slower connections
  17. 17. Nestoria New Design
  18. 18. Nestoria New Design
  19. 19. Setting and Resources ● ~4 months time
  20. 20. Nestoria New Design
  21. 21. Challenges
  22. 22. Challenge #1 Getting the Design Right
  23. 23. New Design Specs What you get: ○ spacing ○ fonts ○ colors ○ sizes ● Looks good!
  24. 24. New Design Specs What you get: ○ spacing ○ fonts ○ colors ○ sizes ● Looks good! BUT
  25. 25. Improvement via user tests
  26. 26. Improvement via user tests
  27. 27. Smaller Graphical Tweaks
  28. 28. Logic not yet implemented
  29. 29. Exact dimensions
  30. 30. “Australian” Prices? ● Offers Above $545,000 ● $439,950-$469,950 ● POA ● Supurb Value offers above $1.49M
  31. 31. “Australian” Prices?
  32. 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. 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. 34. Australian Prices! ● no collision ● leave as is
  35. 35. Australian Prices! ● collision ● detect collision (Javascript) if ($titleLink.position().left + $titleLink.width() >= $titleAside.position().left) { }
  36. 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. 37. Challenge #2 Building UI components
  38. 38. New Sliders
  39. 39. New Sliders ● disabled (any price allowed)
  40. 40. New Sliders ● left-bounded range
  41. 41. New Sliders ● bounded range
  42. 42. New Sliders ● single value
  43. 43. New Sliders - click
  44. 44. New Sliders - click
  45. 45. New Sliders - click and drag
  46. 46. New Sliders - touch
  47. 47. New Sliders - touch and drag
  48. 48. How would you do create a slider like that?
  49. 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. 50. jQueryUI - sliders
  51. 51. jQueryUI - sliders
  52. 52. jQueryUI - sliders Can’t click!
  53. 53. jQueryUI - sliders Can’t click! Can’t touch!
  54. 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. 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. 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. 57. jquery.nstSlider.js - usage $('.nst-slider-outer').nstSlider({ 'valueChangedCallback' : function(min, max) { $('.nst-slider-min').text(min); $('.nst-slider-max').text(max); } });
  58. 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. 59. jquery.nstSlider.js - Idea left grip left right grip barinnergrip inner bar outer bar (gray bar)
  60. 60. jquery.nstSlider.js - Idea <sth> left grip inner bar right grip left: <sth>px; outer bar (gray bar)
  61. 61. jquery.nstSlider.js - Idea <sth> left grip inner bar <sthElse> right grip left: <sth>px; width: <sthElse>px; outer bar (gray bar)
  62. 62. jquery.nstSlider.js - Moving left handle left grip inner bar right grip
  63. 63. jquery.nstSlider.js - Moving left handle left grip inner bar right grip
  64. 64. jquery.nstSlider.js - Moving left handle left grip deltaPx ● track deltaPx inner bar right grip
  65. 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. 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. 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. 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. 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. 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. 71. Challenge #3 Javascript Mistakes
  72. 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. 73. Scoping var result = 1; function oneOrMore(n) { result = n; if (n <= 0) { var result = Math.abs(n); result = 1 + result; } return result; }
  74. 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. 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. 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. 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. 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. 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. 80. Javascript Code Validation - JSHint ● Java-based tool ● parser-based validation ● easy to configure ● very flexible configuration ○ trailing whitespaces ○ naming conventions ○ undeclared variables
  81. 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. 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
  83. 83. 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”
  84. 84. 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!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×