I have been using react for almost 3 years. With react its easy to create re-usable components that are easy to use and maintain. Also there is a large ecosystem of component libraries which are written in React to make developer's life so easier.
If you are looking for performance I don't think that rect is the best option here. A better alternative is to use inferno which is created for performance and is based on React API.
The great thing is that there are a lot of tutorials about react, so getting started with it is very easy, And testing libraries like enzyme and react-testing-library makes testing react components much easier.
dayjs⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API
Since then I was looking for a better alternative and soon found Day JS.
Day JS was easy to work with as it had an API similar to moment JS. So porting my app to use DayJS was very easy. Also the great thing is that this is only 2KB.
So If you are using moment js in your frontend apps then replace it by Day JS. It will decrease your bundle size significantly.
The fastest UI library at present. I have used inferno in some of my projects like (https://ashikmeerankutty.github.io/hat/)
The API is quite similar to React. So for those who are coming from React / Preact. It is very easy to start using inferno.
The one thing that I don’t like about inferno is that It doesn’t support hooks. So we need to write class components if we need to use state. For react developers it is very annoying to write class components as functional components with hooks are a lot easier to write and custom hooks can abstract a lot of reusable methods.
If inferno implements hooks I will definitely use it in all of my projects as it is extremely fast as compared to react.
apollo-client:rocket: A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
This is by far the best GraphQL client I have used with React. The caching is simply awesome that it can speed up your app.
I recommend using apollo for all your graphql needs and not for state management. Although It is very easy to use apollo as a state management tool, you will end up with some difficulties as your app grows. I have faced the same and ended up using another state management library to manage my local states.
The best thing about Apollo is that it is easy to set things up. If you are using react, then apollo provides easy to use hooks for querying and mutation.
@storybook/react📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!
Storybooks are by far the best tool to develop react components. It is very easy to setup and is super powerful. I love creating components in storybook as it is super fast and support hot reload. Also the support for typescript components is great.
By using a typescript docgen addon it is super easy to understand props of a component.
Also hosting our storybooks to web allowed our design team to have a clear understanding about the working of our components which helped them to design it better.
netlifyA Open-API derived JS + Node.js API client for Netlify
The best static website hosting service out there. It is super easy to connect netlify with your gtihub projects. This enables building and deployment of project for every commit to master/main. So we don't basically need to think of deployment when hosted on netlify. All of my static projects including my portfolio website is hosted on Netlify.
Also netlify dns service is super awesome that I am using it for a lot of my projects and the UI is super cool.
I started my typescript journey by converting an existing open source react app to typescript. Initially it was a little difficult to figure out the types for various parts of the component but when I was done with some of the functions and variables, it became very easy to figure out the type of most of the variables, functions, parameters etc. So we can know a clear idea about what data will be flowing through that part which helps in avoiding a lot of conditional checks and errors which may be only caught on run time.
The only issue I face is some of the external libraries are not written in typescript / do not have type declarations which can create issues when working with typescript.
huskyModern native Git hooks made easy 🐶 woof!
This is a great tool to run hooks before various git operations.
I am using it to lint and run tests before the code is pushed to github. This ensures that none of the test cases are failing and the files are properly linted based on our eslint rules. Earlier these failed test cases were only found in CI which was a trouble.
I am using a pre commit hook for lint changes and pre push hook for running tests.
I always use lint-staged when using husk to lint only staged files. This ensures the person working on that particular file is only responsible for lint errors on those files.
It is very simple to use and well documented. The only issue is if you are using pre-commit / pre-push hooks the time taken for those operations will be more than usual.
Also we can override hooks by adding -n to the command. This helps especially when we are merging branches.
Npm is the best package manager for node js. It is very easy to use. I’m using npm everyday. There are a ton of packages out there you can install with npm. Also we can publish our public / private packages to npm it is also very easy.
We need to be a paid user for publishing private packages but we can easily publish public packages for free. I published many of my packages on npm. It helped me to use them in multiple projects easily.
Npm was slow as compared to yarn earlier but now it is faster. Also the caching helps in installing large packages easily without requiring a download. The only issue is that node_modules can eat up a lot of space of your hard disk.
It would be great if there was a centralised source locally and reuse packages so that it won’t eat up your hard disk but that won’t be possible due to the frequent updates to packages.
HTML canvas is very difficult to work without fabric. Fabric provides great features like multiple font support, drag and drop, etc, by directly interacting with the canvas which is very difficult to build otherwise. One of the project I am working is heavily dependant on canvas and the node JS support made fabric more powerful as rendering and export can be also done in the server side.
The project I am working aims at creating badges of different types on a large set of images, so it required the support of node JS to generate the images in bulk in the server.
The only downside of fabric in node is that, it is using node canvas under the hood and it is not well maintained. It also helped me to generate a JSON of the configurations so that I can save them in a database and load them to let my users update the image whenever they needed.