Forem: Nickolay Stepanov (Nick)

Create React forms in a few minutes.

Nickolay Stepanov (Nick) — Tue, 12 Apr 2022 04:22:00 +0000

Hi everybody.
We are using a new library for creating a form.

For creating your forms you need to make two simple steps:

Define a scheme which describe validation and some properties of form data.
Connect your scheme via methods to your UI components.

Scheme

// scheme.js export default {
    valid: null,
    formValue: {
        first_name: "",
        last_name: "",
    },
    rules: {
        first_name: [
            ["empty", "please write your first name"]
        ],
        last_name: [
            ["empty", "please write your last name"]
        ]
    }
}

Form

//MyForm.ts
import {useFormMod} from "formmod";

export const MyForm = () => {
const {setValue, getValue, getError, validate} = useFormMod(
        FORM_SCHEME
 );

return (
<form onSubmit={handlerSubmit}>
…
      <MyTextInput
           label={"First name"}
           value={getValue("first_name")}
           error={getError("first_name")}
           onChange={(value: string) => setValue("first_name", value)}
      />
… 
</form>
);

Full documentation :
https://doc.formmod.org/

**WE RECOMMEND TO USE LAPTOP OR DESKTOP DEVICE FOR READING
DOCUMENTATION.

Advantages:

No dependencies. This is the power of simple work.This form system don’t know about your components, JSX, your app, store…You can use it with any UI components. No longer need to make wrappers components, understanding JSX syntax.Just use it with anything.
Easy system, easy code. It’s very simple.
Save time. Just connect properties to your components.
In addition to validation and simple things, the system supports optional, group fields in the form and much more. Just read documentation.

For support us, just set a star in our GitHub page (Thank forward).

https://github.com/nickorsk2017/formMOD
What do you think about this system?
Thank you!

Why you need a new library for forms on React?

Nickolay Stepanov (Nick) — Mon, 11 Apr 2022 14:36:39 +0000

Hi all!
At the moment there are many libraries for forms on React.
After analysis, we found problems in most of them.
I want to talk about it and suggest our solution.

Problem: You need to use a specific syntax in your JSX.

Example 1

import { Formik, Field, Form, ErrorMessage } from 'formik';

<Formik>
    <Form>
        <label htmlFor="firstName">First Name</label>
        <Field name="firstName" type="text" />
        <ErrorMessage name="firstName" />
   </Form>
</Formik>

Example 2

import { Form, Field } from ‘react-final-form’;
<Form>
    <Field name="bio"render={({ input, meta }) => (
        <div>
          <label>Bio</label>
         <textarea {...input} />
    {meta.touched && meta.error && <span>{meta.error}</span>}
        </div>
        )}
    />
</Form>

What issue??

If you currently have a project you need to redoing all your UI components to specific syntax.
Until today a developers have millions UI libraries. Why can't you just install it and use it? You must make a wrapper components, adapt logic to use library.

We calculated time for redoing a large app.
It need about from few months to fixing bugs, changing syntax…
For a business it crazy huge.

Solution

When you need to think about a form library at first moment?
Yes, when you need a validations.
A form library only must know about data.
For example, that a data row is valid or not.
**- Not about your app structure.

Not about JSX or UI components inside.
Not about UI logic. A form system must be abstract. It's like a smart useState().**

You should make your app easy, just connect your components to data.

How it can look.

After long analyse we decided to make our library.
For creating your forms you need two simple steps:

Define a scheme which describes validation and some properties of form data.
Connect your scheme via methods to your UI components.

Scheme

// scheme.ts
export default {
 valid: null,
 formValue: {
    first_name: "",
    last_name: "",
 },
 rules: {
    full_name: [
        ["empty", "please enter your full name"]
    ],
    email: [
        ["empty", "please enter your email"],
        ["email", "is not email"],
    ]
 }
}

Form

//MyForm.ts
import {useFormMod} from "formmod";

export const MyForm = () => {
const {setValue, getValue, getError, validate} = useFormMod(
    FORM_SCHEME
);
return (
<form onSubmit={handlerSubmit}>
    …
    <MyTextInput
        label={"Full name"}
        value={getValue("full_name")}
        error={getError("full_name")}
        onChange={(value: string) => setValue("full_name", value)}
    />
    …
</form>
);

Full documentation :

https://doc.formmod.org/

**WE RECOMMEND TO USE LAPTOP OR DESKTOP DEVICE FOR READING DOCUMENTATION.

Advantages:

No dependencies. This is the power of simple work.This form system don’t know about your components, JSX, your app, store…You can use it with any UI components. No longer need to make wrappers components, understanding JSX syntax.Just use it with anything.
Easy system, easy code. It’s very simple.
Save time. Just connect properties to your components.

Important

We have finished our library recently.
Until today we have 151 commits, 14 releases in our repository and this is just the beginning of the work.

We started work with community, fixing documentation.

We need your support, just set a star in gitHub here:
gitHub page

Other features

Also our library can work with optional, group, composite components.
It has described work with CRUD, store (about mutable data) and more.

It is absolutely free (MIT).

We are working for world community.
We want to make development easer for everybody.

Thank you for reading!

React. New library for react forms.

Nickolay Stepanov (Nick) — Tue, 22 Mar 2022 09:20:13 +0000

Good day, my name is Nikolay! I am one of the developers of the new library for react forms.

How much time do you spend to creating react form from project to project?

This question is relevant for many React developers.

The formMOD library was created to reduce the development time, as well as for universe and flexibility.

You can create a great web applications!

This is absolutely free library (MIT license).

At the time of this writing, this is a completely finished project, with documentation and the system is already being used in web applications.

I will try to describe all the features of the library as briefly as possible.All examples and the detailed description are in the documentation.

THIS IS SHORTLY SUMMARY OF ALL FEATURES OF LIBRARY.

WE RECOMMEND TO USE LAPTOP OR PC FOR DOCUMENTATION.

Full documentation:

http://doc.formmod.org/

Source code in github:

https://github.com/nickorsk2017/formMOD

At the moment, this project at the stage of community development. That mean, the library is finished and now people need to know about it.

PLEASE set a GitHub stars:

https://github.com/nickorsk2017/formMOD

Let’s go!

=================================================

Example

First, let's look at an example of a form that is made using the library.

https://doc.formmod.org/#/example

What using there:

Multiple validation rules of form fields.
Optional fields
Group fields (hobbies)
View mode and create mode of form

=================================================

Data

Form scheme. All data and form settings are stored in the schema, which is also a state.
Abstract data model. This means that the library knows nothing about your system, inputs, store, business logic. This gives you maximum flexibility and coverage as it doesn't create unnecessary dependencies.

=================================================

Validation

The following rules are available out of the box:
empty, email, max, min.

And you can also write your rules (custom rule).

See documentation.

=================================================
UI logic

Basic inputs

Flow for creating simple components.These are text fields, buttons, and other.

Documentation:

https://doc.formmod.org/#/basic/

Optional inputs

These are UI components of the form that depend on the values of other fields form.

For example, if you put a checkbox, then another field will appear.

To do this, use the visibilities hook in form schema.

Documentation:

https://nickorsk2017.github.io/formMOD/#/optional/

Group inputs

You can add and remove form fields on the fly.That is, it is a list of form fields with values.

Documentation:

https://doc.formmod.org/#/group/

Combined inputs

These are composite components consisting another UI components inside. Since the formMOD system is abstract, you can use it not only in a form, but also inside UI components.

Documentation:

https://doc.formmod.org/#/combined/

=================================================

CRUD

The system allows you to use one form component for viewing, editing or creating data.
This saves time and reduces bugs because you have one component for everything.

Edit mode

https://doc.formmod.org/#/editmode/

View mode

https://doc.formmod.org/#/viewmode/

=================================================

Gallery UI

This is a set of ready-made UI components, they can be downloaded and modified.The new components will be added later.

Textinput

https://doc.formmod.org/#/gallery-textinput/

Textarea

https://doc.formmod.org/#/gallery-textarea/

Checkbox

https://doc.formmod.org/#/gallery-checkbox/

Fileinput

https://doc.formmod.org/#/gallery-fileinput/

SearchInput

https://doc.formmod.org/#/gallery-searchInput/

Button

https://doc.formmod.org/#/gallery-button/

=================================================

Recommendations

In the documentation you can learn how to work with data, store and other things.

Data converters

https://doc.formmod.org/#/recommendations/converters/

Work with store

https://doc.formmod.org/#/recommendations/stores/

=================================================

Helpers

FormMOD uses utilities internally.These utilities may be useful for your work as well.This eliminates unnecessary dependencies and makes the job easier.

Look here:

https://doc.formmod.org/#/helpers/

=================================================

Smart inputs (experiment)

In the experimental plan, it is possible to create UI components through a special reference object.

This reduces the size of the code and makes working with UI inputs more convenient.

=================================================

What next?

All examples and code are described in the documentation, I will not duplicate it so as not to make the article too voluminous.

We really need your support, set a star on github here:

https://github.com/nickorsk2017/formMOD

Have a peace and good luck!

6 levels of product code growing (frontend)

Nickolay Stepanov (Nick) — Fri, 11 Dec 2020 10:37:30 +0000

Hello friends! My name is Nick Stepanov.

This is my first post here.

I work many years as a Front-end developer and took part in different projects - from small startups to large companies.

The problems start on the stage of planning. Many companies (especially startups) don't know how to write code fast and with high quality. On bellow is a detailed diagram.

I think you can understand everything, but I explain it.

Here 6 level’s model of quality for frontend development.

Each level extend previous, for example level 3 contains level 2 and level 1.

You see that quality of code proportional to Budget / Time resources. Certainly everything need a resources.

In left side you can see gradation of stage project / size company:

Startup level of project

Usually a startups have a less resources. First need to do MVP. Here speed more important than architecture. My recommendation do a strategy for improving code after MVP and do next step of growing your company. I think for a startups need minimum level 2 of quality code. Just do a good UI library for your project and do MVP fast, test your idea. After it you can fix business issue’s and redid logic's and go to next stage of company.

Middle company level of project

In this stage a companies have investment and can be have customers and small income. But resources still limited. A company can do refactoring and improve architecture. Accessible to grow to level 4 quality.

Large company /or big budget level of project.

In this time growing a company can hire many developers with high experience, for building everything tested and documented code. And a Goal here is do open source projects - it is “head of mountain”. If company doing open source projects it is mean that this company not only doing something for self, company doing for everybody - company can impact to world of IT. This is level 6 of coding.

Certainly, a startup could get big investment and build 6 levelled quality code from zero.

Thank you for reading. I will glad if my idea helping to your project. Please write your idea's :-)

Nick Stepanov.