Using FLiP as a sole developer

1. Using FLiP as a sole developer Christian Ready Christian Ready Web Services

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

3. 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

4. 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)

5. 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”

6. 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.”

7. 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

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

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

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

11. FLiP Timeline

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

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

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

17. 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

18. 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.

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

20. 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!

21. Wireframe example

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

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

27. 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!

28. 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

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

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

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

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

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

38. 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

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

44. Identify possible fuseactions • emailArticleForm • qry_article.cfm • dsp_emailForm.cfm

45. Identify possible fuseactions • emailArticle • qry_article.cfm • act_emailArticle.cfm • dsp_emailComplete.cfm

46. Identify possible circuits • Article • display • emailForm • email • new • insert • update • etc… • News • archive • recentArticles • adminMenu • topStory • headlines

47. Mind-map the architecture

48. Add the fuseactions

49. Add the fuses

50. Model-View-Controller approach