How to minimalize state management in a modern React application with libraries, hooks, and Context API

Following this guide, you will reevaluate the introduction of the global state management library in your application. Most of the state can be delegated to specialized libraries, and the rest will be negligible to introduce a global state management library.

The reactJS ecosystem is very active and full of ideas and libraries. There are many opinions on state management, there is no right or wrong. Some developer groups are too convinced that the chosen library or approach is the ultimate solution. Overusing libraries to solve problems that were not meant to solve is common practice.

This article will explain the concepts and provide a guide for problems you may face. There is not right or wrong approach. Your application may have specific requirements, and choosing your library mix may be influenced by them.

📀 What is the application state in React application?

Anything that can be changed during the application run and the application should react to it.

On every state change, the view would react to the given change by rendering an updated view.

✍️ What does setState do?

setState() schedules an update to a component’s state object. When the state changes, the component responds by re-rendering.

♻️ Reasons for the component to re-render

1. Update in State
2. Re-rendering of the parent component only for children without memoization techniques (React.memo, useMemo)
3. Update in prop of the component with memoization techniques (React.memo, useMemo)
4. Context changes — if a component uses context consumer, it will be re-rendered every time the context provider’s value is changed.
5. Hooks changes — if a state or context provider’s value is changed in the hook or nested hook (regardless of whether this state is returned in the hook value and memoized or not)

If you want to read more about react re-rendering follow this article https://www.developerway.com/posts/react-re-renders-guide

🎬 What actions are a common trigger to a state change?

• User input — text provided in the input, other events by keyboard or mouse interactions
• State from the server — the state change can be triggered when a request to a server is resolved or rejected
• Environment context —listening to user environment events, when the URL changes, online status, size of the device screen, orientation, and many more

🧑‍💻 Why do you want to use state management?

State management is solving the problem of accessing and setting the application’s state. It may also provide a set of rules that make reasoning about the application data flow clear and predictable.

The other benefit is development experience many libraries include dev tools in the form of browser extensions.

Popularization of Redux

Since previous versions of React did not have public API for context and people were unfamiliar with Javascript development, the rules of the flax pattern were welcome.

I am not mentioning other alternatives such as MobX that was popular at the time before hooks and public context API

Reason for the decline of Redux popularity

Redux was overused when providing the same state to sibling components was impossible with React it was the first proposed way to solve this problem in tutorials.

• React made context API public
• A lot of boilerplate code

Common miss use of Redux

Since Redux was one of the first things, people switching to React were learning. It becomes a way to interact with Router State, Handle Request logic, and do not forget forms with Redux Form. Using redux for everything has some benefits, like you had every action in one tool and debugger.

• using redux was making the whole app and sometimes simple components dependent on the redux. Tests had to mock redux
• redux code was too specific, and it is hard to structure code in redux to encourage sharing features between project
• redux uses performance optimizations but comparing, and recreating large state objects are costly in Javascript. Some wanted to solve this by immutable data structures, but performance benefits do not always exceed the costs and added complexity

Overusing libraries connected to the Redux state

• router state can be managed by React Router and query parameters with use-query-params without connecting router to redux

• 🚨 managing request state in redux seems like boilerplate overkill, but recently, you can use createAsyncThunk from Redux Toolkit to reduce boilerplate. You will not have any of the features of a React Query, SWR, or other libraries out of the box, like resolving requests from cache, auto-reload, on-tab focus, or many others.

There is another tool by Redux Toolkit team RTK Query that provides features of React Query or other libraries. See the comparision.

• form state stored in Redux Form was causing unnecessary rerenders on every input in the form. Libraries such as Formik improved and later introduced a more performant React Hook Form, reduced the rerenders, and made large dynamic forms not problematic again.

What is good about Redux

• flux pattern with actions and reducers
• optimized subscription to the state using state selectors
• documentation and ecosystem
• debugger browser extension with time traveling, and inspections

You should consider your project needs and redux, in some cases, solves project needs more than alternatives

Recoil as alternative state management to Redux

Use Recoil when you have rapidly changing UI, deeply nested data structures, and performance is important.

Support using complex data structures (trees, graphs, you name it). Each piece of shared state is called an atom, and atoms can be combined with selectors that only recompute whenever an atom changes. Asynchronicity is built in.

The documentation is great, and the API is starting to become stable. If you require a performant shared state in your application, this is a great tool to reach for.

React with hooks and Context API

Context can provide value to children components when a child component consumes the context, it will subscribe to changes.

🚀 Advantages

• provided by React works out of the box
• hooks encourage composition and reusability
• hooks can remove logic from component render functions
• hooks and context is easy to test when you extract the business logic into separate functions
• context does not have to cover the whole application, (theming, UI, and animation states)
• use hooks from the npm repository. No duplication or synchronization

🚨 Disadvantages

• performance implications, if not used properly with memoization

💡 Leave specialized tasks to specialized npm modules

• If the user can share the URL with query parameters that influence render, then store the state in React Router and query parameters with use-query-params
• fetch, cache, and updating data should be outsourced to a well-documented maintained external library without touching any “global state”. (React Query, SWR)
• leave handling forms to the external library with performant, flexible API, and mutate server data only when the form is submitted. (React Hook Form)

What state we will manage in the application?

When we follow these recommendations. The state will be negligible to introduce a global state management library.

Example

Initialize react-query

import { QueryClient, QueryClientProvider } from "react-query";

// Create a client
const queryClient = new QueryClient();

export default () => {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <Page /> /* Or <Routers />*/
    </QueryClientProvider>
  );
}

Create src/api/userApi.ts (for this case, the axios request is mocked).

import axios from "axios";
import MockAdapter from "axios-mock-adapter";

const mock = new MockAdapter(axios);

export enum Role {
  admin = "admin",
  user = "user",
}

mock.onGet("/user").reply((config) => [
  200,
  {
    user: {
      userId: config.params.userId ?? 1,
      name: "John Smith",
      role: Role.admin,
    },
  },
]);

export type User = {userId: number; name: string; role: Role};

export const userApi = {
  getUser: ({userId}: {userId?: number} = {}) =>
    axios.get<{user: User}>("/user", {params: {userId}}),
};

Use react-query for request

import { UserProperties } from "../components/UserProperties";
import { AxiosError } from "axios";
import { useQuery } from "react-query";
import { userApi } from "../api/userApi";

export const UserDetail = ({id = 2}) => {
  const query = useQuery(`user-${id}`, () => userApi.getUser({ id }));

  if (query.isLoading) {
    return <p>Loading...</p>;
  }

  const user = query?.data?.data?.user;

  if (query.isError) {
    return (
      <p>
        Error loading user:{" "}
        {(query?.error as AxiosError)?.message ?? "unknown error"}
      </p>
    );
  }

  return (
    <>
      <h1>User detail</h1>

      {user && <UserProperties {...user} />}
    </>
  );
};

Refactor to separate hook (query key creation encapsulated, query key is used as cache key)

import { useQuery } from "react-query";
import { userApi } from "../api/userApi";

export const useUserQuery = ({ userId }: { userId?: number } = {}) => {
  return useQuery(`user-${userId}`, () => userApi.getUser({ userId }));
};

useUserQuery hook usage, you can provide hooks as props or use default props

import {UserProperties} from "../components/UserProperties";
import {AxiosError} from "axios";
import {useUserQuery} from "../hooks/useUserQuery";

const defaultProps = {
  userId: 2,
  useUserQueryHook: useUserQuery,
};

export const UserDetail = ({userId, useUserQueryHook}: typeof defaultProps) => {
  const query = useUserQueryHook({userId});

  if (query.isLoading) {
    return <p>Loading...</p>;
  }

  if (query.isError) {
    return (
      <p>
        Error loading user:{" "}
        {(query?.error as AxiosError)?.message ?? "unknown error"}
      </p>
    );
  }

  const user = query?.data?.data?.user;

  return <>{user && <UserProperties {...user} />}</>;
};

UserDetail.defaultProps = defaultProps;

Code sandbox interactive example

Look at the option to provide a hook as a prop to the component.

Usage of context to <CurrentUserRole /> and implementation of useCurrentUserQuery hook.

import {UserDetail} from "../containers/UserDetail";
import {CurrentUserRole} from "../components/CurrentUserRole";
import {useCurrentUserQuery} from "../hooks/useCurrentUserQuery";

export const Page = () => (
  <>
    <CurrentUserRole />
    <h1>Current User detail</h1>
    <UserDetail useUserQueryHook={useCurrentUserQuery} />
    <h1>User detail</h1>
    <UserDetail />
  </>
);

👏Clap, 👂follow for more awesome 💟#Javascript and ⚛️#React content.

How to do state management in a modern React application with hooks and Context API was originally published in ableneo tech & transformation on Medium, where people are continuing the conversation by highlighting and responding to this story.

Most of the React components in our projects should be simple, reusable, testable and well-typed. Design components with well-defined properties that are easy to read and understand.

Enhance your developer productivity and experience. Use and promote relevant React abstractions and patterns formulated with the type-safety of Typescript. Types will help us avoid obvious problems in code. Tests for logic in the code are better than repetitive visual debugging.

Reason for type checking

The purpose of programming is to find a sequence of instructions that will automate the performance of a task for solving a given problem. Tasks are often created in distributed teams that need to communicate. Task inputs and outputs need to be well-documented contracts.

The ultimate goal is to make code easy to read, understand and validate. Distributed teams need strict static verification of the code. Types let you define interfaces between software components and gain insights into the behavior of existing JavaScript libraries.

Advantages of types

• improves code readability
• provide valuable information about the code
• better code analysis
• static verification
• early detection of errors
• code autocomplete
• robust dependable refactoring

JSDoc

JSDoc is a markup language used to annotate JavaScript source code files. Docs and cheatsheet.

Documenting types in Javascript using JSDoc comments is still valuable option. Editors, compilers and type checkers can read this information and provide you with error message hints.

Advantages

• editor tooling, autocomplete
• comment based
• could be used to generate documentation
• can be read by other type checkers (TypeScript checks JSDoc annotations)

Disadvantages

• not a full-featured language
• typing function arguments and return types not guaranteed

JSDoc is useful for comment styling and tags like @deprecated that marks a method as deprecated in the project.

Type checking With React PropTypes

read docs now in separate package prop-types. When an invalid value is provided for a prop, a warning will be shown during the run time in the JavaScript console.

Optional props

You can declare that a prop is a specific Javascript primitive.
By default, these are all optional.

Example with defaultProps and optional name of type string. Use optional properties only if the property has value in default props.

Required props

The warning is shown if the prop isn’t provided.

Advantages

• small standalone library focused on React components
• can be removed in the production build

Disadvantages

• missing typing for function arguments and return types
• not practical outside React
• you have to run the code to see the errors*
• some editors will show errors/hints during development.

Typescript

The same syntax as JavaScript with the benefit of optional types. Able to fully type functional arguments and return types.

basic types

TypeScript supports much the same types as you would expect in JavaScript.

If you want to refresh what you know about Javascript data types, please read the following article from my Javascript course.

Javascript course — Language basics, variables, data types

utility types

TypeScript provides several utility types to facilitate common type transformations. These utilities are available globally.

• Partial<T>
• Readonly<T>
• Record<K,T>
• Pick<T,K>
• Omit<T,K>
• Exclude<T,U>
• Extract<T,U>
• NonNullable<T>
• ReturnType<T>
• InstanceType<T>
• Required<T>
• ThisType<T>

functions

Functions are the fundamental building block of any application in JavaScript.

functions with an object argument

The problem when the function takes more parameters

The function should have a maximum of one required and one optional parameter. Most of the time use object as a parameter/argument.

Javascript course — Javascript the good parts frequently used in React

interface

The interface is a promise or a contract to implement a data shape. An interface can be extended. Interfaces with the same name are merged.

interface Point2D {
  x: number;
  y: number
}

interface Point3D extends Point2D {
  z: number;
}

type

The type is a definition of a type of data that can be declared and assigned. It allows the creating of a new name for a primitive type.

type Coordinate = number;

type Point2D = {
  x: Coordinate;
  y: Coordinate; 
};

type Point3D = Point2D & {z: Coordinate};

typeof

In some cases is useful to just create type based on an existing object.

const defaultProps = {greeting: "Hello"};

type Props = Readonly<typeof defaultProps & {name: string}>;

// type Props = {readonly name: string; readonly greeting: string}

Advantages

• language as a superset of Javascript
• all the advantages of strong typing
• can inference types
• can read Javascript files, JSDoc comments
• advanced types, generics, utility types
• have strong community and large library of types for third party libraries

Disadvantages

• can get complicated to type functions with generic types or components as arguments

Before start using types some best practices

Best practices for Javascript projects

Assignment

Create a box similar to the one that Facebook uses for sharing.

There is a codesandbox ready for you where you have fake data and examples of components.

Codesandbox

Tasks

• change the component to look like Facebook post
• convert getBlog into separate hook useGetBlog

Result

👏Clap, 👂follow for more awesome 💟#Javascript and ⚛️#automatization content.

Please provide feedback here link.

Master React with Typescript and Unit Tests was originally published in ableneo tech & transformation on Medium, where people are continuing the conversation by highlighting and responding to this story.

Know the language

The latest Javascript specification introduced useful syntax. It is recommended to use the default syntax over the previous unpure methods. Today you do not need Lodash, Underscore or Ramda most of the time.

• Prefer JavaScript documentation on MDN (Mozilla developer network) over other sources

Full Javascript course with examples, tips, and best practices

Javascript course — What is Javascript, where can I use it?

const, exceptionally let variable declaration

• Will not pollute the upper or global scope, and const is signaling that the value will never change.

map, filter, reduce array methods

• Do not need intermediate variables, can be chained.

Object and array destructuring, renaming variables and default values

• Makes functions with an object as an argument simple and useful

Arrow functions — expression is a syntactically compact alternative to a regular function expression

• const fn = () => {}; will prevent function name collisions
• An arrow function does not have its own this

Arrow functions are alternatively called lambda expressions.

Async function — the declaration defines an asynchronous function

• async code is written in synchronous style no more then chaining, and creating and returning of promises

const fn = async () => { return setTimeout(() => 42), 1000};

• the async keyword is automatically transforming the output of the function into a new Promise

const fn = () => { 
  return new Promise((resolve) => { resolve(42); }, 1000)
};

Code newer lies comments and documentation sometimes do

Clear Intention without comments

The code should be written like plain English communicating its intentions. The focus is to make code readable for the next customer your colleague developer.

Meaningful variable names

Correctly used variable names do not need comments and explanations that can get out of sync with the code rather quickly. The code is written and should be readable for humans.

The code is read more often than it is written.

// 🚨 bad

const time = 60;

// 👍 good

const timeInMinutes = 60;

// 🚨 bad

const interest = 2.5;

// 👍 good

const yearlyInterestInPercents = 2.5;

Boolean values with the prefix “is” and “has”

Using variables with prefixes is and has will communicate clearly that the variable is a Boolean. The code is read more often than it is written.

Prefer using named variables over comments

Explain conditions with variable names rather than comments

// 🚨 bad

if (height > 100) {...}

// 👍 good

const minimutHeightInCm = 100;
const hasMinimumHeight = heightInCm > minimutHeightInCm;
if (hasMinimumHeight) {...}

Named variables can be reused and combined.

const isPositiveNumber = x > 0;
const isEvenNumber = x % 2;
const isOddNumber = !isEvenNumber;
const isPositiveEvenNumber = isPositive && isEven;

Readability over questionable performance improvements

Prefer array methods

It is recommended to use a functional approach without intermediate variables.

The base Javascript for cycle can be more performant in some browsers but the benefit can be measured only by iterating over millions of items. It is job of compiler and runtime to remove penalty of using new array methods.

// 🚨 bad

let str = "";

for (var i = 0; i < 10; i++) {
  str = `${str}${i}`;
}

console.log(str);
// expected output: "0123456789"

// 👍 good

console.log(
  [...new Array(10).keys()].join("")
);
// expected output: "0123456789"

// 🚨 bad

let sum = 0;

for (var i = 0; i < 10; i++) {
  sum = sum + i;
}

console.log(sum);
// expected output: 45

// 👍 good

console.log(
  [...new Array(10).keys()]
    .reduce((acc, key) => acc + key, 0)
);
// expected output: 45

We should ignore critics and switch to new syntax because it is shorter, more readable, and can be parallelized in the future.

trusting-mendel-p16mu - CodeSandbox

The problem when the function takes more parameters

The function should have a maximum of one required and one optional parameter. Most of the time use object as a parameter/argument.

Javascript course — Javascript the good parts frequently used in React

Creating and merging objects
It is not free to create an object on every call of the function. But the benefit of readability of the object argument is more significant than some preemptive micro-optimization.

Understand the benefits of testing

Tests are saving development time, and maintenance cost.

When tests are required developers are motivated to write smaller testable functions. Testing simple pure functions do not demand to mock large parts of the app.

Pure functions

A pure function is a function where the return value is only determined by its input values, without observable side effects.

Unit testing is better than debugging, whole app every time.

Testable Javascript -> Functional Programming -> Pure Functions

Separation of concerns

A Function should do one testable thing only. It is recommended to keep layers of the app separate from the other.

The function should inject constants and other functions using the object parameter with reasonable defaults that will open future overrides and ease testing.

UI rendering function should not have access to whole state or state management. Inject only necessary parts of the state and provide only necessary action creators/functions.

Component groups separation to allow testing

• following a few simple rules will promote reusability and testability of components

1. Atoms simple component with styles
2. Molecules groups of simple components with styles
3. Organisms components with minimal details for rendering can call functions to handle specific events. Can have style adjustments for specific business use cases

3*. Connector or state provider for Organisms provides or selects state for a component

4. Templates place components into a page layout that can be used in pages

5. Pages are specific instances of templates that show what a UI looks like with real representative content in place

Static typing

Confidence added by static typing will compensate for extended effort of writing types. Static typing with modern IDE is rapidly improving the developer experience with autocomplete and error highlighting.

Types can unveil the entire class of bugs that even testing can not indicate.

• Typescript is preferred by the library authors
• Flow in some cases has some benefits for React projects

React and Typescript | Example

• The goal is to create reusable components
• A component can have other components in its default props
• Default props used in render props pattern can be statically typed

type Props = {} & typeof defaultProps;

type Children = (props: Props) => JSX.Element;

export const Header = 
  ({children, ...props}: {children: Children} & Props) =>          
    children(props);

• the default render function can be provided for styleguide

Header.defaultProps = {
  ...defaultProps,
  children: ({Wrapper, Group}: Props) => (
    <Wrapper>
      <Group>Left</Group>
      <Group>Center</Group>
      <Group>Right</Group>
    </Wrapper>
  ),
};

Component rendered with default children function

Header variant “space-between”

<Header />

Override component using props

Header variant “space-around”

const App = ({CustomHeaderWrapper}) => (
  <Header Wrapper={CustomHeaderWrapper} />
);

App.defaultProps = {
  CustomHeaderWrapper: styled(Header.defaultProps.Wrapper)`
     justify-content: space-around;
  `,
};

Override component using props and provide render function

Header variant replacing children

<Header Wrapper={CustomHeaderWrapper}>
  {({Wrapper, Group}) => (
    <Wrapper>
      <Group>Center</Group>
    </Wrapper>
  )}
</Header>

Type safety when you use an undefined prop

Data management

selectors decouple shape of application state with shape of the component props

normalization and denormalization treat the state of the application as a relational database.

• duplicities in application state produce bugs when updates do not address all the duplicities
• loading and storing nested entities significantly enlarge rest payloads and processing
• prefer the use projects like normalizr and normalization of nested JSON according to a schema

Invest in tooling that can save time

An example can be found in https://github.com/ableneo/modules and eslint config in the eslint-config-ableneo.
Config installation guide.

precommit should

• pretty print
• lint the code, type checking
• run all the tests related to changed files in git

prepush

• lint the code, type checking
• run all the unit test

CD/CI

• try to merge
• run prepush checks again
• start build

Code generators

There are two good generator libraries plopjs and hygen. A short hygen tutorial is available in an article with an example.

How to use the hygen code generator

Another example of hygen is initializer hygen-eslint-config-ableneo for our eslint-config-ableneo

Style guides

Boost developer experience with a styleguide. Developers and designers can iterate faster on generalized components.

List of living style guide projects worth mentioning

• styleguidist for multiple frameworks
• storybook for React only
• docz for React only

Example of public documentation/styleguide using docz. https://ableneo.github.io/modules/

Conclusion

The main goal is to enable fast and reliable development supporting the business needs of the customer. Use tools that fit the project, developers and designers. Try to remove repeatable tasks by automatization from the workflow.

👏Clap, 👂follow for more awesome 💟#Javascript and ⚛️#automatization content.

Best practices for Javascript projects was originally published in ableneo tech & transformation on Medium, where people are continuing the conversation by highlighting and responding to this story.

This article is for anyone who is

• working with React
• is planning to start working with React in the near future
• likes practical examples ❤️
• uses Mobx

Styling

Unqualified styling can create the worst technical debt possible. Try to write a minimum of new styles as possible.

• 🚨style only using class name selectors!
• 🚧do not nest selectors!
• 🚨use class names that start with “.js-” for javascript functionality never for styling

Rules for theming and Styling with CSS, SCSS

Mobile first

• Style simple components to take a full width
• Layout components should scale up elements as the viewport changes
• Use only media query based on minimum viewport widths
  @media (min-width: ___px) { ... }
• In SCSS prefer mixins for media queries from Bootstrap 4
  @include media-breakpoint-up(size){...} // is all you need to use

Theming

Employ component library like bootstrap. Use the provided components and make customization exclusively by changing Sass variables.

• Customize Bootstrap or other toolkits, ui-frameworks or ui-libraries
• Rules for HTML in systems with theming

Any code is generally clearer and easier to maintain when it does not use globals, CSS styles are global

Components should own styles

Solution to global styles is to make write styles inside of every component using CSS in the JS library like styled-components or emotion.

Emotion is a library designed for writing CSS styles with JavaScript

Example of a component with styled components in defaultProps

Component design

Thinking in react way. A component should use data to render UI. Design simple components that do only one thing. Components used for Layout and styling should not know about the application model.

function (data) { return UI; }

🏗 Component Categories

🧱 The base styled components

• Elements with styles

💅 Presentational components

• Reusable components with Styles

🎁 Container presenter components

• Customized Presentational Components that know about application Model

🎛 Container components

• Only inject data and behavior to Container presenter components

Categorization of React Components

State management

⚛️React introduced Hooks

Hooks solve state management without an additional library.

Components should not misuse specific state management library

Consider a situation when the creator of mobx will make this project deprecated. If a project has components coupled with mobx, all the components will need to change, compared with only container components have a connection to the state using inject or connect function and the refactorings are much easier.

• decorators make components harder to test
• using store inside of the components requires to mock the whole store for testing

Instead, we should use inject and observer as a functions

https://github.com/mobxjs/mobx-react#inject-as-function

👍 Benefits of using inject and observer functions:

you are not using generators that are not part of the Javascript specification. (🤯 Currently unstable proposal)

• 🚀 the code is future proof, and you do not have to change anything when new generators are released

you can prepare data and actions inside of the inject

• 🍀 you can work with simple, functional components
• ♻️ your components will not know about the store and can be reused

Example:

Use of Lerna with yarn workspaces and packages generator

Consider use of a monorepo project with

• eslint config with prettier
• precommit and prepush hooks build in
• create new packages using package generators
• one command versioning with an automatic changelog
• releasing of all packages with one command

Link to example project and link to generator folder in the project
The styleguide, eslint config could be moved into this repository and released from here. It can enable to develop common packages faster with the current setup and we can create smaller packages with little to no overhead.

More about how to create a simple generator:

How to use the hygen code generator

👏Clap, 👂follow for more awesome 💟#Javascript and ⚛️#React content.

⚛️ Focused Styling in React and refactoring of Mobx was originally published in ableneo tech & transformation on Medium, where people are continuing the conversation by highlighting and responding to this story.

There are platforms that list thousands of generators namely yeoman but often you will need something simple and custom. The alternative is to use Hygen for generating custom project sections.

Hygen is using javascript for prompt and EJS for templating but is fully capable of generating code in any language.

Start with creating the project

Saving will create your personal copy

Then you can open a new terminal.

Initialize Hygen generator

Write into the following command into the terminal.

npx hygen init self

you should see an output like this.

Now we have a generator that will be used to create other generators

Generate a with-prompt generator

We will be using prompt to ask questions in the console. See examples of prompts using enquirer.

npx hygen generator with-prompt readme

Now we can change the template files

Update _templates/readme/with-prompt/hello.ejs.t to:

---

to: README.md

---

# <%= name %>

<%= message %>

Update _templates/readme/with-prompt/prompt.js to:

Run the generator and create README.md

Run following command in Terminal

npx hygen readme with-prompt

Run a script in from template frontmatter

Update _templates/readme/with-prompt/hello.ejs.t to:

---

to: README.md

sh: curl -s https://www.toptal.com/developers/gitignore/api/archive,macos,linux,windows,node,jetbrains,sublimetext,eclipse,netbeans,visualstudiocode > .gitignore

---

# <%= name %>

<%= message %>

The output of the shell script will create .gitignore file in your project. Curl will return it from https://www.toptal.com/developers/gitignore API and pipe it to .gitignore.

Final project

Conclusion

The sky is the limit when using generators. Hygen provides more options like injecting into existing files or running shell scripts, all the examples are in the documentation Hygen.io.

Read more about generators in general in the previous article.

Improve your Javascript Developer Experience by generating code

👏Clap, 👂follow for more awesome 💟#Javascript and ⚛️#automatization content.

How to use the hygen code generator was originally published in ableneo tech & transformation on Medium, where people are continuing the conversation by highlighting and responding to this story.

No one wants to spend time creating boilerplate. Generating repeating code patterns can speed up development tremendously. What are the options? Read more to find out.

Choosing a generator and creating templates is an investment. Larger teams can experience faster development time and an increase of code consistency.

Code snippets

Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional statements in the code editor.

Autocomplete will suggest a code snippet

👍Great for repetitive small chunks of code
👍Easy to set up

👎Limited use of templating and placeholders
👎Not build to generate files with specific names

Code snippets in the editor

Snippets are helpful but hard to share in teams and specific to the editor

👍All major code editors provide this option natively or with a plugin
👍Easy to set up, many available as plugins

👎Editor specific local settings
👎Not easily sharable to other team members
👎Can not generate multiple named files

Examples:

Code snippet managers as stand-alone apps

Stand alone apps for snippet management are often not multi platform or do not have team sharing functionalities

Bash, NPM or other scripts

Bash has many options for working with the file system. Combining it with NPM scripts located in package.json with some work can qualify as a code generator tool.

Running setup script from GitHub gist in eslint-config-with-prettier project and output example

Forking a boilerplate project from GitHub

I would say one of the overused technique to start a project is to fork a boilerplate. Can not be recommended for every use case.

Forking from GitHub will help you create a project structure and setup build

👍If you do it right you can still consume some updates from original projects
👍Can be shared and published

👎Sometimes hard to find one with technologies and opinions you prefer
👎Every customization makes consuming updates more difficult
👎Once you fork you have to maintain pulls from the original project

Some boilerplate projects have generators build in. An excellent example is react-boilerplate with 21,6k github ⭐️ that uses plopjs that will be introduced later.

Creating a project from the codesandbox.io templates

Codesandbox.io as an editor

Great option if you want to try web technology and edit code with code editor in your browser. Sharing code is phenomenal if you have not tried it you will be surprised how useful it is for some situations.

Codesandbox.io as a generator

The easiest and most practical list of project templates you can find. Basically, it is similar to forking a boilerplate project. But the platform is providing full-featured code editor with the live preview and sharing.

Go the website click on the programing language and technology you want to try and in few seconds you are live coding

Pros and cons are similar to forking a project.

👍list of project templates that work without configuration and setup of the environment
👍build and linting setup can be hidden and automatically updated

Generators

Where code snippets were simple and mainly focused on developer workflow with repeating parts of the program, generators are focused on scaffolding new projects, and sections like new controllers with unit tests.

Parametrized command line tool outputing application or project section

Pros and cons are similar to forking a boilerplate project from Github
👍Some generators provide an update mechanism for generated code, but most of them don’t
👍Allows you to generate sections of the app
👍Helps to follow code standards

👎Can be hard to customize for the project, technology, and team needs

Frameworks containing generators

Command line tools allow you to use templates to create a whole lot of things. One of the frameworks that is notoriously famous for its use of generators was Ruby on Rails with 42k GitHub ⭐️. There is native support for creating new generators in the framework and you can install more generators through generator gems.

Node Frameworks examples
- SailsJs available generators have Rails-like options for generating app sections
- ExpressJs application generator is providing only project generator with options, there are many generators from the community

Angular has CLI that can ng generate project and sections

👍Some frameworks provide an update mechanism for generated code, but most of them don’t
👍Allows you to generate sections that follow framework code standards

👎Can be hard to customize for the project, technology, and team needs

Generators for boilerplate projects

Some projects are providing an app generator as a key feature of the project. Create React App (64k ⭐️)is helping to set up a modern web app by running one command.

👍Staring point for rapid development

👎The generator is only for app boilerplate, missing section generators
👎Can be hard to customize for the project, technology, and team needs

Tools to create and share project generators

Yeoman

Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.

Mainly globally installed CLI tool with globally installed specialized generators

There are 8145 generators published on Yeoman generators platform, most popular is jhipster for spring boot and Angular/React with nearly 13k ⭐️ on github as of march of 2019

👍Many ready to be used full featured generators
👍Using EJS template language that can embed javascript in templates
👍Documentation, options, helpers for unit testing and debugging

👎Is promoted to be used as a global dependency on the local machine
👎Sharing locally installed global dependency is not meant for teams

Yeoman generator can be located in a project subfolder. But will have use npm link or yarn workspaces that are not well known and documented.

Plop

A plop is a little tool that saves you time and helps your team build new files with consistency. It is used mainly as a project dependency. Plop uses the handlebars template engine to generate your files.

Micro-generator framework that makes it easy for an entire team to create files with a level of uniformity

👍Better suited for in project generator then Yeoman

👎Uses the handlebars template engine that is less powerful than EJS

Hygen

The scalable code generator that saves you time.

Is less popular than Plop but provides similar value to the project. Hygen is sharing EJS templating language with Yeoman allowing you to easily migrate between the two. Creating and updating generators is simplified and files can be easily included in the project. Hygen can be a perfect fit as a project-specific generator improving the developer experience.

Hygen is the simple, fast, and scalable code generator framework that lives in your project.

CLI for generating and using project specific generators

👍Self-contained in the project
👍Using EJS template language that can embed javascript in templates
👍Templates have a markdown-like frontmatter section for configuration

👎Missing native helpers for testing

Conclusion

Generators are an investment that saves time, in the long run, the benefit will be better developer experience and improved code standards. Consider using them in your projects.

Chose a framework that has the best generator for your project needs. In some cases there you will miss some features or want to make changes then just fork the generator you like the most. If there is no generator that can solve your use case, consider creating your own custom generator.

Recent work with generators

I have used Plop in the past to generate

• React Components that had types, style guide config, tests, translations and styles generated
• Redux Ducks with the state using Immutable.js Records, that had typed Action creators, reducers, Sagas based on redux-inject-reducer-and-saga

I have used Bash to generate files that set up eslint with prettier

• How to run the script in the readme of eslint-config-with-prettier that output following example project

But now I am moving from Plop and Bash scripts towards Hygen.

• My recent generator is creating packages in a project using Lerna and Yarn workspaces
• link to project and link to generator folder

Read more in the following article how to use Hygen microgenerator framework

How to use the hygen code generator

👏Clap, 👂follow for more awesome 💟#Javascript and ⚛️#automatization content.

Improve your Javascript Developer Experience by generating code was originally published in ableneo tech & transformation on Medium, where people are continuing the conversation by highlighting and responding to this story.