Real World FLiP
Fusebox Life-cycle Process
Michael Smith, TeraTech, Inc.
michael@teratech.com
http://www.teratech.com
301-424-3903 x110
Copyright TeraTech 2004
www.teratech.com
1/48
Overview
•
•
•
•
What is FLiP?
General Concepts
Why use FLiP?
Common client communication problems and
project snafus
• Wireframing, Prototyping, Devnotes, Sign-off
• How to get started in your organization
• Q&A
www.teratech.com
2/48
Speaker Information
Who am I?
• Michael Smith
• President of TeraTech, Inc Rockville MD
– http://www.teratech.com/
– ttWebReportServer, CFXGraphicserver
• MDCFUG, CFUN-03, Fusebox Conf
• Articles in CFDJ, Fusion Authority
• Winner CFDJ award Best CF Consulting
www.teratech.com
3/48
More About Me
•
•
•
•
24 years programming
8 years with ColdFusion
5 years with Fusebox
Also work with SQL, JavaScript, HTML, VB,
Oracle, Access
• Teach one-on-one and custom classes
• On site and custom development
• Fusebox and Process Methodology
www.teratech.com
4/48
What is FLiP
• Fusebox Life cycle Process
• Plans your development and client
communication
• Contains
–
–
–
–
–
Wireframe
HTML Prototype + Devnotes
Sign off
Circuit mindmapping
Fusedocs
www.teratech.com
5/48
What FLiP achieves
• Organize project process
• Dramatically improves client-programmer
communication
• Better management of client expectations
• Improves programmer-programmer
communication
• (Including communication with myself from
6 months ago!)
www.teratech.com
6/48
Benefits of Standardization
•
•
•
•
Better team communication
Cheaper maintenance
Fewer design time bugs
New team members can pick up code
faster
• Save time thinking about how to organize
project
www.teratech.com
7/48
Why FLiP?
• Works well in practice
• Parts useable independently
• Community support
“Fusebox began and continues to be guided by a
developer community concerned with making their
projects more successful, their clients happier, and
their own work less frustrating and more
rewarding.”
www.teratech.com
8/48
Fusebox has evolved…
Prior to Fusebox 3, the term, "Fusebox", meant both an
application framework and a set of "best practices" for web
software development.
Architectural Framework (Fusebox)
Development Methodology (FLiP)
1998: Fusebox 1 & 2
2001: Fusebox 3
With Fusebox 3, a clear distinction is made: Fusebox is an
application framework. FLiP is a lifecycle methodology.
www.teratech.com
9/48
Common Project problems
•
•
•
•
•
•
•
•
•
•
Poorly defined requirements
Scope creep
Communication problems between client and team
Code hard to understand, Non-working code
Changes hard to follow
Outdated code vs comments
Duplicated code - Reinventing the wheel
Inconsistent design approach
Random order of development process
Late requirements
www.teratech.com
10/48
FLiP goals
• provide a structured approach to determining
what clients want
• make it possible for developers to write code
once
• give clients exactly what they want and expect
• document decisions made
• determine acceptance testing before coding
• overcome the Mythical Man-Month problem
www.teratech.com
11/48
More FLiP goals
• support both traditional and distributed
team development
• offer a structured documentation/
program definition language
• scale from small and simple to large
and complex
• support wide variety of developer skill
sets and levels
www.teratech.com
12/48
Two approaches - Traditional
Traditional
Many methodologies focus on writing code (and debugging),
which takes up the greatest amount of the project time.
www.teratech.com
13/48
Two approaches - FLiP
FLiP
FLiP spends a great deal of time on requirements, design, and
architecture, understanding that clients can only tell you what
they want when they see it.
www.teratech.com
14/48
Start
Traditional
Finish
In many methodologies,
the farther along the project
is, the fewer people can
contribute to it.
www.teratech.com
15/48
Start
Let's "FLiP" that around
Finish
With FLiP, as a project
progresses, more developers
can contribute to it.
www.teratech.com
16/48
The 3 stages of FLiP
Discovery
Design
Implementation
Requirements/Design
www.teratech.com
17/48
Fusebox Project Life Cycle
•
•
•
•
•
•
•
Wireframe
HTML Prototype
Prototype + Devnotes
Sign off
Architecture + Fusedoc
Final Code
Acceptance Test
www.teratech.com
18/48
FLiP diagram
Iterate
with user
Wireframe
Generate
Pages and Flow
Convert to fusebox skeleton
HTML Prototype
Iterate
with user
Graphics and fields,
Devnotes
Sign-off
Fusedoc
responsibilites, IO
Design
Database
Code Fuses
(OK vs make change
and resubmit
dsp, qry, act, lay, fbx
Fuseactions & Circuits
Test Fuses
Mark up fuseactions in printout
of prototype
testharness
Integration Test
Mindmap
Compare to prototype
Group fuseactions into
Circuits, indentify fuses
Deploy
www.teratech.com
19/48
Wireframe
•
•
•
•
•
•
Blueprint of project – compare to house plans
No layout or graphics
Focus on page flow and exits
Client can walk through site
Helps with estimating costs
Many tools available:
– sourceforge wireframetool
– Rebar
– Adalon's wireframe edition
www.teratech.com
20/48
Wireframe
• Provides a text-only walkthrough of the
application from the client's POV
• Can be done in front of the client
• Helps concentrate on what the application
should do, rather than how it should appear
• Forms the basis for moving to the prototype
• You control the level of detail and time
spent
www.teratech.com
21/48
Sample wireframe
www.teratech.com
22/48
HTML Prototype
• Is an iterative process whose end is an
exact replica of what the look and feel of
the application is
• Guarantees that there is no
miscommunication
• Requires no/very little code
• Continues until both client and architect
agree that the prototype accurately and
completely reflects what will be delivered
www.teratech.com
23/48
A good prototype is an exact
replica of the finished application
The prototype
www.teratech.com
The deployed application
24/48
HTML Prototype
• Exact layout and graphics for all pages
• HTML and graphics will be reused in CF code
• Lets client see final site look and feel – a
photo album of future site. Can show all users.
• Clickable – can walk through site
• Dummy data
• Not the real thing! Compare artists sketches to
finished house.
www.teratech.com
25/48
Using DevNotes with the
prototype
• Provides a simple mechanism for placing a
context-sensitive, threaded messaging
system on the bottom of each prototype page
• Allows continuing communication to occur
during the prototyping process
• Documents the process by which decisions
were made
• Ensures that client requirements are not lost
www.teratech.com
26/48
Devnotes
• Let you add written comments attached to
each page
• Tag in OnRequestEnd.cfm
• Threaded discussion
• Record of all changes made
• Available from halhelms.com
• Other flavors of DevNotes out there
www.teratech.com
27/48
Sample DevNotes
Each message identifies
who wrote it.
Message threads can be
removed when no longer
needed. Such threads are
removed from view, but
remain in the database.
www.teratech.com
28/48
The critical point of FLiP:
prototype freeze
• Neither architecting nor coding begins until the
prototype is frozen
• The prototype is only frozen when both client and
architect agree that the prototype fully and
completely represents what the finished application
will look like and do
• Answers the question, "When do we begin?"
• Answers the harder question, "When do we end?"
• Forms the basis for later acceptance testing,
eliminating the "moving goalposts" problem
www.teratech.com
29/48
Formal Sign Off
• Client decides when prototype is close enough
to what they need
• Sign off is formal end of changes
• May bring up other needs or other parties who
have to see prototype
• As pages are signed off DevNotes are frozen
• Page ok: “Yes” or “No”?
– Do not use “Ok, With Changes”
www.teratech.com
30/48
Steps in architecting a Fusebox
application
1.
2.
3.
4.
5.
6.
7.
8.
9.
Identify fuseactions and XFAs that can be determined from
the prototype
Fill in fuseactions/XFAs that are non-visual
Group fuseactions into circuits
Determine fuses that can be reused or need to be written
Split fuseactions into query, action, display
Write Fusedocs for each fuse
Write fuses
Create test harnesses
Integration / acceptance testing
www.teratech.com
31/48
Identifying Fuseactions in
Prototype
www.teratech.com
32/48
Mindmap Circuits and
Fuseactions
www.teratech.com
33/48
Circuit and Database design
• Only design the site structure when sign-off
complete
• Only design database when sign-off
complete
– Compare to doing at beginning
• Use QuerySims to fake out database if DBA
is not finished with database design yet.
www.teratech.com
34/48
Fusedocs
• All incoming and outgoing variables in
fuses (including XFAs) are declared in an
XML document known as a Fusedoc.
• The Fusedoc sits at the top of every fuse and
is wrapped in CFML comment tags.
• It is written before the code is written, and
provides a "contract" between the architect
and the fusecoder.
www.teratech.com
35/48
Fusedocs rules
1. “Include everything a coder needs to write
the fuse, and nothing more.”
• Environment variables – request.dsn
• No database schema
• No file dependences
• Only one fusedoc per fuse
www.teratech.com
36/48
Sample Fusedoc
<fusedoc name="act_ValidateLogin.cfm">
<responsibilities>
I check to see if the user can be authenticated. If so, I create a structure called
CurrentUser and return to the fusebox with XFA.goodLogin; else I create no
structure and return to the fusebox with XFA.badLogin.
</responsibilities>
<properties>
<history author="hal helms" date="02 May 2002">
Built to illustrate Fusedocs
</history>
</properties>
<io>
<in>
<string name="XFA.goodLogin" />
<string name="XFA.badLogin" />
<string name="userName" scope="form" />
<string name="password" scope="form" />
</in>
<out>
<structure name="CurrentUser" scope="Session"
optional="TRUE" onCondition="on XFA.goodLogin">
<string name="userID" />
<list name="userRoles" />
<string name="fullName" />
</structure>
</out>
</io>
</fusedoc>
www.teratech.com
37/48
How to get started in your
organization
• Start with the parts of FLiP you like
• Can use any of wireframing, prototyping,
devnotes,sign-off or fusedoc independently
• Don’t ask for formal permission – just start
using the part of FLiP you like best it on next
project
• Explain roadmap of process to client and
benefits to them of communicating more
www.teratech.com
38/48
FLiP Summary
• Better client – programmer communication
• More client communication!
• A picture is worth a 1,000 words, a
simulation is worth 1,000,000 words
• Sign-off sheets used in acceptance testing
• Sign off stops endless expensive
enhancements
www.teratech.com
39/48
Roles in software development
Client
Team
Programmer
www.teratech.com
40/48
The client likes the process…
• They
– see what they will get before they get it
– can track progress by having known
deliverables
– pay less in time and/or money since there is
less risk to team
– Their expectations are managed better so they
are happier
www.teratech.com
41/48
The team likes the process…
• They
– can leverage their investment in tools and
training
– distribute pieces of a project based on
skill sets and levels
– reduce overall risk of project failure
– develop faster and at a lower cost
– Lower stress level due to knowing
where in the process they are
www.teratech.com
42/48
The programmer likes the
process…
• The programmer
–
–
–
–
–
knows what they're building
can concentrate on writing code
has an active online community available
is able to reuse fuses and modules
enjoys coding again
www.teratech.com
43/48
How about a FLiP book?
• Fusebox 3: Developing
ColdFusion
Applications by Jeff
Peters and Nat Papovich
• Covers FLiP and
Fusebox framework
• Full sample wireframe,
prototype and code for
thirdwheelbikes.com
www.teratech.com
44/48
Another FLiP book?
• Fusebox 4 & FLiP:
Master-Class
ColdFusion
Applications by Jeff
Peters
• Covers FLiP and
Fusebox 4 framework
www.teratech.com
45/48
Fusebox only book
• Discovering Fusebox 4
by Hal Helms and John
Quarto-vonTivadar
• Consise coverage of
Fusebox framework
• No FLiP
www.teratech.com
46/48
Resources
• Fusebox core files are freely available from www.fusebox.org
• Various sites have free tutorials, white papers, sample code,
etc.
–
–
–
–
–
–
–
www.halhelms.com
www.techspedition.com
www.grokfusebox.com
www.secretagents.com
www.bombusbee.com
www.fusium.com
Fusebox email list
www.teratech.com
47/48
Ready for some Fusebox
training?
• TeraTech offers classes in
– FB101 - Intro Fusebox
– FB201 – Intermediate Fusebox and FLiP
• All classes are available at TeraTech training
center in Rockville MD or onsite at your
organization.
• One-on-One and Project mentoring also
available
www.teratech.com
48/48
Questions?
Email me at
michael@teratech.com
www.teratech.com
49/48