DEV Community: Sergey Shpadyrev

How to make your colleauges use strict React component structure

Sergey Shpadyrev — Wed, 20 Aug 2025 07:58:48 +0000

When working on React applications I often encounter the fact that my colleagues mix JSX, CSS-in-JS styles, logic, and component types in one file. It is very difficult to work with such a mess. Even if you insist on separating logic, styles, and types into separate files, this is sometimes done but sometimes not. To introduce a strict component structure, I wrote a simple library called react-component-structure.

https://github.com/sergeyshpadyrev/react-component-structure

It works very simple. Any component must be divided into three hook files and a file with types:

-| Component
    -| index.ts
    -| logic.ts
    -| render.tsx
    -| style.ts
    -| types.ts

In the logic.ts file we write the useLogic hook - the component controller, which includes all its business logic - all the useCallback, useEffect, useMemo hooks, and things like that. In this hook we have access to the component's props.

import { useCallback, useState } from 'react';
import type { Props } from './types';

const useLogic = (props: Props) => {
    const [count, setCount] = useState(props.defaultCount);

    const onClickMinus = useCallback(() => setCount((c) => c - 1), []);
    const onClickPlus = useCallback(() => setCount((c) => c + 1), []);

    return {
        count,
        onClickMinus,
        onClickPlus,
    };
};

export default useLogic;

In the styles.ts file, we place the useStyle hook with our component's styles. Here we can use inline styles, CSS-in-JS, or Tailwind. In this hook we have access to our component's props and logic.

import type { Props } from './types';
import useLogic from './logic';
import { useMemo } from 'react';

const useStyle = (props: Props, logic: ReturnType<typeof useLogic>) =>
    useMemo(
        () => ({
            counter: { fontSize: logic.count + 10 },
            title: { color: props.color },
        }),
        [logic.count, props.color],
    );

export default useStyle;

In the render.tsx file, we place the useRender hook with JSX. In this hook we have access to the component's props, its logic, and styles.

import type { Props } from './types';
import type useLogic from './logic';
import type useStyle from './style';

const useRender = (props: Props, logic: ReturnType<typeof useLogic>, style: ReturnType<typeof useStyle>) => (
      <div>
          <div style={style.title}>Hello {props.greeting}!</div>
          <div style={style.counter}>Count: {logic.count}</div>
          <div onClick={logic.onClickMinus}>Decrease</div>
          <div onClick={logic.onClickPlus}>Increase</div>
      </div>
  );

export default useRender;

In the index.ts file we connect all three hooks using the createComponent function:

import { createComponent } from 'react-component-structure';

import useLogic from './logic';
import useRender from './render';
import useStyle from './style';

const Component = createComponent({ useLogic, useRender, useStyle });

export default Component;

And in the types.ts file we declare the type for the component's props:

export interface Props {
    color: string;
    defaultCount: number;
    greeting: string;
}

If the component does not have props you can declare it like this:

export type Props = unknown

Each component of our application has a clear structure consisting of controller, view, styles, and types files. This division is similar to the division into HTML (view), CSS (styles), and JavaScript (controller) in vanilla applications.

If you like the approach and the library, please give the repository a star on GitHub. I hope this approach will be useful to you.

https://github.com/sergeyshpadyrev/react-component-structure

My useful library for typed RPC calls in TypeScript

Sergey Shpadyrev — Fri, 14 Feb 2025 16:17:50 +0000

In one of my projects I faced a need to make a lot of remote procedure calls between different parts of the app. I needed to call:

RPC from iframe to its host app
RPC from this host app to iframe
RPC from web app to server via HTTP
RPC from server to web app via websocket

I wanted communication protocol between all of the entities to be fully typed. But I found that there's no convenient TypeScript library to do it. So I wrote my own.

Meet the typed-remote-procedure-call.

First you have to declare your RPC API:

type MyAPI = {
    add: (input: { a: number; b: number }) => Promise<number>;
    createUser: (input: { name: string }) => Promise<{ age: number; name: string }>;
};

Then you should create an executor in the place where you want this interface to be implemented. Let's say if you do RPC from your server to your web app via websocket it should be implemented on the web app side.

import { createExecutor, ExecutionRequest, ExecutionResponse } from 'typed-remote-procedure-call';

const executor = createExecutor<MyAPI>({
    add: async (input: { a: number; b: number }) => input.a + input.b,
    createUser: async (input: { name: string }) => ({ age: 20, name: input.name }),
});

// When request from the caller side comes you should execute it
await executor.execute(request)

Then you should create a caller:

import { createRPC, ExecutionRequest } from 'typed-remote-procedure-call';

const rpc = createRPC<MyAPI>({
    // Here you should send the request to the execution side by any protocol you want
    send: async (request: ExecutionRequest) => sendRequestToExecutionSide(request), 
});

After implementing transport protocol from caller to executor and back you can call the methods. Either one by one:

const user = await rpc.call.createUser({ name: 'John' });
const sum = await rpc.call.sum({ a: user.age, b: 2 });

Either you can build a pipe of calls that will be executed in one batch:

const sum = await rpc.chain((call) => {
    const user = call.createUser({ name: 'John' });
    return call.add({ a: user.age, b: 2 });
});

This chaining works with a little bit of types magic. The value returned from call inside chain function is not a Promise but a reference to step of execution.

This simple library allows you to make well-typed RPC calls really easily. If you find it useful please support me with a star on the Github repo.

How to manage environments in React Native with my open-source tool Variabler

Sergey Shpadyrev — Wed, 22 Jun 2022 21:54:43 +0000

In the last five years I have worked for four companies. In three of them I faced issues with managing environment variables for React Native apps.

Here's a brief overview of the projects:

In the first company I worked on 3 different apps. Each of them had 2 environments: staging and production.
In the second one I worked on about 10 branded apps that were based on the same white labeled codebase. All of them had 2 environments: staging and production.
In the third one I worked on only one app. But this app had 4 different environments: staging, staging-beta, production and production-candidate.

In all of these cases I got the following limitations:

Branded apps should have different bundle ids
Sometimes branded apps should have different version numbers
Apps for different environments should have different bundle ids. It's required to be able to install both staging and production apps on the same iPhone device
Both branded apps and environments require different settings files for services like AppCenter, Branch.io, Sentry, etc...

Developers who worked on the projects before me used one of the classic approaches:

Using .env files and libraries like react-native-dotenv
Using Android flavors and iOS build targets for branded apps and environments
Having a lot of copies of the same files like build.gradle, Info.plist, sentry.settings, branch.json, for different environments

None of these approaches worked well:

Env files approach doesn't work with bundle ids and version numbers in build.gradle for Android and Info.plist for iOS. Moreover, it doesn't work with settings files like sentry.settings or branch.json. It can only pass environment variables to JavaScript code
Flavors and build targets approach makes it hard to add new brands and to manage the existing ones. Moreover, it doesn't work well with services settings files. And it doesn't allow to pass variables to JavaScript code
File copies approach makes codebase look messy. And if you need to add something or to change something in one of the settings files, you need to go through all of the copies.

In all of the projects I solved the problems of managing environments and brands with the following approach:

I created template files for all the service settings files, for all the JavaScript constants files and for the build.gradle and Info.plist files. In these template files I put variable keys wrapped by @ signs. E.g.: @VARIABLE_KEY@
I created a config file describing all the variable values for all the environments and brands.
I created a config file describing where to copy these template files
I put all the copy destinations to .gitignore to avoid making git changes every time I set another environment.
I wrote a script that takes these configs and templates, fills variables into templates for needed environment and copies these filled templates to their destination paths.

It always worked great!

So I decided to release my tool to open-source. I called it Variabler.
Let's see how easily you can manage environments using it.

Case 1: Two environments

Let's say, we need to have two environments for our app: staging and production.

Step 1: We create template files:

api.js:

const baseURL = '@API_URL@'
export const get = url => fetch('GET', `${baseUrl}/${url}`)

build.gradle:

...
applicationId "@BUNDLE_ID@"
versionName "@VERSION@"
...

Step 2: We create variables config:

{
  "common": {
    "VERSION": "1.2.3"
  },
  "env": {
    "staging": {
      "API_URL": "https://staging.example.com",
      "BUNDLE_ID": "com.example.app.staging"
    },
    "production": {
      "API_URL": "https://production.example.com",
      "BUNDLE_ID": "com.example.app"
    }
  }
}

Step 3: We add template paths config:

[
  { "from": "api.js", "to": "./src/api.js" },
  { "from": "build.gradle", "to": "./android/app/build.gradle" }
]

Step 4: We add file destination paths to .gitignore:

/android/app/build.gradle
/src/api.js

So that's it!

Now we can easily set environment using the Variabler:

variabler set env:staging

Result: this command execution created two files.

android/app/build.gradle:

...
applicationId "com.example.app.staging"
versionName "1.2.3"
...

src/api.js:

const baseURL = 'https://staging.example.com'

export const get = url => fetch('GET', `${baseUrl}/${url}`)

Case 2: Two environments and two brands

Let's say, we need:

to have two environments for our app: staging and production
to build the app for two different brands: cola and pepsi

Step 1: We create build.gradle file template:

...
applicationId "@BUNDLE_ID@@BUNDLE_EXTENSION@"
versionName "@VERSION@"
...

Step 2: We create variables config:

{
  "brand": {
    "cola": {
      "BUNDLE_ID": "com.example.cola"
    },
    "pepsi": {
      "BUNDLE_ID": "com.example.pepsi"
    }
  },
  "common": {
    "VERSION": "1.2.3"
  },
  "env": {
    "staging": {
      "BUNDLE_EXTENSION": ".staging"
    },
    "production": {
      "BUNDLE_EXTENSION": ""
    }
  }
}

Step 3: We add template paths config:

[{ "from": "build.gradle", "to": "./android/app/build.gradle" }]

Step 4: We add file destination paths to .gitignore:

/android/app/build.gradle

That's it.

Now we can set variables:

variabler set brand:pepsi env:staging

Result: we gonna see the following code in android/app/build.gradle:

...
applicationId "com.example.pepsi.staging"
versionName "1.2.3"
...

Getting started with Variabler

You don't need to make all the described steps manually.
Variabler can do it for you.

To start using Variabler you need to install it and init it in your project repository:

npm i -g variabler
cd ./your-react-native-project
variabler init

Then you can start make files to be managed by Variabler:

variabler add ./android/app/build.gradle

After you add variable keys to templates and variable values to variables.json you can simply run something like:

variabler set env:staging

That's simple!

For getting better understanding of how to install and start using Variabler visit the GitHub repository.

Not only React Native but React and Node.js

Even if Variabler was created for React Native, indeed there're no reasons why it can't be used for React and Node.js applications or any other type of JavaScript projects. It's absolutely platform independent.

Afterwords

I hope Variabler will serve a good service for some developers.
Feel free to report bugs, create issues on GitHub and send me your pull requests.

How I created my own programming language based on JavaScript

Sergey Shpadyrev — Wed, 18 Nov 2020 21:32:13 +0000

I have worked with many programming languages during my career. I've used ActionScript 3 for Flash games. I've used Java for backend and Android games. I've used Scala for the backend. I've used JavaScript for NodeJS backend, React web applications, and React Native mobile applications. I've written a million simple scripts in Python.

But no matter what language I used, I had a feeling that the syntax of this language is too verbose, full of excesses, noise, and a syntactic boilerplate that interferes with understanding the code. So I had decided to create my own programming language.

First, I defined a few parameters to measure language quality. So, in my opinion, the perfect language should be:

Well readable
Laconic
Consistent
Pure and beautiful

I took a few programming languages that I'd been familiar with and started to improve them by reducing the unneeded syntax. But whatever language I'd taken, in the end, I always got LISP.

It's right. LISP is the most consistent and laconic programming language. But nowadays, Common Lisp and all its offsprings (except Clojure maybe) are more toys to play with than a language to use in production. Moreover, LISP has one awful disadvantage in terms of beauty - too many parentheses.

If today you need to choose a language for business purposes, most probably you will take JavaScript. It has a giant friendly community and package manager NPM with tons of well-made libraries. What's more important, JavaScript itself is a perfectly designed language that allows writing code in two different ways: functional and OOP.

I prefer to write code in JavaScript in a purely functional style.
So my code looks like this:

const incrementNumbers = numbers => numbers.map(number => number + 1)
const takeNumbersGreaterThan = threshold => numbers => numbers.filter(number => number > threshold)

const func = (numbers, threshold) => {
    const incrementedNumbers = incrementNumbers(numbers)
    const filteredNumbers = takeNumbersGreaterThan(threshold)(incrementedNumbers)
    return filteredNumbers
}

The code above doesn't make any real sense. It can be written much simpler but it's a great example of what's wrong in JavaScript when you write code in a functional way. It has too many syntax noises like const and return.

So I like LISP and JavaScript but both of them have disadvantages. LISP has too many parentheses and JavaScript has too many syntax noises. What to do?

So I decided to merge LISP and JavaScript. I took syntax from LISP but reduced the number of parentheses using meaningful tabs like in Python. And I took the platform from JavaScript so my language is being transpiled to JS so it has full interop with it and most operators in my language work just like in JavaScript.

So meet Una - the universal language of unified symmetries.

Syntax

Application order

The most important thing you should know about Una is how application order works.
You can set the application order in two different ways:

wrap up expression with parentheses
move expression to the next line with additional indentation

Let's look at the example. We won't use real operators, just letters.
Here we apply a to b:

a b

Here we apply a to the result of application of b to c:

a (b c)

This expression we can also write using indentation:

a
  b c

I think the underlying idea is pretty obvious but let's look at more complicated example:

a (b (c d)) (e (f g))

It can be writte like this:

a
  b (c d)
  e (f g)

or even like this:

a
  b
    c d
  e
    f g

Assignment

The most used operator in any programming language is assignment =. Because of Una is pure functional language = is not really assignment but only declaration of a constant.

= name 'John'

This operator takes its second parameter and assigns it to the first one. If there're more parameters, at first it applies the second parameter to the rest of them and then assigns the result to the first one. Sounds complicated but it's simple. It just means that we can write assigning expression with parantheses:

= z (calculate x y)

or without:

= z calculate x y

Arithmetical operators

Una has all basic arithmetical operators that work the same as in JavaScript:

+ - addition
- - subtraction
* - multiplication
/ - division
% - modulo

Example:

= a (+ 1 2)
= b (- 2 1)
= c (* 3 2)
= d (/ 4 2)
= e (% 5 2)

Comparison operators

Una has all basic comparison operators that work the same as in JavaScript.

= a (== 1 1)
= b (~= 1 '1')
= c (!= 1 '1')
= d (!~= 1 '2')
= e (> 2 1)
= f (>= 2 1)
= g (< 1 2)
= h (<= 1 2)

The only thing you should mention that == in Una is the strict comparison like === in JavaScript. For unstrict comparison you should use ~=.

Logical operators

The same with logical operators. They're a little bit different in Una:

= a (& true false)
= b (| true false)
= c (! true)

Conditional operators

Una has two conditional operators.

Ternary conditional operator works just like in JavaScript:

= value
  ? (> 2 1) "Greater" "Less"

Returnable conditional operator ?! is used in sync/async functions and sync/async computations to return value by some condition. For example, following code in function will return "One" if number equals 1:

?! (== number 1) "One"

Collections

Una has two collection types: array :: and object :.

Here's an example of creating a array of numbers

= numbers :: 1 2 3

Here's an example of creating an object of user:

= user :
  name 'John'
  age 13
  parents :
    mother :
      name 'Alice'
      age 42
    father :
      name 'Bob'
      age 39

Just like in JavaScript you can deconstruct objects and arrays

= numbers :: 1 2 3
= (:: one two three) numbers
console.log one

= user : (name 'John') (age 12)
= (: name) user
console.log name

And also just like in JavaScript when creating objects and array you can use already declared consts:

= a 1
= numbers :: a 2 3

= name 'John'
= user :
  name
  age 13

To get a field from map or element from array you can use .:

= list :: 1 2 3
= map : (a 1) (b 2)

console.log (. list 0)
console.log (. map 'a')

Also . is used to call methods on any object.
You can do it like this:

= numbers :: 1 2 3
= incrementedNumbers
  numbers.map (-> x (+ x 1))

or like this:

= numbers :: 1 2 3
= incrementedNumbers
  .map numbers (-> x (+ x 1))

Symmetries

The best feature of Una is arrow symmetries.

Sync symmetry

Right sync arrow -> is function. First parameter is function parameters. Last parameter is return of the function. All parameters between are simple code lines.

= sum -> (x y)
  + x y

= onePlusTwo -> ()
  = one 1
  = two 2
  + one two

Calling function is just an application of it to parameters:

= a (sum 1 2)
= b sum 1 2
= c
  sum 1 2
= d sum
  1
  2

To call parameterless function just use ()

= randomNumber
  Math.random ()

These functions can be used as lambda functions and be passed as a parameter to another function or can be returned as value from another function.

Left sync arrow <- is immediatly invoked function. So it allows to isolate some part of code and run it.
In following example result immediatly calculates as 3.

= result <-
  = a 1
  = b 2
  + a b

It's pretty good when you need to calculate something based on conditions:

<-
  ?! (== value 0) "Zero"
  ?! (== value 1) "One"
  ? (< value 10) "Less than ten" "More than ten"

Async symmetry

Right async arrow --> is async function.

= getUserPosts --> user
  database.loadPosts user.postIds

Left async arrow <-- is await.

= checkIfUserIsAdmin --> userId
  = user <-- (database.loadUser userId)
  == user.role 'admin'

Error symmetry

Right error arrow |-> is try-catch operator. First parameter is catch function. Other parameters are try lines. Unlike JavaScript try-catch operator |-> in Una always returns some value and it doesn't have finally block.

|->
  <-
    = getName null
    getName ()
  -> error
    console.log error
    'John'

If you need to run async code in try catch user <-- instead of <- in try or --> instead -> in catch:

|->
  <--
    getNameAsync ()
  --> error
    console.log error
    "John"

Left error arrow <-| is throwing error.

= addOneToNumber -> number
  ?! (isNaN number)
    <-| "number is not valid"
  + number 1

Module symmetry

Una modules are fully compatiable with JavaScript. You can import JavaScript modules to Una and you can import Una modules to JavaScript.

Right module arrow =-> is import.
If you pass modules: 'require' to babel plugin options it works as require.
If you pass modules: 'import' or pass nothing to babel plugin options it works as import.

=-> './index.css'
=-> 'react' React
=-> 'react' (: createElement)
=-> 'react' React (: createElement)

Left module arrow <-= is export.
If you pass modules: 'require' to babel plugin options it works as modules.export =.
If you pass modules: 'import' or pass nothing to babel plugin options it works as export.

Default module export:

<-= a

Constant export:

<-= = a 1

Chaining symmetry

Right chainging arrow |> is chaining by last parameter.
If you want to use such functional programming libraries as rambda you will find |> operator very useful.
In following example phone constant equals 'IPHONE':

=-> 'ramda' R
= electronics ::
  :
    title ' iPhone '
    type 'phone'

= phones |>
  electronics
  R.find
    R.propEq 'type' 'phone'
  R.prop 'title'
  R.toUpper
  R.trim

Left chainging arrow <| is chaining by last parameter.

Because of Lisp-like application order it's hard to do chains with default JavaScript array methods. Look how ugly it looks:

= sum .reduce
  .filter
    .map (:: 1 2 3) (-> x (+ x 1))
    -> x (> x 2)
  -> (x y) (+ x y)
  0

With <| it can be rewritten as:

= sum <| (:: 1 2 3)
  .map (-> x (+ x 1))
  .filter (-> x (> x 2))
  .reduce (-> (x y) (+ x y)) 0

React

There's no JSX in Una. So to work with React instead of JSX you should use React.createElement, where first parameter is component, second parameters is passing props, and the rest of parameters are children.

=-> 'react' React

= (: (createElement e)) React

= Component -> ((: count name))
  e div (: (style (: backgroundColor 'red')))
    e div : count
    e div : name

For styling I recommend to use styled-components. I will make code much cleaner. Here's the short example of React app with styled components:

=-> './index.css'
=-> 'react' React
=-> 'react-dom' ReactDOM
=-> './styles' S

= (: (createElement e)) React

= App -> ((: name))
  = (:: count setCount) (React.useState 0)
  e S.Container :
    e S.Hello (: (color 'green')) 'Hello, '
    e S.Name : name
    e S.IncrementCount
      : (onClick (-> () (setCount (+ count 1))))
      'Press me'
    e S.Count : count

ReactDOM.render
  e App (: (name 'John'))
  document.getElementById 'root'

In the example above : without arguments is just an empty object.

Afterword

So you can look at the documentation and find more examples in the Github repo of Una. Try to run examples, write your own code in Una and feel free to share your feedback. It's a lot left to do but I fell I'm on the right way.