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.

6e1f73fb2fde36f8b9af1ca27db3ac13?s=128

CocoaHeadsNL

July 19, 2017
Tweet

Transcript

  1. Building the new WeTransfer
 mobile app

  2. “Our ideal way of working after building the new WeTransfer

    app as a team”
  3. Agenda • What did we build? • How do we

    work? • What did we learn? WeTransfer Mobile App
  4. What did we build?

  5. WeTransfer Mobile App

  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
  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
  8. Rabbit Okapi Nuke Instabug Tatsi UINotifications WeTransfer Mobile App Coyote

    Share extension
  9. WeTransfer Mobile App Rabbit Alamofire Ocarina Nuke Okapi Trekker Firebase

    Fabric Instabug Tatsi UINotifications
  10. Rabbit Our core functionalities framework • Content downloading • Content

    uploading • Content syncing • Contains basically all network related features WeTransfer Mobile App Rabbit Alamofire Ocarina
  11. Okapi Our tracking framework • Crash reporting • Analytics •

    A / B testing WeTransfer Mobile App Okapi Trekker Firebase Fabric
  12. How do we work?

  13. “Sharpen the Saw” Habit No. 7
 7 Habits of Highly

    Effective People by Stephen
  14. WeTransfer Mobile App “Sharpen the Knife”

  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
  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
  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
  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
  19. WeTransfer Mobile App

  20. WeTransfer Mobile App

  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
  22. WeTransfer Mobile App

  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
  24. WeTransfer Mobile App A tool to enforce Swift style and

    conventions, loosely based on GitHub's Swift Style Guide. SwiftLint
  25. WeTransfer Mobile App

  26. WeTransfer Mobile App

  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?
  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
  29. Testing What did we learn?

  30. Testing Making sure our testing environment is rock solid. •

    CI & Tests • Share extension testing • Offline testing WeTransfer Mobile App
  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
  32. Share extension testing It’s hard, but doable • Unit tests

    • UI Testing launching multiple apps like Safari WeTransfer Mobile App
  33. WeTransfer Mobile App

  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
  35. Using a custom WeTransfer Mobile App

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

    data Fatal error
  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
  38. Registering a mock WeTransfer Mobile App Specific URL mocking

  39. Registering a mock WeTransfer Mobile App Specific URL mocking

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

  41. Open sourcing What did we learn?

  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
  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
  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
  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
  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.
  47. Tatsi WeTransfer Mobile App A drop-in replacement for UIImagePickerController with

    the ability to select multiple images and/or videos
  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
  49. Conclusion

  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
  51. THANKS! Antoine van der Lee @twannl