frontend first design & development
DESCRIPTION
A presentation about my own development method. Transcript: http://tinyurl.com/frontendfirstTRANSCRIPT
Hello, my name is
!"!#$%&#&'(
!"#$%&$'! ( ) ( " ( * ( %Design & Development
Software is to solve
!"#$%problems
Every successfulsoftware solves a
!""#for its users
S o f t w a r e i s m a d e f o r
!"##$%&'&()of users
A WORKPLACE
IS A COMMUNITY
Software is an
!"#$%&'$()'($*
How do we call things which provide
!"#$%&'$()'($*#+$,)+--("!'!*&.
!"#$%#&'(
!"#$%
Software is
!"#$%&'#&("'
Even
!"#$%&'"()responded to change for centuries
(until tourism came)
Software is
! " #$%&'( )*&+,%#-+'(,-..&+'(
/0',1
The developer has the same
!"#$%&#'(')'*+as an architect
!" # $ % ATTITUDEin architecture?
Is there
Christopher
ALEXANDER
Inventor of
D E S I G N PATTERNS
His Big Question:
What are the patterns
that make a space
!"#$%!&'
How to make
!"#$%!&'($)&'
for the
COMMUNITIESof our users?
!"#$
!""#$%""&'""!(&'$)*+,'-!)*&)%
How to help
!"#$%&%$'(%)*to be correct?
How to make specifications
!"#$%&'(&))*
Quick
!""#$%&'
3 week feedback is
!"#$%!"&'(
!"#$%
!"#$%&
Through showing
!"#$%&!#'()*#to users
Why
FRONTEND
F I R S T ?
Based on SVN logsFrontend changesT W I C E a s f a s tas Models, whileControllers changet he L E A S T of ten
* tested on multiple MVC web projects
UI is the
!"#$%"$&users speak.
An
! " # $% &'($is what hides actual
!)*+$)$"#'#!,"
I f n o c h a n g e i n
SCREENSS P E E D D A T A
means
!"#$%&!'(for the users
!"#$%&' is solely to
()**+,-the interface
!"#$%& %$'(%)*should be about
+,'(-()-!##not about abstract concepts
Your
!"#$%&'()is not your
"#'(
Draw U I sk e t ches r igh t a t
!"#$%&'(#$)&#*"
Understand
KNOWS
NEEDS
TELL
ANSWER
What the user
What she
What she can
and how we can
!"#$!%&'("&)*+&,!$-."/&01&1$.2"%
not UI itself
!"#$%$&"'#
!"#$%&
!"#!$%&"'
!"
J S + H T M LNO BACKEND
Backend!
!"#$!%&#!"possible
!"#$%&'((!)"*+&to users through showing
,-"-(&.'&/#
!"#$%&should &'( be
)*+$,#($-.on a pig
!"#$%&t i l l the bottom
Technical layers are to
!"##$%&
the problemthe software solves
RECORD
EVERYdesign rationale
!"#"$%&'
Change requests down to
! " # $w h i l e d e v e l o p m e n t
Weeks of
!"#$%&$
0 BUGRATEwithout tests
N a t u r a l l y o c c u r i n g
DSL LAYER
WYSIWYGon every layer
!"#$%$&'()$*+,&
DISADVANTAGES
LOTS OF THROW OUT CODE(WASTE!)
Lots of
DOCUMENTATION
Backend progress is
HARD TO MEASURE
Surprise
PERFORMANCEbottlenecks
NEEDS!
multidisciplinary
!"#!$"(no departments)
!"#!$%&'()*+
RESULTS
HAPPY USERS
"It does what I think it should"
!"#$%&'(!$")!*+'('),"+-%*($$+
You have to
,"+-%*('"+the problem first.
ELEGANCE !"#$!%!$&'!"$#!%#BEAUTY
ELEGANT SOLUTION
PERFECT COUNTERPART#()#!*"#+(,,-".(%/!%0#.,(1'-$LESS2#%(, MORE.
DESIGN !"#*3-WAY
*(#,-&+3#*3&*#"('4*!(%5
6%!"#*3-#
7(*3!%0