Responsive? React Native and Tackling platpourri

IMG_3746.jpgIt was a moment of joy!

Sometimes ideas flow, very suddenly, abruptly, and they seem just such perfect fit. Then comes the amazement; why didn’t I think this before?

I’ve done mobile software development on three rather distinct stages of the ecosystem: very early (2000-2001), Single Page Apps, and now Current Age of Cross-platform Apps (2016- ).

Open source components are all the rage, and there’s plenty of schools of thought to follow. Once you settle, you might settle for React Native.

My tool for the trade is React Native, for now. That’s what I’m giving an example about next.

Initiation rites

Many developers from the World wide web, who come to RN, transition rather quickly from the syntax shock, on to inspect and learn the real joys and capabilities of the new platform.  Tooling issues apart, things start to look very good. The initial pain of creating a component subsides, and you hit that 17 lines-and-no-bugs-look-ma! bar. Keep the compiler in the loop, and things are fine. Emulators hot-reload your creations, and the cycle feels good. React Native itself drips and distills to newer versions, like that Elixir Generator of Clash Royale.

The “dark clouds” equation

Every mobile developer probably at some point of their lives thinks about this kind equation:

B = OS * D * ORIENT

The number of branches to develop (&test) is an equation involving multiplication between three factors:

  • OS: operating systems (iOS, Android, Windows Mobile)
  • D: distinct display sizes
  • ORIENT: screen orientation (landscape/portrait)

Plugging mere (2, 3, 2) gives you 12 branches. Auch!

In web-world, you’d have to plug another major multiplication factor, the number of Web Browsers (Opera, Mozilla, Chrome, IE, Safari, perhaps their mobile equivalents, too!). So, in the mobile development this is rather optimistic figure.

Developing a strategy to tackle platpourri

Insert “platform” and “potpourri”, and you have the platpourri. One has to tackle this somehow, “on an intelligent way and in the proper level”. Chaos containment is evident for a sane developer life.

React Native gives you a freeride!

React Native actually drops the OS completely from the Dark Clouds equation, which is great! That means you’re down to 6 branches. Androids come in a chameleon infinite variety, that might prove to be a bit of headache. Anyway, a strategy will formulate.

Then comes the big question: “But wait! Where’s all those responsive design mechanisms in React Native’s components??”

They seem absent.

Responsive, mobile; device independent pixels.

Responsive, mobile, device independent pixels.

Are you getting it?!

Me neither.

No, wait! Hold on for part 2 – it’s boiling. I might have something up my sleeve.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s