A high profile project with Symfony and API Platform: beIN SPORTS
13 likes61,087 views
An API-first architecture was developed for beIN SPORTS' digital platforms to support multi-site, multi-language publishing across websites, mobile apps, and connected devices. API Platform and Symfony were used to create a central API encapsulating business logic and exposing semantically structured content. An API-centric CMS was developed to allow 60 journalists across 4 newsrooms to collaboratively publish content in real-time to platforms reaching up to 70 million users per month.
![# app/config/services.yml
services:
person_resource:
parent: "api.resource"
arguments: [ "AppBundleEntityPerson" ]
tags: [ { name: "api.resource" } ]
DEFINE RESOURCES TO EXPOSE](https://image.slidesharecdn.com/symfonycon-light-showtime-151211093944/85/A-high-profile-project-with-Symfony-and-API-Platform-beIN-SPORTS-30-320.jpg)
A high profile project with Symfony and API Platform: beIN SPORTS
- 1. A high profile project with Symfony and API Platform: beIN SPORTS Symfony Con 2015
- 2. Fabien Gasser twitter: @fabien_gasser SolutionArchitect at Smile fabien.gasser@smile.fr Kévin Dunglas twitter/github: @dunglas CEO at Les-Tilleuls.coop Symfony Core Team API Platform creator kevin@les-tilleuls.coop
- 3. Build the new beIN SPORTS Core Platform: may the force be with us ! • Content Distributed on several channel: websites, mobile apps, TV apps, XBOX, PS4… • Multi-site: 4 territories • Multi-language per site: 7 languages • Publication workflow: 60 journalists distributed across 4 Newsrooms • Real-time publication • Strong SEO needs • Performant, maintainable, open • High traffic: up to 70M of hits and 50M video views monthly • 5 teams, with more than 30 people working on the project We created an API Centric CMS OUR MISSION
- 4. Use Linked Data Luke, to enrich your data: • Knowledge Database: semantically structured data • External Knowledge database (dbpedia, private partners) • Content enrichment • API-Management: manage the data we produce to external consumer We created a Linked Data API Centric CMS LINKED DATA
- 5. http://www.beinsports.com/ In a 4 months time frame, Smile redeveloped from grounds up, beIN SPORTS digital core platform serving up to 70 m PV and 50 m video views monthly, across 30 countries where beIN operates 24/7, in 4 languages. From day-1 launch, back-end platform supported multilingual publishing workflow by a team of 60 journalist/editorialist, distributed across 4 Newsrooms (Miami, Paris, Doha, Sydney). This has been made possible thanks to Symfony.
- 7. An API at the heart of the Information System: • Central point to access data • Encapsulate all the business logic • Access same data and features from everywhere • Agregate heterogenous data and display coherent data encapsulating business-logic. API FIRST
- 8. + Guzzle EASY TO EXPOSE, EASY TO CONSUME ! • Core web API • Back-office: a HTML5 webapp (SPA) • Front-office: a website generating HTML server-side (for SEO) • Connected devices: TV apps, XBOX app, PS4 app • Third part application: EPG, other websites
- 9. • Centralizes R/W access to data • Holds all the business logic • Is stateless (PHP sessions make horizontal scalability harder) • Requires authentication to access to some endpoints (but not all) and to write data • Is built with PHP, Symfony and API Platform API
- 10. • Single Page Application: 100% HTML5 / JavaScript / CSS • Presentation logic: login screen, publishing workflow, medias management... • Queries the API in AJAX to retrieve and modify data • Client-side routing (HTML5 push state) BACK OFFICE
- 11. • Public pages: homepage, lists, categories, articles, videos, photos... • Server-side generated HTML (some JS too) • SEO: fancy URLs, structured data, breadcrumbs... • Queries the API in AJAX • Responsive design FRONT OFFICE
- 12. Mobile apps, TV apps, XBOX and PS4 apps…: • One responsibility: display (nicely) data • Query the central API to retrieve data What about User Generated Content like comments, reviews? External services. OTHER CLIENTS
- 13. Each application has its own: • Git repository • CI • servers (if applicable) • domain name (if applicable: api.example.com, admin.example.com, example.com) CONTINOUS INTEGRATION
- 14. Benefits for the project: harder, better, faster, stronger • 1 app = 1 team (specialized skills) • No business logic duplication: all in the API • Easy refactoring: touching a component has no impact on others • API format = contract: documented and tested • Easy to add new client apps WHY SHOULD I USE API PLATFORM ?
- 15. CMS AND KNOWLEDGE DATABASE MICROSERVICES ARCHITECTURE Content API Sports API EPG API Core Platform API Web App Mobile Connected devices REST REST REST Database Back Office Third part content Batch REST Core Platform API JWT AUTH DB DB DB DB Webhooks XML
- 16. Formats, open standards and patterns
- 17. HTTP + REST + JSON: • Work everywhere • Lightweight • Stateless (if done well) • HTTP has a powerful caching model • Extensible (JSON-LD, Hydra...) • High quality tooling API PATTERN
- 18. Hypermedia as the Engine of Application State • Hypermedia: IRI as identifier • Ability to reference external data (like hypertext links) • Auto discoverable => Generic clients API FORMAT: HATEOAS
- 19. JSON-LD: JSON for Linked Data • Compliant with technologies of the semantic web: RDF, SPARQL, triple store… • Standard: W3C recommendation (since 2014) • Easy to use: looks like a typical JSON document • Already used by Gmail, GitHub, BBC, Microsoft, US gov… and now beIN SPORTS Remember our Knowledge Database? JSON-LD
- 20. The Schema.org vocabulary • Large set of elements: events, team, people, videos... • Created and understood by Google, Bing, Yahoo! and Yandex • Massively used, and run by the W3C (Web schemas group) • Can be used in HTML (microdata / RDFa) and JSON-LD • Extensible (custom vocabularies) SCHEMA.ORG
- 21. HYDRA • Describe REST APIs in JSON-LD • = write support • = auto discoverable APIs • Standard for collections, paginations, errors, filters • Draft W3C HYDRA
- 22. JSON Web Token (JWT) • Lightweight and simple • Stateless • token signed and verified server-side • then, stored client-side (web storage) • sent in an Authorization header in each AJAX request API AUTHENTICATION
- 23. Linked Data
- 24. LINKED DATA Soccer Player Person Name Date of Birth Soccer Match Event Team play in Rdf:type ⚽ http://dbpedia.org/ressource/Zlatan_Ibrahimovic Begin Date End Date Rdfs:subClassOf Dbpedia-owl:birth_name Dbpedia-owl:birthdate Has a Has a Has aIs an Dbpprop:Team Third part semantic engine: • Apache Jena • Apache Marmotta • Apache Stanbol Luke, learn more about linked data !
- 26. A decoupled PHP web framework to build modern, API-first web projects. Out of the box hypermedia and Linked Data support with JSON-LD, Schema.org, Hydra and JWT in is heart $> composer create-project api-platform/api-platform my-project API PLATFORM
- 27. API Platform 💘 Symfony • Built on top of Symfony full-stack (3.0 OK) • Install any existing SF bundles • Follow SF Best Practices • Work with existing SF app • Optional: advanced Doctrine support API PLATFORM AND SYMFONY
- 28. SCHEMA GENERATOR Pick types and properties you need from Schema.org: # app/config/schema.yaml namespaces: entity: AppBundleEntity types: Person: parent: false properties: name: ~ birthDate: ~ gender: ~ # other Schema.org types $> bin/schema generate-types src/app/config/schema.yml namespace AppBundleEntity; // Use statements /** * A person (alive, dead, undead, or fictional). * * @see http://schema.org/Person Documentation on Schema.org * * @ORMEntity * @Iri("http://schema.org/Person") */ class Person { /** * @var integer * @ORMColumn(type="integer") * @ORMId * @ORMGeneratedValue(strategy="AUTO") */ private $id; /** * @var string The name of the item. * * @ORMColumn(nullable=true) * @AssertType(type="string") * @Iri("https://schema.org/name") */ private $name; // Other properties, getters, setters, adders, removers….
- 29. SCHEMA GENERATOR You get: • PHP classes, properties, getters and setters (PSR compliant) • Doctrine ORM mapping (including relations and mapped superclasses) • Validation constraints from the Validator component • Full PHPDoc extracted from schema human-readable descriptions • (optional) PHP interfaces • (optional) ResolveTargetEntity Doctrine mappings • (optional) JSON-LD IRI annotations (useful for the API bundle)
- 30. # app/config/services.yml services: person_resource: parent: "api.resource" arguments: [ "AppBundleEntityPerson" ] tags: [ { name: "api.resource" } ] DEFINE RESOURCES TO EXPOSE
- 31. CREATE EASILY REST APIs Validation Pagination Errors serialization Filtering Sorting Awesome features Browse a pretty, automatically generated documentation. Specify the API and test it thanks to a system especially suitable for Behavior-Driven Development. Everything is extensible thanks to a powerful event system and strong OOP.
- 32. FULL SUPPORT OF JSON-LD, HYDRA AND SCHEMA.ORG An auto discoverable Linked Data API for free!
- 33. USER DOCUMENTATION AND SANDBOX NelmioApiDoc automatically detects and documents exposed resources.
- 34. Software Stack
- 35. CUSTOM APPLICATION API Back-office Front-office PHP Symfony API Platform Behat + PHPunit Doctrine MySQL Varnish NelmioApiDoc FosHttpCache FOSUserBundle LexikJwtAuthenticationB undle NelmioCorsBundle AngularJS Restangular Less Bootstrap Grunt Protractor PHP Symfony Guzzle Twig Behat + PHPunit Less Bootstrap Varnish FosHttpCache No database!
- 36. Hosting Stack
- 37. HOSTING ENVIRONMENT Static files S3 SPA S3 Assets front S3 medias Browser API Autoscaling group VarnishVarnish EC2 -1 EC2 -n Front Autoscaling group VarnishVarnish EC2 -1 EC2 -n Amazon RDS Assets Other services: Route 53 (DNS), SES (mail), …
- 38. HOSTING ENVIRONMENT API Autoscaling group VarnishVarnish EC2 -1 EC2 -n Static files S3 SPA S3 Assets front S3 medias Smartphones Connected devices Back office Amazon RDS Assets Other services: Route 53 (DNS), SES (mail), …
- 39. • Request / day on front: 5,2 M • Request / day on API front & connected devices: 15,6 M 468 M request per month to serve in: • AVG response time on front: 29ms • AVG response time on API: 4ms FEW FIGURES
- 40. API PLATFORM EVERYWHERE CMS – E-COMMERCE Real life use case examples TM & © Lucasfilm Ltd. All Rights Reserved
- 41. Monolith application are not enough to handle the omnichannel experience. E-COMMERCE POS API Orchestration with information system CMS B2C CRMPIMOMS Back Office Corpo B2B
- 42. And now Luke, scaffold your model and expose it with API Platform. 1. Scaffold your core-application API with schema.org 2. Create an OMS to manage Cart and Order 3. Plug external data-sources and unify it with Hydra keeping a unify vocabulary to describe your data according to their referential Pros domain separation, loose coupling Cons only for e-commerce Jedi, you don’t need this for classic retail shop. E-COMMERCE
- 43. EVERYTHING
- 44. Questions ? TM & © Lucasfilm Ltd. All Rights Reserved
- 45. Thank you, vote for us Luke! Fabien Gasser SolutionArchitect fabien.gasser@smile.fr Kévin Dunglas API Platform creator contact@les-tilleuls.coop https://joind.in/talk/view/16486 http://symfony.com/showcase/170