Program development

A web application is a site that not only contains information but also has specific functionality. Part of the code handling business logic is executed on the server. It should not be confused with a mobile application – it is a standalone product that users download from app stores.

Implementing a web application is justified when a project involves complex business logic, user authentication, and handling a large volume of data.

Advantages of web applications:

1. Cross-Device Compatibility: Operates on all devices. Business logic can be processed on the server, and even the least powerful device with a browser can display the user interface.

2. No Software Update Issues: There's no need to worry about updating software to the latest version; every time a user visits the site, they are interacting with the most up-to-date version.

3. Control Over Data Storage and Business Processes: Enables control over data storage and the execution of business processes.

Drawbacks of web applications:

Development may take more time and resources than creating a simple website. However, with proper planning, all costs will pay off, and your product will significantly expand its audience. Since 2011, we have been developing applications, including web applications: ERP, streaming services, management systems—from design to release and ongoing support.

Stage 1 of Web Application Development: Pre-Project Investigation

Before kicking off the development of web applications, we highly recommend conducting a pre-project investigation. This phase addresses several tasks crucial for the commercial success of the product:

1. Identifying Target Audience and Expectations:

   • Tasked with business analysis and UX research, this step helps define the target audience and understand their expectations from the service.

2. Prioritizing Key Features:

   • Essential for both mobile and web development, this stage involves determining priority functions for the initial project iteration.
   • To prioritize features, we utilize CJM (Customer Journey Map) – crafting a map of the user's journey. This map allows us to analyze user needs and interactions with the service, facilitating the creation of a user-friendly and intuitive web application.

3. Setting the Product's Growth Path:

   • This step establishes the foundation for the product's future growth by considering the anticipated load on the application with the growth of the user base and the addition of new functionality.
   • Architectural design is a crucial aspect at this stage, influencing the service's future development and reducing the number of errors in the initial phases.

By undertaking a comprehensive pre-project investigation, we ensure that the development process is aligned with user expectations, focuses on priority features, and lays the groundwork for the sustainable growth of the application.

Stage 2 of Web Development: Design

Design in web development is a multi-layered process involving multiple teams with varying technical expertise. Two primary levels of design can be identified:

1. Тechnical Design Planning

   • Involves constructing a software product that aligns with the specified technical requirements.
   • This process can be succinctly illustrated by the Technical Design Planning diagram.
   •  

   User Interface (UI) Design

   • At this stage, we meticulously plan primary and secondary scenarios, breaking down user actions into functional blocks.
   • Prototype testing with real users is conducted, involving focus groups and presenting clickable interface prototypes.
   • Simple interaction tasks are assigned to users, and the process is closely monitored.
   • Iterative testing allows for continuous improvement of the prototype, progressing towards the creation of a user-friendly product from a UX perspective.

The design phase in web development is a collaborative effort that integrates technical and user-centric considerations, ensuring the development of a product that not only meets technical requirements but also delivers an optimal user experience.

Stage 3: Web Application Development

In web development, a typical tech stack includes HTML (for webpage markup), CSS (for styling), and JavaScript (for creating dialogs, animations, and handling form submissions). Various server-side programming languages such as Kotlin, Golang, or Python are employed for building server applications. Additionally, frameworks like React, Angular, and Vue.js are utilized to expedite development by providing ready-made solutions for many routine tasks.

Depending on the project's intricacies and requirements, we integrate other frameworks and libraries to leverage functionalities such as streaming video, camera access, geolocation, 3D technologies, and more.

The use of these technologies and frameworks is tailored to the specific needs of each project, ensuring a dynamic and responsive web application. The goal is to optimize development processes while harnessing the latest capabilities for a diverse range of features, from multimedia streaming to cutting-edge 3D technologies.

Stage 4: Web Application Testing

Similar to mobile applications, web applications have their specific considerations in testing. Factors such as operating systems, browsers and their versions, screen sizes (issues might arise on widescreen monitors that are not apparent on standard screens), plugins installed in browsers, and even different hardware configurations play a significant role.

The testing technologies employed by the Surf team include:

Charles and Proxyman:

Used for reading and modifying web traffic. While standard DevTools in browsers can suffice for reading, these utilities are convenient for substituting responses if necessary.

Postman

A tool that aids in identifying errors in APIs.

Browserstack

Facilitates testing web applications on different browsers and versions without changing the working environment.

Cypress

An end-to-end testing tool that streamlines and reduces the workload on manual tests.

In testing, it's crucial to consider all potential nuances, such as the browser version. For example, in one of our projects related to streaming video playback, video playback did not work in certain browsers. The reason was that the browser version did not support a specific plugin.

Ensuring compatibility across various environments is essential for delivering a robust web application, and comprehensive testing utilizing a range of tools helps identify and address potential issues across different scenarios.