SlideShare a Scribd company logo
1 of 62
Download to read offline
Creating a modern web
application using Symfony API
Platform, ReactJS and Redux
by Jesus Manuel Olivas / weKnow
@jmolivas
● WHO AM I?
Jesus Manuel Olivas
jmolivas@weknowinc.com
jmolivas
jmolivas
drupal.org/u/jmolivas
jmolivas.weknowinc.com
WeGive
2,572,697
WeAre
WeKnow
Symfony
API Platform / GraphQL
 ReactJS / Redux / Saga
Ant Design
Symfony Flex
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.
Directory structure
API Platform 
Framework
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
ahoy 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']
Add Dependencies
> Add new entities to api/src/Entity/ directory:

ahoy console make:entity



> Remove default entity

api/src/Entity/Greeting.php
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
{
…
}
api/src/Entity/Post.php 2/3
/**

* @ORMId

* @ORMGeneratedValue(strategy="AUTO")

* @ORMColumn(type="integer")

*/

private $id;
/**

* @ORMColumn

* @AssertNotBlank

*/

public $title = '';

/**

* @ORMColumn
* @AssertNotBlank
*/
public $body = '';
api/src/Entity/Post.php 3/3
/**
* @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
ahoy composer require migrations
# Execute command(s)
ahoy console make:migration
ahoy 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
Initialize the project
> Drop and Create Database
> Execute Migrations
> Populate Entities with Data
bin/console init
Use:

hautelook/alice-bundle 

doctrine/data-fixtures
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 "accept: application/ld+json" 
-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 "accept: application/ld+json" 
-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
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
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);

}
React+Redux+Saga+
AntDesign
dvajs/dva - React and redux based framework. 
https://github.com/dvajs/dva
React / Redux / Saga / AntDesig
> 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 API with ReactJS client.
Tips
Directory Structure
├── package.json
├── src
│   ├── components
│   ├── constants.js
│   ├── index.js
│   ├── models
│   ├── router.js
│   ├── routes
│   └── services
└── webpack.config.js
constants.js
export const API_URL = process.env.API_ENTRY_POINT;
export const GRAPHQL_URL = `${API_URL}/api/graphql`;
export const NOTIFICATION_URL = process.env.NOTIFICATION_URL;
export const NOTIFICATION_ICON = {
info: 'info',
warning: 'exclamation',
error: 'close',
success: 'check'
};
index.js
import dva from 'dva';

import auth from './models/auth';

import local from './models/local';

import ui from './models/ui';
const app = dva({

…

});



# Register global models

app.model(auth);

app.model(local);

app.model(ui);

app.router(require('./router'));

app.start(‘#root');
router.js 1/2
import …

import AuthRoute from './components/Auth/AuthRoute';
export default function RouterConfig({ history, app }) {

const Login = dynamic({

app,

component: () => import('./routes/Login'),

});
const routes = [{

path: '/posts',

models: () => [

import('./models/posts')

],

component: () => import('./routes/Posts'),

}, {
path: '/posts/:id',

models: () => [

import('./models/projects'),

],

component: () => import('./routes/Posts'),

}];
router.js 2/2
return (
<Router history={history}>

<Switch>

<Route exact path="/" render={() => (<Redirect to="/login" />)} />

<Route exact path="/login" component={Login} />

{

routes.map(({ path, onEnter, ...dynamics }, key) => (
<AuthRoute

key={key} exact path={path}

component={dynamic({

app,

...dynamics,

})}

/>

))
}

</Switch>

</Router>

);

}
src/components/Auth/AuthRoute.js
import {Route, Redirect} from "dva/router";

…
class AuthRoute extends Route {
async isTokenValid() {

# Check for token and refresh if not valid 

}
render() {
return (
<Async
promise={this.isTokenValid()}
then={(isValid) => isValid ?
<Route path={this.props.path} component={this.props.component} />
:
<Redirect to={{ pathname: '/login' }}/>
}
/>
);
};
src/models/posts.js 1/3
import {Route, Redirect} from "dva/router";

import * as postService from '../services/base';

import _map from 'lodash/map';

…
export default {

namespace: ‘posts',

state: {

list: [],

total: 0

},

reducers: {

save(state, { payload: { list, total } }) {

return { ...state, list, total};

},
},
src/models/posts.js 2/3
effects: {

*fetch({ payload: { … }, { call, put }) {

let { list, total } = yield select(state => state.posts);

const graphQuery = `{

posts(first: 10) {

edges {

node {

id, _id, title, body,

type {

id, name, machineName

}

}

}

}

}`;
src/models/posts.js 2/3
#  Async call with Promise support.
const posts = yield call(postService.fetch, 'posts', { … });
const list = _map(posts.data.posts.edges, posts => posts.node)
# Action triggering.
yield put({
type: 'save',
payload: {
list,
total,
},
});
Directory Structure
src/
├── components
   ├── Auth
   ├── Generic
   ├── Layout
   └── Posts
      ├── ProjectBase.js
      ├── ProjectEdit.js
      ├── ProjectList.js
      └── ProjectNew.js
Thank you … Questions?

More Related Content

What's hot

RESTful API Design & Implementation with CodeIgniter PHP Framework
RESTful API Design & Implementation with CodeIgniter PHP FrameworkRESTful API Design & Implementation with CodeIgniter PHP Framework
RESTful API Design & Implementation with CodeIgniter PHP Framework
Bo-Yi Wu
 
Fast Web Applications Development with Ruby on Rails on Oracle
Fast Web Applications Development with Ruby on Rails on OracleFast Web Applications Development with Ruby on Rails on Oracle
Fast Web Applications Development with Ruby on Rails on Oracle
Raimonds Simanovskis
 
Flask patterns
Flask patternsFlask patterns
Flask patterns
it-people
 
Aura Project for PHP
Aura Project for PHPAura Project for PHP
Aura Project for PHP
Hari K T
 

What's hot (20)

API Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework ResurrectionAPI Platform: Full Stack Framework Resurrection
API Platform: Full Stack Framework Resurrection
 
Red5 - PHUG Workshops
Red5 - PHUG WorkshopsRed5 - PHUG Workshops
Red5 - PHUG Workshops
 
170517 damien gérard framework facebook
170517 damien gérard   framework facebook170517 damien gérard   framework facebook
170517 damien gérard framework facebook
 
Extending Oracle E-Business Suite with Ruby on Rails
Extending Oracle E-Business Suite with Ruby on RailsExtending Oracle E-Business Suite with Ruby on Rails
Extending Oracle E-Business Suite with Ruby on Rails
 
ACL in CodeIgniter
ACL in CodeIgniterACL in CodeIgniter
ACL in CodeIgniter
 
Warsaw Frontend Meetup #1 - Webpack
Warsaw Frontend Meetup #1 - WebpackWarsaw Frontend Meetup #1 - Webpack
Warsaw Frontend Meetup #1 - Webpack
 
RESTful API Design & Implementation with CodeIgniter PHP Framework
RESTful API Design & Implementation with CodeIgniter PHP FrameworkRESTful API Design & Implementation with CodeIgniter PHP Framework
RESTful API Design & Implementation with CodeIgniter PHP Framework
 
Power Shell and Sharepoint 2013
Power Shell and Sharepoint 2013Power Shell and Sharepoint 2013
Power Shell and Sharepoint 2013
 
RESTful API development in Laravel 4 - Christopher Pecoraro
RESTful API development in Laravel 4 - Christopher PecoraroRESTful API development in Laravel 4 - Christopher Pecoraro
RESTful API development in Laravel 4 - Christopher Pecoraro
 
Python Flask Tutorial For Beginners | Flask Web Development Tutorial | Python...
Python Flask Tutorial For Beginners | Flask Web Development Tutorial | Python...Python Flask Tutorial For Beginners | Flask Web Development Tutorial | Python...
Python Flask Tutorial For Beginners | Flask Web Development Tutorial | Python...
 
Javascript laravel's friend
Javascript laravel's friendJavascript laravel's friend
Javascript laravel's friend
 
Introduction to windows power shell in sharepoint 2010
Introduction to windows power shell in sharepoint 2010Introduction to windows power shell in sharepoint 2010
Introduction to windows power shell in sharepoint 2010
 
Fast Web Applications Development with Ruby on Rails on Oracle
Fast Web Applications Development with Ruby on Rails on OracleFast Web Applications Development with Ruby on Rails on Oracle
Fast Web Applications Development with Ruby on Rails on Oracle
 
Always up to date, testable and maintainable documentation with OpenAPI
Always up to date, testable and maintainable documentation with OpenAPIAlways up to date, testable and maintainable documentation with OpenAPI
Always up to date, testable and maintainable documentation with OpenAPI
 
Flask patterns
Flask patternsFlask patterns
Flask patterns
 
WebGUI Developers Workshop
WebGUI Developers WorkshopWebGUI Developers Workshop
WebGUI Developers Workshop
 
LvivPy - Flask in details
LvivPy - Flask in detailsLvivPy - Flask in details
LvivPy - Flask in details
 
Laravel 5 In Depth
Laravel 5 In DepthLaravel 5 In Depth
Laravel 5 In Depth
 
Aura Project for PHP
Aura Project for PHPAura Project for PHP
Aura Project for PHP
 
Rails 4.0
Rails 4.0Rails 4.0
Rails 4.0
 

Similar to Creating a modern web application using Symfony API Platform, ReactJS and Redux DrupalCampLA

Red5workshop 090619073420-phpapp02
Red5workshop 090619073420-phpapp02Red5workshop 090619073420-phpapp02
Red5workshop 090619073420-phpapp02
arghya007
 
Building Web Services with Zend Framework (PHP Benelux meeting 20100713 Vliss...
Building Web Services with Zend Framework (PHP Benelux meeting 20100713 Vliss...Building Web Services with Zend Framework (PHP Benelux meeting 20100713 Vliss...
Building Web Services with Zend Framework (PHP Benelux meeting 20100713 Vliss...
King Foo
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
Fabio Franzini
 

Similar to Creating a modern web application using Symfony API Platform, ReactJS and Redux DrupalCampLA (20)

High quality ap is with api platform
High quality ap is with api platformHigh quality ap is with api platform
High quality ap is with api platform
 
Let's play with adf 3.0
Let's play with adf 3.0Let's play with adf 3.0
Let's play with adf 3.0
 
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)
Kicking off with Zend Expressive and Doctrine ORM (PHP Srbija 2017)
 
SymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years later
SymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years laterSymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years later
SymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years later
 
Red5workshop 090619073420-phpapp02
Red5workshop 090619073420-phpapp02Red5workshop 090619073420-phpapp02
Red5workshop 090619073420-phpapp02
 
Simplify your professional web development with symfony
Simplify your professional web development with symfonySimplify your professional web development with symfony
Simplify your professional web development with symfony
 
Intro to Rack
Intro to RackIntro to Rack
Intro to Rack
 
Phoenix for Rails Devs
Phoenix for Rails DevsPhoenix for Rails Devs
Phoenix for Rails Devs
 
Exploring Symfony's Code
Exploring Symfony's CodeExploring Symfony's Code
Exploring Symfony's Code
 
Building Web Services with Zend Framework (PHP Benelux meeting 20100713 Vliss...
Building Web Services with Zend Framework (PHP Benelux meeting 20100713 Vliss...Building Web Services with Zend Framework (PHP Benelux meeting 20100713 Vliss...
Building Web Services with Zend Framework (PHP Benelux meeting 20100713 Vliss...
 
Symfony2 for Midgard Developers
Symfony2 for Midgard DevelopersSymfony2 for Midgard Developers
Symfony2 for Midgard Developers
 
Plack - LPW 2009
Plack - LPW 2009Plack - LPW 2009
Plack - LPW 2009
 
Creating your own framework on top of Symfony2 Components
Creating your own framework on top of Symfony2 ComponentsCreating your own framework on top of Symfony2 Components
Creating your own framework on top of Symfony2 Components
 
Rails Engine | Modular application
Rails Engine | Modular applicationRails Engine | Modular application
Rails Engine | Modular application
 
Dependency Injection, Zend Framework and Symfony Container
Dependency Injection, Zend Framework and Symfony ContainerDependency Injection, Zend Framework and Symfony Container
Dependency Injection, Zend Framework and Symfony Container
 
Building web framework with Rack
Building web framework with RackBuilding web framework with Rack
Building web framework with Rack
 
Divide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.jsDivide and Conquer – Microservices with Node.js
Divide and Conquer – Microservices with Node.js
 
using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'susing Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API's
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
 
Try using Aeromock by Marverick, Inc.
Try using Aeromock by Marverick, Inc.Try using Aeromock by Marverick, Inc.
Try using Aeromock by Marverick, Inc.
 

More from Jesus Manuel Olivas

More from Jesus Manuel Olivas (20)

Remix & GraphQL: A match made in heaven with type-safety DX
Remix & GraphQL:  A match made in heaven with type-safety DXRemix & GraphQL:  A match made in heaven with type-safety DX
Remix & GraphQL: A match made in heaven with type-safety DX
 
Drupal 10 Party GraphQL
Drupal 10 Party GraphQLDrupal 10 Party GraphQL
Drupal 10 Party GraphQL
 
How to use Drupal to create editorial experiences your content creators will...
How to use Drupal  to create editorial experiences your content creators will...How to use Drupal  to create editorial experiences your content creators will...
How to use Drupal to create editorial experiences your content creators will...
 
Beyond Static: Building a Dynamic Application with Gatsby
Beyond Static: Building a Dynamic Application with GatsbyBeyond Static: Building a Dynamic Application with Gatsby
Beyond Static: Building a Dynamic Application with Gatsby
 
Drupal, GraphQL, Views, View Modes and Gatsby for a US Gov site CMS Philly
Drupal, GraphQL, Views, View Modes  and Gatsby for a US Gov site CMS PhillyDrupal, GraphQL, Views, View Modes  and Gatsby for a US Gov site CMS Philly
Drupal, GraphQL, Views, View Modes and Gatsby for a US Gov site CMS Philly
 
Embracing the modern web using a Headless CMS with GatsbyJS CMS Philly
Embracing the modern web  using a Headless CMS with GatsbyJS CMS PhillyEmbracing the modern web  using a Headless CMS with GatsbyJS CMS Philly
Embracing the modern web using a Headless CMS with GatsbyJS CMS Philly
 
Embracing the modern web using a Headless CMS with GatsbyJS Stanford
Embracing the modern web using a Headless CMS with GatsbyJS StanfordEmbracing the modern web using a Headless CMS with GatsbyJS Stanford
Embracing the modern web using a Headless CMS with GatsbyJS Stanford
 
Building a modern application using Symfony API Platform and GatsbyJS PHP QRO
Building a modern application using  Symfony API Platform and GatsbyJS PHP QROBuilding a modern application using  Symfony API Platform and GatsbyJS PHP QRO
Building a modern application using Symfony API Platform and GatsbyJS PHP QRO
 
Building a dynamic application with GatsbyJS-Tec-Mexicali
Building a dynamic application  with GatsbyJS-Tec-MexicaliBuilding a dynamic application  with GatsbyJS-Tec-Mexicali
Building a dynamic application with GatsbyJS-Tec-Mexicali
 
Building a modern web application in the cloud partnercon
Building a modern web application in the cloud partnerconBuilding a modern web application in the cloud partnercon
Building a modern web application in the cloud partnercon
 
Embracing the modern web using Drupal as a Headless CMS with Gatsby BADCamp
Embracing the modern web using Drupal as a Headless CMS with Gatsby BADCampEmbracing the modern web using Drupal as a Headless CMS with Gatsby BADCamp
Embracing the modern web using Drupal as a Headless CMS with Gatsby BADCamp
 
Blazing fast sites using Blaze, Hybrid CMS NYC
Blazing fast sites using Blaze, Hybrid CMS NYCBlazing fast sites using Blaze, Hybrid CMS NYC
Blazing fast sites using Blaze, Hybrid CMS NYC
 
Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC
Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYCEmbracing the modern web using Drupal as Headless CMS with GatsbyJS NYC
Embracing the modern web using Drupal as Headless CMS with GatsbyJS NYC
 
Writing a slack chatbot seattle
Writing a slack chatbot seattleWriting a slack chatbot seattle
Writing a slack chatbot seattle
 
Building a Modern Web Application in the Cloud TecNerd
Building a Modern Web Application in the Cloud TecNerdBuilding a Modern Web Application in the Cloud TecNerd
Building a Modern Web Application in the Cloud TecNerd
 
How to keep Drupal relevant in the Git-based and API-driven CMS era Florida
How to keep Drupal relevant in the Git-based and API-driven CMS era FloridaHow to keep Drupal relevant in the Git-based and API-driven CMS era Florida
How to keep Drupal relevant in the Git-based and API-driven CMS era Florida
 
How to keep Drupal relevant in the Git-based and API-driven CMS era DrupalCampNJ
How to keep Drupal relevant in the Git-based and API-driven CMS era DrupalCampNJHow to keep Drupal relevant in the Git-based and API-driven CMS era DrupalCampNJ
How to keep Drupal relevant in the Git-based and API-driven CMS era DrupalCampNJ
 
Tools and Projects Dec 2018 Edition
Tools and Projects Dec 2018 EditionTools and Projects Dec 2018 Edition
Tools and Projects Dec 2018 Edition
 
How to keep Drupal relevant in the Git-based and API-driven CMS era - BADCamp
How to keep Drupal relevant in the Git-based and API-driven CMS era - BADCampHow to keep Drupal relevant in the Git-based and API-driven CMS era - BADCamp
How to keep Drupal relevant in the Git-based and API-driven CMS era - BADCamp
 
Battle of the CMS DrupalCampLA
Battle of the CMS DrupalCampLABattle of the CMS DrupalCampLA
Battle of the CMS DrupalCampLA
 

Recently uploaded

Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 

Recently uploaded (20)

AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxBT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 

Creating a modern web application using Symfony API Platform, ReactJS and Redux DrupalCampLA

  • 1. Creating a modern web application using Symfony API Platform, ReactJS and Redux by Jesus Manuel Olivas / weKnow @jmolivas
  • 2. ● WHO AM I? Jesus Manuel Olivas jmolivas@weknowinc.com jmolivas jmolivas drupal.org/u/jmolivas jmolivas.weknowinc.com
  • 6. Symfony API Platform / GraphQL  ReactJS / Redux / Saga Ant Design
  • 8. 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.
  • 11. The API Platform Framework REST and GraphQL framework to build modern API-driven projects https://api-platform.com/
  • 12. 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.
  • 13. The API Platform Components API Schema Admin CRUD
  • 14. Try API-Platform # Clone code repository
 git clone https://github.com/api-platform/api-platform.git
  • 15. 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
  • 16. Start containers … and grab water, coffee, or a beer. # Start containers ahoy up # Open browser open http://localhost/
  • 17. 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']
  • 18. Add Dependencies > Add new entities to api/src/Entity/ directory:
 ahoy console make:entity
 
 > Remove default entity
 api/src/Entity/Greeting.php
  • 19.
  • 20.
  • 21.
  • 22.
  • 23. 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 { … }
  • 24. api/src/Entity/Post.php 2/3 /**
 * @ORMId
 * @ORMGeneratedValue(strategy="AUTO")
 * @ORMColumn(type="integer")
 */
 private $id; /**
 * @ORMColumn
 * @AssertNotBlank
 */
 public $title = '';
 /**
 * @ORMColumn * @AssertNotBlank */ public $body = '';
  • 25. api/src/Entity/Post.php 3/3 /** * @ORMManyToOne(targetEntity="PostType") * @ORMJoinColumn(name="post_type_id", referencedColumnName="id", nullable=false) */ public $type; public function getId(): int { return $this->id; }
  • 26. Tracking Database changes # Add dependency ahoy composer require migrations # Execute command(s) ahoy console make:migration ahoy console doctrine:migrations:migrate
  • 27. 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
  • 28. Initialize the project > Drop and Create Database > Execute Migrations > Populate Entities with Data bin/console init Use:
 hautelook/alice-bundle 
 doctrine/data-fixtures
  • 29. 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
  • 30. 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"
  • 31. ADD Posts from CLI curl -X POST "http://localhost:8080/api/posts" -H "accept: application/ld+json" -H "Content-Type: application/ld+json" -d '{ "title": "Post create from CLI", "body": "body- less", "type": "/api/post_types/1"}'
  • 32. UPDATE and REMOVE Posts from CLI curl -X PUT "http://localhost:8080/api/posts/9" -H "accept: application/ld+json" -H "Content-Type: application/ld+json" -d '{ "title": "Updated from CLI"}' curl -X DELETE "http://localhost:8080/api/posts/10" -H "accept: application/json"
  • 33. 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.
  • 34. Serialization Relations (Post => PostType) 1/2 # api/src/Entity/Post.php & PostType.php * @ApiResource(attributes={ * "normalization_context"={"groups"={"read"}}, * "denormalization_context"={"groups"={"write"}} * })
  • 35. Serialization Relations (Post => PostType) 2/2 # Add use keyword to class use SymfonyComponentSerializerAnnotationGroups; # Add use keyword to properties * @Groups({"read"}) * @Groups({"read", "write"})
  • 37. 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.
  • 38. 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
  • 39. Disable GraphiQL Update api/config/packages/api_platform.yaml adding: api_platform: # ... graphql: graphiql: enabled: false # ...
  • 40. Load resource using GraphQL { post (id:"/api/posts/1") { id, title, body } }
  • 41. 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
  • 42. Load resource relations using GraphQL { post (id:"/api/posts/1") { title, body, type { id, name, } } }
  • 43. 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
  • 44. JWT
  • 45. JWT Dependencies # JWT composer require lexik/jwt-authentication-bundle JWT Refresh
 gesdinet/jwt-refresh-token-bundle
  • 46. 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);
 }
  • 47. 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);
 }
  • 49. dvajs/dva - React and redux based framework.  https://github.com/dvajs/dva
  • 50. React / Redux / Saga / AntDesig
  • 51. > 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 API with ReactJS client. Tips
  • 52. Directory Structure ├── package.json ├── src │   ├── components │   ├── constants.js │   ├── index.js │   ├── models │   ├── router.js │   ├── routes │   └── services └── webpack.config.js
  • 53. constants.js export const API_URL = process.env.API_ENTRY_POINT; export const GRAPHQL_URL = `${API_URL}/api/graphql`; export const NOTIFICATION_URL = process.env.NOTIFICATION_URL; export const NOTIFICATION_ICON = { info: 'info', warning: 'exclamation', error: 'close', success: 'check' };
  • 54. index.js import dva from 'dva';
 import auth from './models/auth';
 import local from './models/local';
 import ui from './models/ui'; const app = dva({
 …
 });
 
 # Register global models
 app.model(auth);
 app.model(local);
 app.model(ui);
 app.router(require('./router'));
 app.start(‘#root');
  • 55. router.js 1/2 import …
 import AuthRoute from './components/Auth/AuthRoute'; export default function RouterConfig({ history, app }) {
 const Login = dynamic({
 app,
 component: () => import('./routes/Login'),
 }); const routes = [{
 path: '/posts',
 models: () => [
 import('./models/posts')
 ],
 component: () => import('./routes/Posts'),
 }, { path: '/posts/:id',
 models: () => [
 import('./models/projects'),
 ],
 component: () => import('./routes/Posts'),
 }];
  • 56. router.js 2/2 return ( <Router history={history}>
 <Switch>
 <Route exact path="/" render={() => (<Redirect to="/login" />)} />
 <Route exact path="/login" component={Login} />
 {
 routes.map(({ path, onEnter, ...dynamics }, key) => ( <AuthRoute
 key={key} exact path={path}
 component={dynamic({
 app,
 ...dynamics,
 })}
 />
 )) }
 </Switch>
 </Router>
 );
 }
  • 57. src/components/Auth/AuthRoute.js import {Route, Redirect} from "dva/router";
 … class AuthRoute extends Route { async isTokenValid() {
 # Check for token and refresh if not valid 
 } render() { return ( <Async promise={this.isTokenValid()} then={(isValid) => isValid ? <Route path={this.props.path} component={this.props.component} /> : <Redirect to={{ pathname: '/login' }}/> } /> ); };
  • 58. src/models/posts.js 1/3 import {Route, Redirect} from "dva/router";
 import * as postService from '../services/base';
 import _map from 'lodash/map';
 … export default {
 namespace: ‘posts',
 state: {
 list: [],
 total: 0
 },
 reducers: {
 save(state, { payload: { list, total } }) {
 return { ...state, list, total};
 }, },
  • 59. src/models/posts.js 2/3 effects: {
 *fetch({ payload: { … }, { call, put }) {
 let { list, total } = yield select(state => state.posts);
 const graphQuery = `{
 posts(first: 10) {
 edges {
 node {
 id, _id, title, body,
 type {
 id, name, machineName
 }
 }
 }
 }
 }`;
  • 60. src/models/posts.js 2/3 #  Async call with Promise support. const posts = yield call(postService.fetch, 'posts', { … }); const list = _map(posts.data.posts.edges, posts => posts.node) # Action triggering. yield put({ type: 'save', payload: { list, total, }, });
  • 61. Directory Structure src/ ├── components    ├── Auth    ├── Generic    ├── Layout    └── Posts       ├── ProjectBase.js       ├── ProjectEdit.js       ├── ProjectList.js       └── ProjectNew.js
  • 62. Thank you … Questions?