France tv sport

What is France Télévisions?

First of all, France Télévisions is the french public audiovisual group. It's a huge society gathering multiple teams and products. They have their own channels, their own servers, their own video player, multiple buildings and so on.

For my part I was in the sport team working on the multiple sports events.

The project

Just for information, the main website I worked on at this time is not online anymore. Today all videos and articles are shared between France.tv and Franceinfo.

When I joined the France tv sport team I was not expecting to be in one of the most friendly team I worked with. I'm not fond of sport I prefer practice it rather than watch it. But spoiler alert: now I like to watch some.

My first challenge was to understand the platform and its technical requirements.

The front office stack:

• Symfony with Twig for the templating
• Gulp to process all tasks required
• SASS for the styles
• native javascript for the scripts
• AMP pages that was an exact copy of the mobile style of the website

The back office stack:

• Drupal with Twig
• SASS
• jquery/native javascript

In the middle of these 2 products there was an API that aggregate all the informations from the back office in some route accessible from the Symfony. Those API endpoints was used on the web and the mobile applications.

It was my first time with an API but I liked the fact that the front and the back doesn't share the same framework and were not in the same repository but worked together. It was also the first time I saw a back office managed by a backend team and a front office managed by a frontend team.

The back office was used by journalists, they managed the content and wrote their articles in it. The front office was the result of these contents.

The website by itself was a news website that presents all news in the sport area organized by theme and type of sport.
When I worked there the focus was on the live videos on the website for event like Le Tour de France or Roland Garros but today all directs and replays are available on France.tv the product dedicated to videos/directs on France Télévisions Channel.

What was I doing?

I was the only frontend developer in the team. In all other teams they were 2 or 3 frontend developers. It was one of the specificity of the sport team.

The team

In 2 years the team changed a lot but when I arrived there was 1 product designer, 3 backend developers, 2 app developers (1 Android, 1 iOS), 3 Product Owners (1 for each project), 1 technical project manager/Scrum Master (the 2 roles), 1 product manager, 1 event project manager. And of course the collaboration with journalists was a day to day thing as they were our first level of users.

The goal of the tech team was to create a website used by journalists to deliver news to everyone. The news could be of multiple type like articles, videos, charts, mini website for events...

My role was to help migrate the platform from an old Drupal 7 to Drupal 8, create new features, maintain the old ones, keep a good web performances and write clean code.

Front of the front office

I'm not very good with php, I think it's one of my Nemesis. This language shares a lot of similarity with Javascript but I just like to have a visual result and not just a lot of code to handle data and some line to create route on the website. Even today I'm not confident with it but I try to improve my back skills, at least to communicate efficiantly with backend developers.

The front office was made with Twig template engine that I used for several years at this time so it was clearly simple for me to create all views needed and I also improved the component based system to reuse a lot of components through the whole app.

I worked on web performances and monitored each update on the website to make sure all points were correct (speed loading, number of requests, size of files...).

After some time I also started to be the referent on the accessibility and the web performance of the website and I made presentations each sprint on it to show the last improvements and issues.

For each changes on the website I had to recreate it in the AMP format to contribute to the page ranking. My first professional approch of web component base technology.

Because I was responsible of the front office I was also responsible of each front release. As soon as the product owner wanted a new feature to be released I pushed it live.

Front of the back office

One of my challenge was to build a new theme for the back office interface. The UI of the theme was ugly and the journalists didn't have a good experience with it and often prefered writing their posts on Word first. The team decided to create a new theme with a custom design.
This part was difficult because Drupal was not made for frontend developers. So on the paper a new design means new stylesheets and maybe new templates, but with Drupal you have to do more. There are a lot of functionnalities that came from the core of Drupal and if you want to customize something you have to create a copy of it to replace it. So in a nutshell I copied a lot of files, I started changing php files. Sometimes it was just to add new classes on an element. A real nightmare...

Fortunately the backend developers was always present when I needed help and we worked a lot together on this. It was not perfect in the end but the UX of the back office was improved and our journalist coworkers appreciate it.

Design System

I've also collaborated a lot with the front product owner and the designer to elaborate a consistant interface. We've created a common language to build our product. It was the beginning of the France tv sport Design System. There was a styleguide with some components in it created with Hologram. This tool creates a living styleguide, when your component is updated and you had the right documentation in the style comment it generates the right page, with a preview of the component and its code.

The problem was that it was not maintained and doesn't reflects the Atomic Design methodology chosen by my predecessor, so I began a brand new styleguide and made some meeting with the designer to make sure we were on the same page.

After 1 year the other teams of France Télévisions asked us to show our workflow and how we created our interfaces together. So we had a lot of meeting in front of all designers, developers and product owners to show them.

At first it was almost unofficial and we discussed with 4 persons about our workflow and they liked it so much that they organized the following presentations. The Design System Manager really liked the way we worked together almost without collaboration issues and how our interfaces was built. He decided to elaborate a design system called Galaxie that gathered all products and all teams of France Télévisions based in some parts on our work.

All teams worked closely with us. I really don't know if I was the initiator of this, but it's one of the experience that makes me the most proud of myself. I really liked to collaborate with designers and discussing with them for hours.

The Design System area is a huge part of a product and it takes time and some efforts to be able to create one but after that all seems to be at the right place and it helps the product to evolve.

Since this experience I'm fond of Design System elaboration and Interface creation. I try to help each team I work with to collaborate together to be able to create a consistant product.

Me and sport

Like I wrote at the beginning of this page, I'm not a sport supporter. I prefer to practice it. So as all my colleagues were supporters of certain teams or a certain athlete I was a bit of an outsider. I'm still not a 'supporter' but I have to admit that I started to get interested in some sports that I didn't watch in the past because of my colleagues. I also learned some game rules and shared my knowledge on some others. After work we played ping-pong, table football and pétanque (that I already played by the past). We also watched sports on TV while we worked because we always had a TV on and on each wall.
Yeah, that's the way we work in an audiovisual group and it's pretty awesome. To be honest it's one of my favorite experience so far and at some point it also help me concentrate with a lot of noise around me.