DEV Community: Mandlenkosi

Elevate your Vue App: Vue-Concurrency 101

Mandlenkosi — Wed, 22 Nov 2023 10:56:46 +0000

Earlier this year the Vue.js team released a library called vue-concurrency. This powerful tool opened up new ways of simplifying fetch requests, ensuring great user experiences with the main goal being, optimizing concurrency in our applications. In this post we'll delve into why this library was created and the problems it solves. But firstly, in order to understand why's, we need to understand the term "concurrency".

What is concurrency?

Concurrency is simply the ability to perform/handle multiple tasks at the same time. Think of a situation where you click a button(s) that allows you to make fetch requests to the server. Clicking this button multiple times sends multiple async requests that the server will need to handle all at the same time. That is concurrency. The server's ability to handle multiple requests/tasks at the same time.

The Problem

Client-side applications frequently need to handle asynchronous tasks. These tasks can include making requests to a server, carrying out background logic, and responding to user actions such as scrolling, interacting with forms and navigation. Another key goal is to create user interfaces that are more robust, so that we can withstand issues like network failures. This involves strategies like repeatedly attempting server requests in case of a failure, or providing users with the option to manually retry.

To achieve this, we often employ techniques like debouncing and throttling. However, these methods sometimes require defensive programming, where we set flags like isSearching, isLoading, and isError to manage the application's state.Unfortunately, this manual approach is not only repetitive but also prone to mistakes and bugs.

For example, forgetting to reset isLoading to false in certain situations can leave the UI stuck in a never ending loading state. Neglecting to stop background operations during a user's transition to a different page can lead to errors. It would be more efficient if these tasks could be handled more seamlessly and efficiently. This is where Vue-concurrency comes in.

What is Vue-concurrency?

Vue-concurrency is a library designed to bundle all asynchronous operations, manage and oversee concurrency for both Vue and the Composition API. Vue Concurrency aims to provide a useful and simplified way of dealing with complex details related to asynchronous operations.

Instead of getting into the nitty-gritty of handling asynchronous tasks, Vue Concurrency abstracts or simplifies these details to make it more convenient for developers to work with asynchronous operations in Vue applications. This results in decreased boilerplate code and introduces innovative throttling and polling techniques.

BASIC USAGE:

Referencing the code below, useTask() function gives you a Task, which is like a wrapper for a generator function. Similar to how you can call an async function multiple times with different inputs and get different results, you can do the same with a Task. When a Task runs, it produces a TaskInstance. So, one Task can have several instances.

What's unique is that unlike regular functions, a Task is reactive and knows about all its instances. If any instance of a Task is running, the Task itself is considered running. You can access information about the last instance and the last successful instance.

For example, consider getUsersTask, a Task created using useTask. When you perform this task with getUsersTask.perform(), you get a TaskInstance. Performing a task and creating a new task instance happens via calling perform(). This method takes a function that uses the yield syntax to pause executation on promises and promise-like objects till they resolve. This workds similarly to async await with the added ability to cancel operations.

Managing Concurrency

You can decide how a task handles running multiple instances simultaneously. By default, a task can run an unlimited number of instances at the same time.

To set rules for this, you use methods like .drop(), .enqueue(), .restartable(), or .keepLatest() on an existing task, typically right after creating the task.

You can find all examples here:

Drop: Setting a task as .drop() means that if there's an instance currently running, any attempts to run additional instances will fail. The running instance will be dropped. Use case: Useful for tasks like form submissions to prevent duplicate requests.

Use case: Useful for tasks like form submissions to prevent duplicate requests.

Restartable: Setting a task as .restartable() means that if there’s an instance running, starting the task again will immediately stop the existing instance and run the new one.

Use case: Handy for tasks like polling or debouncing, often used in combination with a timeout.

Enqueue: Setting a task as .enqueue() means that if there’s an instance running, starting the task again will add the new instance to a queue, scheduling it to run later.

Use case: Beneficial for scheduling tasks for performance or other reasons.

In essence, Vue-concurrency pretty much aligns with the Vue.js philosophy of simplicity and sets the stage for more efficient, responsive, and user-friendly frontend applications. As we embrace the future of front-end development, Vue-concurrency stands out as a valuable tool for developers seeking to streamline their workflows and create exceptional user experiences.

Liked the article? Then I can bet that you would also loved my own personal blog that focuses on gaming, coding and the latest tech products found here

You can also find me on Instagram, Github, LinkedIn, Twitter. And here’s My https://fanatii1.github.io/Portfolio/ and in 3D

Choosing The Right Headless CMS

Mandlenkosi — Mon, 20 Nov 2023 12:47:50 +0000

In the ever-evolving landscape of content management systems (CMS), selecting the right headless CMS is crucial for developers, content creators, and businesses aiming to build flexible, scalable, and content-rich applications. In this blog post, we’ll delve into some factors you should consider when choosing a headless CMS, whether you’re using React, Vue, Svelte or your favorite frontend framework.

What is a headless CMS?

Imagine a headless CMS like a magical recipe book. In this book, chefs (content creators) write down amazing recipes (content) for delicious dishes, but they don’t decide how the food should look on the plate.

Now, think of developers as chefs who use this magical recipe book. The book doesn’t tell them exactly how to arrange the food on the plate or what the plate should look like. It’s like giving chefs the freedom to create their own special dishes and present them in a way that makes people happy.

So, in the context of a developer, imagine the headless CMS (the recipe book) like a database that stores all your content (images, videos, blog post content etc.). The database is just their to store your content. The manner in which you display the content is all up to you. Meaning, the frontend framework you choose to present the content is all up to you.

Traditional CMS or Headless CMS?

To comprehend the difference between the traditional and headless CMS’s, we’ll continue with the recipe book analogy.

Imagine a traditional CMS(e.g Wordpress) like a magical cookbook where the recipes not only include instructions for making delicious dishes but also specify exactly how each dish should look on the plate. It’s like a cookbook that not only gives you the recipe but also tells you where to put each ingredient, how to arrange them, and even provides a specific plate to use.

The one advantage of this might be that, users can quickly set up a website without delving into the intricacies of design and structure. The predefined themes and templates streamline the process, allowing users to focus more on content creation.

Although that might sound great, this limits your creativity a bit, in a sense that maybe the template designs offered may not be what you want. Maybe you want a more creative looking site with custom designs, and this is where headless CMS comes in.

With a Headless CMS, you can focus more on your own design and functionality of the site using your favorite frontend framework while having control on the content that you want to present. This gives you a little bit more flexibility as a developer

Best Headless CMS’s in 2023

1.Sanity

Sanity is an open source headless CMS that provides developers with an unparalleled level of customization not readily available elsewhere. By treating content as data, Sanity facilitates in-depth data analytics, content creation, and various distribution options. Sanity’s user-friendly software promotes real-time collaboration among team members, allowing marketers to handle content management and developers to tailor and publish content precisely where needed. The system’s wide range of integrations ensures seamless transfer into any preferred application. Pricing: Has a free tier, which can scale from a Basic plan($99) to Pro plan($499)

View Sanity here

2.Strapi

Strapi, which is the most used headless CMS in the world, stands out as a top-tier headless CMS platform, showcasing a straightforward interface and comprehensive customizability. Operating entirely on JavaScript, this platform empowers the creation of content-rich experiences that seamlessly move from the presentation layer to the ultimate channels where the content will be showcased. This is the perfect CMS for you if you want to have full control over the CMS’s data and its structure. Strapi is also useful to those who want to self host their own backend with their CMS. Pricing: Has a free tier, which can scale from a Basic plan($99) to Pro plan($499)

View Strapi here

3.Contentful

Contentful operates as a cloud-based headless CMS, offering a fully managed service that alleviates the need for users to host it independently. Its cloud-based architecture ensures accessibility and convenience. Additionally, Contentful excels in scalability, designed to effortlessly manage substantial volumes of content and accommodate high levels of traffic. For developers, Contentful delivers a favorable experience, providing well-documented APIs and an extensive selection of Software Development Kits (SDKs) compatible with various programming languages. Notably, the platform stands out for its rich content modeling capabilities, granting users the flexibility to easily define and structure content according to their specific needs. This feature enhances the adaptability and customization potential of the platform for diverse projects and applications. Pricing: Has a free plan, with a Basic plan starting from at $300

View Contentful here

4.Kontent.ai

Kontent.ai excels with features like omnichannel content delivery, catering to static site generators and multiple websites. The Web Spotlight feature provides authors insights into audience consumption across diverse channels. Offering a rare balance of user-friendliness for small businesses and scalability for large enterprises, Kontent.ai stands out with its efficient microservice architecture. However, it’s important to note some limitations, such as the potential for more development time for certain customizations and English-only support on the backend, which may pose challenges for international businesses.

Pricing: Has a free plan, with a custom sales Enterprise plan

View Konent.ai here

5. ContentStack

Tailored specifically for enterprise use, Contentstack serves as a robust headless CMS platform unafraid of complexity. Its agility is a key asset, providing organizations with efficient content management and the flexibility required for seamless integration across major digital platforms.

Contentstack’s notable features include advanced content scheduling and repository capabilities, facilitating comprehensive content management. The platform boasts an extensive array of RESTful APIs, simplifying content output across various graphic user interfaces. With a robust search function, Contentstack adeptly manages content and code in increasingly intricate digital environments. Its “blank slate” approach empowers advanced development teams with full customizability in building their headless CMS.

However, Contentstack does have limitations. The absence of templates makes the “blank slate” approach challenging for smaller teams. Additionally, while the platform supports versioning, it is not fully complete, occasionally posing challenges for real-time collaboration.

Pricing: All plans require sales contact

View ContentStack here

Factors to consider when choosing a Headless CMS:

Content Modeling: The CMS should allow you to define content models that match your specific needs. Look for a system that provides flexibility in structuring and modeling content.
API Support: Determine whether the CMS offers a RESTful API, GraphQL, or both. Sanity mostly supports GraphQL
Developer Experience: Ensure that the CMS has comprehensive and well-maintained documentation. This is crucial for developers to understand how to integrate and use the CMS effectively.
Cost and Licensing: Understand the CMS’s pricing model. Some are open source, while others are subscription-based. Consider your budget and the long-term cost implications.
Ease of Use: Evaluate the user interface of the CMS itself. A clean and intuitive interface can simplify content management tasks.
Scalability: Assess the CMS’s ability to scale horizontally to handle increased traffic and content. Ensure it can accommodate the growth of your application.
Cloud based vs Self hosted: Determine whether you want to intergrate your cms with your backend and self host the everything or whether you want a cloud based solution, meaning the CMS is a fully managed service that you don’t have to host yourself, providing ease of access

In conclusion, navigating the dynamic landscape of content management systems (CMS) requires a thoughtful consideration of various factors, especially when selecting a headless CMS for React, Vue, Svelte, or other preferred frontend frameworks. As illustrated through the analogy of a magical recipe book, the distinction between traditional and headless CMSs underscores the importance of flexibility and creativity in content presentation. The blog post provides valuable insights into some of the best headless CMS options in 2023, such as Sanity, Strapi, Contentful, Kontent.ai, and ContentStack, each offering unique features and pricing structures. The factors to consider when choosing a headless CMS, including content modeling, API support, developer experience, cost, ease of use, scalability, and the choice between cloud-based and self-hosted solutions, provide a comprehensive guide for developers, content creators, and businesses seeking to build versatile and scalable applications.

Liked the article? Then I can bet that you would also loved my own personal blog that focuses on gaming, coding and the latest tech products found here

You can also find me on Instagram, Github, LinkedIn, Twitter. And here’s My https://fanatii1.github.io/Portfolio/ and in 3D