Develop Apps Using Symfony & React in Perfect Harmony

Develop Apps Using Symfony & React in Perfect Harmony

Mateusz Kolasa - Symfony Full Stack Developer
5 minutes read

Software developers are very opinionated when it comes to the ‘frameworks’ and ‘libraries’ that they love. But what are these frameworks and libraries exactly? In this article, I’ll briefly cover how these tools help developers get work done, and showcase an example of React and Symfony being used to create a fully functional app.

What Are Frameworks and Libraries?

Frameworks and libraries are the best tools in the arsenal of a software developer. They are sets of ready-made architectural elements that make life easier. We think of a framework as the basic structure, on top of which we can add new functionality or specialize certain parts of the code to fit our needs.

Software frameworks are distinct from libraries or normal applications by the following:

  • Inversion of Control (IoC) - In a framework (as opposed to libraries) the overall program’s flow of control is not dictated by the caller, but by the framework.
  • Default behavior – A framework has a default behavior for consistency. For example, when an error occurs, all developers using the framework are familiar with its behavior without having to explicitly check or recheck what the behavior might be.
  • Extensibility – A framework can be extended in functionality with no configuration required, allowing for apps that can be extended dynamically by customizing the out-of-the-box
  • Stable framework code – Frameworks are generally consistent in code base, so that training new developers is not required. Once a user knows the framework, they can specialize functionality, but the core code always remains the same.

Thanks to these types of tools, developers can quickly create applications. They can focus on writing the unique code of the application, instead of focusing on things that have been repetitively built and optimized in many other cases, for example, processing a login from an end user.

A library, on the other hand, is a collection of classes and functions that help solve a specific task, and a programmer can use the prewritten code directly. The best ones are open-source libraries, where developers can find all sorts of projects for the taking, like Machine Learning, mobile development, or data scraping, without having to ‘reinvent the wheel’ every time.

Libraries and Frameworks at Polcode

Polcode uses many frameworks and libraries in several programming languages. For a full list of technologies used by Polcode, visit our Tech Radar. This tool can help potential clients or developer candidates joining the team and learn about the technologies we use on a daily basis, as well as experimental tools which are at the leading edge of what’s possible.

In this post, we’ll cover only Symfony and React just to show the advantages of using frameworks and libraries.

Symfony

Symfony is one of the most popular frameworks written in PHP, and is mainly used to build web applications. Thanks to its modular structure that allows great customization, many popular applications have been created, including tools such as Sylius (eCommerce platform) and the website of one of the most popular music streaming applications - Spotify.

React.js

React.js (also known as React) is a JavaScript library that is often used to build user interfaces for web applications. Currently, it is one of the most popular libraries in the world by brands like Twitter, Netflix and notably Atlassian, which many developers use on a daily basis.

Advantages of Frameworks and Libraries

Among the many advantages of frameworks and libraries, several come to the fore. Symfony has many modules supporting the construction of the API used by the application written in React. React also comes with a number of ready-made extensions to support rapid application development. This means that developers gain the advantages of speed, which leads to lower cost of ownership, which allows businesses to launch apps on the market at a competitive pace. It also makes developer life easier, reducing burnout, increasing efficiency, and greatly reducing the number of mistakes or errors encountered. Aside from these high-level business benefits, frameworks and libraries offer specific advantages over not using them.

Documentation and community support

Both of the solutions I have mentioned are based on the idea of ​​Open Source, and more precisely on the MiT license. This means that these solutions are fully accessible to everyone, and thus the documentation is also available. In addition to documentation, both solutions are characterized by a great commitment of the developer community in the development of the software itself and additional modules. If you encounter any problems, you can always ask a large community of developers, often focused on Facebook groups and specialized portals. There are also suitable groups for beginners where those who start their adventure with certain technologies can ask for help in solving the problem they have encountered.

Openness to modifications

Most libraries and frameworks are available under the MiT license. This license gives the developer virtually unlimited modification options - the only condition is to distribute the altered works under the same license. Thanks to this, everyone can freely adapt the created software to their needs.

An Ordered Structure

The ultimate benefit is that any developer who joins a project or team (and has knowledge of the framework or library) does not need to be trained from scratch! Frameworks and libraries usually have an ordered and standardized structure. This significantly lowers the entry threshold for newcomers. A programmer familiar with the selected technology knows where to find the code fragments responsible for selected functions, and their expectations will likely match up with general structure, even if they have never seen the specific code before.

Why are Symfony and React a perfect match?

Let’s suppose that a developer wants to create a simple note-taking application. A combination of Symfony (application engine) and React.js (user interface) will be a great choice here.

Communication

Web applications are usually divided into two parts: the backend (everything that happens on the server side) and the frontend (what the user sees). Communication between these two parts of the application takes place thanks to the API. Symfony has many solutions supporting the development of this type of application, including a special API Platform.

Building the API

When building an API in Symfony, we can use many ready-made modules (so-called bundles) that greatly simplify operations on input and returned data. Some of the modules are provided by the creators of the Symfony itself, e.g. bundle Serializer, thanks to which we can easily mark what data is to be returned in response to a specific request. NelmioCorsBundle, which supports the management of headers required during communication with the API, can also be useful.

Building the User Interface

The React.js library supports the creation of user interfaces in web applications. React.js has a lot of extensions that speed up the building of the interface, and one of the noteworthy ones is the React Bootstrap extension. Thanks to it, we can build a good-looking application in a very short time without worrying about the style of the application being created. The template is already provided by Bootstrap, saving extreme amounts of time and money.

Communication between modules

One of the common problems with web applications is communication between the backend and the frontend. The modular structure of Symfony allows you to solve, for example, the CORS security problem with "one click", as I mentioned earlier. On the frontend side, we also have many possibilities to speed up application development. Among such solutions worth noting is the axios library, which allows you to easily create and handle queries to the API.

Building a Simple Note App in Minutes

As the above description shows: Symfony in conjunction with React allows you to create a working web application from scratch and in a short time. I will show it using a simple note app as an example.

In our application, a note consists of a note ID, title, content and author. We will not always need all this information. The author field is a field used only to identify who the note belongs to, so we can omit it when retrieving information from the API. Let’s consider two cases: a list of notes and a preview of the note itself.

In the first case, we only need the title of the notes and their identifiers. In case of previewing the note, we additionally need the content field. Thanks to the aforementioned Serializer Component, we can easily mark what fields we need in the right contexts.

namespace App\Models;

use Symfony\Component\Serializer\Annotation\Groups;

class Note {
    /**
     * @Groups({"list"})
     */ 
	public $id;

    /**
     * @Groups({"list", "preview"})
     */
	public $title;

    /**
     * @Groups({"preview"})
     */
	public $content;

    //...
}

With such marking, we can easily define in the controller what group of data we want to return. E.g. a list of notes:

$notes = $notesRepository->findAll();

$context = new SerializationContext();
$groups = ['preview'];
$context->setGroups($groups);

return $serializer->serialize($notes, 'json', $context);

The result of such a code should be:

[
	{
		"id": 1,
		"title": "Example note 1"
	},
	{
		"id": 2,
		"title": "Example note 2"
	}
]

Notes list view

From the API prepared this way, we can easily download a list of notes, and then create a simple component displaying a list of notes based on the received data.

class NoteComponent extends Component {
    render() {
           return (
                <div
                     className="note"
					// ...
                >
                     {note.title}
                </div>
           );
     }
}

Saving Time, Money, and Sanity

In this simple example, you can clearly see how much frameworks and libraries help save the programmer's time by providing basic application functions. Many ready-made elements can be easily combined to quickly create the basis of the application, so the developer can focus on solving more complex problems. Orderly structure and good documentation help to quickly build new solutions and reduce the time needed to solve potential problems. The multitude of guides and the community focused on this type of software also positively influences the pace of work and the development of the application being built.

On-demand webinar: Moving Forward From Legacy Systems

We’ll walk you through how to think about an upgrade, refactor, or migration project to your codebase. By the end of this webinar, you’ll have a step-by-step plan to move away from the legacy system.

moving forward from legacy systems - webinar

Latest blog posts

Ready to talk about your project?

1.

Tell us more

Fill out a quick form describing your needs. You can always add details later on and we’ll reply within a day!

2.

Strategic Planning

We go through recommended tools, technologies and frameworks that best fit the challenges you face.

3.

Workshop Kickoff

Once we arrange the formalities, you can meet your Polcode team members and we’ll begin developing your next project.