eMAG Tech Talks: Sonata Admin & AngularJS

This eMAG TechTalks session covered some very interesting subjects brought up by our colleagues Dan Gurgui and Gabriel Nicola, namely the main ideas and concepts behind two interesting technologies — Sonata Admin and Angular JS. So let’s just have a look at what we’ve learned from Dan and Gabriel.

Sonata Admin

Dan talked about how in eMAG we are always developing back-end functionalities for the administration of database records (simple CRUDs). Most of the times the requests come in a generic form like “Product management interface”. From this point we start iterating aso that we get a bigger understanding of what’s needed, we get a filter for order id, a new column for the created date and so on. The code for this interface usually becomes cluttered in time and adding a new field means lots of small operations such as adding validation, adding translations for multiple languages, different formatting, permission management, etc.

When going with this approach, it gets really hard to anticipate code reusability and the DIY approach generates lots of technical debt.

In order to avoid these situations we started using Sonata Admin which is considered to be super awesome. It’s a Symfony2 bundle that integrates very well with Symfony2 by providing out-of-the-box solutions for most common admin requirements. The set of features is very rich and can be easily extended or overridden and it is very easy to maintain in the long run. It is part of a bigger project called Sonata Project and there is a rich community which provides strong documentation and lots of examples.

So let’s take a look at the set of features provided. First of all, it links directly to the ORM model, be it Doctrine Mysql or MongoDB. Each link to the ORM model can be easily managed from the admin dashboard, which is basically an interface where all the admins are listed along some basic operations such as list and create. Once you define an admin as a service, it becomes available in the dashboard and each admin service provides the following features for an ORM model:

• UI with list records that can be filtered, exported, sorted, etc.
• For each record in the list different actions can be executed such as: edit, delete, export (CSV, XML, XLS)
• UI with forms for managing a single record
• Autocomplete for filters
• Consistent interface across all sections
• Translation engines for managing the admins in different languages
• ACL and security features for managing access to various admins
• Others such as: flash messages, command line utilities, custom templates, help messages, etc.

We have been using Sonata Admin in eMAG for the management of various features like services provided to customers, management of rules, management of users, etc. and we’ve found that it brings serious advantages compared to the DIY approach. First of all, it saves lots of development hours, we’ve sped up our productivity by 50% and, moreover, we’ve provided more features to our users whose usefulness they discovered later (such as batch export).

Although we’ve found it very useful, we managed to push it to the limits and we’ve learned something along the road:

• It’s not very useful for complex filtering and sorting
• We don’t recommend it for public interfaces
• Complex logic in views will require to override full parts of it by overriding controllers and views
• Complex management of access rights and permissions will make it cluttered

Overall, it’s a great tool for providing CRUD admins with lots of features on which you can later extend and add new features, and it is not recommended for complex backend systems.

AngularJS

In the second presentation of the eMAG TechTalks session, Gabriel Nicola took us through the basics of Angular JS, why it is needed and what exactly it brings to the plate.

First of all, what is AngularJS? It’s an open source web application framework developed originally in 2009 by Misko Hevery and Adam Abrons and it is now managed by the “small” company you might know as Google.

What does it do? It lets you use HTML as your template language and lets you extend HTML’s syntax to express your applications components clearly and easy to understand.

Amongst its main advantages, Gabriel pointed out:

• Creating single page applications in a very easy to read way
• Providing data binding
• It’s unit testable
• It provides reusable components
• Developers get to write less code

He wrapped up the presentations making sure we understand that AngularJS is mainly used because of its extensibility and simplicity and because it’s easy to maintain and also very efficient. You might want to look it up on Google as well and learn about this great tool. It certainly convinced me to do so!