Announcing: React Native Katas
In the beginning, designers used Photoshop or Illustrator to design for digital media, be it Web or Mobile. They then went through a precision-critical task of slicing their designs, in a way that required them to imagine what would be the correct slicing strategy, come development time.
Developers took these slices, bitched and moaned, and needless to say, designers were slicing and dicing their designs again. Repeat until pixel perfect. People lived with this. The tensions were always there. For some, it was unacceptable.
The Sketch Era
Sketch came around and turned things upside down. Sketch connected with reality by showing that designers and developers could work in a more harmonious way. Suddenly, it wasn’t crazy for a developer to have Sketch installed locally anymore (it was an order of magnitude cheaper than Photoshop or Illustrator). In addition, Sketch opened up an ecosystem, driven by its simplicity of design. Sketch also respected Mobile and made it a first-class citizen by allowing you to treat screen resolutions first-hand, amongst other perks.
Still, even that wasn’t good enough. Designers suddenly needed to own CSS, Sass, and even code. But, I still remember the browser wars, the era where CSS had a zillion different ways to break, depending on which browser and operating system combination you used. Today, that still holds true, but less so. Designers should not handle that; but they do. To do a proper design hand-off, a lot of designers are picking up front-end and CSS and other styling skills these days to varying degrees of success, but it is far from perfect.
Design hand-off: React Native Edition
React Native’s styling and React’s composition model, in addition to the developer experience, make the perfect toolchain a designer can use for design hand-off. There is only one CSS-like variant to learn. There are no sucky CSS parts. There is a sane layout mode (flex). It sort of feels like you’re doing HTML, without the burdens of foundations and bootstraps. The experience is very physical (does not feel like “coding”) and very simple, and the tooling is already baked.
But how can you possibly have the guts to hand a cutting edge technology to non-technologists and have them not cut themselves, learn quickly, and be positive about the overall experience?
I had to build something to answer that.
React Native Katas
I feel that there is a whole world to be discovered about React Native styling and how designers approach it. I can only hope that is the first step toward discovering that world.
React Native Katas (RNK from now on) is an interactive hands-on experience for designers and beginner developers alike. Built on (and runs in) React Native itself, as a designer — RNK forces you to dog-food on the tools and mindset to understand developers better, and as a designer or developer — to learn React Native the hard way by doing, rather than by reading.
RNK is an orchestrated series of drills, or katas, that deliberately but gently help you build your muscle memory, by letting you attempt to design and compose React Native views, and to fail and fix them as many times as it takes to win it.
As a designer, you need to have a code editor with a simple npm setup (which you probably have if you’re doing front-end), and a basic grasp of files and folders (which again, you probably already have).
As a developer, you should feel at home with what ever tools you already have.
Up until now, I’m very happy with how RNK has been doing with designers, and I’ve been pleasantly surprised that even experienced developers like it (thanks Yoni Weisbrod)
RNK is open source on Github, and that means you can drive home your solutions and suggest improvements, as well as make up new and exciting Katas yourself by submitting a pull-request (that will be happily accepted!).
Go ahead and start building your React Native chops!
One Last Thing
Stickers!
Send me an email: dotan/at/paracode.com and I’ll make sure these cross an ocean to get to you!
