A few months ago I published a post about how to create a force graph using React and D3. But what if the force graph data source is enormous? Would you still use D3 or are there any other solutions out there?
In this post I’ll explain how you can combine both D3 and PixiJS to create almost the same force graph but in a different way which will enable you to support bigger data sources.
In the app we created we faced a very painful performance problem. While D3 helped us to create the relevant force graph we needed…
A few weeks ago I published a post called “Creating a Force Graph using React and D3” that explained how to create a force graph using D3 which is wrapped in React container. In this post I’ll add a new feature to the graph — a context menu. Make sure to read the previous post before you continue reading this post.
The browser regular behavior when you press the right mouse button is to open the browser context menu. In some scenarios you might want to control what is going to happen when your user is pressing the right mouse…
I was involved in an interesting project that includes building various graph visualizations. The app we built used React as the view engine and D3 library for data visualization. In this post, I’ll show you how to create a force graph using D3 for visualizing connections in your data.
We’ll start by creating a new React app using create-react-app bootstraper. If you have Node.js installed on your machine, just run the following command:
npx create-react-app react-d3-force
This command will generate a new React project. After the project was created, get into the app folder and add D3 and Font Awesome…
One of the hidden gems in Chrome DevTools is the FPS meter. The FPS meter enables you to monitor frames per second during runtime. It’s very useful for animation monitoring and can help you to understand if you are running below 60 FPS.
How do you use the FPS meter? This is what this short post will cover.
Open the Chrome DevTools and then open the Command Menu by using Control+Shift+P in Windows or Command+Shift+P in Mac. In the Command Menu, type ‘Show frames’ and pick the first option (should be “Show frames per second (FPS) meter”):
Doing this will…
A few weeks ago I delivered a session in AngularConnect conference about profiling Angular apps. As part of the talk, I explained shortly what is a memory leak and what can cause memory leaks in Angular apps (ahhm… I’m looking at you observables…).
Note: Finding memory leaks is a long process that can take some time. Don’t be afraid to walk this path cause the gain, which is app stability, is very high.
A memory leak is defined as memory that isn’t…
A few days ago I published a post called “Wrapping React Components Inside Custom Element”. The post explained how to wrap a React component inside a custom element. At the end of the post, I wrote that I might think of a few ways to do the same functionality but automatic and more generic. In this post, I’ll explain one of those ideas.
Note: If you didn’t read the previous post, I suggest to read it to get some context for this post.
At first, I’ll take an assumption which is that the majority of React developers use the prop-types…
This week I had the pleasure of speaking in the ReactNext 2019 conference. My talk was called “I’m with Web Components and Web Components are with Me” and it was all about consuming Web Components in React apps and wrapping React components with custom elements. In this post I’ll explain the second part and why you might want to do it.
React Documentation mentions that React and Web Components are complementary to each other. React is the view engine that is responsible to keep the DOM in sync with the app’s data, while Web Components provide a strong encapsulation for…
There are some scenarios that you would like to cancel a server request. For example, your user is requesting a report which takes a lot of time to retrieve and changes her mind and request another report. What will you do? This is where AbortController can be very handy.
In this post I’ll shortly explain what is the AbortController and how to use it to abort fetch requests.
The AbortController is an object that can help you aborting fetch requests. How do you do that? First of all, create a new AbortController:
const abortCtrl = new AbortController();
Once you have…
A few weeks ago I delivered a session in ReactNext 2018 conference with the same title like this post’s name. Due to a lot of interest about the topic and questions I got as a result of the session, I decided to put the details I mentioned in my session in this Blog post.
In this post I’ll explain only the technical stuff about how to add TypeScript to your existing React app. If you wish to learn the reasons to use TypeScript or about TypeScript support in create-react-app, you can watch the session recording here:
Next week I’ll be attending AngularConnect 2018 conference and I’m very excited to return to one of my favorite conferences. I’ve missed last year conference due to other commitments, and I’m eager to meet all my old friends and make new ones.
In this year’s AngularConnect I’ll have a mini-workshop at the end of day one. The workshop is called “#UseThePlatform with Stencil and Angular” and it’s all about Stencil and how to wire it in Angular apps. If you are interesting to hear more about Web Components, Stencil and Angular you shouldn’t miss this workshop. …