As a developer or a designer, you may work on an application that has different functionality depending on what features or capabilities are made available to the user. This article describes how to approach this problem, both from a usability and architectural viewpoint, while maintaining a primary focus on the experience a user has with your application.

What is User Flow?

User flow is how a user interacts with your application to discover and use it’s intended functionality. How a user enters the application and moves between features, makes decisions to create an account, subscribe, or purchase something within the app. Aside from looking…

This article will demonstrate a simple approach to utilizing Flutter Navigation 2.0 to construct an application built as a Stack.

The full code for this sample can be found here.

While the following may look like a lot of information to build a simple Stack Navigator, it will actually provide a solid base for expansion into more complex navigation strategies. Additionally, implementing the following allows for simpler handling of Deep Linking (Universal Links / App Links) if you wish to implement them in your application at a later date.

Managing shared data across multiple components can be a challenge for applications. Across many apps I have worked on, I have seen variations or combinations of prop-drilling, use of redux, and publish-subscribe models shared between components. All of the above get the job done but can potentially suffer performance hits as re-renders traverse the tree in order to update the individual components interested in the data.

Recoil is a small library provided by Facebook that attempts to solve specific use cases with regards to sharing data across components that they may not be related in the React tree.

I recommend…

You.i Engine One takes advantage of specific video player implementations on each supported platform. The platform specific players can be moved and manipulated through the Engine with basic interaction at the JavaScript level. In addition to providing information to the players, the position of the player and integration into your app design can be easily achieved using both the AE workflow or standard Animation libraries with React Native.

Sample Squeeze Credits

This article explains how that abstraction layer works, and how the platform players are rendered where you want them to be rendered to get the best user experience possible.

Platform Players

Each platform supported…

You.i Engine One is a cross-platform SDK and rendering engine that utilizes React Native and Adobe After Effects to create single code base applications across a large number of supported platforms.

Since the Engine is responsible for rendering, we need to discuss how your application is rendered when you write your application, and ways that you can proactively prevent performance hiccups by being aware of a concept called Overdraw.

Painter’s Algorithm

You.i Engine One renders using the Painter’s Algorithm. This means it draws one layer at a time, starting at the back and moving towards the front. The result is that some…

A Quick Recap on Scene Trees

When building an application that will ultimately be rendered by You.i Engine One, the JSX (Facebook Components or After Effects Compositions) that you create will ultimately be represented as a Scene Tree. This Scene Tree is a collection of nodes with relationships (parent-child-sibling) to each other that represent the structure of your application.

When constructing a Composition in After Effects, the relationships are defined by which compositions are nested in other compositions.

Out-of-Tree Platform Support

When writing Facebook React Native applications, a typical pattern is to use the Platform to split out code you want to isolate to either iOS or Android — Facebook documentation has great information on it here. In a similar fashion to both iOS and Android, which are represented by ios and android respectively, You.i Engine One applications identify (as of 5.9+) as the platform youi. Prior to 5.9, You.i applications identified as ios.

All platforms supported by You.i Engine One will report as youi when building with the You.i Engine One Solution.

This means that when using third party native…

A major value gained by using You.i Engine One is creating a single codebase to service all supported platforms. The reason this is possible is because You.i Engine One is a rendering engine, written in C++, that operates cross-platform.

Some of the platforms supported by You.i Engine One

Platform specific code that does exist is presented through abstractions. These abstractions allow the code that you write to remain platform agnostic. With the introduction of React Native to the You.i Engine One stack, developers can also write JSX code treating the engine as a single platform.

This article will broach the subject of writing platform specific code for those situations…

The Scene Tree

All JSX Components written in a React Native application are ultimately translated to platform level nodes understood by the underlying rendering engine. The representation of these nodes can be described as a Scene Tree. It contains the relationships and contextual information needed by the engine to render the application.

This article will describe how to minimize the changes on the scene tree, which may be expensive in certain situations on low end devices, in order to provide the best user experience possible while managing memory constraints.

Creation and Destruction on a whim

A common pattern when building an application in either ReactJS or React Native is…

This article will discuss how to bring React Navigation into your You.i Engine One application and how to customize the experience to take advantage of animation capabilities of the After Effects Workflow.

You.i Engine One, React Native, and After Effects

You.i Engine One is a cross-platform rendering engine that supports building apps using React Native and After Effects. For a refresher on how these three technologies come together check out this article on the design and development approaches available to you when building a You.i Engine One React Native application.

Support for React Navigation on all You.i Engine One platforms

The React Navigation library is a great way to manage navigation within your application by providing tools to…

John Cassidy

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