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.

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