Creating a modern web application using Symfony API Platform Atlanta

Creating a modern web
application using
Symfony API Platform
by Jesus Manuel Olivas / weKnow
@jmolivas

● $ whoami
Jesus Manuel Olivas
jmolivas@weknowinc.com
jmolivas
jmolivas
drupal.org/u/jmolivas
jmolivas.weknowinc.com

Mexicali 
Mexico + California
Calexico 
California + Mexico
$ ifconfig

When all you have is a
hammer, everything looks
like a nail.

Drupal Headless API + Front-end library
● Fetch

What if … you do not need
> Complex content model (paragraphs)
> Editorial workflow
> Revisions
> GUI to manage Queries (views)
> GUI to manage content model
> Widgets and formatters

Symfony API + Front-end library/framework
● API / GraphQL

Symfony
API Platform
GraphQL
ReactJS

Symfony Flex … a Composer plugin for Symfony
> Symfony Flex is a Composer plugin that modifies the behavior of
the require, update, and remove composer commands.
> Symfony Flex automates the most common tasks of Symfony
applications, like installing and removing bundles and other
dependencies using recipes defined in a manifest.json file.

The API Platform Framework
REST and GraphQL
framework to build
modern API-driven
projects
https://api-platform.com/

Built on the Shoulders of Giants
> Extend the framework with thousands of existing Symfony
bundles and React components.
> The API component includes the Symfony 4 flex, the Doctrine ORM.
Client-side components and Admin based on React and a Docker
configuration ready to startup your project using one single command.
> Reuse all your Symfony, React and Docker skills and benefit of their high
quality docs; you are in known territory.

The API Platform Components
API Schema Admin CRUD

Try API-Platform
# Clone code repository 
git clone https://github.com/api-platform/api-platform.git

Recommendations and adjustments
> Update route prefix at api/config/routes/api_platform.yaml
file.
api_platform: 
… 
prefix: /api
> Update admin/.env and client/.env files (change protocol and port).
REACT_APP_API_ENTRYPOINT=http://localhost:8080/api

Start containers … and grab water, coffee, or a beer.
# Start containers
docker-compose up
# Open browser
open http://localhost/

Add more formats
Update api/config/packages/api_platform.yaml adding:
formats:
jsonld: [‘application/ld+json'] # first one is the default format
json: ['application/json']
jsonhal: ['application/hal+json']
xml: ['application/xml', 'text/xml']
yaml: ['application/x-yaml']
csv: ['text/csv']
html: ['text/html']

Remove default & add new entities
> Remove default entity 
api/src/Entity/Greeting.php
> Add new entities to api/src/Entity/ directory: 
console make:entity

api/src/Entity/Post.php 1/3
<?php 
namespace AppEntity; 
 
use ApiPlatformCoreAnnotationApiResource; 
use DoctrineORMMapping as ORM; 
use SymfonyComponentValidatorConstraints as Assert;
/** 
* @ApiResource 
* @ORMTable(name="post") 
* @ORMEntity 
*/
class Post
{
…
}

/** 
* @ORMId 
* @ORMGeneratedValue(strategy="AUTO") 
* @ORMColumn(type="integer") 
*/ 
private $id;
/** 
* @ORMColumn 
* @AssertNotBlank 
*/ 
public $title = ''; 
/** 
* @ORMColumn
* @AssertNotBlank
*/
public $body = '';

/**
* @ORMManyToOne(targetEntity="PostType")
* @ORMJoinColumn(name="post_type_id", referencedColumnName="id", nullable=false)
*/
public $type;
public function getId(): int
{
return $this->id;
}

Tracking Database changes
# Add dependency
composer require migrations
# Execute command(s)
console make:migration
console doctrine:migrations:migrate

Add FOSUserBundle
# Add dependency
composer require friendsofsymfony/user-bundle
composer require symfony/swiftmailer-bundle
https://symfony.com/doc/current/bundles/FOSUserBundle/index.html
https://jolicode.com/blog/do-not-use-fosuserbundle

Loading Posts using the Browser
http://localhost:8080/api/posts
http://localhost:8080/api/posts.json
http://localhost:8080/api/posts.jsonld
http://localhost:8080/api/posts/1
http://localhost:8080/api/posts/1.json

Loading Posts using the CLI
curl -X GET "http://localhost:8080/api/posts"
-H "accept: application/json"
curl -X GET "http://localhost:8080/api/posts/1"
-H "accept: application/ld+json"

ADD Posts from CLI
curl -X POST "http://localhost:8080/api/posts"
-H "Content-Type: application/ld+json"
-d '{ "title": "Post create from CLI", "body": "body-
less", "type": "/api/post_types/1"}'

UPDATE and REMOVE Posts from CLI
curl -X PUT "http://localhost:8080/api/posts/9"
-H "Content-Type: application/ld+json"
-d '{ "title": "Updated from CLI"}'
curl -X DELETE "http://localhost:8080/api/posts/10"
-H "accept: application/json"

Serialization
> API Platform allows to specify the which attributes of the resource are
exposed during the normalization (read) and denormalization (write)
process. It relies on the serialization (and deserialization) groups feature of
the Symfony Serializer component.
> In addition to groups, you can use any option supported by the Symfony
Serializer such as enable_max_depth to limit the serialization depth.

Serialization Relations (Post => PostType) 1/2
# api/src/Entity/Post.php & PostType.php
* @ApiResource(attributes={
* "normalization_context"={"groups"={"read"}},
* "denormalization_context"={"groups"={"write"}}
* })

Serialization Relations (Post => PostType) 2/2
# Add use keyword to class
use SymfonyComponentSerializerAnnotationGroups;
# Add use keyword to properties
* @Groups({"read"})
* @Groups({"read", "write"})

GraphQL
A query language for your API

GraphQL
GraphQL offers significantly more flexibility for integrators.
Allows you to define in detail the only the data you want.
GraphQL lets you replace multiple REST requests with a single
call to fetch the data you specify.

Add GraphQL
To enable GraphQL and GraphiQL interface in your API, simply require
the graphql-php package using Composer:
composer require webonyx/graphql-php
open http://localhost:8080/api/graphql

Disable GraphiQL
Update api/config/packages/api_platform.yaml adding:
api_platform:
# ...
graphql:
graphiql:
enabled: false
# ...

Load resource using GraphQL
{
post (id:"/api/posts/1") {
id,
title,
body
}
}

Load resource using GraphQL form the CLI
curl -X POST
-H "Content-Type: application/json"
-d '{ "query": "{ post(id:"/api/posts/1") { id,
title, body }}" }'
http://localhost:8080/api/graphql

Load resource relations using GraphQL
{
post (id:"/api/posts/1") {
title,
body,
type {
id,
name
}
}
}

Load resource relations using GraphQL form the CLI
curl -X POST
-H "Content-Type: application/json"
-d '{ "query": "{ post(id:"/api/posts/1") { id, title,
body, type { id, name } }}" }'
http://localhost:8080/api/graphql

JWT Dependencies
# JWT 
composer require lexik/jwt-authentication-bundle
JWT Refresh 
gesdinet/jwt-refresh-token-bundle

JWT Events (create)
# config/services.yaml 
AppEventListenerJWTCreatedListener: 
tags: 
- { 
name: kernel.event_listener,  
event: lexik_jwt_authentication.on_jwt_created, 
method: onJWTCreated 
}
 
# src/EventListener/JWTCreatedListener.php 
public function onJWTCreated(JWTCreatedEvent $event) 
{ 
$data = $event->getData(); 
$user = $event->getUser(); 
$data['organization'] = $user->getOrganization()->getId(); 
$event->setData($data); 
}

JWT Events (success)
# config/services.yaml 
AppEventListenerAuthenticationSuccessListener: 
tags: 
- { 
name: kernel.event_listener,  
event: lexik_jwt_authentication.on_authentication_success, 
method: onAuthenticationSuccessResponse 
} 
# src/EventListener/AuthenticationSuccessListener.php 
public function onAuthenticationSuccessResponse(AuthenticationSuccessEvent $event)  
{ 
$data = $event->getData(); 
$user = $event->getUser(); 
$data[‘roles'] = $user->getOrganization()->getRoles(); 
$event->setData($data); 
}

dvajs/dva - React and redux based framework.
https://github.com/dvajs/dva

React / Redux / Saga / AntDesign

> Use webpack instead of roadhog.
> Use apollo-fetch for GraphQL calls.
> Use jwt-decode to interact with JWT.
> Use LocalStorage for simple key/values storage.
> Use IndexedDB for encrypted and/or more complex data structures.
> Use Socket-IO + Redis to sync & communicate between API & ReactJS.
Tips

Symfony API + Gatsby
● API / GraphQL

Blazing fast site generator for React

Must have plugins
• gatsby-source-graphql
• gatsby-transformer-remark
• gatsby-remark-images
• gatsby-remark-external-links
• gatsby-plugin-sharp
• gatsby-transformer-sharp
• gatsby-plugin-react-helmet

Choose the right tool for
the job

Thank you … Questions?
Feel free to ping me during the event,
at the parties, after-parties, and twitter @jmolivas

Creating a modern web application using Symfony API Platform Atlanta

More Related Content

What's hot (20)

Similar to Creating a modern web application using Symfony API Platform Atlanta (20)

More from Jesus Manuel Olivas (20)

Recently uploaded (20)

Creating a modern web application using Symfony API Platform Atlanta