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.
Unit-IV; Professional Sales Representative (PSR).pptx
Nestoria new design
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
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!
49. jQueryUI
“ jQuery UI is a curated set of user interface interactions,
effects, widgets, and themes built on top of the jQuery
JavaScript Library. ”
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!
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
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]);
}
}
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.
84.
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”