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.

1. Building elements and
experiences at Net-A-Porter
Robin Glen
robin.glen@net-a-porter.com
@arielwithlegs

3. David Boddy
Principle Digital Designer
@threetwotwo
Matthew Green
Developer
@mjgreen145

4. who am I?

5. Robin Glen
Lead Developer
@arielwithlegs

7. LLANDELIO

8. LONDON

10. a little bit of history

11. founded
2000

13. Java Spring

14. founded
2000
Fresca
forked

15. founded
2000 2009
launches
Fresca
forked

17. Java Spring
+

18. founded
2000 2009
launch
Fresca
forked
2011
launch

20. Java Spring
+ +

21. growing pains

22. releasing and regression

23. all three brands shared code base
multiple brands, multiple development streams
no automated tests

24. 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

25. scaling

26. we couldn’t handle sale traffic… not even close

29. redundancy
time
traffic
actual
maximum
capacity
normal day

30. time
traffic
maximum
capacity
actual
errors
sale day

31. how can we get better

32. going it alone

33. founded
2000 2009
launch
Fresca
forked
2011
launch
2012
Forking
webapps

34. Java Spring Java Spring Java Spring

35. scaling horizontally

36. founded
2000 2009
launch
Fresca
forked
2011
launch
2012
Forking
webapps
2013
Sale App

37. Amazon Web Services
Sale Application
NodeJS
Product Data
Scala
Java Spring
Java Spring Java Spring

38. daily releases
DevOps
sale stayed up!

39. a change in culture

40. product focused teams

41. founded
2000 2009
launch
Fresca
forked
2011
launch
2012
Forking
webapps
2013
Sale App
2014
Product
focused
teams

42. short feedback loops

43. ideas
data product
buildlearn
measure

44. continuous integration

45. work directly on master
TDD
pair programming

46. cross functional teams

47. empathy
customer focused

48. customer journey
focused applications

52. Polymer in Production
http://techblog.net-a-porter.com/2016/02/polymer-in-production/
+

53. 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

54. atomic components

56. Brad Frost: http://atomicdesign.bradfrost.com/table-of-contents/
moleculeatom organism

58. principles

59. one
standardising the rhetoric

60. two
granular thinking

61. case study

62. 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

63. 950px1300 - 1400px

65. nucleus

66. 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

67. states
nucleus

68. states
N E W S E A S O N
LANVIN
Fringed boucle-tweed mini
dress
£2,325 £1,162.50 50% OFF

69. states
interactions
nucleus

70. 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

71. states
interactions
behaviours and rules
nucleus

72. 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

73. 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>

74. testing
states
interactions
behaviours and rules
nucleus

75. unit

76. SEO

77. visualvisual

78. memory and performance

79. testing
states
interactions
behaviours and rules
nucleus
documentation

80. self documenting

82. testing
documentation
versioning
states
interactions
behaviours and rules
nucleus

84. testing
documentation
versioning
states
interactions
behaviours and rules
nucleus
monitoring

85. RAIL: http://bit.ly/1T5ZF7R

86. atom
monitoring
testing
versioning
documentation
states
behaviours and rules
interactions
nucleus

87. building up

88. N E W S E A S O N
LANVIN
Fringed boucle-tweed mini
dress
£2,325
<nap-product-summary>

89. <nap-product-list>

91. time
delivery
applying principles

92. before and after

93. Java Spring
+ +

94. 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

95. single page commerce experience
offline shopping
white labelling services
open source (hopefully)

96. questions?

97. thanks
@arielwithlegs