Professional Mobile Development (for UW-Madison)

A presentation for UW-Madison CS407 about professional mobile development

Transcript

1. PROFESSIONAL MOBILE
   DEVELOPMENT
   by: brad grzesiak
   Monday, February 13, 12
   

   View Slide

2. ruby on rails & iOS consulting
   Monday, February 13, 12
   

   View Slide

3. ABOUT ME
   • UW-Madison Grad (BS ’05
   CS & EMA)
   • Aerospace Engineer
   • Co-Founder of Bendyworks
   Monday, February 13, 12
   

   View Slide

4. I DON’T EVEN...
   1 class Batchr
   2
   3 attr_reader :batch_size, :bucket
   4 attr_accessor :receiver, :message
   5
   6 def self.batch receiver, message
   7 batchr = new
   8 batchr.receiver = receiver
   9 batchr.message = message
   10 yield batchr
   11 batchr.finish
   12 end
   13
   14 def initialize opts = {}
   15 @batch_size = opts[:batch_size] ? opts[:batch_size] : 400
   16 @bucket = []
   17 end
   18
   19 def batch_size= value
   20 @batch_size = value
   21 run_if_necessary
   22 end
   ?
   source: nasa.gov
   Monday, February 13, 12
   

   View Slide

5. source: rubyonrails.org
   Monday, February 13, 12
   

   View Slide

6. AND THEN...
   Monday, February 13, 12
   

   View Slide

7. source: apple.com
   Monday, February 13, 12
   

   View Slide

8. &
   Monday, February 13, 12
   

   View Slide

9. professionalism
   mobile
   &
   Monday, February 13, 12
   

   View Slide

10. mobile
    MVC
    There are many things I could discuss, but
    is the most important concept
    to maintainable code
    Monday, February 13, 12
    

    View Slide

11. odel
    iew
    ontroller
    mobile
    M
    V
    C
    Monday, February 13, 12
    

    View Slide

12. odel
    iew
    ontroller
    MVC
    M
    V
    C
    the data & domain
    the UI elements
    the domain arbitrator
    Monday, February 13, 12
    

    View Slide

13. odel
    iew
    ontroller
    MVC
    M
    V
    C
    (un)directed, cyclic graph
    tree
    directed, acyclic graph
    Monday, February 13, 12
    

    View Slide

14. odel
    M (un)directed, cyclic graph
    Album
    21
    Monday, February 13, 12
    

    View Slide

15. odel
    M (un)directed, cyclic graph
    Album
    21
    Disc
    f042d
    ofAlbum
    Monday, February 13, 12
    

    View Slide

16. odel
    M (un)directed, cyclic graph
    Album
    21
    Disc
    f042d
    ofAlbum
    fred
    owns
    User
    Monday, February 13, 12
    

    View Slide

17. odel
    M (un)directed, cyclic graph
    Album
    21
    Disc
    f042d
    ofAlbum
    fred
    owns
    User
    ( ) wants
    Monday, February 13, 12
    

    View Slide

18. odel
    iew
    ontroller
    MVC
    M
    V
    C
    (un)directed, cyclic graph
    tree
    directed, acyclic graph
    Monday, February 13, 12
    

    View Slide

19. iew
    V tree
    window
    Monday, February 13, 12
    

    View Slide

20. iew
    V tree
    window
    rootView
    Monday, February 13, 12
    

    View Slide

21. iew
    V tree
    window
    rootView
    detail master
    Monday, February 13, 12
    

    View Slide

22. iew
    V tree
    window
    rootView
    detail master
    navigation
    Monday, February 13, 12
    

    View Slide

23. iew
    V tree
    window
    rootView
    detail master
    navigation
    title table
    Monday, February 13, 12
    

    View Slide

24. iew
    V tree
    window
    rootView
    detail master
    navigation
    title table
    cell cell
    Monday, February 13, 12
    

    View Slide

25. iew
    V tree
    window
    rootView
    detail master
    navigation
    title table
    cell cell
    image slug build#
    Monday, February 13, 12
    

    View Slide

26. odel
    iew
    ontroller
    MVC
    M
    V
    C
    (un)directed, cyclic graph
    tree
    directed, acyclic graph
    Monday, February 13, 12
    

    View Slide

27. ontroller
    C directed, acyclic graph
    Monday, February 13, 12
    

    View Slide

28. ontroller
    C directed, acyclic graph
    buttonPressed
    Monday, February 13, 12
    

    View Slide

29. ontroller
    C directed, acyclic graph
    buttonPressed controller
    Monday, February 13, 12
    

    View Slide

30. ontroller
    C directed, acyclic graph
    buttonPressed controller fetchData
    Monday, February 13, 12
    

    View Slide

31. ontroller
    C directed, acyclic graph
    buttonPressed controller fetchData
    dataChanged
    Monday, February 13, 12
    

    View Slide

32. ontroller
    C directed, acyclic graph
    buttonPressed controller fetchData
    dataChanged controller
    Monday, February 13, 12
    

    View Slide

33. ontroller
    C directed, acyclic graph
    buttonPressed controller fetchData
    dataChanged controller setImage:
    Monday, February 13, 12
    

    View Slide

34. odel
    iew
    ontroller
    MVC
    M
    V
    C
    (un)directed, cyclic graph
    tree
    directed, acyclic graph
    Monday, February 13, 12
    

    View Slide

35. odel
    iew
    ontroller
    MVC
    M
    V
    C ontroller
    C
    iew
    V
    Monday, February 13, 12
    

    View Slide

36. odel
    iew
    ontroller
    MVC
    M
    V
    C ontroller
    C
    iew
    V
    tap!
    Monday, February 13, 12
    

    View Slide

37. odel
    iew
    ontroller
    MVC
    M
    V
    C ontroller
    C
    iew
    V
    tap!
    buttonPressed:
    Monday, February 13, 12
    

    View Slide

38. odel
    iew
    ontroller
    MVC
    M
    V
    C ontroller
    C
    iew
    V
    tap!
    buttonPressed:
    markCompleted
    Monday, February 13, 12
    

    View Slide

39. odel
    iew
    ontroller
    MVC
    M
    V
    C ontroller
    C
    iew
    V
    tap!
    buttonPressed:
    markCompleted didChangeValueForKey:
    Monday, February 13, 12
    

    View Slide

40. odel
    iew
    ontroller
    MVC
    M
    V
    C ontroller
    C
    iew
    V
    tap!
    buttonPressed:
    markCompleted didChangeValueForKey:
    setImage:
    Monday, February 13, 12
    

    View Slide

41. odel
    iew
    ontroller
    MVC
    M
    V
    C ontroller
    C
    iew
    V
    tap!
    buttonPressed:
    markCompleted didChangeValueForKey:
    setImage:
    iew
    V
    setNumCompleted:
    Monday, February 13, 12
    

    View Slide

42. odel
    iew
    ontroller
    MVC
    M
    V
    C ontroller
    C
    iew
    V
    tap!
    buttonPressed:
    markCompleted
    addObserver:forKeyPath:options:context:
    removeObserver:forKeyPath:
    didChangeValueForKey:
    setImage:
    iew
    V
    setNumCompleted:
    Monday, February 13, 12
    

    View Slide

43. *sigh*
    Monday, February 13, 12
    

    View Slide

44. *sigh*
    that was really complicated
    Monday, February 13, 12
    

    View Slide

45. *sigh*
    that was really complicated
    and now for something
    completely different
    Monday, February 13, 12
    

    View Slide

46. HOW TO FIND
    (AND LAND)
    A DREAM JOB
    Monday, February 13, 12
    

    View Slide

47. BUT FIRST,
    SOME INTROSPECTION
    Monday, February 13, 12
    

    View Slide

48. BUT FIRST,
    SOME INTROSPECTION
    • Cave Coding
    • .bak
    • .bak.bak
    • .bak.final.bak
    • Talk shop?
    • Automation
    • Tested Code
    • IDEs and editors
    Monday, February 13, 12
    

    View Slide

49. CAVE CODING
    • Headphones on
    • Music (hopefully not Skrillex)
    • Dark, lit only by your screen
    • Welcome mat says “Hic sunt dracones!”
    Monday, February 13, 12
    

    View Slide

50. NEWSFLASH!
    you’re going to be doing this
    for the rest of your life*
    Monday, February 13, 12
    

    View Slide

51. PAIR PROGRAMMING
    • Two people, One computer, Two Keyboards, One Display
    • Music (hopefully not Skrillex)... on ambient
    • Natural light
    • Other pairs in shouting range
    Monday, February 13, 12
    

    View Slide

52. LEARN GIT
    • Read Pro Git (http://progit.org/)
    • Join GitHub
    • Learn the artform of topic branches
    • You get backups, for free!
    Monday, February 13, 12
    

    View Slide

53. SO YOU LIKE TO TALK SHOP?
    • Go to conferences, now
    • There’s usually a student price
    • Go to User Groups (see: NSCoder), now
    • Read blogs, now
    • Write blogs, now
    • Use twitter, now
    Monday, February 13, 12
    

    View Slide

54. AUTOMATION
    • javac Node.java && java Node
    • javac ${1}.java && java ${1}
    • ant, rake, guard
    • Icon Generators (e.g., Opacity)
    • Xmo’d & mogenerator
    Monday, February 13, 12
    

    View Slide

55. TESTED CODE
    • SenTest
    • Kiwi
    • UIAutomation
    • Frank
    Monday, February 13, 12
    

    View Slide

56. KIWI
    #import "Kiwi.h"
    #import "NSDate+Formatting.h"
    SPEC_BEGIN(NSDate_FormattingSpec)
    describe(@"rangeOfTimeInWordsFromSeconds:", ^{
    context(@"4 seconds", ^{
    it(@"returns 'Less than 5 seconds'", ^{
    NSString *expected = @"Less than 5 seconds";
    [[[NSDate rangeOfTimeInWordsFromSeconds:4] should] equal:expected];
    });
    });
    context(@"60 seconds", ^{
    it(@"returns 'About 1 minute'", ^{
    NSString *expected = @"About 1 minute";
    [[[NSDate rangeOfTimeInWordsFromSeconds:60] should] equal:expected];
    });
    });
    });
    SPEC_END
    Monday, February 13, 12
    

    View Slide

57. UIAUTOMATION
    function assertElementPresent(el, el_name) {
    !el_name = el_name ? el_name : '';
    !if (el.isValid()) {
    !! return UIALogger.logPass("Element " + el_name + " is present");
    !} else {
    !! return UIALogger.logFail("Element " + el_name + " is not present");
    !}
    }
    var target = UIATarget.localTarget();
    var window = target.frontMostApp().mainWindow();
    var repository_list = window.tableViews().firstWithName("Repositories");
    assertElementPresent(repository_list.cells(), "repository cells");
    var latest_repo = repository_list.cells()[0];
    window.navigationBar().leftButton().tap();
    // When I tap the first repo
    latest_repo.tap();
    // Then I should see the list of builds
    var build_list = window.tableViews().firstWithName("Builds");
    assertElementPresent(build_list.cells());
    Monday, February 13, 12
    

    View Slide

58. UIAUTOMATION+TUNE_UP
    test("my test", function(target, app) {
    mainWindow = app.mainWindow();
    navBar = mainWindow.navigationBar();
    leftButton = navBar.leftButton();
    rightButton = navBar.rightButton();
    assertEquals("Back", leftButton.name());
    assertEquals("Done", rightButton.name());
    tableViews = mainWindow.tableViews();
    assertEquals(1, tableViews.length);
    table = tableViews[0];
    assertEquals("Fred", table.cells()[0].name());
    assertEquals("Flintstone", table.cells()[1].name());
    });
    Monday, February 13, 12
    

    View Slide

59. FRANK
    Feature: Drive our SampleNavApp using Cucumber
    Scenario: Plus button adds timestamp
    Given the app is launched
    When I touch the Plus button
    Then I should see a table containing a timestamp
    Given /^the app is launched$/ do
    launch_app_in_simulator
    wait_for_frank_to_come_up
    end
    When /^I touch the Plus button$/ do
    touch( "navigationButton marked:'Add'" )
    end
    Monday, February 13, 12
    

    View Slide

60. IDEs & EDITORS
    • XCode (obviously)
    • Vim & Emacs
    • Eclipse
    • jEdit, gEdit, etc
    • M-x butterfly
    Monday, February 13, 12
    

    View Slide

61. SO WHY AM I REALLY HERE?
    • Madison is actually a really cool town
    • Please consider putting happiness ahead of $$ and fame
    • ?- CausesHappiness(BigCompany).
    • No.
    • The iOS scene here is just getting started
    Monday, February 13, 12
    

    View Slide

62. Monday, February 13, 12
    

    View Slide