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

Antoine van der Lee - Building the new WeTransfer app

Antoine van der Lee - Building the new WeTransfer app

WeTransfer build a new mobile app and Antoine talks about their working culture, open sourcing, their CI setup and taking proper time to setup your environment for effective development.

CocoaHeadsNL

July 19, 2017
Tweet

More Decks by CocoaHeadsNL

Other Decks in Technology

Transcript

  1. Building the new
    WeTransfer

    mobile app

    View Slide

  2. “Our ideal way of working
    after building the new
    WeTransfer app as a team”

    View Slide

  3. Agenda
    • What did we build?
    • How do we work?
    • What did we learn?
    WeTransfer Mobile App

    View Slide

  4. What did we
    build?

    View Slide

  5. WeTransfer Mobile App

    View Slide

  6. 03:05 AM
    1:01
    4:25
    Share
    Yokomokohama.mp3
    Delete
    Move to
    Board
    03:05 AM
    Tap the + button to add
    items to your Board
    Artwork by Malika Favre
    Collections Settings
    Board
    2 ITEMS — SHARED
    Magazine covers
    Share
    03:05 AM
    Collections
    Collections Settings
    Board
    7 ITEMS
    Design meeting inspiration
    Share
    WeTransfer Mobile App

    View Slide

  7. 2 ITEMS — SHARED
    Magazine covers
    Share
    03:05 AM
    Collections
    Collections Settings
    Board
    7 ITEMS
    Design meeting inspiration
    Share
    2 ITEMS — SHARED
    Magazine covers
    Share
    03:05 AM
    Collections
    Collections Settings
    Board
    7 ITEMS
    Design meeting inspiration
    Share
    2 ITEMS — SHARED
    Magazine covers
    Share
    03:05 AM
    Collections
    Collections Settings
    Board
    7 ITEMS
    Design meeting inspiration
    Share
    2 ITEMS — SHARED
    Magazine covers
    Share
    03:05 AM
    Collections
    Collections Settings
    Board
    7 ITEMS
    Design meeting inspiration
    Share
    WeTransfer Mobile App

    View Slide

  8. Rabbit
    Okapi
    Nuke
    Instabug
    Tatsi
    UINotifications
    WeTransfer Mobile App
    Coyote Share extension

    View Slide

  9. WeTransfer Mobile App
    Rabbit
    Alamofire
    Ocarina
    Nuke
    Okapi
    Trekker
    Firebase
    Fabric
    Instabug
    Tatsi
    UINotifications

    View Slide

  10. Rabbit
    Our core functionalities framework
    • Content downloading
    • Content uploading
    • Content syncing
    • Contains basically all network related features
    WeTransfer Mobile App
    Rabbit
    Alamofire
    Ocarina

    View Slide

  11. Okapi
    Our tracking framework
    • Crash reporting
    • Analytics
    • A / B testing
    WeTransfer Mobile App
    Okapi
    Trekker
    Firebase
    Fabric

    View Slide

  12. How do we work?

    View Slide

  13. “Sharpen the Saw”
    Habit No. 7

    7 Habits of Highly Effective People by Stephen

    View Slide

  14. WeTransfer Mobile App
    “Sharpen the Knife”

    View Slide

  15. What does it mean?
    Covey uses the common analogy of a woodcutter who is sawing
    for several days straight and is becoming less and less
    productive. The process of cutting dulls the blade. So the solution
    is to periodically sharpen the saw.
    You’re more productive with a sharpened blade!
    WeTransfer Mobile App

    View Slide

  16. In other words
    Investigate time in your setup.
    • Automate common tasks
    • Setup CI with tools like Danger & SwiftLint
    • Test your code and prevent bugs
    • Save yourself time to review code structure instead of style
    WeTransfer Mobile App

    View Slide

  17. Continuous Integration
    Each pull request need to be reviewed by two developers to
    conduct code quality.
    • Merging is blocked
    • Merging is only allowed after CI succeeds
    • CI runs tools like Danger & SwiftLint
    • CI runs UI and Unit Tests
    WeTransfer Mobile App

    View Slide

  18. Stop saying “you forgot to …” in code review - http://
    danger.systems
    • Define custom rules
    • Automate your common review tasks & save time
    • Works with Github, Gitlab & Bitbucket
    WeTransfer Mobile App

    View Slide

  19. WeTransfer Mobile App

    View Slide

  20. WeTransfer Mobile App

    View Slide

  21. WeTransfer Mobile App
    • Big PRs
    • Work In Progress
    • Are the tests updated?
    • Use weak instead of unowned
    • Use final for classes
    • Disable rules for files using // danger:disable final_class
    And more!
    Custom rules

    View Slide

  22. WeTransfer Mobile App

    View Slide

  23. WeTransfer Mobile App
    • XCOV Code coverage reports
    • SwiftLint Integrate SwiftLint warnings in PR reviews
    A lot more like Changelog, Slack, Todoist. Checkout http://
    danger.systems/
    Danger plugins

    View Slide

  24. WeTransfer Mobile App
    A tool to enforce Swift style and conventions, loosely based on
    GitHub's Swift Style Guide.
    SwiftLint

    View Slide

  25. WeTransfer Mobile App

    View Slide

  26. WeTransfer Mobile App

    View Slide

  27. WeTransfer Mobile App
    Using SwiftLint and Danger for Swift Best Practices
    https://medium.com/developermind/using-swiftlint-and-danger-for-swift-best-practices-48432e4e268a
    Running SwiftLint in Continuous Integrations
    https://buildingvts.com/lessons-learned-integrating-danger-and-swiftlint-4683aecef830
    How to get started?

    View Slide

  28. In other words
    Investigate time in your setup.
    • Automate common tasks
    • Setup CI with tools like Danger & SwiftLint
    • Test your code and prevent bugs
    WeTransfer Mobile App

    View Slide

  29. Testing
    What did we learn?

    View Slide

  30. Testing
    Making sure our testing environment is rock solid.
    • CI & Tests
    • Share extension testing
    • Offline testing
    WeTransfer Mobile App

    View Slide

  31. CI & Tests
    Automatically run tests and require to complete successfully
    • Unit tests run for each PR
    • Code coverage for changed files is reported
    • Snapshots will be generated for merged changes in develop
    WeTransfer Mobile App

    View Slide

  32. Share extension testing
    It’s hard, but doable
    • Unit tests
    • UI Testing launching multiple apps like Safari
    WeTransfer Mobile App

    View Slide

  33. WeTransfer Mobile App

    View Slide

  34. Offline testing
    Mock requests using a custom URLProtocol
    • Captures all outgoing requests
    • Tests fail when a request is not registered as Mock
    • Works with URLSession, so it supports Alamofire
    WeTransfer Mobile App

    View Slide

  35. Using a custom
    WeTransfer Mobile App

    View Slide

  36. WeTransfer Mobile App
    Data Request MockURLProtocol
    Mock
    available?
    Return mocked data
    Fatal error

    View Slide

  37. Registering a mock
    WeTransfer Mobile App
    Mock requests for all requests with extension png
    • Data type for correct content-type header
    • Status code which will be returned
    • Response data which will be returned

    View Slide

  38. Registering a mock
    WeTransfer Mobile App
    Specific URL mocking

    View Slide

  39. Registering a mock
    WeTransfer Mobile App
    Specific URL mocking

    View Slide

  40. Open sourced SOON!
    Keep track of https://github.com/WeTransfer/
    Mocker

    View Slide

  41. Open sourcing
    What did we learn?

    View Slide

  42. Open sourcing
    Write code with open sourcing in mind (Open Source Driven Development,
    OSDD?? :-)
    • Build everything in a modular way
    • Results in reusable code
    • Write tests ASAP
    WeTransfer Mobile App

    View Slide

  43. Our frameworks
    UINotifications
    Ocarina
    Trekker
    Tatsi
    Mocker (soon)
    WeTransfer Mobile App
    https://github.com/WeTransfer/UINotifications

    https://github.com/Awkward/Ocarina

    https://github.com/Awkward/Trekker

    https://github.com/Awkward/Tatsi

    https://github.com/WeTransfer/Mocker

    View Slide

  44. UINotifications
    WeTransfer Mobile App
    Present custom in-app notifications easily in Swift
    • Present your own custom view as an in-app Notification
    • Create custom presentation styles
    • Update content during presentation

    View Slide

  45. Ocarina
    WeTransfer Mobile App
    Get metadata and Open Graph information from URLs
    • Fetch basic metadata for URLs using the OGP protocol or basic HTML tags
    • Memory cache of metadata for each URL
    • Prefetch a set of URLs to make views more responsive
    • URL information can include: type, title, description, image, image size, favicon, and Apple
    touch icon

    View Slide

  46. Trekker
    WeTransfer Mobile App
    A wrapper to easily swap out different analytics services or to support multiple
    analytics services at once.
    • Works best with event based analytics services like Mixpanel, Amplitude, 

    Firebase, and Answers by Crashlytics.

    View Slide

  47. Tatsi
    WeTransfer Mobile App
    A drop-in replacement for
    UIImagePickerController with the ability to select
    multiple images and/or videos

    View Slide

  48. Open sourcing
    Think with the idea of open sourcing
    • Open source one of your frameworks
    • Define your way of open sourcing
    • Setup an environment which can be reused
    WeTransfer Mobile App

    View Slide

  49. Conclusion

    View Slide

  50. Conclusion
    Our Workflow at WeTransfer
    • Sharpen the 

    - Invest in automating common tasks (CI, Danger, SwiftLint)

    - Take time for setting up your test environment
    • Write code with open sourcing in mind
    WeTransfer Mobile App

    View Slide

  51. THANKS!
    Antoine van der Lee
    @twannl

    View Slide