23 сентября 2019 г.

Single Page Application (SPA) Principles Every Web Developer Should Know

Every SPA development project is unique in its own way. The application can have a unique design, a complicated business logic, a very specific target audience. Still, in spite of the uniqueness, a great part of the development process can be generalized and its common principles can be defined for more effective work. Further on we are going to speak about the Single Page App development principles which make it more advanced and at the same time quicker.

Every project starts with the discussion of the task with the client and the understanding of what should be done. If the client does not know what the aim of the app is, who the target audience is and what the solution is for, it will be difficult to work. More than that, the project will most likely run over time because the ideas will appear chaotically and it will prevent the team from accurate project estimation and planning.

That’s why the first and one of the most important points in our list is a clear and precise idea of the product and its target audience, meaning the future users of the app.

The next stage is choosing the way of project realization. For IT products development, Agile method and its principles work best, and Scrum framework in particular.

Scrum

Scrum framework facilitates task planning and team coordination, besides it positively influences the speed of the project. The main principles of this methodology are:

• Small teams. The team should contain 3 to 9 people, each of which is a professional in some sphere able to solve the problems set. The point is that such a team does not need the outside assistance and can cope with all the tasks autonomously.
• Standups. The team holds a meeting daily to define the problem issues, inform other members about the project flow and help each other to cope with difficulties.
• Sprint. It’s a 1-2-week increment of software development activities, in which a certain scope of work is fulfilled. The tasks are planned by the team prior to the sprint start and it’s not advisable to add or delete activities during the sprint. Such an approach helps to focus on the tasks and not to get side-tracked.
• Retrospective. On finishing each sprint, the team makes its conclusions as to the development processes running and their possible optimization in course of further work.

More info about Scrum you can read here.

Cooperation with the project manager

Using Scrum presupposes preliminary planning of the tasks, their complexity and time estimation together with the project manager. The manager usually communicates with the client and sees the overall picture of the project. That’s why it’s important to keep to your role in the project and to address the questions arising to the manager so that he could include them in the task list.

The direct communication between a developer and a client can slow the project down because it often leads to the unplanned corrections, which often fail to improve the app functionality but take much time.

Cooperation with the designer

It’s better to keep to the following principles in the developer — designer interaction.

• The project should be discussed in detail with the team before the design stage of the project starts.
• The decision as to the UI-library (and which exactly if any) should be taken.
• A CSS grid should be defined with regards to cross-platform and cross-browser compatibility.
• The result of app layout creation should be regularly shown to the designer, to make sure it meets the design principles for software development and to figure out the critical moments and the ways to cope with them.

The steps mentioned above will allow to start frontend development of the project even when the design is not yet finished or approved by the client. However, it’s vital to realize that the design stage should be finished before the front-end development.

Cooperation with the back-end developer

Ideally, the back-end development should be several sprints ahead of the front-end.

Similar to the points above, the contracts (or endpoints) should be discussed with the back-end team in advance, before the project starts. In such a case Mocks are used at the initial stage of the project. It’s a fake data, which is substituted for the real one after the backend is realized.

It’s also worth mentioning that the advantage of SPA is that the back-end interaction has become extremely simple due to the REST. After the negotiations as to the contracts are finished, the development takes not much time.

Frameworks and Libraries

The main tasks of the modern javascript-frameworks can be put in the following way: To simplify the work with data, to use box solutions (app components) and not to copy paste the logics which is present in almost every project, like forms validation, for instance, from one project to another.

To solve these problems not only javascript-frameworks are used, but additional libraries as well, like, for example, Element UI or Bootstrap.

Styles

For quick and effective CSS development, it’s necessary:

• To discuss UI-elements and media-breakpoints with the designer,
• To use box solutions from the libraries.

The following steps can also speed the development up:

• Redefine the default library styles for your own ones, it will allow to comfortably use the library components.
• Create your own file with the variables for UI-elements.
• Use preprocessors.
• Use the principles of BEM-naming.

The properly-organized working process — is the client’s saved means. That’s why the points above indirectly influence the cost of the product. The fewer problems the developers have, the less time is spent on project fulfillment and less working hours are consequently needed to create a single page application.

YAGNI

YAGNI ("You aren’t gonna need it")— the process and the principle of the IT solution development, in which the refusal of the unnecessary functionality is declared as the main aim and value. It means not adding features, which do not have an immediate necessity.

This principle can be used both at the initial stage of project discussion with the client and during the code development stage as well.

In case, it is, for instance, an internet shop consisting of just one product, the client is unlikely to need a catalog and cart features.

When applying this principle to code development, it’s essential to preserve the reasonable balance between the minimally operating product and ideal coding.

Testing

Unit-testing — is the programming process, which allows testing separate modules of the source code for consistency. The main idea of such testing is to make sure that the code alteration did not result in the troubles in the app operation.

However, sometimes it’s better not to include testing. If the budget of the project is tight and the functionality is extensive, it saves the client’s means. Yet, testing should not be refused completely. Linter, typescript, code review and QA can be used as an alternative to testing then.

Obviously, it concerns the relatively small projects, which last up to 6 months. Big projects cannot be carried out without testing.

Vue.js

It’s vital to choose the correct framework. The speed and convenience of the development on Vue are generally higher than on the other frameworks. It happens due to the fact that Vue has comprised the best features of React and Angular.

The second important aspect is that the learning curve is lower on Vue, meaning that a layout designer or a junior developer can quickly learn to use the Vue. It usually influences the cost of the project in a positive way.

In the pursuit of speed and cost, it’s extremely important not to sacrifice the quality. Fortunately, it’s easily attainable if you do not forget about the key stages of the development.

One may think that the following points make the development process longer, but in fact, they help to prevent bad code quality or critical bugs in the app. It really saves time, money and nerves later.

Quality Assurance

Development is no easy matter, especially when it goes about the quality assurance of your own work. Sometimes the app may seem ideal to the developer, but a fresh eye is necessary anyway.

Quality Assurance (QA) is responsible for the whole development process, that’s why it should be integrated into every stage of the development process: from project description to its launching and even further into the follow up maintenance.QA specialists create and implement various methodologies for quality enhancement at every phase of the app production, find bugs and application logic problems and help with finding the ways to fix them.

One should not forget about the beta testing approach — it’s a method of testing when the developer himself checks the app business logic testing and its styling.

Code review

Checking the correctness and the accuracy of code is also QA in some way, but it’s used for the proper code development process. This procedure is carried out by every company, which concerns quality. At this stage, it’s essential to make sure that the code is clear to other developers and it’s possible to add some features or alter the existing ones later. This stage allows using «community» intelligence, which is much more powerful than an «individual» one.

Summary

To sum it up, we’ll admit that the above-mentioned principles have been chosen as a basis for qualitative development in our company.

However, it should also be borne in mind that communication is an important principle of work. It’s due to it the required set of practices and methodologies can be defined to meet the requirements of a specific project and a specific customer.