October 22, 2019

RNR 140: Best Practices with Zain Sajjad

45 minutes

In this episode of React Native Radio Josh Justice interviews Zain Sajjad. Zain leads the team of frontend developers at Peekaboo Guru. They use React on their web interfaces and React Native on their mobile interfaces. Zain and Josh discuss some of the work Zain is doing and overviews his recent blog post outlining best practices for React developers.

Zain explains how smooth the transition was to React Native coming from React. They had a good knowledge of how React worked from their web applications which made learning React Native easy. Zain shares why they chose React Native, they wanted a quality frontend and a lot of code reusability across platforms. Josh and Zain consider some of the other benefits of using React and React Native, including maintaining the same mental model and libraries.

Zain discusses their recent update and the Hermes engine. He explains how it makes apps more performant and with better execution. Josh and Zain discuss how they measure performance. Zain shares the tools they use at Peekaboo Guru and their goals in making the whole app more performant not just one aspect of the app.

Navigation is the next topic they discuss. Zain explains how his team tried both React Native Navigation and React Navigation. He compares the tool, explaining why he would choose React Navigation for most applications. Zain shares the improvements that have been made to React Navigation in the past couple of years.

They are currently using React Native Navigation which was better for their application at the time in order to maintain performance on low-end android phones. Zain explains how low-end android phones can affect performance and how they test for low-end phones.

Josh and Zain move on to discuss Zain’s blog article outlining best practices for react developers. Josh considers how difficult it must have been to pinpoint best practices for React, with its unique approach to programming. Zain explains that these best practices are best for those unfamiliar with React but can benefit everyone. Josh shares some of his own advice for developers new to React. Mainly, don’t be discouraged by the lack of structure, learn patterns that work from more experienced developers and don’t be afraid to experiment.

The first practice explained in the blog article is Container and Presentation components. Zain explains that this is one key factor in keeping applications simple and scalable. It stems from cognitive condense, by separating and containing things, developers can focus on one thing at a time. Zain explains the best way to do this. He and Josh consider the benefits of using this in React and React Native.

Next, Zain explains some React Architecture best practices. He tells Josh its all about having good constraints available and being flexible as you build. Josh considers how this changes the way he builds his applications, being more fluid with his files based on the needs of the application.

Another best practice discussed is called React Wrapper Component Minimized. While working with large scale React apps developers tend to use a lot of third-party libraries. The best practice Zain describes is to wrap the library in a component, this allows you to use the library but also to switch it out more easily in the future if you find a better library. You don’t have to do this with every library just the ones that are used everywhere in your app so you can easily switch it out. Josh explains the power of this practice.

Uniformity Across React Components, this best practice makes components easier to read and adapt. Zain explains how implementing this best practice in his team saved the a lot of time. He and Josh consider how consistency could benefit a team of any size.

Zain and Josh finish up by touching on the last few best practices. Testing React components, how linting your code can help you avoid problems that may occur once your code is executed. Portability of code and keeping it usable for other platforms. Making React testing less annoying and deploying React Apps using CI/CD tools, for which Zain and Josh share resources.

Panelists

Josh Justice

Guest

Zain Sajjad

Sponsors

Infinite Red

Adventures in Angular

Adventures in Blockchain

CacheFly

Links

RRU 080: Navigating React Navigation with Zain Sajjad

React Best Practices: Maintaining Large Scale Projects