Image for post
Image for post
Types could save your startup. Photo by Deon Black on Unsplash

I used to object to the idea of TypeScript. To me, it didn’t seem to make sense to add static typing to a language that was designed not to have it. I started my career as a C++ Graphics Engineer, before transitioning to being a Front-End Designer and Developer. So static typing wasn’t anything I wasn’t already familiar with.

Moving to JavaScript showed me how fast and easy it was to express various forms of data manipulation, especially with newer versions of JavaScript (ES6 onwards), and it seemed like working, rich applications could be built lightning fast. …


Image for post
Image for post
Photo by Yura Fresh on Unsplash

This year I wrote and released Still, a mobile app for iOS and Android. Still is an app designed to help people with Anxiety and OCD relax. I thought of the idea for during the first COVID-19 lockdown of 2020, as I found myself struggling with Anxiety and figured I could make the tools I needed to help manage it, and maybe I could help others too. I built it out in late August 2020, and released it onto stores in mid-September.

Now before I get into the details of what exactly I learned, I think it’s important to preface this article with a little…


Image for post
Image for post
Photo by Anne Nygård on Unsplash

Writing React applications can get same-y. We often find ourselves going over the same patterns of defining the same component behavior over and over, and one can start to wonder how we can make these patterns more and more DRY.

React Hooks are awesome. By abusing the power of JavaScript closures and with a few caveats, it’s possible to hold state in a function. How cool is that?

(Before I get shouted down by C developers who’ll tell me a static variable in a function is effectively stateful, I know.)

Hooks do not only permit stateful behaviour, but they’re also reactive. You can use hooks to react to changes in the props of a component, store state, store references to mutable values, etc. And that’s just using the hooks shipped by default. Hooks are composable too. This means I can write my own hook, that uses other hooks. By combining these, One can effectively inject state, behavior or reactivity into any functional component. …


Image for post
Image for post
Photo by Oskar Yildiz on Unsplash

Ah, React Native animations. Long-considered to be one of the pain points of React Native development, due to their steep learning curve and being packed with potentially performance-crushing pitfalls, creating delightful animations and gesture-based interactions has been hard. But why so tricky? The answer lies in React Native’s architecture, namely with something called the bridge. In order to understand why, let’s have a brief look at React Native’s architecture to find out more.

Architecture

In order to provide close-to-native performance, React Native uses a dual-thread architecture – a JS thread, which runs your React Native code, and a native UI thread. Your React Native components are effectively specifications for native UI components – layout is taken care of by a Flexbox engine – you in theory get Native UI performance (in reality, your mileage may vary) but get to use your favourite UI framework, React, with some caveats. These two threads communicate via a glorified pipe with some extra features known as the bridge. This bridge is fully asynchronous, and lets one call to native code from JS, also asynchronously.


Image for post
Image for post
Photo by Max Chen on Unsplash

We’ve all come across stuff like this before. You’ve got a component that can display errors locally, but calls external code:

import { someApiCall, someOtherApiCall } from './api';const SubmitButtonGroup = () => {
const toast = useToast();
return (
<>
<Button onClick={someApiCall}>
Call
</Button>
<Button onClick={someOtherApiCall}>
Go
</Button>
<>
)
}

Note: I’m being very generic here with my component names, and an imaginary toast hook based off the one from Chakra UI.

Looks fine, right?

But what if either of those calls fail?

You tell yourself you need to write an error handler. …

About

Tom Norton

I’m a Freelance Front-end Developer and UI Designer. Also co-founder of Ding Labs.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store