France tv sport

Homepage of France tv sport website
  • Date icon
    Date: Jun 10, 2016
  • Question mark icon
    Description: Frontend development on the France tv sport website and help to create the Design system of the brand
  • Label icon
    Type: Frontend development, Design System
  • Tools icon
    Tools: VSCode, Symfony, Twig, SASS, Gulp, Drupal, Hologram, an excellent team, a lot of fun
  • Link icon
    Website link

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.

The project

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
  • We also had 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.

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 work 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.

The website by itself is 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 direct 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 I did?

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 (he has the 2 roles), 1 product manager, 1 event project manager. And of course the collaboration with journalists was a day to day thing.

The goal of the tech team was to create a website used by journalists to delivered 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 code with quality.

Front of the front office

I’m not very good with php, I think it’s my nemesis. This language share a lot of similarity with javascript but I just like to see 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.

The front office was made with Twig template engine that I used for several years now 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.

For each changes on the website I had to recreate it in the AMP format to contribute to the page ranking.

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. The team decided to create a new theme with 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 you have to create a copy of it to replace it. So in a nutshell I duplicate 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.

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’re on the same page.

It's me and my team in front of the other teams (between 30 and 40 persons)

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

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 and how our interface was built. He decided to elaborate a design system called Galaxie that gathered all products and all teams of France Télévisions.

All teams worked closely with him. I really don’t know if I was the initiator of this, but it’s one of my experience that makes me the most proud of myself. I really liked to collaborate with designers and discussing with them for hours. By designers I mean ‘open minded’ designers.

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 when all my colleagues were supporters of certain teams or a certain athlete maybe I started to get interested in some sports that I didn’t watch in the past. 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.