DEV Community: Fyno

A simple guide to addressing single point of failure (SPOF) while evaluating external tools

Rohit — Fri, 02 Feb 2024 08:01:56 +0000

Introduction:

In the dynamic landscape of technology, reliability is a key ingredient in the recipe for long term success, especially when evaluating external tools or Software as a Service (SaaS). This guide is your compass through the realm of Single Points of Failure (SPOF) as we navigate the intricacies of evaluating external tools.

Understanding SPOF isn't merely about isolated considerations; it's an integral part of a broader assessment of reliability. This exploration goes beyond the surface, looking at factors that contribute to a robust and resilient tech ecosystem, with a focus on external tools and SaaS platforms.

As we embark on this journey, let's keep in mind that SPOF, in this guide, specifically refers to potential unavailability/ functionality failures within external tools and SaaS solutions. From common tools like CRM software to payment systems and expert automation platforms, we'll unravel not just the challenges but also the key markers that indicate reliability in the world of external tech solutions.

The Reality of Outside Tools

In the fast-paced world of technology, the acceptance of Single Points of Failure (SPOF) isn't a compromise; it's a strategic trade-off for gaining access to the most advanced outsourced technology. What are the trade-offs? -

Immediate Time-to-Value: Opting for external tools acknowledges the SPOF risk but provides businesses with immediate access to complex functionalities. This trade-off allows companies to jumpstart their operations without investing valuable time in building intricate systems.
Functional Depth and Expertise: External tools often come with a level of functional depth that is challenging to replicate in-house. Businesses accept the SPOF risk because the depth and expertise offered by these tools far outweigh the potential risks associated with a Single Point of Failure.‍
Resource re-allocation: By embracing external tools, companies can concentrate on their core competencies. Tools like Stripe and Segment provide such specialized functionality that they become synonymous with their respective categories, allowing businesses to leverage the expertise without having to reinvent the wheel.

So based on the above examples, this is how we sum it up: In the ever-changing landscape of technology, the decision to accept SPOF as a trade-off for accessing advanced outsourced technology is a rational one. Examples like Stripe and Segment showcase that businesses, more often than not, find the decision matrix tilted in favour of leveraging external tools.

Reality in today’s businesses

In corporate discussions, the desire to minimize risks associated with external tools is a common thread woven into various organizational initiatives, audit considerations, disaster recovery plans, and the aspirations of internal teams to be self-sustaining.

While each of these motivations may seem justifiable independently, the challenge lies in striking a balance between risk mitigation and resource optimization. Let's explore the two predominant approaches businesses can consider when dealing with the Single Point of Failure (SPOF) dilemma.

Pursuit of building internal Back-Up Systems

The approach of building internal back-up systems is grounded in the idea of self-sufficiency, especially while fearing external tool downtimes or failures. This suggests creating primitive functional systems internally, serving as a safety net for times when external tools experience disruptions.

The Pitfalls:

Resource Trade-Offs: The reality is that building and maintaining internal back-up systems are resource-intensive endeavors. It requires a significant investment of time, talent, and financial resources, diverting focus from core business functions.
Primitive Functionality: Internal systems built as backups often start with basic functionalities. In the case of working with a complex tool like Stripe, replicating its capabilities internally can be an extensive undertaking.

Even as internal development projects hold allure, the reality, as depicted in Gremlin's Chaos Engineering report, is striking. A significant percentage of outages stem from unforeseen interdependencies and vulnerabilities in internally managed systems. This statistic serves as a compelling reminder of the uphill battle internal teams face in achieving reliability benchmarks.

When it Makes Sense:

This approach might be justifiable for tech giants like Amazon or Facebook, where the potential loss of business due to external tool downtimes is substantial enough to outweigh the costs of internal development and maintenance.

Building and Innovating Best Practices: A Logical Alternative

The Rational Path

A more logical alternative is to innovate on tool evaluation practices. Instead of seeking SPOF-free solutions, the focus shifts to finding tools that are more reliable than anything built internally. This perspective recognizes SPOF as an acceptable risk when measured from a relative standpoint.

The Logic

Acceptable Risk: This approach acknowledges that absolute SPOF elimination is challenging. The goal is to choose tools that, in relative terms, minimize risks and provide a more dependable foundation for operations.
Comparative Evaluation: Businesses evaluate external tools not by their ability to eliminate SPOF entirely but by their track record, responsiveness, and commitment to continuous improvement. It's about choosing tools that, in practice, prove to be more reliable than their internal counterparts.

Now let's look at the best practices that new age technology leaders use while evaluating external SaaS tools in their tech stack.

12 Parameters for Evaluating external SaaS for reliability

As technology leaders dive into evaluating external tools, it's vital to look beyond the surface. Key parameters act as markers for reliability.

1. Legacy: For How Long This Software Has Been in Use:Longevity often speaks to dependability. Tools that have been around have weathered tech changes, proving their adaptability over time.
2. Transparency on Uptimes: Being open about uptime is a sign of reliability. Tools that share their uptime statistics show a commitment to honesty and accountability.
3. Historical Uptimes: Past performance indicates future behavior. Consistently high uptimes build confidence in a tool's reliability.
4. Contractual Guarantees on Uptimes: A written commitment adds assurance. Tools with contractual guarantees on uptimes show confidence in their abilities.
5. People Building the Product, Their Expertise, and Background: The team behind a tool matters. A diverse, experienced team is better equipped to handle challenges and ensure ongoing improvement.
6. Other Customers Trusting Their Product: Customer trust is a powerful sign. If well-respected organizations rely on a tool, it's likely dependable.
7. How Robust is Disaster Recovery Setup: Being ready for disasters is crucial. Tools with robust recovery setups show a proactive approach to risks.
8. Compliance with SOC 2, ISO, and Other Audit Certifications: Adherence to industry standards shows commitment to security. Tools with certifications exhibit dedication to maintaining a secure environment.
9. Continuous Improvement Practices: Reliable tools evolve. Checking a tool's commitment to continuous improvement, like regular updates and user feedback response, shows adaptability and longevity.
10. Scalability: Scalability is vital for growing businesses. Tools designed to grow with demands provide a reliable foundation for future growth.
11. Support and Responsiveness: In challenges, responsive support is crucial. Evaluating a tool's support system ensures assistance when needed.
12. Vendor lock-ins: Smart companies will lock in critial SaaS vendors with long term contracts to ensure continuity of services.

Conclusion:

As technology and product leaders navigate the tech landscape, the quest for a SPOF-free infrastructure becomes a pragmatic pursuit. Third-party tools, by default, introduce SPOF considerations, but it's a reality embraced by smart tech leaders. The evaluation lens shifts from absolute elimination to relative mitigation, trusting data, and considering a spectrum of factors beyond SPOF. In a world where risk management is key, choosing expert tools becomes a strategic imperative for a robust and dependable tech infrastructure.

‍

Elevate your JavaScript game with essential ES6 tricks!

Pranav Badami — Sun, 19 Nov 2023 17:21:49 +0000

Embracing ES6 (ECMAScript 2015) is like unlocking a treasure trove of features that not only elevate your JavaScript game but also transform your coding journey into a more enjoyable and efficient experience. In this blog, we'll dive into some of the best ES6 tricks that will not only enhance the readability of your code but also empower you to write more concise and expressive programs.

Arrow functions

ES6 introduces arrow functions, providing a more concise syntax for writing anonymous functions.

// Traditional Function
function add(a, b) {
  return a + b;
}

// Arrow Function
const add = (a, b) => a + b;

Getting the previous value of the state in the setState call using the useState hook.

// A useState hook initialisation
const [state, setState] = useState(0)

// Updating the state w.r.t to previous value
setState(prev => prev + 1)

let arr = ['one','two','three']

// Map through the array
arr.map(number => (
   console.log(number)
)}

Destructuring Literals

Destructuring allows you to extract values from arrays or objects and assign them to variables in a more intuitive way.

// Array Destructuring
const [first, second] = [1, 2];

// Object Destructuring
const { name, age } = { name: 'John', age: 30 };

Destructuring function parameters and return value, also incase you are using some date being returned asynchronously/API call make sure to handle the case when the value you are trying to destructure from is undefined

const doSomething = ({name, age}) => {
 return {name , age}
}

const {name, age} = doSomething({name: 'John Doe', age: 24})

// Data returned from an API call
const data = getDate()

//Destructuring
const {name, age} = data || {}

//Directly destructuring 
const {name, age} = getData() || {}

Spread and Rest operator

The spread operator (...) allows you to spread elements of an array or object, while the rest parameter collects remaining arguments into an array.

// Spread Operator
const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];

// Rest Parameter
const sum = (...numbers) => {
  return numbers.reduce((acc, num) => acc + num, 0);
}

⭐️ One of the most useful application of the spread operator is while updating/altering one value of an object, retaining all the other values as it is

const [obj, setObj] = useState({ name: 'John Doe', location: { city: "Bengaluru", state: "Karnataka" } })

//Update only the city from 'Bengaluru' to 'Mysuru'
setObj(prev => ({...prev, location: {...prev.location, city: 'Mysuru'}}))

Template Literals

Template literals provide a more flexible and readable way to concatenate strings, including variables and expressions. This can be used to declare a multiline string.

const name = 'World';
console.log(`Hello, ${name}!`);

const description = `My name is ${name}
I am from Bengaluru
I'm stuck in traffic`

These are a few tricks that can make your code cleaner, maintainable and easier to write overall. I might have missed out on a few of them, but these are the ones that actually make my life easier on an everyday basis. Happy Coding...

Top 10 react packages for SaaS platforms

Pranav Badami — Sat, 04 Nov 2023 10:23:48 +0000

Why Use React Libraries?

When it comes to building a product with React, going it alone can be quite a challenge. While it's not impossible, it's certainly a lot easier—and often wiser—to seek assistance from the vast world of open-source packages. React libraries are like your trusty companions in the development journey, simplifying complex tasks, enhancing functionality, and accelerating your project's progress. In this blog post, we'll explore the top 10 React libraries that can be your go-to resources, making your React development experience more efficient and enjoyable. So, without further ado, let's delve into the world of React libraries.

1. React-Query : Your Ultimate Query and Mutation Companion

In the ever-evolving world of React development, optimizing queries (GET requests) and mutations (POST, PUT, DELETE) can be quite a task. That's where React-Query comes into play, and it's been a game-changer for us. This library simplifies frontend data management with an intuitive implementation using React hooks, offering a plethora of advantages that make it a must-have in your toolkit:

Easy and simplified query management
Infinite scroll/Pagination for queries
Effortless Invalidation and Data Refetching
Cache management
Robust Error handling

2. Streamline Form Management with React-Hook-Form

Forms are a cornerstone of web applications, but managing them can often be a daunting task. Dynamic field rendering, state management, and validations can quickly become a maze of complexity. If you've ever found yourself tangled in the web of form-related challenges, React-Hook-Form is here to rescue you. Here is what react-hook-form has to offer:

A simple hook which helps you initialise your form and provides all the methods that can be used in the
FormProvider wrapper with useFormContext hook which can help you manage states for clean and maintainable code.
useFieldsArray hook allows you to provide a dynamic fields form which allows users to add or remove fields.
Easy form validation using yup-resolver

3. Unleash Creativity with React-Flow

In the world of SaaS (Software as a Service), one tool that's invaluable for many is the flow builder. It's a canvas where you design the logic and the flow of your application. Among the numerous libraries out there, React-Flow stands out as a true gem, and it's undoubtedly one of the most enjoyable and creative libraries we've had the pleasure of using. Lets see how we can have some fun with this library:

Intuitive Flow Building
Very easy state management for nodes and edges
Easily create logic to connect nodes and build a drag and drop flow builder
No limits or hard and fast rule to use this library. Its upto you, to check how crazy you can get with it.

4. Plop: The Micro Generator Framework That Transforms Your Workflow

While not exclusively a React package, Plop has been an unsung hero in our development toolkit. This micro generator framework may not be a household name, but it's an absolute game-changer when it comes to saving time and streamlining repetitive tasks, it helps with:

Easy and consistent folder structuring in your project.
Easy files/folder creation with predefined content inside them.
Simple pattern to make sure uniformity is maintained, especially while working with large teams

5. Flat: Mastering Object Flattening and Unflattening with Precision

In the world of application development, handling complex nested objects is a common challenge. Whether you're working with JSON data, configuration files, or any application state, object flattening and unflattening can be a cumbersome task. That's where "Flat" comes to the rescue, offering a consistent and reliable solution for maintaining the structure of your objects without altering their underlying values.

Provides flatten and unflatten functions which flatten a nested object and unflatten it back to the original form. for example:

const nested_object = {
    "name": "Pranav",
    "age": 24,
    "company": "Fyno",
    "address": {
        "city": "Bengaluru",
        "state": "Karnataka",
        "country": "India"
    }
}

On using flatten(nested_object) we get

{
    "name": "Pranav",
    "age": 24,
    "company": "Fyno",
    "address.city": "Bengaluru",
    "address.state": "Karnataka",
    "address.country": "India"
}

And using unflatten(flattened_object) will give back the original object.

6. Simplify File Uploads with React-Dropzone

In the age of modern web applications, file uploads have become a routine part of our online experiences. Whether you're building an image-sharing platform, document management system, or any application that involves handling files, React-Dropzone is your answer to seamless file upload functionality. With its simple drag-and-drop interface, it empowers you to achieve remarkable feats. Lets see what we can achieve with this library:

Simple drag and drop zone/area where any file can be dropped to select/upload.
useDropzone react hook, to easily manage and use all methods provided by the library.
Defining file types to accept and number of files to accept.
Custom validation for files, like showing accepted and rejected files.

7. React-Hot-Toast: Elevating User Interaction with Alerts and Notifications

In the realm of user-centric applications, timely communication and feedback are essential. React-Hot-Toast has emerged as a personal favourite among developers for delivering real-time alerts, notifications, and in-app reminders, elevating the user experience to new heights. This library offers a powerful yet straightforward way to enhance user engagement through visual communication.

Very simple to use
Easily customisable, you can add many sorts of customisation like delay, ttl (time to live) and many more things.
Designs for these toasts are very flexible and easy to customise according to product design requirements.

8. Luxon: Mastering Time and Timezones for Precision Data Handling

In the world of application development, mastering time and timezone management is a fundamental requirement. Many platforms, whether they deal with analytics, activity logs, or any aspect of data that's time-sensitive, need a robust solution for handling time in different formats and working with timezone offsets. Luxon is that solution, offering a powerful toolkit to manage time with precision and confidence. Any sort of data management which is time sensitive would benefit from:

Comprehensive date and time manipulation
Timezone support
Variety of formatting with date and time, as suitable for different use cases

9. Empower Non-Technical Users with React-Query-Builder

In the world of application development, database queries are often a complex and intimidating aspect, particularly for those outside the technical domain. This challenge becomes even more significant in a no-code environment where users are looking for simplicity and empowerment. React-Query-Builder is the answer, simplifying the process of building queries through a user-friendly UI and providing the ability to export in various formats, including JSON, SQL, MongoDB, CEL, and SpEL.

10. Elevate User Experience with Use-Query-Params

In the realm of web applications, a seamless user experience often hinges on the ability to maintain and share URLs with filters, search parameters, and other states. Use-Query-Params steps in as an indispensable tool, simplifying the process of encoding and decoding data as query parameters. With the useQueryParam hook, it's easy to achieve the fine balance between URL sharing and an enhanced user experience.

Easily maintainable states with URL
Any data type can be encoded to the query params

In our journey at Fyno, these top 10 React libraries have been invaluable allies, simplifying our development process and addressing the diverse requirements that surface in the world of SaaS platforms. If you haven't already explored the potential of these packages, we encourage you to give them a try. They have the power to streamline your development workflow, enhance user experiences, and make life simpler for you too. So, dive in, experiment, and discover how these libraries can elevate your React projects to new heights. Your next big breakthrough might just be a package away.

React Query - Maintaining Query cache

Pranav Badami — Fri, 13 Oct 2023 18:16:01 +0000

React Query has greatly simplified frontend API query handling with improved error management and efficient data caching. However, managing query keys can be challenging, as we discovered at Fyno when dealing with duplicated key names, leading to frustrating hours of debugging. This situation highlights the significance of effective key management. Duplicated keys can lead to data mix-ups and unexpected results. Lets delve into best practices for managing query keys, allowing you to harness React Query's full potential without the hassle of duplicated keys.

Old Approach

We create a react query hook for each API call and define the query key cache in the react query hook and if we want to invalidate some query then we had to go find the query key and use the same one. Which is a lot of manual work and when you are trying to be as productive as possible, this can cause issues which will be time consuming to debug.

Some examples of the old approach:

1 . Simple Query Key

import { useQuery } from 'react-query'

const getTemplates = () => {
 // make your API call here
 return response
}

export const useGetTemplates = () => {
  return useQuery(['templatesList'],() => getTemplates())
}

import { useQuery } from 'react-query'

const getEvents = () => {
 // make your API call here
 return response
}

export const useGetEvents = () => {
  return useQuery(['eventsList'],() => getEvents())
}

2 . Dynamic Query Key

import { useQuery } from 'react-query'

const getTemplateDetails = () => {
 // make your API call here
 return response
}

export const useGetTemplateDetails = (name, version) => {
  return useQuery(['templateDetails', name, version],() => getTemplateDetails())
}

import { useQuery } from 'react-query'

const getEventDetails = () => {
 // make your API call here
 return response
}

export const useGetEventDetails = (name, version) => {
  return useQuery(['eventDetails', name, version],() => getEventDetails())
}

Let's deep dive into the problem

Following the best practices, we've been using separate React Query hooks for each API call to the backend. However, each query call requires a unique query key to store the API response data, and as our project has grown with new features, we've encountered some challenges:

Query Key Conundrum: One of the dilemmas we faced is deciding what query key to assign to the cache for the response data from an API call. It may seem straightforward at first, but as your project evolves, making this decision can become quite a puzzle.
Invalidation and Refetching: Figuring out the right query key to invalidate or trigger a refetch based on another API call or a specific action can be like solving a complex puzzle. It's critical to ensure that your data remains up-to-date and accurate.
The Duplicity Dilemma: As we expanded our codebase, we encountered the issue of creating duplicate query keys. This happened when data from various API calls with different responses started to overlap, leading to confusion and unexpected results.

These challenges are not unique, and they can affect the efficiency and maintainability of your project. Lets explore strategies and techniques to tackle these issues head-on, ensuring a smoother development process and a more predictable and reliable application.

New Approach

To address these challenges, we took a strategic approach. Firstly, we centralized the creation of all query cache keys for easy accessibility and maintenance. Our goal was to make this process dynamic, allowing customization with specific values while maintaining a standardized approach.

Query Keys Factory

Our solution? We call it the "Query Keys Factory." Now, you might wonder why we went with such a name - well, sometimes, cool just sounds cool. It's a nifty little React hook, and its job is simple but incredibly valuable. This hook holds the keys to all the query keys, organized neatly according to the features within our product.

Create a simple global react hook, you can call it Query Keys Factory to be cool like us.

export const useQueryKeysFactory = () => {

  //--------Templates-----------> /templates
  const templateKeys = {
    list: ['templatesList'],
    details: (name, version) => ['templateDetails', name, version]
  }

//--------Events-----------> /events
  const templateKeys = {
    list: ['eventsList'],
    details: (name, version) => ['eventDetails', name, version]
  }

  return { templateKeys, eventKeys }
}

In the code snippet above, we've showcased a straightforward example of a query cache for two API calls of two features, which in this case, are "Templates" and "Events". These API calls include a listing API, providing a list of all the templates/events, and a details API for retrieving information about a single template/event. What makes this approach especially powerful is the encapsulation of these keys within the templateKeys/eventKeys section. These keys serve as the foundation for all query keys related to the /templates and /events endpoint respectively.

By centralizing these keys in one place, you gain remarkable accessibility and maintainability. You can easily access them from anywhere in your application, making the management of query keys a breeze. To illustrate how it works in practice, let's consider the implementation of a React Query hook for retrieving the list of templates and events. This way, you can see how this approach seamlessly integrates into your development process, offering a cleaner, more organized way to handle query keys throughout your project.

1 . Simple Query Key

import { useQuery } from 'react-query'

const getTemplates = () => {
 // make your API call here
 return response
}

export const useGetTemplates = () => {
  const { templateKeys } = useQueryKeysFactory()

  return useQuery(templateKeys['list'],() => getTemplates())
}

import { useQuery } from 'react-query'

const getEvents = () => {
 // make your API call here
 return response
}

export const useGetEvents = () => {
  const { eventKeys } = useQueryKeysFactory()

  return useQuery(eventKeys['list'],() => getEvents())
}

2 . Dynamic Query Key

import { useQuery } from 'react-query'

const getTemplateDetails = () => {
 // make your API call here
 return response
}

export const useGetTemplateDetails = (name, version) => {
  const { templateKeys } = useQueryKeysFactory()

  return useQuery(templateKeys['details'](name, version),() => getTemplateDetails())
}

import { useQuery } from 'react-query'

const getEventDetails = () => {
 // make your API call here
 return response
}

export const useGetEventDetails = (name, version) => {
  const { eventKeys } = useQueryKeysFactory()

  return useQuery(eventKeys['details'](name, version),() => getEventDetails())
}

Now, let's dive into a straightforward yet powerful scenario: invalidating cache based on another API call. We'll walk you through creating a React Query hook for making a delete template/event request. If this deletion operation succeeds, we'll perform an act of cache magic – invalidating the listing API call's cached data. This little trick ensures that our application always fetches the freshest, most up-to-date data from the backend.

Here's a sneak peek at how it's done:

import { useMutation, useQueryClient } from 'react-query'

const deleteTemplate = template_name => {
  // Add your API call for deleting the template with name template_name
}

export const useDeleteTemplate = () => {
  const queryClient = useQueryClient()
  const { templateKeys } = useQueryKeysFactory()

  return useMutation(template_name => deleteTemplate(template_name), {
    onSuccess: () => {
       queryClient.invalidateQueries(templateKeys['list'])
       }
   })
}

import { useMutation, useQueryClient } from 'react-query'

const deleteEvent = event_name => {
  // Add your API call for deleting the template with name event_name
}

export const useDeleteEvent = () => {
  const queryClient = useQueryClient()
  const { eventKeys } = useQueryKeysFactory()

  return useMutation(event_name => deleteTemplate(event_name), {
    onSuccess: () => {
       queryClient.invalidateQueries(eventKeys['list'])
       }
   })
}

There you go – query invalidation made simple. No more hunting for query keys, just trust the Query Keys Factory to handle it for you. It's all about efficiency and letting the tools do the work.

In conclusion, our exploration of managing query keys with React Query has provided valuable insights. We've introduced the Query Keys Factory as a solution to simplify key management, streamline development, and minimize errors. With this approach, you can confidently handle query keys and optimize your development workflow. Mastering React Query's query keys can significantly improve your experience, making your projects more efficient and reliable. Happy coding!