DEV Community: UppLabs

All you need to know about software development process

UppLabs — Thu, 20 Jan 2022 15:15:54 +0000

Recently in our blog we published an article about the software development roadmap in detail where we described the connections between different processes and the whole work of IT infrastructure. Here we will outline the main points and help you understand the estimation of time and resources necessary for each process.

Software development stages

Before you start a project, you need to define your documentation types, necessary for the team and the client. Each process and stage require its accompanying documentation.

The stages include:

Analysis and Planning;
Design;
Backend development;
Frontend development;
Quality Assurance and testing;
Intermediate deliveries;
Documentation;
Maintenance and others

Life cycle of the development process
There are several reliable software development lifecycle models you can use for your project depending on your target audience, market, and business requirements.

In our article, we pay attention to such types of SDLC or software development methodologies like:

Waterfall Model
V-Shaped Model
Iterative Model
Spiral Model
Big Bang Model
Agile Model
Prototyping Model

We describe every model-specific development process and write about the types of businesses and projects for every model.

Btw, you can Download the SDLC comparison table.

Development of documentation
Each stage of the process requires specific documentation that will describe the software requirements, design process, quality and security requirements, technical description, and others.

The list of typical development documents include:

Development analysis;
Requirements specifications;
Functionality specifications;
User Experience design specifications;
Development plans;
Quality assurance plans, etc.

There is a software development cheat sheet you can download.

Product documentation
Every project needs product requirement documentation that describes the specific product and its final presentation. It can be one document or a list of various detailed requirements or diagrams.

The requirements are usually functional and non-functional and require:

a project’s purpose, goal, terms;
general description, functionality, framework, restrictions;
specific requirements, speed, security, intellectual property.

Different categories of requirements

The quality of software products divides into two major categories – functional and non-functional requirements. You can read more on how to differentiate between them.

UX Design documentation

The UX design stage needs to be documented specifically carefully as it includes various stages, research, diagrams, analysis, prototyping, usability testing, and other stages.

It usually includes such a list of documents:

Wireframes
Mockups
Prototype
Site maps
User flow schemes/user journeys
Usability testing reports

QA Documentation

Software Quality Assurance (SQA) documentation include the requirements of QA and usually offer such plans as:

The test strategy
The quality management plan
The test plan
The test case specification
The test checklist, etc.

Quality measures specification

To measure the quality, you need to understand which quality metrics to choose. There can be types like:

Open/Closed Bugs
Reopened/Closed Bugs
Rejected/Opened Bugs
Bugs by Severity
Bugs by Priority and others

Documentation for users

Every product is made for users who need to estimate the product’s quality later. For this, there should be detailed information about the type of maintenance and instructions that provide following information:

Start guide of the product
Instructions on software installation
The troubleshooting guide
Video tutorials
FAQs
Support Portals
Functionality Description etc.

Digital Metrics

Among the tools UppLabs can recommend for measuring products’ performance are:

Google Analytics
Matomo
Woopra
Mixpanel
StatCounter
Hotjar
Kissmetrics and others

The detailed roadmap and documentation that covers all software development stages can ensure your product success and smooth project implementation. You can read more about software development roadmap in our blog.

How to control the quality of your software product?

UppLabs — Wed, 09 Jun 2021 12:48:10 +0000

How to control the quality of your software product? Quality is one of the most important features that applies not only to the product but to every stage of its delivery. If you want to create a successful product, you have to be professional in everything you do. Testing the software product is an important part of development, because even minor errors can affect the effectiveness and success of a whole project.

Poor quality assurance can lead to the main causes of software startup failures, so the purpose of executing quality assurance tests is to avoid the delivery of poor quality products. In this article, we are going to share with you our ideas for quality measurements.

QUALITY CHARACTERISTICS

Functionality – is determined by the ability of the software to solve problems that correspond to the fixed and anticipated needs of the user under the given conditions of software. Ths characteristic ensures that the software operates correctly and accurately, is interoperable, meets industry standards, and is protected from unauthorized access.
Reliability – the ability of software to perform the required tasks under specified conditions for a specified period of time or a specified number of operations. The attributes of this characteristic are the completeness and integrity of the entire system, the ability to independently and correctly recover from operational failures, and resiliency.
Usability is the user’s ability to easily understand, study, use the software.
Efficiency is the ability of the software to provide the required level of performance in accordance with the allocated resources, time and other specified conditions.
Maintainability provides the ease to analyze and test the software, change and fix defects, meet the new requirements, facilitate further maintenance, and to adapt to the existing environment.
Portability characterizes software in terms of ease of portability from one environment (software/hardware) to another.

QUALITY MEASUREMENTS

The introduction and use of metrics is essential for improving control over the development process, and in particular over the testing process. If we choose the Bug/Defect Metrics, there are following types:

Open/Closed Bugs (the ratio of the number of open bugs to closed (corrected and rechecked)
Reopened/Closed Bugs (the ratio of the number of reopened bugs to closed (fixed and rechecked)
Rejected/Opened Bugs (the ratio of the number of rejected bugs to open)
Bugs by Severity
Bugs by Priority

Before delivering a software product, we need to measure its quality to ensure that it is bug-free. The bugs need to be reported per month on all possible environments (Staging, Development, Production) in components. The goal is to minimize the number of bugs on the production on a monthly basis reviews. In case of bugs, the QA needs to meet and find out the reason to fix the problems. The team can use the Jira tool and create the dashboard gadget “Filter Results.”

The bugs can be reported per feature or epic. The goal is to maximize the quality of every feature/epic on the weekly basis. If needed, this can be followed by the discussion on the code quality lessons learned session with the development team and tech lead.

The open or resolved bugs per sprint have the goal to minimize the number of open bugs and manage the backlog efficiently on a weekly basis. If needed, the team can discuss the code quality lessons learned session and create the Jira Dashboard gadget “Created vs. Resolved Chart.”

Backlog Management Index (BMI) is used to manage the backlog of open and unresolved problems.

If BMI is larger than 100, it means the backlog is reduced. If BMI is less than 100, then the backlog increased.

The average time in status and average number of times in the status are used to identify bottlenecks and improve the development process on a daily basis. The team has to discuss the average time with the responsible for blocked items to unblock the team, so everyone can be updated of the process. For these purposes, we can use the Jira dashboard gadgets “Average Number of Times in Status” and “Average Time in Status.”

QUALITY REQUIREMENTS

Standards should be applied when writing test plans, specifications, user interfaces, documentation, training materials, and other products. A shared project’s vision can help ensure its quality. But along with the standards, it is necessary to determine the situations of their use and develop guidelines and requirements for adopting the standards to the needs of the team and the product, if necessary. Any standard you adopt should help you do your best job.

Most of the requirements could be used directly from the technical reports and all of them had to for the project’s definitions. Bugs reported as a result of poor requirements have to minimize the number of bugs caused by poor requirements or the lack of them. The team usually can perform such reports per sprint after the demo. If needed, the PM has to outline action items with the team and feature owner to avoid poor/lack of requirements in the future.

PULL REQUEST

The quality metric can give you an idea of the amount of time (usually in days) needed for the pull requests to be merged or closed. You can calculate the lead time of all repositories and get an understanding of the team dynamics.

To get this number, it’s important to track every pull request and save the date and time for each pull request when it’s opened and it’s merged. For the quality measurement we need to calculate:

Pull requests that did not pass the test suite
Pull requests that broke the build
The number of rejected and merged requests
The number of pull requests comments

PREVENTATIVE MEASURES

In a management review meeting, the quality manager gives valuation of the product’s quality. The information should correspond to satisfaction surveys. In order to prevent a potential problem, the management team chooses the responsible parties to review code reviews and implement actions that will help to analyze the data. Among the preventative measure we can highlight:

Internal code reviews performed by one developer and Tech Lead on a daily basis, if there is a ready task. If needed, the responsible developer should provide code improvement. If it is a common issue, it should be discussed in the Lessons learned session.
Code quality lessons learned sessions to review the feedback in PRs per sprint to raise team awareness, improve code quality and avoid the same mistakes in future. If needed, the responsible developer should provide code improvements.
Story opening sessions to confirm technical approach and prevent from rework in future performed by developers and Tech lead with the Client’s developers. If needed,the team should research the suitable solutions and review the areas for related components.

To analyse the preventative measures, we can use such trusted best practices, as:

Lessons Learned, Post Project Analysis – is one of the most powerful tools for proactive improving the quality of your work.
The retrospective – is a separately allocated period of time in order to study the experience gained and ask yourself the following questions: “What worked for this product and how to do the same in the future?” and “What went wrong for this product and how to avoid this?”

Despite the fact that retrospectives are classified as Best Practices, they are rarely used, because it is difficult to gather an entire team: retrospectives take place at the end of project development. Most of the team members are already working on other projects, and those who remain are busy releasing the project or supporting it.

TYPES OF QUALITY ENGINEERING AND TESTING SERVICES WE PROVIDE IN UPPLABS

We deal with quality engineering and testing processes covering all stages starting with test management and automation to such categories of testing software services as:

Technical Consulting
Automation Testing
Performance Testing
Security QA
Regression Testing
Smoke Testing
Functional Testing
Automation Services for Web/Mobile Apps
API Testing
Integration and unit testing
Review of product automation framework and process

Thanks for reading!

How asynchronous works in JavaScript. Event Loop concept

UppLabs — Tue, 25 May 2021 15:52:34 +0000

Written by Kirill Bychkov for UppLabs.

JavaScript is easy when all you need is a simple working interface. The problems begin when the interface becomes more complex. Here you need to have a deeper understanding of JavaScript. It is important that even a large and complex interface remains fast and responsive. Responsiveness is usually achieved through the use of asynchronous functions. This means that you can let your code do several things at the same time without stopping or blocking the main thread.

In this article, I will try to tell you as simply as possible about the work of asynchronous in JavaScript. At all interviews in my life, I have been always asked this question. When you start learning JS, it can seem daunting but in reality, everything is much simpler.

How does the Event Loop work?

Event Loop is one of those things that every JavaScript developer encounters in one way or another. JavaScript provides a concurrency model based on an event loop, which executes the code, collecting and processing events, and performs queued sub-tasks.

I think it's not difficult to guess what sequence these logs will be called in. Let's check.

But let's take a look at what's going on under the hood. In the example, I am using this helpful site

When the program starts, it runs through the lines of code. When an asynchronous operation comes across, the interpreter throws this operation into a Call Stack. In the stack, it begins to look like a certain set timeout and as a browser API. Then it throws out the set timeout and registers some anonymous function in the web APIs, which will be executed when the browser completes the set timeout after 5000 seconds. Next, the anonymous function enters the callback queue. An endless loop runs in the queue, which runs over its elements, and if it detects that the function is ready, it throws it back into the call stack and executes.

Thus, we do not block the work of the code. We are talking not only about set timeouts but also about other asynchronous operations, such as event listeners that work along with the server.

But what happens if 0 is passed as the second parameter to the timeout set? Exactly the same. Let's see.

The browser will still drop the function into the web API, and the program will continue to work.
Let's also take a look at how the event listener works.

The event listener, as mentioned above, is also an asynchronous event and goes to the web API. You now understand the importance of unsubscribing from listening to events. You can read more details here

Macro tasks

Let's take the same event example and try to click the button a few times.

We see a queue of events. This is the macro task callback queue, a v8 term. Tasks from the queue are executed according to the first-in-first-out rule.

Let's note two details:

Rendering of the page never happens during the execution of a task by the engine. It doesn't matter how long the task takes. Changes to the DOM are rendered only after the task is completed.
If the task takes a very long time and the browser cannot perform other tasks or process user events. So, sometime later the browser offers you to "kill" the long-running task. This is possible when the script contains a lot of complex calculations or an error leading to an infinite loop.

Micro tasks

We could see the micro tasks in the last example. When the macro task is executing, the functions from it are placed in the call stack. The new macro task does not start its execution until the micro tasks have finished there. If you need more examples, you can check here.

Conclusions

Thanks to JavaScript, we can write asynchronous applications without thinking about multithreading like data integrity and data consistency. If we are performing an operation that takes time, such as querying a database and using the results to fill the templates, it is better to push them out of the main thread and execute the task asynchronously. We compensate for these benefits with a huge number of callbacks, and constant loss of context.

Depending on the specifics of the task, it may turn out that you will be using async/await, callbacks, or some mixture of different technologies. In fact, the answer to the question which asynchronous development methodology to choose depends on the specifics of the project. If a certain approach allows you to solve a problem using readable code that is easy to maintain and other team members can easily understand, then this approach is what you need!

Now you can use callback, promises or async / await with understanding how it works in the browser :)

I hope this article was helpful for you. You can also find more useful information on our blog.

How to generate a PDF document in a React Native project?

UppLabs — Thu, 18 Feb 2021 13:02:53 +0000

Originally, this post was published on UppLabs blog by Pavlo Ihnatiev.

Not so long ago UppLabs was working on a project which key functionalities included a PDF generation on mobile. In this material, we’ll share some tips on how to generate a PDF document using React Native.

Basics

The simplest way to create a PDF document in a React Native project includes the use of Expo Print plugin.

The first step is to write HTML with a sample of content that should be in our PDF. You can insert CSS styles, custom fonts, images, links, etc to your markup.

const htmlContent = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Pdf Content</title>
        <style>
            body {
                font-size: 16px;
                color: rgb(255, 196, 0);
            }

            h1 {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>Hello, UppLabs!</h1>
    </body>
    </html>
`;

Then you should write function, that creates a PDF document with defined HTML markup:

import * as Print from 'expo-print';

const htmlContent = `
....
`;

const createPDF = async (html) => {
    try {
        const { uri } = await Print.printToFileAsync({ html });
        return uri;
    } catch (err) {
        console.error(err);
    }
};

Notice:

This function will create a PDF file and save it to the application cache folder. So if you want to replace or copy this file, you can use Expo Filesystem. If you want to save it to the Gallery on your device, you can use Expo MediaLibrary on Android platform and Expo Sharing on IOS platform.

Example of function, that allows you to create PDF and save it to Gallery:

import * as Print from "expo-print";
import * as MediaLibrary from "expo-media-library";
import * as Sharing from "expo-sharing";


....

const createAndSavePDF = async (html) => {
  try {
    const { uri } = await Print.printToFileAsync({ html });
    if (Platform.OS === "ios") {
      await Sharing.shareAsync(uri);
    } else {
      const permission = await MediaLibrary.requestPermissionsAsync();

      if (permission.granted) {
        await MediaLibrary.createAssetAsync(uri);
      }
    }

  } catch (error) {
    console.error(error);
  }
};

You can use this functionality in your React Native components and that will be enough if you need to create a quick PDF document with simple content.

Advanced cases

PDF page margin

If you're using the function Print.printToFileAsync, the resulting PDF document might contain page margins (it depends on WebView engine). They are set by @page style block and you can override them in your HTML content code:

<style> 
   @page { margin: 20px; } 
</style>

Avoiding breaking content

If you insert a few content sections in your HTML markup, it may not fit together on the same document page. In such cases, the content of the second section breaks, and part of it is placed on the next page of the document. But sometimes such an approach is unacceptable when you want to avoid breaking the content section.

To control the breaking of some HTML elements you can use the “break-inside” CSS property in your HTML slicing.

section {
  break-inside: avoid;
}

So, if two sections are not fit on the same page, the second section will be placed on the next page of the document without breaking.

Using fonts, images and other assets in PDF

You can use custom fonts, images, or other assets in your HTML without any troubles if it’s placed remotely. But if you want to use the image from React Native app assets, it may be a problem, because such images can’t be loaded to your document when your React Native app is built for production. In such cases, you should first copy the file from assets to your application’s cache directory. Unfortunately, on the IOS platform, local files can’t be loaded to PDF as well, so you should convert the local file to base64 string. After that, you can use the URL of the copied file (on Android platform) or base64 string (on IOS Platform) in your HTML markup.

In such cases, you can use Expo Asset and Expo ImageManipulator.

Example of code, that copies an image from assets and converts it to base64 for IOS platform before using it in a PDF document:

import { Platform } from "react-native";
import { Asset } from "expo-asset";
import * as ImageManipulator from "expo-image-manipulator";


....

const copyFromAssets = async (asset) => {
  try {
    await Asset.loadAsync(asset);
    const { localUri } = Asset.fromModule(asset);

    return localUri;
  } catch (error) {
    console.log(error);
    throw err;
  }
};


const processLocalImageIOS = async (imageUri) => {
  try {
    const uriParts = imageUri.split(".");
    const formatPart = uriParts[uriParts.length - 1];
    let format;

    if (formatPart.includes("png")) {
      format = "png";
    } else if (formatPart.includes("jpg") || formatPart.includes("jpeg")) {
      format = "jpeg";
    }

    const { base64 } = await ImageManipulator.manipulateAsync(
      imageUri,
      [],
      { format: format || "png", base64: true }
    );

    return `data:image/${format};base64,${base64}`;
  } catch (error) {
    console.log(error);
    throw error
  }
};

....

const htmlContent = async () => {
    try {
        const asset = require('./assets/logo.png');
        let src = await copyFromAssets(asset);
        if(Platform.OS === 'ios') {
            src = await processLocalImageIOS(src);
        }

        return `<img src="${src}" alt="Logo" />`
    } catch (error) {
        console.log(error);
    }
}

So after calling this code you can use the returned URL of the asset image in your PDF document.

Optimization of large images

If you want to place large images in your PDF document, you should optimize them before. It can greatly reduce the size of your PDF document. Optimizing the images is useful when you want to insert images that are made using the camera of your device. To optimize images you can use Expo ImageManipulator.

Notice: This plugin works only with images placed locally on the device. You need to download the image first.

Example of function, that optimizes large images:

import * as ImageManipulator from 'expo-image-manipulator';


....

const optimizeImage = async (imageUri) => {
  try {
      const { uri } = await ImageManipulator.manipulateAsync(
        imageUri,
          [
              {
                  resize: {
                      width: 600,
                  },
              },
          ],
          { compress: 0.1 },
      );

      return uri;
  } catch (error) {
      console.log(error);
      return imageUri;
  }
};

Check the example!

https://expo.io/@upplabs/upplabs-pdf-example

https://snack.expo.io/@upplabs/upplabs-pdf-

View the case study

Thank you for reading!