www.teratech.com 1/48 1 real world flip fusebox life-cycle process michael smith, teratech, inc....
TRANSCRIPT
1
www.teratech.com 1/48
Real World FLiP
Fusebox Life-cycle Process
Michael Smith, TeraTech, [email protected]://www.teratech.com
301-424-3903 x110
Copyright TeraTech 2003
2
www.teratech.com 2/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
3
www.teratech.com 3/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
4
www.teratech.com 4/48
More About Me
• 22 years programming• 7 years with ColdFusion• 4 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
5
www.teratech.com 5/48
What is FLiP
• Fusebox Life cycle Process • Plans your development and client
communication• Contains
– Wireframe– HTML Prototype + Devnotes– Sign off – Circuit mindmapping– Fusedocs
6
www.teratech.com 6/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!)
7
www.teratech.com 7/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
8
www.teratech.com 8/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.”
9
www.teratech.com 9/48
Fusebox has evolved…
1998: Fusebox 1 & 2 2001: Fusebox 3
Architectural Framework (Fusebox)
Development Methodology (FLiP)
Prior to Fusebox 3, the term, "Fusebox", meant both an application framework and a set of "best practices" for web software development.
With Fusebox 3, a clear distinction is made: Fusebox is an application framework. FLiP is a lifecycle methodology.
10
www.teratech.com 10/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
11
www.teratech.com 11/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
12
www.teratech.com 12/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
13
www.teratech.com 13/48
Two approaches - TraditionalRequirements
Design
Architecture
Coding
Testing
Deployment
Traditional
Many methodologies focus on writing code (and debugging), which takes up the greatest amount of the project time.
Debugging
14
www.teratech.com 14/48
Two approaches - FLiP
Requirements/
Design
Architecture
Coding
Testing
Deployment
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.
15
www.teratech.com 15/48
TraditionalS
tart
Fin
ish
In many methodologies, the farther along the project is, the fewer people cancontribute to it.
16
www.teratech.com 16/48
Let's "FLiP" that aroundS
tart
Fin
ish
With FLiP, as a project progresses, more developers can contribute to it.
17
www.teratech.com 17/48
The 3 stages of FLiP
Requirements/Design
Architecture
Coding
Testing
Deployment
DiscoveryDesignImplementation
Prototype
Wireframe
Devnotes
Sign-off
18
www.teratech.com 18/48
Fusebox Project Life Cycle
• Wireframe• HTML Prototype• Prototype + Devnotes• Sign off• Architecture + Fusedoc• Final Code• Acceptance Test
19
www.teratech.com 19/48
FLiP diagramWireframePages and Flow
HTML PrototypeGraphics and fields, Devnotes
Sign-off(OK vs make change and resubmit
Iterate with user
Iterate with user
Fuseactions & CircuitsMark up fuseactions in printout of prototype
MindmapGroup fuseactions into Circuits, indentify fuses
GenerateConvert to fusebox skeleton
Fusedocresponsibilites, IO
Code Fusesdsp, qry, act, lay, fbx
Design Database
Test Fusestestharness
Integration TestCompare to prototype
Deploy
20
www.teratech.com 20/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
21
www.teratech.com 21/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
22
www.teratech.com 22/48
Sample wireframe
23
www.teratech.com 23/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
24
www.teratech.com 24/48
A good prototype is an exact replica of the finished application
The prototype The deployed application
25
www.teratech.com 25/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.
26
www.teratech.com 26/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
27
www.teratech.com 27/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
28
www.teratech.com 28/48
Sample DevNotesEach message identifies who wrote it.
Message threads can be removed when no longer needed. Such threads are removed from view, butremain in the database.
29
www.teratech.com 29/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
30
www.teratech.com 30/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”
31
www.teratech.com 31/48
Steps in architecting a Fusebox application
1. Identify fuseactions and XFAs that can be determined from the prototype
2. Fill in fuseactions/XFAs that are non-visual 3. Group fuseactions into circuits4. Determine fuses that can be reused or need to be written5. Split fuseactions into query, action, display6. Write Fusedocs for each fuse7. Write fuses8. Create test harnesses9. Integration / acceptance testing
32
www.teratech.com 32/48
Identifying Fuseactions in Prototype
33
www.teratech.com 33/48
Mindmap Circuits and Fuseactions
34
www.teratech.com 34/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.
35
www.teratech.com 35/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.
36
www.teratech.com 36/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
37
www.teratech.com 37/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>
38
www.teratech.com 38/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
39
www.teratech.com 39/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
40
www.teratech.com 40/48
Roles in software development
Client
Team
Programmer
41
www.teratech.com 41/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
42
www.teratech.com 42/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
43
www.teratech.com 43/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
44
www.teratech.com 44/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
45
www.teratech.com 45/48
Fusebox only book
• Discovering Fusebox 3 by Hal Helms and John Quarto-vonTivadar
• Consise coverage of Fusebox framework
• No FLiP
46
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 (very active and responsive)
47
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