React Native & the Power of Components
When you combine React Native with a design system, great things can happen. Why? Because they both leverage the power of components. And what great things will happen?
- Your cross-platform apps (that work on different platforms, like Android and iOS) can offer a non-compromising, native user experience.
- You can seriously boost productivity, as design and development grow closer together.
This is an abbreviated version of the article in Shift, In The Pocket’s annual report on the 10 next big digital trends. Download Shift and read the full version.
React Native and design systems: a great fit
What is React Native?
You may have heard of React, the Javascript library introduced by Facebook to create web interfaces more efficiently. With the birth of React Native, React has been introduced to mobile platforms, allowing developers to build apps for multiple platforms at once (mainly iOS & Android) with a largely common codebase.
React Native has a strong focus on declarative user interfaces and has a component-based architecture. This means that user interface elements can be implemented easily while containing any related logic, allowing for maximum reusability.
What is a design system?
A company’s design system is a well-documented, overarching set of rules and agreements on how to create products and communications. It can be described as a centralised source of “design truth” for all departments, containing information on colours, typography, layout, grids, icons, etc. They promote a shared vocabulary that facilitates communication, breaks silos and thus speeds up the design and development process.
Want to learn more about design systems? Read our blog post on why you need a design system.
It soon becomes clear why design systems and React Native are such a good match. React Native doesn’t enforce any architecture of its own, except for the fact that it is component-based. The focus lies entirely on the user interface layer of the application. Components keep track of their own data and work completely independent from each other.
The power of separate assets
As today’s designers are moving away from tools like Photoshop. They no longer create screens of content beforehand and afterwards slice out the assets that developers need. Instead, they are working bottom-up, embracing new tools like Sketch. With these tools, they create separate assets that can easily be reused or combined into larger components.
Developers can easily use and reuse them, leaving more time for higher-level thinking.
By incorporating these separate assets (styles, patterns, and components) into a design system, developers can easily use and reuse them, leaving more time for higher-level thinking. It also empowers them to implement new features without relying on redlines or back-and-forth pixel-tweaking with a designer.
A component-based architecture for performant apps
An interface is defined in terms of top-level components, which are composed of smaller lower-level components, which in turn are composed of even smaller lower-level components and so on. This is called atomic design, a term coined by Brad Frost. Creating and composing multiple components, and having them rendered based on each state (set of data) of your application, makes it fairly easy to construct entire screens of content that work together clearly and efficiently.
- Foundation elements (icons, buttons or avatars,…): share primitive data (colours, fonts,…), are stand-alone and contain no logic.
- Building blocks (form elements, list items, search bars, …): at most contain logic for some limited set of user interaction specific to that component, mostly influencing how it is rendered or behaves.
- Sections of the interface (sidebar, header, alphabetic list, …): still not tied to any real data or business logic
- Screen or container: data and logic get bound and updates are triggered
Combined with a really efficient rendering strategy (which will only re-render the parts of components affected by changes in the associated data) this results in very performant apps.
A great developer experience to boost productivity
Facebook offers really great tools on top of React: things like instant reloading (no compiling, no more waiting) and debug inspectors. Combine this with an entire Javascript community that provides a heap of useful tools and libraries (testing, linting, …), and you’ve got a really great developer experience that will boost your productivity and move your project to the next level.
Meanwhile, the React community has stood up to fill in the void that React left in some areas, and crafted some handy tools and libraries on top of it. Solutions that focus on things like (centralised) state management (Redux) and side-effect management (Sagas) contribute to a truly layered application, effectively moving your project towards an even higher level of separation of concerns, while adhering to the single responsibility principle.
These solutions contribute to a truly layered application, moving your project towards a higher level of separation of concerns, while adhering to the single responsibility principle.
All of the above promises an exciting future for React Native and mobile app development in general!
Shift into the next gear with React Native
More than ever, React Native is a viable option if you want to speed up development and have the benefit of targeting multiple platforms at the same time.
Its component-based architecture provides a clear system to create mobile apps. Use it to streamline the way designers and developers work together. This proves to be hugely beneficial given that they share the same vocabulary and concepts. For designers, it’s a logical part of their design systems. For engineers, it is a paradigm that allows for modular, scalable and consistent apps, all while providing common ground for everyone to reason about.
Even the smallest apps will benefit from this approach, since it’s a strategy that works both on the short and long term.
Want to read the full version of this article? Download Shift, In The Pocket’s annual report on the 10 next big trends in digital.
Originally published at inthepocket.mobi.
