How can JSON-LD help you sell more? Meet JSON-LD, the format at the heart of API Platform!

API Platform: the API-first framework 02 03 OUTLINE 04 01 At the heart of API Platform: JSON-LD JSON-LD: use cases Using JSON-LD with Sylius

Kévin Dunglas ➔ Creator of API Platform ➔ Symfony Core Team ➔ Sylius user and occasional contributor @dunglas

➔ eCommerce, API, Web and Cloud experts ➔ 100% employee-owned co-op ✊ ➔ Democratically managed 💬 ➔ Europe and remote 🌎 ➔ [email protected] 💌 11 YEARS OF ECOMMERCE 70 COOPERATORS 300+ HAPPY CUSTOMERS 50+ PROJECTS/YEAR

02 03 04 01 API Platform: the API-first framework Using JSON-LD with Sylius JSON-LD: use cases At the heart of API Platform: JSON-LD

API Platform ➔ API-first framework (servers and clients) ➔ Native REST and GraphQL support ➔ Officially recommended by Symfony for APIs ➔ Powers the Sylius unified API ➔ Designed for headless apps ➔ Very active and diverse community ➔ Used by hundreds of companies ➔ Sponsored by Les-Tilleuls.coop, Arte, Orange and by your company soon? 7.6k STARS ON GITHUB MIT LICENSED 777 CONTRIBUTORS

API Platform Design API Platform core values EASY TO USE ➔ Your API in minutes ➔ Batteries-included: API docs, persistence, filters, pagination, access control, admin interface, JS client generators… ➔ No-code tools (MakerBundle) STANDARDS-COMPLIANT ➔ True REST API: hypermedia ➔ Implements API-related standards from the W3C and the IETF CUSTOMIZABLE ➔ Everything can be replaced: strong and modern OOP approach ➔ Designed for DDD, Clean/Hexagonal Architecture…

The Engine of Sylius eCommerce

No content

API Platform Embraces the Web Platform REST HTTP RDF JSON-LD Hydra, Schema.org

02 03 04 01 API Platform: the API-first framework At the heart of API Platform: JSON-LD Build your Solid application JSON-LD: use cases

REST: The Architecture of the Web ➔ Webapps expose a network of resources ➔ Resources: ◆ Any information that can be named ◆ Valid resources: a thing, a temporary service, a collection of resources ➔ Resources have representations: ◆ Ex: HTML, JSON-LD, JPEG, CSV,… ◆ The same resource can have multiple representations ➔ Clients progress through the resource graph using links embedded in representations (or in related metadata) ➔ REST: REpresentational State Transfer REST

« The Web is intended to be an Internet-scale distributed hypermedia system. » Roy Fielding, author of HTTP, REST, and of the Apache web server. HTTP: The Main Implementation of REST

➔ Resources: ◆ published on servers ◆ requested by clients ◆ identified by URIs (aka URLs) ◆ linked together ➔ The Web is a graph of resources: ◆ Node: web resource ◆ Edge: link ➔ Open standards (W3C, IETF): ◆ URI, HTTP, HTML, RDF, JSON-LD… HTTP: The Core Protocol of the Web

➔ The web as a big database ➔ Focus on interoperability and decentralization ➔ Open standards (W3C and IETF): ◆ core web standards: URI, HTTP ◆ abstract data model: RDF ◆ serialization formats: JSON-LD, N-Triples, Turtle, XML-RDF… ◆ vocabulary definitions: RDFS, OWL ◆ vocabularies and ontologies: Schema.org, GoodRelations… Linked Data: The Machine-Readable Web Alice Person 14 July 1990 The Mona Lisa Leonardo Da Vinci La Joconde à Washington is about was created by is friend with is interested in is a is born on Bob

➔ Abstract model to represent any set of data ➔ Directed graph ➔ Basic unit: semantic triple ◆ subject ◆ predicate ◆ object Resource Description Format (RDF) SUBJECT OBJECT predicate

RDF: N-Triples "55.00" . "EUR" . . "Everyday white basic T-Shirt" . . .

RDF: Tabular Representation

RDF: Visual Representation

RDF: JSON-LD { "@context": "https://schema.org", "@type": "Product", "@id": "https://my-sylius.com/products/basic-t-shirt", "name": "Everyday white basic T-Shirt", "image": "basic-t-shirt.jpg", "offers": { "@type": "Offer", "@id": "https://my-sylius.com/products/basic-t-shirt/offer", "price": "55.00", "priceCurrency": "EUR" } }

JSON-LD ➔ JSON for Linked Data ➔ Valid JSON: all you need is json_decode() or JSON.parse() ➔ RDF serialization format ➔ Transform existing JSON documents in RDF resources with as little effort as possible ➔ Transform JSON-LD in other RDF serialization formats, and vice versa ➔ Properties starting with a @ are reserved ➔ W3C standard backed by Google, Microsoft, universities and many government agencies

JSON-LD: @id ➔ Identifies the node ➔ The ID is an IRI (URIs and URLs are IRIs) ➔ A single JSON-LD document can contain many nodes: collections, embedded relations… ➔ Allows referencing a specific resource (even inside a document): Linked Data ➔ Prevents data duplication (use a reference instead of copying), even in the same document ➔ Good internet-wide identifier: same references across different webapps/APIs ➔ Makes it easy to create smart client-side caches { "@id": "https://my-sylius.com/products/basic-t-shirt", //... "offers": { "@id": "https://my-sylius.com/products/basic-t-shirt/offer", //... } }

JSON-LD: @type ➔ Specifies the type of the Node ➔ Types are IRIs (URIs and URLs are IRIs) ➔ Allows to uniquely identify the type, and to reuse it across webapps and APIs ➔ Perfect for internet-scale interoperability ➔ Somewhat similar to PHP’s Fully Qualified Class Names ➔ A single Node can have multiple types { "@type": "https://schema.org/Product", //... "offers": { "@type": "https://schema.org/Offer", //... } }

JSON-LD: @context ➔ Maps plain old JSON properties with RDF types (IRIs) ◆ name => https://schema.org/name ◆ price => https://schema.org/price ➔ Allows mapping existing documents ➔ Allows keeping the JSON document readable and easy to use ➔ Creates “shortcuts”: ◆ Default vocabulary: @vocab => https://schema.org/ ◆ IRI prefixes: hydra => http://www.w3.org/ns/hydra/core# ➔ Entirely optional, but practical { "@context": "https://schema.org", "@type": "Product", "name": "Everyday white basic T-Shirt", //... "offers": { "@type": "Offer", //… "price": "55.00", "priceCurrency": "EUR" } }

JSON-LD in API Platform: Natively Supported

03 01 At the heart of API Platform: JSON-LD JSON-LD: use cases 02 04 API Platform: the API-first framework Using JSON-LD with Sylius

Solid PHP

SEO: Rich Snippets

Google: Rich Snippets

SEO: Rich Snippets

No content

Rich Snippets ➔ Dozens of types ➔ Supported by ◆ Google ◆ Bing ◆ Yandex ◆ many others! ➔ RDF ➔ JSON-LD ➔ Schema.org

Other Usage: Email Markup

03 01 Using JSON-LD with Sylius 02 04 At the heart of API Platform: JSON-LD API Platform: the API-first framework JSON-LD: use cases

Schema.org and API Platorm ➔ Add the mapping with #[ApiProperty(types: ["..."])] ➔ Customize the JSON-LD context using ContextBuilderInterface ➔ Copy the API response in your HTML: ➔ Headless mode: it’s done by default by clients generated by API Platform Create Client (Next, Nuxt) #[ApiResource( types: "https://schema.org/Product" )] class Product { #[ApiProperty(types: "https://schema.org/name")] public string $name; #[ApiProperty(types: "https://schema.org/image")] public string $image; #[ApiProperty(types: "https://schema.org/offers")] public Offer $offer; }

Schema.org and Sylius ➔ Core Sylius classes ◆ Schema.org mapping not done yet ◆ But 1 property is already mapped! ◆ Should be quite easy to do ◆ Good news: it’s an easy pick ➔ Sylius theme: ◆ Embed the JSON-LD response ◆ Also an easy pick ➔ Contribute to add native support! ➔ In the meantime, use: ◆ custom resources ◆ custom JSON-LD context builders

Thanks for your attention! ➔ Any questions ? dunglas.dev @dunglas