frontend first design & development

69
Hello, my name is !"!# %&#&'(

Upload: adam-nemeth

Post on 30-Jun-2015

141 views

Category:

Documents


0 download

DESCRIPTION

A presentation about my own development method. Transcript: http://tinyurl.com/frontendfirst

TRANSCRIPT

Page 1: Frontend First Design & Development

Hello, my name is

!"!#$%&#&'(

Page 2: Frontend First Design & Development

!"#$%&$'! ( ) ( " ( * ( %Design & Development

Page 3: Frontend First Design & Development

Software is to solve

!"#$%problems

Page 4: Frontend First Design & Development

Every successfulsoftware solves a

!""#for its users

Page 5: Frontend First Design & Development

S o f t w a r e i s m a d e f o r

!"##$%&'&()of users

Page 6: Frontend First Design & Development

A WORKPLACE

IS A COMMUNITY

Page 7: Frontend First Design & Development

Software is an

!"#$%&'$()'($*

Page 8: Frontend First Design & Development

How do we call things which provide

!"#$%&'$()'($*#+$,)+--("!'!*&.

Page 9: Frontend First Design & Development

!"#$%#&'(

Page 10: Frontend First Design & Development

!"#$%

Page 11: Frontend First Design & Development

Software is

!"#$%&'#&("'

Page 12: Frontend First Design & Development

Even

!"#$%&'"()responded to change for centuries

(until tourism came)

Page 13: Frontend First Design & Development

Software is

! " #$%&'( )*&+,%#-+'(,-..&+'(

/0',1

Page 14: Frontend First Design & Development

The developer has the same

!"#$%&#'(')'*+as an architect

Page 15: Frontend First Design & Development

!" # $ % ATTITUDEin architecture?

Is there

Page 16: Frontend First Design & Development

Christopher

ALEXANDER

Page 17: Frontend First Design & Development

Inventor of

D E S I G N PATTERNS

Page 18: Frontend First Design & Development

His Big Question:

What are the patterns

that make a space

!"#$%!&'

Page 19: Frontend First Design & Development

How to make

!"#$%!&'($)&'

for the

COMMUNITIESof our users?

Page 20: Frontend First Design & Development

!"#$

Page 21: Frontend First Design & Development

!""#$%""&'""!(&'$)*+,'-!)*&)%

Page 22: Frontend First Design & Development

How to help

!"#$%&%$'(%)*to be correct?

Page 23: Frontend First Design & Development

How to make specifications

!"#$%&'(&))*

Page 24: Frontend First Design & Development

Quick

!""#$%&'

Page 25: Frontend First Design & Development

3 week feedback is

!"#$%!"&'(

Page 26: Frontend First Design & Development

!"#$%

Page 27: Frontend First Design & Development

!"#$%&

Page 28: Frontend First Design & Development

Through showing

!"#$%&!#'()*#to users

Page 29: Frontend First Design & Development

Why

FRONTEND

F I R S T ?

Page 30: Frontend First Design & Development

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

Page 31: Frontend First Design & Development

UI is the

!"#$%"$&users speak.

Page 32: Frontend First Design & Development

An

! " # $% &'($is what hides actual

!)*+$)$"#'#!,"

Page 33: Frontend First Design & Development

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

Page 34: Frontend First Design & Development

!"#$%&' is solely to

()**+,-the interface

Page 35: Frontend First Design & Development

!"#$%& %$'(%)*should be about

+,'(-()-!##not about abstract concepts

Page 36: Frontend First Design & Development

Your

!"#$%&'()is not your

"#'(

Page 37: Frontend First Design & Development

Draw U I sk e t ches r igh t a t

!"#$%&'(#$)&#*"

Page 38: Frontend First Design & Development

Understand

KNOWS

NEEDS

TELL

ANSWER

What the user

What she

What she can

and how we can

Page 39: Frontend First Design & Development

!"#$!%&'("&)*+&,!$-."/&01&1$.2"%

not UI itself

Page 40: Frontend First Design & Development

!"#$%$&"'#

Page 41: Frontend First Design & Development

!"#$%&

Page 42: Frontend First Design & Development

!"#!$%&"'

Page 43: Frontend First Design & Development

!"

Page 44: Frontend First Design & Development

J S + H T M LNO BACKEND

Page 45: Frontend First Design & Development

Backend!

!"#$!%&#!"possible

Page 46: Frontend First Design & Development

!"#$%&'((!)"*+&to users through showing

,-"-(&.'&/#

Page 47: Frontend First Design & Development

!"#$%&should &'( be

)*+$,#($-.on a pig

Page 48: Frontend First Design & Development

!"#$%&t i l l the bottom

Page 49: Frontend First Design & Development

Technical layers are to

!"##$%&

the problemthe software solves

Page 50: Frontend First Design & Development

RECORD

EVERYdesign rationale

Page 51: Frontend First Design & Development

!"#"$%&'

Page 52: Frontend First Design & Development

Change requests down to

! " # $w h i l e d e v e l o p m e n t

Page 53: Frontend First Design & Development

Weeks of

!"#$%&$

Page 54: Frontend First Design & Development

0 BUGRATEwithout tests

Page 55: Frontend First Design & Development

N a t u r a l l y o c c u r i n g

DSL LAYER

Page 56: Frontend First Design & Development

WYSIWYGon every layer

Page 57: Frontend First Design & Development

!"#$%$&'()$*+,&

Page 58: Frontend First Design & Development

DISADVANTAGES

Page 59: Frontend First Design & Development

LOTS OF THROW OUT CODE(WASTE!)

Page 60: Frontend First Design & Development

Lots of

DOCUMENTATION

Page 61: Frontend First Design & Development

Backend progress is

HARD TO MEASURE

Page 62: Frontend First Design & Development

Surprise

PERFORMANCEbottlenecks

Page 63: Frontend First Design & Development

NEEDS!

multidisciplinary

!"#!$"(no departments)

Page 64: Frontend First Design & Development

!"#!$%&'()*+

Page 65: Frontend First Design & Development

RESULTS

Page 66: Frontend First Design & Development

HAPPY USERS

Page 67: Frontend First Design & Development

"It does what I think it should"

Page 68: Frontend First Design & Development

!"#$%&'(!$")!*+'('),"+-%*($$+

You have to

,"+-%*('"+the problem first.

Page 69: Frontend First Design & Development

ELEGANCE !"#$!%!$&'!"$#!%#BEAUTY

ELEGANT SOLUTION

PERFECT COUNTERPART#()#!*"#+(,,-".(%/!%0#.,(1'-$LESS2#%(, MORE.

DESIGN !"#*3-WAY

*(#,-&+3#*3&*#"('4*!(%5

6%!"#*3-#

7(*3!%0