December 18, 2018
December 18, 2018
A lot has changed since that last meeting almost one-and-a-half year ago. Back then barely any of the attendees worked with React Native, vast majority where just interested in this technology, mostly web developers wondering how difficult it would be to start developing mobile apps. But now, the ratio was completely different. Half of the attendees works with React Native on a daily basis, some of them in huge organisations.
Thanks to the support of Skyscanner, we could use their great offices to host the meeting. Also, one of their software engineers gave a great introduction to using Detox for end-to-end testing of your React Native applications.
However, the part that I particularly enjoyed came after the talks. Almost all of the attendees stayed to chat with their fellow developers, exchange ideas, problems and solutions. I believe that nurturing such local communities is really important, so it was great to see that happen.
As Brains & Beards, we’re really happy that we can help bring this community together.
In case you couldn’t attend, here are the notes that I made during the presentations. I hope they’re useful for both the attendees that wanted to refresh their knowledge and those who unfortunately couldn’t join us.
As mentioned before, this talk was delivered by Samuel Parra from Skyscanner. Sam is a test engineer who turned into a software engineer and his QA background made his perspective particularly interesting. He started by stating that it’s really important to test like the real user would use the application and not only unit test our modules in separation. That’s what they use Detox for in Skyscanner.
After the initial introduction, Sam walked us through how setting up detox test runner for your app looks like. Then he showed us the API he likes to use for writing tests. Basically, he creates a robot/service that knows the nitty-gritty interaction details (for example that in order to book a hotel, it needs to click the third button of a particular component) and use this higher-level API in his tests. The goal here is to have more readable tests that are easier to maintain when the UI changes.
He also mentioned different problems you might encounter when writing your Detox tests:
testIDinstead, to avoid such issues.
He also shared a trick how to speed up your tests by avoiding costly setup. Normally the app would start on the initial screen and if we want to test something that’s deeper in the hierarchy, we’d have to first navigate there — click buttons, switch screens, render everything along the way, etc. However, there’s a faster way. We can use the
openURL API and a deep-link to our content nested somewhere deeper in the app to go there straight away.
Summing up, Detox offers as a great advantage of being able to automate the most common manual testing scenarios, saving us a lot of time. It’s also under constant development, so new features are being added and bugs are being addressed.
On the flip side, we have to remember that end-to-end tests are inherently slow (because they touch the whole stack of your application), which means we can only reasonably maintain a small number of them. This means we’re able to test the happy path through our application to make sure the most important operations are necessary. However, we won’t be able to test all the edge cases.
Another issue is that Detox tests (like other end-to-end testing solutions) are a bit flaky and sometimes fail for some random reasons like connection timeouts. The error outputs also leave something to be desired, because it’s a bit of an effort to figure out the root cause of the failure from the error message.
The second talk that night was about Lottie — a framework that lets us easily embed Adobe After Effects animations in mobile applications. Lottie project is maintained by Airbnb, but the React Native wrapper for the project is community supported and we had a treat of hearing about it from its maintainer: Emilio Rodriguez Martinez.
He shared with us the basics of working with Lottie in React Native starting with the setup in out mobile app code. Then he discussed how to prepare the animation: first in After Effects, than using Bodymovin to export it as JSON and finally embedding it in our app using Lottie’s React Native wrapper. He also shared a valuable source of examples that we could play with or even use in our apps: LottieFiles.
Finally, he touched on a few challenges we might face when working with Lottie in React Native:
It was a really enjoyable evening that we spent with fellow React Native users from our local community. We’re hoping to be able to meet again soon in even greater numbers. Again, thanks to Skyscanner for letting us use their Barcelona office and help with all the logistics 🙇♂️
If you want to join our local React Native community, you can do so by joining the React Native Barcelona group on Meetup. Hope to see you at our future meetups! 👋
If you liked this post, why don't you subscribe for more content? If you're as old-school as we are, you can just grab the RSS feed of this blog. Or enroll to the course described below!
Alternatively, if audio's more your thing why don't you subscribe to our podcast! We're still figuring out what it's going to be, but already quite a few episodes are waiting for you to check them out.