XFB

1. XFB There's a fine line between genius and insanity. I have erased this line.Oscar Levant

2. Origins of XFB • XFB (Extended Fusebox) grew out of a desire to tip the scale of project success. • XFB combines technical innovations (XFAs, query sims, nested circuits, nested layouts, integrated security, etc.) with project management features.

3. 70% Failure

4. Time Expended Nike Method Design Testing Delivery Coding Architecture Requirements www.halhelms.com

5. Time Expended Extended Fusebox Method Coding Testing Delivery Architecture Requirements/Design www.halhelms.com

6. Main Points of XFB • Project Management • wireframes • prototypes • devnotes • Technical • xfas • fusedocs • nested circuits • nested layouts • query sims • security • assertions

7. Wireframe

8. Wireframe • Wireframes provide a "booster rocket" to help us escape the gravitational pull of our prejudices and assumptions about what clients want.

9. Wireframe • The wireframe is a skeleton-model of an application. • It is meant to help clients and developers discuss what an application should do.

10. Wireframe

11. Wireframe

12. Wireframe • Download available at www.bjork.net

13. Prototype w/DevNotes

14. Why a prototype? • "Requirements gathering" doesn't work • The Musee d'Orsay in Paris wants to hire you to reproduce a famous painting: Arrangement in Black and Grey No. 1 • Specification: "The work shall be oil on canvas, 56-1/4" x 63-1/4"..."

15. Is this what they want?

16. Is this what they want?

17. Is this what they want?

18. Is this what they want?

19. Is this what they want?

20. THIS is what they want!

21. Why the prototype? • Clients can only tell you what they want after they see it

22. What is the prototype?

23. Leaving no "wiggle room" The prototype The deployed application

24. An iterative process • The wireframe forms the basis for the first cut of the prototype • Prototypes have minimal code—and are often best handled by non-programmers • The prototype is refined through interaction with client and developer using DevNotes

25. What is DevNotes? • DevNotes is a simple, threaded message system that sits below each individual prototype page. • All issues related to the application are recorded as DevNotes

26. What are DevNotes used for? • Client direction: "Move the buttons to the left/Make the blue a little more like cornflower and less like slate" • Developer questions: "Where will the product information come from?/Is there an existing database or file with authorized users?" • Client answers: "I think the IT people have a spreadsheet or something with users."

27. What are DevNotes used for? • Developer self-notes: "Use JavaScript for client processing of this procedure"

28. Prototype freeze • We are done with the prototype when both client and developer are confident that • all questions regarding functionality have been resolved • all content has been received from client • graphical interface/look and feel has been approved • any changes occurring after this point will either become a new release or will be exorbitantly expensive

29. Fusebox architecture

30. Unplanned program flow Module F Module E Module B Module C Module A Module D

31. Architected program flow Module F Module C Module E Module A Module D Module B

32. A Fusebox request validateLogin the fuseaction loginUser Fusebox qryValidateLogin.cfm validateLogin actValidateLogin.cfm newUser fuses the fusebox fuseactions

33. Fuses always make requests of the fusebox <form action=“index.cfm” method=“post”> <input type=“hidden” name=“fuseaction” value=“validateUser”> <input type=“text” name=“username”> <input type=“password” name=“password”> <input type=“submit”> </form> Fusebox a fuse the fusebox

34. The fusebox copies all URL and form variables into attributes scope <cf_FormURL2Attributes> url.productID = 1027 form.lastName = ‘Helms’ attributes.productID = 1027 attributes.lastName = ‘Helms’

35. The fusebox <cfswitch expression = “#attributes.fuseaction#”> <cfcase value=“loginUser”> <cfinclude template=“dspLoginUser.cfm”> </cfcase> … <cfcase value=“validateLogin”> <cfinclude template=“qryValidateLogin.cfm”> <cfinclude template=“actValidateLogin.cfm”> </cfcase> </cfswitch> The fusebox

36. Fuseactions • The fuseaction is the motivating force in an application. • Suggestion: use name is form of verbNounPhrase such as: • addItemToCart • getUserInfo • showProductInfo

37. The fusebox <cfswitch expression = “#attributes.fuseaction#”> <cfcase value=“doSomething”> <cfinclude template=“aFuse.cfm”> </cfcase> …. <cfcase value=“doSomethingElse”> <cfmodule template=“anotherFuse.cfm”> </cfcase> </cfswitch> The fusebox

38. anotherFuse.cfm aFuse.cfm Including a fuse The fuseaction “doSomething” <cfswitch expression = “#attributes.fuseaction#”> <cfcase value=“doSomething”> <cfinclude template=“aFuse.cfm”> </cfcase> …. <cfcase value=“doSomethingElse”> <cfmodule template=“anotherFuse.cfm”> </cfcase> </cfswitch> yetAnotherFuse.cfm The fuses The fusebox

39. Nested circuits

40. Benefits of nested circuits • More and easier code reuse • Independent, concurrent development of code modules • Descendant modules inherit variables from parents • Variables from parents are inherited by children • Layout files can be nested • Exceptions bubble upwards

41. XFB nested circuits

42. Conflicting circuit names

43. Resolving circuit naming conflicts • Create a Circuits.cfm file • Alias name conflicts bpcf/completed/circuits.cfm

44. FB3: nested circuits • Fusebox 2 worked with the concept of a federation of circuits,each having to know of the existence of each other • Fusebox 3 works with the concept of interchangeable circuits that can be reused in different applications

45. Inheritance <cfset dsn = "OurApplication"> <cfquery datasource=#dsn#>

46. Bubbling exceptions • Lets architect determine where certain exception types will be handled • Lets coder write fuses without worrying about handling certain classes of exceptions

47. Example: Bubbling exceptions <!-- index.cfm --> <cftry> <cfcatch type=“UserAlert”> <script> alert( </script> </cfcatch> </cftry> <!-- index.cfm --> <!-- aFuse.cfm --> <cftry> <cfinclude template=“myPage.cfm”> <cfcatch> <cf_LogException message=“#cfcatch.message#”> <cfthrow type=“UserAlert”> </cfcatch> </cftry>

48. XFAs

49. XFAs • A typical Fusebox 2 page has fuseactions hardcoded in place. • Examples: • <form action="index.cfm?fuseaction=updateProductInfo"> • <a href="index.cfm?fuseaction=showUserMenu"> • <cflocation url="index.cfm?fuseaction=showMainPage">

50. XFAs • XFAs are variables that lets fuseactions be resolved at run time • Examples • <form action="index.cfm?fuseaction=#XFA.submitForm#"> • <a href="index.cfm?fuseaction=#XFA.next#"> • <cflocation url="index.cfm?fuseaction=#XFA.home#">