Slide 1

Slide 1 text

Denis Brumann // [email protected] // @dbrumann + React = ? 1

Slide 2

Slide 2 text

Denis Brumann // [email protected] // @dbrumann React Basics 2

Slide 3

Slide 3 text

Denis Brumann // [email protected] // @dbrumann import React, { Component } from 'react'; class Checkout extends Component { constructor(props) { super(props); } } export default Checkout; 3

Slide 4

Slide 4 text

Denis Brumann // [email protected] // @dbrumann import React, { Component } from 'react'; class Checkout extends Component { constructor(props) { super(props); this.state = { basket: {}, shippingInfo: {}, paymentInfo: {}, } this.onCheckoutConfirm = this.onCheckoutConfirm.bind(this); } onCheckoutConfirm() { const {basket, shippingInfo, paymentInfo} = this.state; // ... } } export default Checkout; 4

Slide 5

Slide 5 text

Denis Brumann // [email protected] // @dbrumann import React, { Component } from 'react'; class Checkout extends Component { constructor(props) {...} onCheckoutConfirm() {...} render() { const {basket, shippingInfo, paymentInfo} = this.state; return (
...
); } } export default Checkout; 5

Slide 6

Slide 6 text

Denis Brumann // [email protected] // @dbrumann Lifecycle Methods constructor(props) Initialer state der Komponente wird gesetzt. render() Erzeugt den Output der Komponente. componentDidMount() Komponente wird in den DOM eingefügt. "If you need to load data from a remote endpoint, this 
 is a good place to instantiate the network request." https://reactcheatsheet.com/ 6

Slide 7

Slide 7 text

Denis Brumann // [email protected] // @dbrumann componentDidMount() { const { product } = this.state; this.updateProduct(product); } updateProduct(product) { fetch('http://api.example.com/products/' + product.id) .then(resp => resp.json()) .then(result => this.setProductDetails(result)) .catch(error => error); } setProductDetails(result) { this.setState({ product: { ...this.state.product, ...result } }); } 7

Slide 8

Slide 8 text

Denis Brumann // [email protected] // @dbrumann Symfony? 8

Slide 9

Slide 9 text

Denis Brumann // [email protected] // @dbrumann 9

Slide 10

Slide 10 text

Denis Brumann // [email protected] // @dbrumann 10

Slide 11

Slide 11 text

Denis Brumann // [email protected] // @dbrumann 11

Slide 12

Slide 12 text

Denis Brumann // [email protected] // @dbrumann class ProductController { /** * @Route("/api/products") */ public function listProducts() { return [ 1 => [ 'id' => 1, 'name' => 'Awesome Product', 'description' => 'Lorem ipsum dolor sit amet...', 'price' => 350, ], 3 => [ 'id' => 3, 'name' => 'Cool Product', 'description' => 'One morning, when Gregor Samsa...', 'price' => 999, ], ]; } } 12 !❗

Slide 13

Slide 13 text

Denis Brumann // [email protected] // @dbrumann Request Response kernel.
 request kernel.
 response kernel.
 controller kernel.
 exception resolve controller call controller kernel.
 terminate Exception response? resolve arguments Symfony Event Cycle kernel.
 view 13 Rückgabewert wird als ControllerResult ins Event gegeben erzeugte Response wird weitergegeben

Slide 14

Slide 14 text

Denis Brumann // [email protected] // @dbrumann class JsonViewListener implements EventSubscriberInterface { public static function getSubscribedEvents() { return [KernelEvents::VIEW => 'transformViewData']; } public function transformViewData(GetResponseForControllerResultEvent $event) { $arrayData = $event->getControllerResult(); $event->setResponse(new JsonResponse($arrayData)); } } 14

Slide 15

Slide 15 text

Denis Brumann // [email protected] // @dbrumann Request Response kernel.
 request kernel.
 response kernel.
 controller kernel.
 exception resolve controller call controller kernel.
 terminate Exception response? resolve arguments Symfony Event Cycle kernel.
 view 15

Slide 16

Slide 16 text

Denis Brumann // [email protected] // @dbrumann class JsonExceptionListener implements EventSubscriberInterface { public static function getSubscribedEvents(): array { return [ KernelEvents::EXCEPTION => 'handleExceptionAsJson', ]; } public function handleExceptionAsJson(GetResponseForExceptionEvent $event): void { ... } } 16

Slide 17

Slide 17 text

Denis Brumann // [email protected] // @dbrumann public function handleExceptionAsJson(GetResponseForExceptionEvent $event): void { $exception = $event->getException(); $data = [ 'type' => get_class($exception), 'description' => $exception->getMessage(), ]; $event->setResponse(
 new JsonResponse($data, $exception->getCode())
 ); } 17

Slide 18

Slide 18 text

Denis Brumann // [email protected] // @dbrumann 18

Slide 19

Slide 19 text

Denis Brumann // [email protected] // @dbrumann Request Response kernel.
 request kernel.
 response kernel.
 controller kernel.
 exception resolve controller call controller kernel.
 terminate Exception response? resolve arguments Symfony Event Cycle kernel.
 view 19

Slide 20

Slide 20 text

Denis Brumann // [email protected] // @dbrumann

Slide 21

Slide 21 text

Denis Brumann // [email protected] // @dbrumann interface ArgumentValueResolverInterface { public function supports(Request $request, ArgumentMetadata $argument) : bool; public function resolve(Request $request, ArgumentMetadata $argument) : Generator; } 21

Slide 22

Slide 22 text

Denis Brumann // [email protected] // @dbrumann class JsonPayloadResolver implements ArgumentValueResolverInterface { private $serializer; private $validator; public function __construct(
 SerializerInterface $serializer, ValidatorInterface $validator
 ) { ... } public function supports(Request $request, ArgumentMetadata $argument) { return $request->getMethod() !== 'GET'; } public function resolve(Request $request, ArgumentMetadata $argument) { ... } } 22

Slide 23

Slide 23 text

Denis Brumann // [email protected] // @dbrumann public function resolve(Request $request, ArgumentMetadata $argument) { $data = $this->serializer->deserialize( $request->getContent(), $argument->getType(), 'json' ); $errors = $this->validator->validate($data); if (count($errors)) { throw new BadRequestHttpException((string) $errors); } yield $data; } 23 getType(): Product::class getName(): "product"

Slide 24

Slide 24 text

Denis Brumann // [email protected] // @dbrumann 24

Slide 25

Slide 25 text

Denis Brumann // [email protected] // @dbrumann Request Response kernel.
 request kernel.
 response kernel.
 controller kernel.
 exception resolve controller call controller kernel.
 terminate Exception response? resolve arguments Symfony Event Cycle kernel.
 view 25 Beispiel:
 HATEOAS
 Links hinzufügen

Slide 26

Slide 26 text

Denis Brumann // [email protected] // @dbrumann class HypermediaResponseListener implements EventSubscriberInterface { public static function getSubscribedEvents() { return [KernelEvents::RESPONSE => 'addLinksToResponse']; } public function addLinksToResponse(FilterResponseEvent $event) { $request = $event->getRequest(); $response = $event->getResponse(); $content = json_decode($response->getContent(), true); $updated = [ 'content' => $content, '_links' => $this->getLinksForRequest($request, $response, $content), ]; $response->setContent(json_encode($updated)); } private function getLinksForRequest($request, $response, $content): array { // ... } } 26

Slide 27

Slide 27 text

Denis Brumann // [email protected] // @dbrumann Unsere Mini-API für Prototyping Eingehende Daten JSON-Input wird automatisch umgewandelt Ausgehende Daten Sämtlicher Output wird automatisch als JSON kodiert HATEOAS / HAL Response-Listener fügt automatisch Links hinzu 27

Slide 28

Slide 28 text

Denis Brumann // [email protected] // @dbrumann Fragen? 28