Tag: react

Customize Webpack and babel configuration with fork of create-react-app to optimize SPA

Customize Webpack and babel configuration with fork of create-react-app to optimize SPA

Problem Statement:Many of us start our React SPA project with create-react-app script. We make the deployable app using available configuration of CRA on development environment. But when we run ‘yarn build or npm run build‘ and serve it, the app faces below problems:-> Takes more time to load page due to large bundle size-> Third party library is not…

My Promise is to Cache your data!

My Promise is to Cache your data!

Promises have had a very boilerplate filled history with generic libraries and browser standards. With react hooks being in the mix, everything is about abstracting stuff out to make things simpler.  What is the traditional way to call API and Cache Data? In the traditional way, we are forced to work with too much boilerplate…

Storyshots – a powerful side of Storybook to Visual Test React Components

Storyshots – a powerful side of Storybook to Visual Test React Components

At a consumer-oriented business like Shaadi.com, we like to maintain discipline around our React components, the way they look, feel and behave in the real world for our customers. The benefits of writing functional tests with 90–100% code coverage have now become obvious to us. But I felt functional tests were still not answering an…

React and Finite State Machines

React and Finite State Machines

Finite state machines, generally speaking, are a computation model used to describe a system in terms of the transitions between it’s states. They make it possible to is really easy to visualize your computational model as a graph and make sure that your application isn’t left with unhandled cases or illegal states. Warning: Read the wikipedia page on Finite…

Everything you wanted to know about Sum Types (but were almost afraid to ask)

Everything you wanted to know about Sum Types (but were almost afraid to ask)

A lot of messy JavaScript has to do with loose typing, invalid values and the horrible chain of ternary expressions or — heaven forbid — if statements to handle them. With JavaScript, all functions run on the concept of “pretend what you are getting is what you asked for”. If the value is not valid for the kind of…

Keeping an 👁 on Web Performance

Keeping an 👁 on Web Performance

90% of our users are mobile and I am sure yours are too. They carry around your business in their pockets and we carry their hopes and dreams 🙂 Now, as many as 85% these users are using low-end mobile devices This represents a new reality for me and my team working here at shaadi.com….

Getting Emotional with React

Getting Emotional with React

SO WHAT IS IT ? 🙄 🙄 🙄 Emotion is a library made for writing CSS styles with JavaScript. It allows you to style apps quickly with string or object styles. The most amazing thing about this library – other than it’s size and performance – is the flexibility of use. It supports strings, objects and…