Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building elements and experiences at Net-A-Porter

332 views

Published on

A talk about covering development and culture change within the Net-A-Porter Tech team. How we moved from a legacy monolith to micro services and customer focused experiences.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Building elements and experiences at Net-A-Porter

  1. 1. Building elements and experiences at Net-A-Porter Robin Glen robin.glen@net-a-porter.com @arielwithlegs
  2. 2. David Boddy Principle Digital Designer @threetwotwo Matthew Green Developer @mjgreen145
  3. 3. who am I?
  4. 4. Robin Glen Lead Developer @arielwithlegs
  5. 5. LLANDELIO
  6. 6. LONDON
  7. 7. a little bit of history
  8. 8. founded 2000
  9. 9. Java Spring
  10. 10. founded 2000 Fresca forked
  11. 11. founded 2000 2009 launches Fresca forked
  12. 12. Java Spring +
  13. 13. founded 2000 2009 launch Fresca forked 2011 launch
  14. 14. Java Spring + +
  15. 15. growing pains
  16. 16. releasing and regression
  17. 17. all three brands shared code base multiple brands, multiple development streams no automated tests
  18. 18. 2 week development sprint 1 week building test candidate 2 week QA testing process 1 week hot patching and removing bugs 1 day to release code
  19. 19. scaling
  20. 20. we couldn’t handle sale traffic… not even close
  21. 21. redundancy time traffic actual maximum capacity normal day
  22. 22. time traffic maximum capacity actual errors sale day
  23. 23. how can we get better
  24. 24. going it alone
  25. 25. founded 2000 2009 launch Fresca forked 2011 launch 2012 Forking webapps
  26. 26. Java Spring Java Spring Java Spring
  27. 27. scaling horizontally
  28. 28. founded 2000 2009 launch Fresca forked 2011 launch 2012 Forking webapps 2013 Sale App
  29. 29. Amazon Web Services Sale Application NodeJS Product Data Scala Java Spring Java Spring Java Spring
  30. 30. daily releases DevOps sale stayed up!
  31. 31. a change in culture
  32. 32. product focused teams
  33. 33. founded 2000 2009 launch Fresca forked 2011 launch 2012 Forking webapps 2013 Sale App 2014 Product focused teams
  34. 34. short feedback loops
  35. 35. ideas data product buildlearn measure
  36. 36. continuous integration
  37. 37. work directly on master TDD pair programming
  38. 38. cross functional teams
  39. 39. empathy customer focused
  40. 40. customer journey focused applications
  41. 41. Polymer in Production http://techblog.net-a-porter.com/2016/02/polymer-in-production/ +
  42. 42. 2015 Google I/O 2016 Product Details Application Polymer Live Polymer Summit Chrome Dev Summitfounded 2000 2009 launch Fresca forked 2011 launch 2012 Forking webapps 2013 Sale App 2014 Product focused teams
  43. 43. atomic components
  44. 44. Brad Frost: http://atomicdesign.bradfrost.com/table-of-contents/ moleculeatom organism
  45. 45. principles
  46. 46. one standardising the rhetoric
  47. 47. two granular thinking
  48. 48. case study
  49. 49. Creation of a responsive listing to house our New Arrivals product list in Q2, with an iterative rollout of features there after to enable the migration of the entire NET-A-PORTER [product list] catalogue in 2016
  50. 50. 950px1300 - 1400px
  51. 51. nucleus
  52. 52. N E W S E A S O N LANVIN Fringed boucle-tweed mini dress £2,325 product image badge designer name product description price
  53. 53. states nucleus
  54. 54. states N E W S E A S O N LANVIN Fringed boucle-tweed mini dress £2,325 £1,162.50 50% OFF
  55. 55. states interactions nucleus
  56. 56. N E W S E A S O N LANVIN Fringed boucle-tweed mini dress £2,325 interactions N E W S E A S O N LANVIN Fringed boucle-tweed mini dress £2,325
  57. 57. states interactions behaviours and rules nucleus
  58. 58. N E W S E A S O N LANVIN Fringed boucle-tweed mini dress £2,325 behaviours and rules N E W S E A S O N LANVIN Fringed boucle-tweed mini dress £2,325
  59. 59. product image badge designer name product description price Currency Sale state Rounding Schema Offers Price & Currency text translations scaling of text size truncation rules Schema Brand rollover image carousel of images missing images broken images loading state Schema Image <nap-responsive-image> .product-badge .designer-name.product-description <nap-price>
  60. 60. testing states interactions behaviours and rules nucleus
  61. 61. unit
  62. 62. SEO
  63. 63. visualvisual
  64. 64. memory and performance
  65. 65. testing states interactions behaviours and rules nucleus documentation
  66. 66. self documenting
  67. 67. testing documentation versioning states interactions behaviours and rules nucleus
  68. 68. testing documentation versioning states interactions behaviours and rules nucleus monitoring
  69. 69. RAIL: http://bit.ly/1T5ZF7R
  70. 70. atom monitoring testing versioning documentation states behaviours and rules interactions nucleus
  71. 71. building up
  72. 72. N E W S E A S O N LANVIN Fringed boucle-tweed mini dress £2,325 <nap-product-summary>
  73. 73. <nap-product-list>
  74. 74. time delivery applying principles
  75. 75. before and after
  76. 76. Java Spring + +
  77. 77. Customer Services Atomic Components Listing Pages Magazine Site Furniture Check Out Product Pages Search Editorial Product Data Recommend- ations buttons icons product- price ymal- module htwi- module product- summary product- list-page Amazon Web Services
  78. 78. single page commerce experience offline shopping white labelling services open source (hopefully)
  79. 79. questions?
  80. 80. thanks @arielwithlegs

×