March 12 & 13, 2007 Using FLiP as a sole developer Christian Ready Christian Ready Web Services 1

About your presenter Creating websites since 1996 Independent consultant / designer / developer Using Fusebox since version 2 2

What we’ll cover What FLiP is Case Study: Civil Air Patrol, Maryland What a large FB site “looks like” How FB makes site upgrades simple 3

About Fusebox Web application framework Consists of:  Fuses (tiny files of code)  Circuits (groups of fuses)  eXit FuseActions (XFA’s)  FuseDocs (documentation)  Core files (the engine) 4

Fusebox Lifecycle Process (FLiP) An approach to web development with Fusebox A consolidation of best practices A way of bridging the gap between “techies” and “suits” 5

How do you approach development? “I first design the application, carefully work out the underlying architecture, document all of the component functionalities, and then begin coding.” “I start coding and hope it works out.” 6

Software success rate 70% of all software development projects end in failure The client’s view – the application didn’t work as promised Your view – the project went way over budget thanks to scope creep 7

Attempts at avoiding failure Design documents Creative Briefs Technical Briefs Meetings, meetings, and more meetings 8

The truth is… The client often doesn’t know what they want until they see it. 9

FLiP stages Wireframe Template design Front-end development w/DevNotes Prototype Freeze Architecture & Fusedocs Coding Unit Testing Delivery 10

FLiP Timeline 11

Introducing our case study A new site for the Maryland Wing of the Civil Air Patrol 12

Civil Air Patrol Civilian auxiliary to USAF Search and Rescue, Disaster Relief Homeland Security Cadet Programs Aerospace Education 13

CAP, Maryland Wing 1300 Members 1 Wing HQ 3 Groups 25 Squadrons 43 SAR missions in FY Finds 14

15

16

Client Requirements Reinforce MDWG/CAP brand as USAF Auxiliary Recruit new members – easily find a squadron near them to join Resource to wing staff, group, squadron personnel – member login Public relations – news, photos, feeds 17

Client Requirements (cont’d) Calendar that can be maintained by wing, groups, and squadrons Staffers need to be able to manage their own content Has to be better than any other CAP website. 18

Fusebox Lifecycle Process (FLiP) Wireframe Template design Front-end development w/DevNotes Prototype Freeze Architecture Fusedocs Coding Unit Testing Delivery 19

Wireframe A text-based, clickable front-end that represents all of the “pages” of an application A tool that the client can click and identify how the application can be improved before it’s even built! 20

Wireframe example 21

Fusebox Lifecycle Process (FLiP) Wireframe Template design Front-end development w/DevNotes Prototype Freeze Architecture Fusedocs Coding Unit Testing Delivery 22

23

24

25

Fusebox Lifecycle Process (FLiP) Wireframe Template design Front-end development w/DevNotes Prototype Freeze Architecture Fusedocs Coding Unit Testing Delivery 26

Front-end development w/DevNotes Show client our interpretation of their requirements Get feedback early and often Make changes as needed  Without rewriting our application! 27

The Front-End first All XHTML, CSS, JavaScript, Flash, etc work gets done here Anything that the client “sees” Sample data is used in place of db- generated data All pages use.cfm extensions 28

DevNotes Available from Jeff Peters’ site (grokfusebox.com) A custom tag An OnRequestEnd.cfm / OnRequestEnd() in Application.cfc 29

Fusebox Lifecycle Process (FLiP) Wireframe Template design Front-end development w/DevNotes Prototype Freeze Architecture Fusedocs Coding Unit Testing Delivery 30

How to freeze your prototype 1.Comment out the form elements in DevNotes.cfm 2.Use the Page Saver Firefox extension 3.Print out two copies of all pages 4.Sign and have your client countersign each one. 31

32

33

34

35

Fusebox Lifecycle Process (FLiP) Wireframe Template design Front-end development w/DevNotes Prototype Freeze Architecture Fusedocs Coding Unit Testing Delivery 36

Architecture & Fusedocs Mark up the prototype printouts Identify possible fuseactions Mind-map the architecture Write Fusedocs 37

Mark up the prototype printouts Use different colored pens, markers, crayons Mark exit points Mark variables / dynamic elements Identify data that goes along with exit points 38

39

40

41

42

Identify possible fuseactions displayArticle  qry_article.cfm  dsp_article.cfm 43

Identify possible fuseactions ArticleForm  qry_article.cfm  dsp_ Form.cfm 44

Identify possible fuseactions Article  qry_article.cfm  act_ Article.cfm  dsp_ Complete.cfm 45

Identify possible circuits Article  display  Form   new  insert  update  etc… News  archive  recentArticles  adminMenu  topStory  headlines 46

Mind-map the architecture 47

Add the fuseactions 48

Add the fuses 49

Model-View-Controller approach 50

51

Model-View-Controller approach 52

Fusebox Lifecycle Process (FLiP) Wireframe Template design Front-end development w/DevNotes Prototype Freeze Architecture Fusedocs Coding Unit Testing Delivery 53

Writing Fusedocs An XML-based approach to fuse specification Document before you code Tackle them one at a time:  Display fuses first  Query fuses next  Action fuses last 54

Example: dsp_ Form.cfm 55

56 I display a form allowing the user to the article to a friend <history author="Christian Ready" date="5/20/2005" role="Architect" type="Create" /> <history author="Christian Ready" date="9/21/2005" role="Architect" type="Update"> Had to move the title out of the legend. Thanks to MSIE6 for ruining the web - again.

57 I display a form allowing the user to the article to a friend <history author="Christian Ready" date="5/20/2005" role="Architect" type="Create" /> <history author="Christian Ready" date="9/21/2005" role="Architect" type="Update"> Had to move the title out of the legend. Thanks to MSIE6 for ruining the web - again.

58 I display a form allowing the user to the article to a friend <history author="Christian Ready" date="5/20/2005" role="Architect" type="Create" /> <history author="Christian Ready" date="9/21/2005" role="Architect" type="Update"> Had to move the title out of the legend. Thanks to MSIE6 for ruining the web - again.

59 I display a form allowing the user to the article to a friend <history author="Christian Ready" date="5/20/2005" role="Architect" type="Create" /> <history author="Christian Ready" date="9/21/2005" role="Architect" type="Update"> Had to move the title out of the legend. Thanks to MSIE6 for ruining the web - again.

60 I display a form allowing the user to the article to a friend <history author="Christian Ready" date="5/20/2005" role="Architect" type="Create" /> <history author="Christian Ready" date="9/21/2005" role="Architect" type="Update"> Had to move the title out of the legend. Thanks to MSIE6 for ruining the web - again.

61 I display a form allowing the user to the article to a friend <history author="Christian Ready" date="5/20/2005" role="Architect" type="Create" /> <history author="Christian Ready" date="9/21/2005" role="Architect" type="Update"> Had to move the title out of the legend. Thanks to MSIE6 for ruining the web - again.

62

Constructing the skeleton application Hard way – do it manually Easy way – use a tool:  FuseMinder (  FuseBuilder ( 63

Fusebox Lifecycle Process (FLiP) Wireframe Template design Front-end development w/DevNotes Prototype Freeze Architecture Fusedocs Coding Unit Testing Delivery 64

Coding Ideally, there is little code in a fuse The code is “simple” Agnostic of its surroundings 65

Fusebox Lifecycle Process (FLiP) Wireframe Template design Front-end development w/DevNotes Prototype Freeze Architecture Fusedocs Coding Unit Testing Delivery 66

Unit Testing Uses a “test harness” to feed some data into a fuse Tests the fuse to see if it works as intended 67

Test Harness A file that includes the fuse and feeds it the data its expecting 68

Fusebox Lifecycle Process (FLiP) Wireframe Template design Front-end development w/DevNotes Prototype Freeze Architecture Fusedocs Coding Unit Testing Delivery 69

Delivery Beta Release (August 6, 2005) Site Launch (September 11, 2005) 70

Content Development August 6 – September 2,

Until… 72

You mean a podcast? 73 ? = +

74

75

76

77

78

Fusebox Lifecycle Process (FLiP) Wireframe Template design Front-end development w/DevNotes Prototype Freeze Architecture Fusedocs Coding Unit Testing Delivery 79

Recommended Books & Audio 80

FLiP tools Adalon – FuseBuilder – Jeff Peters – Hal Helms – Fusebox – 81

Fusebox sites Fusebox – Jeff Peters – Hal Helms – Sean Corfield - Sandra Clark – Brian Kotek – 82

Civil Air Patrol, Maryland Wing 83

Thanks! 84