Your SlideShare is downloading. ×
  • Like
Nestoria new design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Nestoria new design

  • 707 views
Published

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 …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
707
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 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. 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!