Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Professional Mobile Development (for UW-Madison)

listrophy
February 13, 2012

Professional Mobile Development (for UW-Madison)

A presentation for UW-Madison CS407 about professional mobile development

listrophy

February 13, 2012
Tweet

More Decks by listrophy

Other Decks in Education

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