Embed Size (px)
Citation preview
Building elements and experiences at Net-A-Porter
Robin Glen
@arielwithlegs
David Boddy
Principle Digital Designer
@threetwotwo
Matthew Green
Developer
@mjgreen145
who am I?
Robin Glen
Lead Developer
@arielwithlegs
LLANDELIO
LONDON
a little bit of history
founded
2000
Java Spring
founded
2000
Fresca forked
founded
2000 2009
launchesFresca forked
Java Spring
+
founded
2000 2009
launchFresca forked
2011
launch
Java Spring
+ +
growing pains
releasing and regression
all three brands shared code base
multiple brands, multiple development streams
no automated tests
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
scaling
we couldn’t handle sale traffic… not even close
redundancy
time
traffi
c
actual
maximum capacity
normal day
time
traffi
c
maximum capacity
actual
errors
sale day
how can we get better
going it alone
founded
2000 2009
launchFresca forked
2011
launch
2012
Forking webapps
Java Spring Java Spring Java Spring
scaling horizontally
founded
2000 2009
launchFresca forked
2011
launch
2012
Forking webapps
2013
Sale App
Amazon Web Services
Sale Application NodeJS
Product Data Scala
Java SpringJava Spring Java Spring
daily releases
DevOps
sale stayed up!
a change in culture
product focused teams
founded
2000 2009
launchFresca forked
2011
launch
2012
Forking webapps
2013
Sale App
2014
Product focused teams
short feedback loops
ideas
data product
buildlearn
measure
continuous integration
work directly on master
TDD
pair programming
cross functional teams
empathy
customer focused
customer journey focused applications
Polymer in Production
http://techblog.net-a-porter.com/2016/02/polymer-in-production/
+
2015
Google I/O
2016
Product Details Application
Polymer Live
Polymer Summit
Chrome Dev Summitfounded
2000 2009
launchFresca forked
2011
launch
2012
Forking webapps
2013
Sale App
2014
Product focused teams
atomic components
Brad Frost: http://atomicdesign.bradfrost.com/table-of-contents/
moleculeatom organism
principles
one
standardising the rhetoric
two
granular thinking
case study
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
950px1300 - 1400px
nucleus
N E W S E A S O N
LANVIN
Fringed boucle-tweed mini dress
£2,325
product image
badgedesigner name
product descriptionprice
states
nucleus
states
N E W S E A S O N
LANVIN
Fringed boucle-tweed mini dress
£2,325 £1,162.50 50% OFF
statesinteractions
nucleus
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
statesinteractions
behaviours and rules
nucleus
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
product image badge designer
nameproduct
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>
testing
statesinteractions
behaviours and rules
nucleus
unit
SEO
visualvisual
memory and performance
testing
statesinteractions
behaviours and rules
nucleus
documentation
self documenting
testing
documentation
versioning
statesinteractions
behaviours and rules
nucleus
testing
documentation
versioning
statesinteractions
behaviours and rules
nucleus
monitoring
atom
monitoring
testing
versioning
documentation
states
behaviours and rules
interactions
nucleus
building up
N E W S E A S O N
LANVIN
Fringed boucle-tweed mini dress
£2,325
<nap-product-summary>
<nap-product-list>
time
deliv
ery
applying principles
before and after
Java Spring
+ +
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
single page commerce experience
offline shopping
white labelling services
open source (hopefully)
questions?
thanks
@arielwithlegs
