DEV Community: alireza valizade

Boost your React application’s performance by Xstate

alireza valizade — Wed, 24 Feb 2021 11:06:09 +0000

Performance

Is one of the important keys in every application to have better UX and make users happier (of course you may not care about users happiness, but it makes yourself happier 😃 Because you want to do something in a best way and you enjoy it). Performance is different on the web based applications it depends on the tools you choose and how you use them specially on low memory devices like TVs and Mobiles.

State Management

There are a lot of libraries out there that you just install and use them in your project. Some people just using the Context Api it self which is powerful and easy to use, but also has some downsides like unnecessary re-renders, Take a look at this example:

As you can guess, All the nested components get re-render, You are thinking that I’m wrong I can use useMemo() or split the component in two and use memo() , But everything has a cost so better to avoid them! Checkout this interesting article here from Kent C. Dodds If you see the console.count() results in the console then it means React started the reconciliation process to detect the diffs there in virtual dom. Sometimes this process is not fast enough and you will see the issues and it becomes slow by decreasing frames, sometimes lags in animation like close a Modal. Again checkout this article from Kent C. Dodds to understand better these downsides in React.

This is just small example and you won’t see the affects but imagine you have thousands of components there. It was really important to me to avoid these kinds of unnecessary re-renders in the application and only update the part that really needs to be update.

Today going to talk about the Xstate and It benefits to share the state between the application.

What is Xstate?

Based on the documents the definition of Xstate is:

JavaScript and TypeScript finite state machines and statecharts for the modern web.

And a simple example:

Let’s say we have a music streaming application that user can add/remove items from the library, So the flow will be:

Authentication
Getting User Profile Information (also on refreshing page to detect if user is already logged in)
Getting User Library Information (Musics, Videos, Podcasts and more…- We need this information everywhere not only in one page)

This sounds really easy and straght forward without Xstate, Isn’t?

It’s possible but it’s not good and clean enough, So the answer is a NO :

You need to define the states yourself
You need to define the loadings states yourself
Your logic and your components getting mixed together, A lots of useEffect(), useState(), useCallback, Promise().then().catch() and callbacks
You need to create guards in all the actions, For example you need to check if the latest library is loaded then you can add or remove to/from library
A lots of setState since the datas need to be store somewhere and need to be reactive, This means a lots of re-renders
Hard to debugging since you don’t know the states
Hard to have control on the flow

I’m sure there are more.

Behind the state management Xstate gives you powerful control on the flow and different states. If you’re not familiar with the Xstate first take a look at the documents since this post is not about learning Xstate it’s about using it.

See the result in visiualizer:

THIS IS REALLY COOL! You can define all the steps in the machine and transition between them using events or states itself by target key.

Using the machine

In a normal way there are some helpers from @xstate/react package, like useMachine() :

All is good, We have 3 different components:

LibraryHandler: It doesn’t needs to be update at all since it’s only injected actions.
LibraryPresent: It only needs to be update when the library.mp3s item has been updated in the store.
UserProfile: It only needs to be update when user item has been updated in the store.

But we didn’t solve the issue yet, We still will get those nasty unnecessary re-renders and we wan’t to avoid using memoize helpers. So we need atomic updates, We need to run the machine without passing the state to provider, Here is the place that interpret and useService hook will shine:

The authService function will return the service, Eeach service has some useful methods but what we need here are:

start(): to start a service
stop(): to stop a service
send(): to send events
subscribe(): to listen to changes

We need to update our AppProvider component and provide the service instead of state directly.

So far so good! You see selectors object above that I’ll explain it in a bit.

Let’s create the subscriber hook:

This hooks takes two main arguments:

service: A service that has been started
selector: A function that receive the state and returns a specific data

What’s going here?

It’s easy instead of having one global subscriber we have multiple subscribers, And when the component unmounted we unsubscribe the service. This is kind same as redux selectors working.

Let’s update the components that needs the data.

Yes this is exactly what we need to get out of the re-render hell in React apps with xstate.

Summing up

xstate is definitely one of the coolest thing that I have ever worked with it in our applications. It’s helpful for managing the complicate states there are a lot of cooler things that you can do with it. shout out to David Khourshid for creating it.

Thanks for reading, If there is anything I have missed or if there is a better way to do something, Then please let me know. I’d be happy 🤓

You can find me on Github and Twitter!

What are the options to download a file in Electron based applications?

alireza valizade — Mon, 18 May 2020 13:08:02 +0000

If you want to deal with downloading files, better read this before start coding 🙌

My own downloader, will be live soon 🔥the icons are fake for now 😀

I was developing an Electron application a while ago and one of the challenges was downloading files and did some researches about it and saw that the Electron download API wasn’t the only option and it was tricky to use. 🤔

If your project is growing fast and the future is important for you, Then you need to think about every thing before any actions. An action could be choosing a library or framework or installing a simple package from npmjs. You should think about the consequences and be independent. 😀

Here are some topics and questions you may need ask yourself before start coding:

Has or Will have my application a website version? Like Slack. Just renderer code base and ignoring the native dependencies.

Yeah. This is important thing when you have to deal with files and buffers in your application. You should also consider the web version in the client side there is not main process and there is no IPC module to communicate through the channels. Like so:

// somewhere in main process
const window = "Your browser window instance";

ipcMain.on('download-url', (event, url) => {
  download(url);  
});

// somewhere in renderer process
ipcRenderer.send('download-url', "https://google.com/dummy.mp4");

Don’t depend your app to main process which won’t be there in website version. Keep the renderer process isolate as much as you can and reduce the dependencies.

There are lots of solutions in renderer (Browser), you can use simple or fetch Api or third party libraries. You can get buffer or blob using fetch which is what you need.

const download = async (url) => {
  const response = await fetch(url);
  const file = await response.blob();
  console.log(file);
};

Note: You can use remote module here to control the file system.

Electron download api is stupid, check out this issue on electron’s repository. You can’t even send custom headers!

Do i need to show progress/status on each download item?

Well this depends on the UI, Electron’s downloadItem has cool features which you can get the progress and received bytes but that’s not enough! There are a lot of options, You can handle this in both processes. You can use built-in http module or third party packages request which is same but simplified version. In the renderer is same thing, Let’s look at an example from javascript.info

This is what you need to show the progress/status on downloading items. also will work on the browser, so you’re not depend on the main process.

Do i need to have actions? (Cancel, Pause, Resume)

This is also easy to do, you can use the electron downloader api, but there’re few issues for example if you want to cancel an downloading item it’s easy but after restarting the app or losing the download item you won’t be able to resume it. another issue is it cannot be customized even setting simple header. This was the one may things which decided to go for the renderer or another method to use as downloader helper.

You can use fetch api in renderer to cancel, pause and also resume the download item. you can easy set a Range property header to your downloader which is based on fetch . This is how the streaming services are working like Spotify or Netflix. You can specify which part of file you want to download. Then you can merge the downloader buffer to new or cached buffer in disk suing file-system api or IndexedDB in renderer.

for cancelling also fetch has nice and easy way to cancel the request.

Spotify 🎺

You want a challenge? Now you can create a multipart file downloader. Doesn’t matter which api, try fetch or axios or anything in Javascript🔥

Is concurrency important for you regarding the performance in the renderer in case you need to show report for each one, and network speed?

You can try and create and async queue which accepts number of concurrency . I’d recommend you to use async.queue.

Summing up

I’m very positive about the future of the developing cross-platform/web applications and it’s growing fast and I think this was the one of interesting topics to know. I couldn’t find what I was looking for in one article so that was the reason I wrote this one. Hope you enjoyed it. ❤️

Thanks for reading, If there is anything I have missed, or if there is a better way to do something, Then please let me know. 🤙

You can find me on Github and Twitter!

How to deal with forms in Vue (Create your own flexible form library) | Chapter 1

alireza valizade — Sun, 08 Dec 2019 21:22:29 +0000

In this article I’ll show you how much enjoyable is working with forms by building a super flexible library.

Spoiler

Here is min , Which I have been created And would like to share my experiences with you guys.

It’s been years which I worked with complicated forms, I used cool libraries like FinalForm or Formik and in the past tools like Redux-Form, But recently I decided to make some challenges for my self and create a library for building forms in Vue which I’d like share my experience here because a lot of developers hates from building forms but I’m going to show you it is not really hard and I like it!

Chapters

Building the form library (We’ll build something basic then we’ll improve it in further steps)
Connecting the form components to third party libraries
Connecting the form components to native html inputs

Topics

What we’ll build are just two components Form and Field, Form is the parent and the Fields will be the children of it and then the rest is just about sharing the “State” between them, from parent to children (and Field for custom component and third party libraries) and also something important which is “Reactivity” in Vue.

Let’s take a look at what we’re going to build and some features:

Form and Field state (complete report for each Field and the Form)
State management
Custom validations (Write your own validation, you just need to return true or false and the error message)
Handling Validations (Form level and Field level, You can pass your validation to Form or Field)
Custom Props (like running validation on blur or just focus or …)
Initializing the Form and listen to changes of it
Custom Hooks (like “@create(form)”, form example you can use the form methods in your current component)
Make it subscription based (This could be useful when you need optimisation for your app, Imagine you have 10.000 thousand of dynamic fields in one component)
Field Arrays and with simple methods like push(), remove(), swipe()
And more….

Let’s install a few helpers from Lodash which makes our life easier.

yarn add lodash.set lodash.get lodash.isequal

Understanding the Form and Fields state properties

Each Form and Field has state which includes some properties which have special meaning and they happened in the special time which are accessible from outside or inside of the component (You’ll get the point later). Here is a translation of them, Let’s take a look at the states properties:

FormState:

FieldState:

State management

The basic Form.vue will be like this:

Yeah, We are going to use all the Vue’s power 😅. We need all of it.

We added slot to be able render the children there, We also can bind the FormState to get the state of form directly in children.

Let’s start with fields states in form state. We need to add a property in our data and call it fields like this:

data() {
 return {
 fields: {},
 };
},

This is main part of controlling the fields, Basically we are building controlled components which are our fields.

Next step, We need something that we could manipulate the state from outside and inside the Form component. so we need a method to register a Field (add fields property in data) and then another one for unregistering it. For registering a field we need the exact field state which we talked above, So we need initial state for each field.

registerField() : For registering a new field. Each field has a name, Even for handling nested properties we just need to keep them like this. We can use get to compute them and return them in values , For example:

These two fields will be register like this:

This’ll make our life very easier, We won’t care about the nested fields and the Reactivity for nested properties, But in other hand we have the all the benefits of them, we can compute them and return them in a main object with nested properties using the set method from Lodash.

unregisterField() : For removing an exist field and setting it to undefined is enough because they are reactive (after registering them).

initFieldState() : Initial field state, which we’ll make them subscription based using props later for performance reasons. we’ll listen to user actions and calculate them based on it.

OK, These are fine but as I said we need to manipulate the state from outside and also inside the Form component, How can we access to these methods in everywhere in children (regardless of how deep they are)? We’ll use Provide and Inject here. It’ll save our life from repeating ourselves. Take a look at my previous article about the Context in Vue.

These are enough just for updating the state but not at all we need, one more thing here is required which is need to listen the changes and get the current state of the each field here. I prefer method instead of computed property because I want to get the state based on a parameter which is name of the field, Something like this:

And also provide it to children:

Next step, We need a method to change the value of the field directly, We need a name to find the field, and second parameter will be the value to update the field state. Also we need to provide it to children.

// methods
change(name, value) {
 this.fields[name].value = value;
},
// provide
{
 //...
 change: this.change
}

Let’s see how will look like our Field component, But for now I’ll just handle it for custom components because natives input has more stuff todo which we’ll handle it in further steps.

As you see we injected provided methods from Form, In created we’re calling registerField , In destroyed we’re calling unregisterField , That’s what we need to add or remove the fields, We have fieldState computed property which is returning result of getFieldState method by passing name from props. Also we used slot to render dynamic and custom children (components). I’ve created some more computed properties which will make our life easier.

Custom Validations

Let’s make this flexible, What we need is just passing Pure Functions to Field or Form and pass the value of the field and return error messages based on your own conditions. It could be Array of functions (in this case we need to compose them to return first error) or single function.

Handling Validations

What we need is create a wrapper function around the validations and run it on each change. Let’s define validate prop in both components.

// Form
props: {
 ...
 validate: {
 type: Function,
 default: () =\> (null)
 }
}
// Field
props: {
 ...
 validate: {
 type: [Function, Array],
 default: () =\> (null)
 }
}

Form validation

We need to call it on every change in form.

Field Validation

We need to pass the validate function to field state when we are registering the field on created hook then we can access to it and run them from field state like this,

We need to call it in change(name) function.

The values is a computed property which returns all the values in field by calling getFieldState(name) .

Custom Props

As you know this architecture is flexible you can do whatever you want, I want to show you some of this features like validateOnBlur .

Let’s define a prop in Form and call it validateOnBlur in form, We want to validate the fields only when blur called instead of change() , The only thing you need is to create blur and focus function and change the field state. Also you need to inject from Field component and pass it to your fields.

I created a helper and called it setIn(name, propertyName, value) which change the field state directly and then calling the validation functions.

Initializing the Form

As I mentioned every field even nested has only one key (like “user.firstname and user.lastname”) with this trick we can easy handle nested fields.

Let’s define a prop and call it initialValues and initialize() method in the Form. We also want to re-initialize the Form on changing the initialValues , So let’s also use watcher to listen to changes.

Custom Hooks

Sometimes we need to access to form object in the current component which we defined the form, like here:

As you see, I want to be able to access to form object from FormState to do some stuff which I commented in screenshot. This is the moment we need to define custom hooks for our Form.

Then we could easily use it like this:

Subscription based

As you know, We have a lot computed properties which are related to reporting the FormState and FieldState which could be a killer for us when talking to performance. Because they have a lot of logic inside themselves which need to be calculated, Also they’re listening to each change to be called.

Let’s define a prop in Form or Field and call it subscriptionItems, Then we could attach dynamic compute properties beforeCreated life cycle hook in Vue,

We could do the same thing for Field.

Field Arrays

Again, I should to notice that, Our fields are just simple strings with valid identity in Javascript for defining properties in objects.

The values computed property is handling with set() from Lodash. So you can guess what’s the output of it. But this is not enough for having dynamic fields or some kind of a repeater which can control by user and also programmer.

For handling this you could easily create same thing with Field component but having more methods like map, push, remove then pass it to fieldState() , Responsibly of map is just returning array of names and then push is for adding new row or object to our value in fieldState and remove for removing an item from fieldState .

The you can use it like this:

Result:

conclusion 🎉

Yeah, We made it. Forms always are something interesting and I like to work with them and help others to create what they want. Thanks for reading it.

Here is mine, What I have been build. You can go over the code and understand it easily, I’m open to help you 👷‍♂️ , If you have question open an issue on Github or Respond here.

Live demo

https://codesandbox.io/s/simple-form-using-vue-controlled-form-fields-z2twq?fontsize=14&hidenavigation=1&theme=dark

FOR MORE EXAMPLES CLICK ON THIS LINK

Rendering images smoothly using React Hooks

alireza valizade — Mon, 11 Nov 2019 16:01:59 +0000

simple hook to render images smoothly.

In this article I’m going to create very simple Hook to render images smoothly on the screen (Not really rendering but sort of trick).

Create a file “useImage.js” and wrap it with “Hooks” directory with these contents:

This is very basic hook you can add your own stuff, it depends on your needs, like handling errors or whatever which is related to image.

Let’s add some styles to handle the transitions:

I’m going to create a “Cover” component to reuse it everywhere.

Let’s see the result.

Demo Time

Check it out on Sandbox

React Context in Vue

alireza valizade — Thu, 31 Oct 2019 23:05:29 +0000

This article is about switching to Vue.js with Context mindset.

I think these days every developer have heard about the context in React.js, So I’ll straightly go over the code and the solution. If you’re not familiar with Reacts context click on the link.

Provide And Inject

If you are a React developer and thinking like React “context” you cannot work with Vue.js without the Provide and Inject feature (I mean it’s hard, really).

Let’s see a simple example of Provide and Inject:

A simple example of Provide and Inject

So basically “Provide” it’s for passing data or methods to the children with “Inject” property, regardless of how deep they are, But what will be solved exactly?

Not using props to pass the data to children like 5 levels
Clean, simple and powerful store management and not using the Vuex when it’s not necessary
DRY

Vue source code

These two screenshots are part of provide and injection in Vue source code (after normalisation them).

Provide: You can write it as Object or a function which returns an Object which you can access to the component context (this) and you can pass method or computed properties or whatever in the component.
Inject: You can write it as an Array of strings or Object with a default value.
about resolveInjection function: It’s a simple loop over the inject object and looking for the provider with a “while” loop to resolve it.

Simple store management with Provide and Inject

We’ll build the “famous theme handler” with context to understand how easy and useful is the context.

Use Vue cli to bootstrap your project.
Now, You can have a structure like this.

As you see we have a weird “context” folder which we’ll look into it in further steps. :)

Create a Javascript file in “styles” folder and call it “themes.js” with these contents.

Let’s go to “contexts” folder, Create a JS file and call it “Theme.js”.

We have two components in the same file with the string templates in this case you need the standalone build, here is a helpful section explaining (of course you can have separate files like ThemeProvider.vue and ThemeConsumer.vue).
First one is our Provider which provides the data and methods to injectors.

Theme.js

Second one is our Injector (Consumer) which is able to inject the provided data. actually second one is just a helper to write less code and reuse it every where.

Theme.js

And that’s it, we are good to go. You just need to import the Consumer and then you can access to provided data using “slot-scope”.

You’ll need to import and wrap the Provider inside your application root. Unfortunately there’s no Hooks in the current versions of Vue yet to use it like React (useContext).

Let see some magics. We have two components which we’ll see the different use cases.

First component: We see a component which wrapped with the Consumer and you can access to the data and methods by “slot-scope”. You can bind styles and pass the theme variables or you can bind classes and handle the styles and theme using css!

FirstComp.vue

Second component: We see a component which wrapped with a “div” in template and includes two ThemeConsumer, this means you can have a lot of Consumers in every where also you can override them easily.

SecondComp.vue

Live demo and source code

https://medium.com/media/db4b42c5bcdecd87f5da93b3902772b6/href

Keep in mind

Note: the provide and inject bindings are NOT reactive. This is intentional. However, if you pass down an observed object, properties on that object do remain reactive.

Summing up

No matter if you are working with React or Vue, “Context is everything”! It’s very simple to understand, divide you application code and structure. It solves the problem of passing stuff deep down your component.

Thanks for reading, If there is anything I have missed, or if there is a better way to do something, then please let me know. 🤙

You can find me on Github and Twitter!

KAMPONENT

alireza valizade — Sat, 05 May 2018 08:31:08 +0000

If you like this library please click on the start button on github.
https://github.com/cooldrip/komponent

kamponent

a component for creating react components 🏃

This library is not released yet

Installation

npm:

npm install kamponent --save

yarn:

yarn add kamponent

Example 1

<Kamponent pure initialState={{ count: 0 }}>
    {({ state, setState }) => {
        return (
            <div>
                <h3>{state.count}</h3>
                <button onClick={() => setState({ count: state.count + 1 })}>+</button>
                <button onClick={() => setState({ count: state.count - 1 })}>-</button>
            </div>
        );
    }}
</Kamponent>

Example 2

<Kamponent>
    {({ props }) => {
        return (
            <div>
                <h3>{props.count}</h3>
                <button onClick={() => props.increment()}>+</button>
                <button onClick={() => props.decrement()}>-</button>
            </div>
        );
    }}
</Kamponent>

props

Property	Type	Working
children	function or array or object	Yes
initialState	object	Yes
pure	bool	Yes
didMount	function	Yes
didCatch	function	Yes
willUnmount	function	Yes
shouldUpdate	function	Yes
didUpdate	function	Yes
snapshotBeforeUpdate	function	Yes

params in functions

note: you can access to this parameters from functions and children (if it be function).

Property	Type	Working
state	any	Yes
props	any	Yes
setState	function	Yes
forceUpdate	function	Yes

Background-Image-On-Load

alireza valizade — Sat, 28 Apr 2018 05:45:18 +0000

Background-Image-On-Load

A simple way to check background-image is loaded.

Installation

npm:

npm install background-image-on-load --save

yarn:

yarn add background-image-on-load

Usage

import React, { Component } from 'react';
import BackgroundImageOnLoad from 'background-image-on-load';

class App extends Component {

  state = {
    bgIsLoaded: false
  };

  render() {
    const { bgIsLoaded } = this.state;
    return (
        <div
          style={{ 
            height: 300,
            backgroundPosition: 'center',
            backgroundSize: 'cover',
            backgroundImage: `url(${!bgIsLoaded ? 'https://picsum.photos/310/310?blur' : 'https://picsum.photos/1600/310'})`
          }}
        >
          <BackgroundImageOnLoad
            src={'https://unsplash.it/1200/310?random'}
            onLoadBg={() =>
              this.setState({
              bgIsLoaded: true
            })}
            onError={err => console.log('error', err)}
          />
        </div>
    );
  }
}

export default App;

If you like this library please click on the start button on github.

https://github.com/alirezavalizade/background-image-on-load