A high profile project with Symfony and API Platform: beIN SPORTS

Speakers: Kevin Dunglas and Fabien Gasser. In a first part we will introduce semantic and linked data technologies supported by Symfony and API Platform: JSON-LD, Hydra and Schema.org, their contributions to interoperability and a web of data and how to use them, technologies until there the restricted domain of Java such as RDF, SPARQL, triple stores, ontology engines.

In a second part we will give a feedback on the strategy we employed to build a high traffic CMS platform using Symfony, API Platform and AngularJS as technical stack. We will see how an API-first strategy helped us to deliver fluently content on several channels (desktop, mobile apps, connected devices, partners…) and how that strategy helped us to make large teams working together on the same project. We will also see how to leverage Varnish and AWS to absorb gigantic traffic peaks, how pure-JS fit well with that architecture and effects on SEO

In a third part we will give you some tips in order to build an e-commerce platform based on that approach.

Transcript

1. A high profile project with Symfony and API Platform: beIN SPORTS Symfony Con 2015
2. Fabien Gasser twitter: @fabien_gasser Solution Architect 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.
6. The API-first strategy
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 a Is an Dbpprop:Team Third part semantic engine: • Apache Jena • Apache Marmotta • Apache Stanbol Luke, learn more about linked data !
25. API Platform powered
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: AppBundle\Entity types: Person: parent: false properties: name: ~ birthDate: ~ gender: ~ # other Schema.org types $> bin/schema generate-types \ src/app/config/schema.yml namespace AppBundle\Entity; // Use statements /** * A person (alive, dead, undead, or fictional). * * @see http://schema.org/Person Documentation on Schema.org * * @ORM\Entity * @Iri("http://schema.org/Person") */ class Person { /** * @var integer * @ORM\Column(type="integer") * @ORM\Id * @ORM\GeneratedValue(strategy="AUTO") */ private $id; /** * @var string The name of the item. * * @ORM\Column(nullable=true) * @Assert\Type(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: [ "AppBundle\Entity\Person" ] 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 Varnish Varnish EC2 -1 EC2 -n Front Autoscaling group Varnish Varnish EC2 -1 EC2 -n Amazon RDS Assets Other services: Route 53 (DNS), SES (mail), …
38. HOSTING ENVIRONMENT API Autoscaling group Varnish Varnish 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 CRM PIM OMS 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 Solution Architect 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