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

http://europe.cfunited.com/http://europe.cfunited.com/ March 12 & 13, 2007 Using FLiP as a sole developer Christian Ready Christian Ready Web Services 1

http://europe.cfunited.com/ About your presenter Creating websites since 1996 Independent consultant / designer / developer Using Fusebox since version 2 2

http://europe.cfunited.com/ 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

http://europe.cfunited.com/ 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

http://europe.cfunited.com/ 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

http://europe.cfunited.com/ 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

http://europe.cfunited.com/ 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

http://europe.cfunited.com/ Attempts at avoiding failure Design documents Creative Briefs Technical Briefs Meetings, meetings, and more meetings 8

http://europe.cfunited.com/ The truth is… The client often doesn’t know what they want until they see it. 9

http://europe.cfunited.com/ FLiP stages Wireframe Template design Front-end development w/DevNotes Prototype Freeze Architecture & Fusedocs Coding Unit Testing Delivery 10

http://europe.cfunited.com/ FLiP Timeline 11

http://europe.cfunited.com/ Introducing our case study A new site for the Maryland Wing of the Civil Air Patrol 12

http://europe.cfunited.com/ Civil Air Patrol Civilian auxiliary to USAF Search and Rescue, Disaster Relief Homeland Security Cadet Programs Aerospace Education 13

http://europe.cfunited.com/ CAP, Maryland Wing 1300 Members 1 Wing HQ 3 Groups 25 Squadrons 43 SAR missions in FY 2007 37 Finds 14

http://europe.cfunited.com/ 15

http://europe.cfunited.com/ 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

http://europe.cfunited.com/ 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

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

http://europe.cfunited.com/ 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

http://europe.cfunited.com/ Wireframe example 21

http://europe.cfunited.com/ 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

http://europe.cfunited.com/ 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

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

http://europe.cfunited.com/ 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

http://europe.cfunited.com/ Architecture & Fusedocs Mark up the prototype printouts Identify possible fuseactions Mind-map the architecture Write Fusedocs 37

http://europe.cfunited.com/ 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

http://europe.cfunited.com/ Identify possible fuseactions displayArticle  qry_article.cfm  dsp_article.cfm 43

http://europe.cfunited.com/ Identify possible fuseactions emailArticleForm  qry_article.cfm  dsp_emailForm.cfm 44

http://europe.cfunited.com/ Identify possible fuseactions emailArticle  qry_article.cfm  act_emailArticle.cfm  dsp_emailComplete.cfm 45

http://europe.cfunited.com/ Identify possible circuits Article  display  emailForm  email  new  insert  update  etc… News  archive  recentArticles  adminMenu  topStory  headlines 46

http://europe.cfunited.com/ Mind-map the architecture 47

http://europe.cfunited.com/ Add the fuseactions 48

http://europe.cfunited.com/ Add the fuses 49

http://europe.cfunited.com/ Model-View-Controller approach 50

http://europe.cfunited.com/ Model-View-Controller approach 52

http://europe.cfunited.com/ 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

http://europe.cfunited.com/ Example: dsp_emailForm.cfm 55

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

http://europe.cfunited.com/ Constructing the skeleton application Hard way – do it manually Easy way – use a tool:  FuseMinder (http://grokfusebox.com/)  FuseBuilder (http://fusebuilder.net/) 63

http://europe.cfunited.com/ Coding Ideally, there is little code in a fuse The code is “simple” Agnostic of its surroundings 65

http://europe.cfunited.com/ Unit Testing Uses a “test harness” to feed some data into a fuse Tests the fuse to see if it works as intended 67

http://europe.cfunited.com/ Test Harness A file that includes the fuse and feeds it the data its expecting 68

http://europe.cfunited.com/ Delivery Beta Release (August 6, 2005) Site Launch (September 11, 2005) 70

http://europe.cfunited.com/ Content Development August 6 – September 2, 2005 71

http://europe.cfunited.com/ Until… 72

http://europe.cfunited.com/ You mean a podcast? 73 ? = +

http://europe.cfunited.com/ Recommended Books & Audio http://protonarts.com/ 80

http://europe.cfunited.com/ FLiP tools Adalon – http://adalon.net/ FuseBuilder – http://fusebuilder.net/ Jeff Peters – http://grokfusebox.com/ Hal Helms – http://halhelms.com/ Fusebox – http://fusebox.org/ 81

http://europe.cfunited.com/ Fusebox sites Fusebox – http://fusebox.org/ Jeff Peters – http://grokfusebox.com/ Hal Helms – http://halhelms.com/ Sean Corfield - http://corfield.org/ Sandra Clark – http://shayna.com/ Brian Kotek – http://briankotek.com/ 82

http://europe.cfunited.com/ Civil Air Patrol, Maryland Wing http://mdcap.org/ 83

http://europe.cfunited.com/ Thanks! http://christianready.com/ chris@christianready.com 84

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

Similar presentations

Presentation on theme: "March 12 & 13, 2007 Using FLiP as a sole developer Christian Ready Christian Ready Web Services."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

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

Similar presentations

Presentation on theme: "March 12 & 13, 2007 Using FLiP as a sole developer Christian Ready Christian Ready Web Services."— Presentation transcript:

Similar presentations

About project

Feedback