Автор: Ivan

In this article, we will look at what the application consists of and what its basic usage models are for 2021.

What a simple web application consists of:

• Server, program on the server
• Database
• Client — what the user sees in the browser

The interaction architecture of the simplest web application:

Server — Executes business logic based on the user’s request and sends the response in HTML or data. The main part of the calculations takes place here.

DB — Database for storing information. Based on the user’s request or independently, the server can retrieve or write information into the database.

UI — User interface. This is the part of the program that you see in the browser. The rest is hidden from you.

 

Let’s look at what are the options for combining this architecture.

The user interface can request and receive data on several resources at once:

Benefits:

• With this approach, if your application uses data or the server of another application, you can do without your own server.
• In case of failure of one of the servers, you will lose only part of the functionality. the rest will continue to work
• Ease of implementation. Some of the business logic is on an external resource.

Disadvantages:

• Dependence on a third-party resource.
• Cannot affect another resource

The server can request data on other resources

This implementation option is very similar to the previous one, however, it allows you to change, process data received from other sources. This is a safer and more reliable way to work. You can also combine your application logic with data from a third-party resource.

 

Serverless Architecture

Serverless architecture has become the most popular in recent years.
The server exists, but you cannot access it. This approach is implemented by gCloud services, AWS services, Microsoft Azure. In fact, all the raising of the server and writing the code, the programmer simply writes the business logic of the program.

Benefits:

• Scalability. As a rule, at the start stage, you cannot predict the loads because don’t know how much your service will be in demand.
• Price. Pay as you go. The cost will increase as the project loads. During the development phase, as a rule, you pay nothing. But when the number of users of your application grows, computing resources are automatically added and you pay more. If nobody uses the app, you don’t pay again.
• This removes all the headaches associated with server maintenance and growing, falling load from you.

 

Disadvantages:

• Dependence on the cloud service you are using. This is solved by implementing the correct project architecture. So that the code, if necessary, could be transferred to another resource.
• Under heavy loads, the cost is higher than if you had your own servers. In this case, you are paying for comfort.

What to choose at the start stage?

If you have a very simple web application, you understand the load and it won’t expand. Use the simplest architecture.

If you cannot predict the load, and in our experience, there are 99% of such projects, use a serverless architecture and you will not go wrong.

 

This article will be useful for startups and businesses. If you are not friendly with web application structure we recommend to read about it here.

The web application is completely dependent on the end-user for the product.

Regardless of what kind of business you have, as a rule, many questions arise:

• How many users will there be on the platform? (What server do you need)
• How much server capacity do I need? (Will our server cope)
• How much will the developers cost? (Will we fit into the budget)
• Which programming languages ​​should you use? (Which is better from the point of view — price-quality-speed)
• What technologies to use? (Which is better from the point of view — price-quality-speed)
• How will choosing all of the above affect the overall development cost?

Difficult to answer right away isn’t it? Then how do you choose server, database and UI technologies?

Let’s try to solve these problems one by one.

How many users will there be on the platform?

It all comes down to money, if you cannot predict how much power you will need, then in case of a miscalculation, you will either pay for resources that are not used, or you will have performance problems.

Fortunately, there is a solution to this — use scalable services. These include Google Cloud, Amazon Web Services, Microsoft Azure and others.

These services provide the ability to scale your application by paying solely for the resources used. Plus, they support almost all programming languages.

This solves the performance issue. And at the start stage it will cost you almost nothing.

How much server capacity do I need?

It is best to always contact a technician to answer this question. It almost always depends on the logic of your product. If there is no such specialist, use scalable services from Google Cloud, Amazon and others. Most likely, at the start stage, the issue of performance will not affect you. However, the architecture of the project must take into account this possibility and it must be immediately announced to the developer.

How much will the developer cost? What programming language should I use?

Before hiring a developer, let’s decide on the programming language we will be using.
If you have a technical leader on your team, ask him what he prefers to use. Regardless of the choice, having experience, he will be able to implement your product and find specialists.

If there is no such person, the best option would be to choose the technology that is currently used by the greatest number of developers and which is most popular.
Send a development request to several companies or freelancers with good experience. Compare the answers and choose the most popular solution.

Advice from our side:
The biggest problem is when you have to pay for two different specialists to develop the server and client side. If they were using the same programming language, they could interchange each other or work together on one part of the program. It’s faster, cheaper and more reliable.
Node.js and Javascript successfully solve this problem. Both programming languages have the same syntax and therefore the same specialists can work with them.

Summary:

Technological stack that will be optimal in 2021 for web development:
The issue of predicted loads and performance is solved using a node.js server that runs in scalable cloud services.
Here, both a dedicated server and serverless option are suitable. We prefer to use serverless because this removes the problem of server administration from us and in practice shows more stable work.

Database. When using cloud services, it is accordingly better to use their databases. Amazon — Aurora DB, GCloud — Firestore.
If you need to use relational databases, MySql, PostgreSql are still good choices.

The client side is Javascript. Here you can give the developer a choice between popular libraries at his discretion (React.js, Angular, Vue.js, and others). All solutions of these technologies solve the same problem. It’s a matter of habit and convenience.

In total, the optimal application scheme that will suit most startups and companies is:

Why is it needed:

In 2021, site load speed and visitor time on-site are becoming important ranking criteria. In connection with this, it’s important that your site loads as quickly as possible and responds to your users at a high speed. That will lead to higher traffic and conversions.

A good number of websites are made on the WordPress platform. Without intervention from the developer, they often don’t have very high loading speeds.

To pick up the pace, you will either need to change your platform, or find a way to make your WordPress site go faster. This article talks about how you can significantly speed up your WordPress site — and thus influence both search results and user behavior.

First-start loading speed:

To begin, you can evaluate your site’s speed with a tool from Google — PageSpeed Insight. This will give you an understanding of the quality of your content loading and help you to understand what problems can be corrected to improve this indicator

To speed up the initial site loading, some important criteria are:

• lazy loading images, images compression
• content caching
• server-side compression
• the improved server response speed
• minimization of scripts

These kinds of problems can usually be solved by hiring a developer.

 

Website speed after launch:

Today, users are becoming more and more accustomed to dynamically updated content. Social networks, news feeds, and dynamic sites without reloading are some good examples.

Is it possible to make a WordPress site like this?

The answer is YES! 

Starting from version 5.0, the engine provides REST API. This means that now you can work with the WordPress admin panel from any other resource.
For example, from sites built on high-speed engines.

Ready solutions — Frontity, Next.js, Nuxt.js …

This solution is suitable for both new and old WordPress sites.

Benefits:

• Switching to a high-speed engine will increase conversions. Your site will be faster and more user-friendly.
• This is great because search result algorithms from 2020 also take into account the amount of time a visitor stays on a site.
• You will keep the admin area, but the content for the user will work on the basis of high-speed technologies that are friendly to search robots.

Disadvantages:

This will require the site to be improved. And you have to pay for that.
In fact, you will have two sites instead of one.
You will lose the possibility of using WordPress plugins that are not connected to the Rest API.

Today, an excellent option would be to both improve the speed of the site for the user and the loading speed at the first start.
If you live off organic traffic, implementing these tools will give you a competitive edge.

For more on our experience successfully implementing this approach, see:
https://sirinsoftware.com/
https://timeua.info/
https://seatback.co/

Conclusion:

If you want to get high rates of organic traffic — faster loading speed on the first-start and dynamically loaded content — will provide you with a competitive edge. In 2021, this will also make the site look more friendly to search engines.

Before making a choice between Fixed Price vs. Hourly Rate let’s decide the comparison criteria.

Here they are:

• Total development cost
• Reaction on changes in the development plan
• Product quality and competitiveness

Let’s look at the Fixed Price and Hourly Rate options using a simple application for submitting support tickets.

Total development cost

When developing a web application, the developer company calculates its costs based on the amount of time it takes to create the product.

In our case the staff will be:

•  1 programmer for the Server-Side Development — 30$ / hour  (SSD)
• 1 programmer for the Client-Side Development 30$ / hour (CSD)
• QA — 20$/hour (QA)
• project manager — 30$/hour (PM)

Fixed price: The company calculates the number of people needed for development, takes into account the cost of an hour of their work, the complexity of the project, takes some money. stock.
Thus, the more accurate the terms of reference, the more accurate the project calculation will be.

In our case the hours required for this app will be:

• SSD — 40 hours
• CSD — 40 hours
• QA — 10 hours
• PM — 10 hours

Coef.  of the risks — 1.5…. This indicator is different for all companies.

Totaly, 2900$ (100 hours)

With Coef.of the risks —  2900 * 1.5 = 4350$  (150 hours)

Hourly: used methodology agile, scrum. According to which you plan the project 1-2 weeks in advance. After this time, you get a part of a workable product, which you can already look at, use, ask the developers to change something. This approach allows you to very quickly present your product to the market.
Development continues until the product is completed. The customer can decide at any time to stop or change the development requirements.

Real-time wasted:

• SSD — 60 hours (client’s server was not standard and took longer to set up)
• CSD — 35 hours (turned out a little faster)
• QA — 16 hours (slightly more than planned)
• PM — 8 hours

Totaly, 3410$ (115 hours).

As you can see, specifically in this example, with the correct terms of reference, that for a simple application, hourly pay is a more suitable option.

 

Reaction on changes in the development plan (something went wrong, needs to be redone)

When it can happen:

• The project does not have what the customer thought would be added by default
• The product was not what it was intended
• When customer trying to sell a product, they don’t buy it
• Customer’s clients asked to add functionality
• During the development, there were problems with the implementation (some modules do not work as intended).

Fixed price: not reworked if not specified in the contract. these are additional costs. In this case, changes are calculated and added at a separate cost.
If the customer does not have a complete understanding of the picture of the project or he has conveyed it incorrectly, there is a risk of getting a product that is unnecessary for the market, which will not pay off.

Hourly: Changes can be made immediately without prior approval and agreement. This allows the product to be adapted to market conditions faster.

It is very important to mention the size and complexity of the project here. If there are not many changes in our small, that in large projects changes affect the rest of the functionality, which sometimes increases the development time several times.

During development, there were problems with the implementation (some modules do not work as intended)

Today the developer writes 30% of the project code. The rest is a set of ready-made solutions that sometimes cannot work together. It is impossible to know all the combinations.
In this case, at a fixed price, the developer redesigns it at its own expense. When hourly — a decision is made on the need for this module in the project. The module is either replaced or removed from the project.

Product quality and competitiveness

Fixed price: high quality and competitiveness are possible with very competent planning and high qualifications of the customer. As a rule, in this case, there is a technical expert on the customer’s side.

Hourly: the quality is always high because the product is constantly adapting to market conditions. Also, in this case, developers can themselves propose to use new technologies and solutions that have appeared in the development process. Your product keeps pace with the times.

 

What should you choose?

If you have a complete understanding of how the product will work and the development time is less than 2-4 weeks, a fixed price is an excellent choice.

If the development period is longer, most likely you will not be able to think through everything. In this case, hourly would be your best bet.

If this is your first WEB app project. It is better to use hourly, having previously requested the estimated cost of development from the developer company.

Any web application that you want to create will have the following costs:

• Resource development
• Operating costs
• Marketing costs (if it’s a multiplayer platform)

Let’s take a closer look at them.

Resource development

How companies calculate their development costs.

It’s important to be clear that when you contact a developer company you aren’t buying a product, but rather a service.

The invoice you receive is based on the amount of time the company’s employees spent to create that product.

Therefore, when contacting the developer, don’t just consider the bill for services, but also their evaluation criteria. How many people will be employed on the project?
What are the stages of project implementation?
What are the options for implementing your product?

Based on this, an account is formed. And depending on the company’s experience, there will be different stages of implementation. Accordingly, prices will vary.

Here we describe building an app from scratch.

The goal here is to create the MVP (Minimum Value Product). The MVP will be sufficient to get your product out there and get statistics on whether your idea works in the real marketplace.

Our experience can confirm that usually, 2 to 4 months of work is enough to create an MVP (for simple web applications).

Participants in this process:

• architect
• UI / UX designer
• 2-3 programmers
• tester
• project manager

Naturally, not all of them work on the product continuously — an architect and a UI / UX designer are needed in the initial stages and at the stage of expanding the functionality (1-2 weeks).
Programmers and a tester are needed at all stages.

Each person has their own hourly rate.
The average rate of one web development programmer in Ukraine ranges from $20 to $100 per hour, depending on the company’s experience and the complexity of the project.

 

Operating costs:

As the project develops and the number of users on the site increases, improvements will be needed. Therefore, it’s important to indicate the number of users that you are targeting so that the developer company gives you the optimal solution.
That said, in 2020, the growth issue isn’t quite as pressing. Cloud solutions from Google and Amazon services provide a scaling system that help you to grow without the usual technical problems. This is more expensive than using a personal server, but it solves the scalability issue and you don’t need to worry about hiring a developer for this stage of implementation.

To support the project, you’ll need to hire a developer at the same rate — from $20 to $100 per hour. This is necessary at the project launch stage. And, in case of success, the development of the project.

The cost for maintaining your resource on Google and Amazon servers is about $100 / month for simple projects and scales up based on the project’s complexity. Oftentimes, the development fits into the free service limits.

Marketing costs

To properly utilize your application, you have to be informed and know what your goals are. If your product is targeted at a large number of users, you need to understand at the start what advertising costs you’ll need.

This is something that doesn’t apply to the developer — the developer won’t be able to help you with marketing, but the success of your project depends on it.

Therefore, when contacting a developer company, start with the MVP (minimum value product). That will save you money. You will develop the project gradually. If successful, you can add additional functionality — the bells and whistles. But in case of failure, you won’t complete the project with higher development costs than necessary.

The best-suited continuous-development models are Agile and Scrum. We recommend reading about the differences between Scrum and Waterfall when developing Web products.

Summary

Based on the average employee pay rate, an MVP will cost you $15-25K.

For this kind of project, your operating costs for maintaining the server and supporting the system by a programmer (if the project is developing) will be $1-2.5K / month.

You can take over parts of the development process yourself — like project management or testing — to reduce your costs. However, you should be aware that doing it yourself may put quality at risk.