Antoine van der Lee - Building the new WeTransfer app

Slide 1

Slide 1 text

Building the new WeTransfer  mobile app

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

What did we build?

Slide 5

Slide 5 text

WeTransfer Mobile App

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Rabbit Okapi Nuke Instabug Tatsi UINotiﬁcations WeTransfer Mobile App Coyote Share extension

Slide 9

Slide 9 text

WeTransfer Mobile App Rabbit Alamoﬁre Ocarina Nuke Okapi Trekker Firebase Fabric Instabug Tatsi UINotiﬁcations

Slide 10

Slide 10 text

Rabbit Our core functionalities framework • Content downloading • Content uploading • Content syncing • Contains basically all network related features WeTransfer Mobile App Rabbit Alamoﬁre Ocarina

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

How do we work?

Slide 13

Slide 13 text

“Sharpen the Saw” Habit No. 7  7 Habits of Highly Effective People by Stephen

Slide 14

Slide 14 text

WeTransfer Mobile App “Sharpen the Knife”

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

WeTransfer Mobile App

Slide 20

Slide 20 text

WeTransfer Mobile App

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

WeTransfer Mobile App

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

WeTransfer Mobile App

Slide 26

Slide 26 text

WeTransfer Mobile App

Slide 27

Slide 27 text

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?

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Testing What did we learn?

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

WeTransfer Mobile App

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Using a custom WeTransfer Mobile App

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Registering a mock WeTransfer Mobile App Specific URL mocking

Slide 39

Slide 39 text

Registering a mock WeTransfer Mobile App Specific URL mocking

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Open sourcing What did we learn?

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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.

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Conclusion

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

THANKS! Antoine van der Lee @twannl