Building websites with Zend Expressive 3

Zend Expressive 3 is the ideal framework for building PHP applications of all types. Its easy-to-understand architecture makes it ideal for projects of all shapes and sizes. In this talk, I'll show you how to build an Expressive application than can scale with your needs. We will look at how Expressive's middleware system leverages the upcoming PSR-15 specification to create easily understandable and flexible applications. We will cover application setup, routing and error handling before diving into some thoughts on how architect an Expressive application. By the end of the session, you will be equipped to create Expressive applications yourself.

Presented at Leeds PHP.

Transcript

1. Building Websites with Zend Expressive 3 Rob Allen, Nineteen Feet January 2018 ~ @akrabat
2. A microframework with full stack components Rob Allen ~ @akrabat
3. µFramework core • Router • Container • Template renderer • Error handler • Configuration Rob Allen ~ @akrabat
4. Ecosystem • Filtering and validation • API rendering: HAL & Problem-API • Database abstraction • Session handling • Logging • Mail • Pagination • Caching Rob Allen ~ @akrabat
5. Agnostic Router: FastRoute, Aura.Router or Zend Router DI Container: Aura.Di, Auryn, Pimple, Symfony DI Container or Zend-ServiceManager Template: Plates, Twig or Zend View Rob Allen ~ @akrabat
6. Middleware pipeline Rob Allen ~ @akrabat
7. PSR-15 MiddlewareInterface namespace Interop\Http\ServerMiddleware; use Psr\Http\Message\ResponseInterface; use Psr\Http\Message\ServerRequestInterface; interface MiddlewareInterface { public function process( ServerRequestInterface $request, RequestHandlerInterface $handler ) : ResponseInterface; } Rob Allen ~ @akrabat
8. PSR-15 MiddlewareInterface namespace Interop\Http\ServerMiddleware; use Psr\Http\Message\ResponseInterface; use Psr\Http\Message\ServerRequestInterface; interface MiddlewareInterface { public function process( ServerRequestInterface $request, RequestHandlerInterface $handler ) : ResponseInterface; } Rob Allen ~ @akrabat
9. PSR-15 MiddlewareInterface namespace Interop\Http\ServerMiddleware; use Psr\Http\Message\ResponseInterface; use Psr\Http\Message\ServerRequestInterface; interface MiddlewareInterface { public function process( ServerRequestInterface $request, RequestHandlerInterface $handler ) : ResponseInterface; } Rob Allen ~ @akrabat
10. PSR-15 MiddlewareInterface namespace Interop\Http\ServerMiddleware; use Psr\Http\Message\ResponseInterface; use Psr\Http\Message\ServerRequestInterface; interface MiddlewareInterface { public function process( ServerRequestInterface $request, RequestHandlerInterface $handler ) : ResponseInterface; } Rob Allen ~ @akrabat
11. Structure of middleware class TimerMiddleware implements MiddlewareInterface { public function process($request, $handler) { $start = microtime(true); $response = $handler->handle($request); $taken = microtime(true) - $start; $response->getBody()->write("<!-- Time: $taken -->"); return $response; } } Rob Allen ~ @akrabat
12. Structure of middleware class TimerMiddleware implements MiddlewareInterface { public function process($request, $handler) { $start = microtime(true); $response = $handler->handle($request); $taken = microtime(true) - $start; $response->getBody()->write("<!-- Time: $taken -->"); return $response; } } Rob Allen ~ @akrabat
13. Structure of middleware class TimerMiddleware implements MiddlewareInterface { public function process($request, $handler) { $start = microtime(true); $response = $handler->handle($request); $taken = microtime(true) - $start; $response->getBody()->write("<!-- Time: $taken -->"); return $response; } } Rob Allen ~ @akrabat
14. Structure of middleware class TimerMiddleware implements MiddlewareInterface { public function process($request, $handler) { $start = microtime(true); $response = $handler->handle($request); $taken = microtime(true) - $start; $response->getBody()->write("<!-- Time: $taken -->"); return $response; } } Rob Allen ~ @akrabat
15. Structure of middleware class TimerMiddleware implements MiddlewareInterface { public function process($request, $handler) { $start = microtime(true); $response = $handler->handle($request); $taken = microtime(true) - $start; $response->getBody()->write("<!-- Time: $taken -->"); return $response; } } Rob Allen ~ @akrabat
16. Getting started Rob Allen ~ @akrabat
17. Skeleton $ composer create-project zendframework/zend-expressive-skeleton new-app Rob Allen ~ @akrabat
18. Skeleton Rob Allen ~ @akrabat
19. Directory structure . ├── bin/ ├── data/ ├── config/ ├── public/ │ ├── autoload/ │ ├── css/ │ │ ├── dependencies.global.php │ ├── js/ │ │ ├── development.local.php │ └── index.php │ │ ├── development.local.php.dist ├── src/ │ │ ├── local.php.dist │ └── App/ │ │ ├── router.global.php ├── test/ │ │ ├── templates.global.php │ └── AppTest/ │ │ └── zend-expressive.global.php ├── vendor/ │ ├── config.php ├── composer.json │ ├── container.php ├── composer.lock │ ├── development.config.php ├── phpcs.xml.dist │ ├── development.config.php.dist └── phpunit.xml.dist │ ├── pipeline.php │ └── routes.php Rob Allen ~ @akrabat
20. src/App directory • Each module lives in its own namespace • Contains all code for application • ConfigProvider class for initialisation • Configuration • DI registration Rob Allen ~ @akrabat
21. src/App directory structure └── src/ └── App/ ├── src/ │ ├── Action/ │ │ ├── HomePageAction.php │ │ ├── HomePageFactory.php │ │ └── PingAction.php │ └── ConfigProvider.php ├── templates/ │ ├── app/ │ │ └── home-page.html.twig │ ├── error/ │ │ ├── 404.html.twig │ │ └── error.html.twig │ └── layout/ │ └── default.html.twig └── test/ └── AppTest/ └── Action/ Rob Allen ~ @akrabat
22. An action namespace App\Action; use ...; class HomePageAction implements MiddlewareInterface { public function process( ServerRequestInterface $request, RequestHandlerInterface $handler ) { return new HtmlResponse('<p>Hello World</p>'); } } Rob Allen ~ @akrabat
23. Let's write a web page! Rob Allen ~ @akrabat
24. Bitcoin conversion Create a page that displays the current value of 1 Bitcoin in £, $ & € Rob Allen ~ @akrabat
25. Create a route config/routes.php: $app->get( '/bitcoin', App\Action\BitcoinPageAction::class, 'bitcoin' ); Rob Allen ~ @akrabat
26. Routes have a method config/routes.php: $app->get( '/bitcoin', App\Action\BitcoinPageAction::class, 'bitcoin' ); Rob Allen ~ @akrabat
27. HTTP Method $app->get() $app->post() $app->put() $app->patch() $app->delete() Multiple methods: $app->any() $app->route(…, …, ['GET', 'POST'], …); Rob Allen ~ @akrabat
28. Routes have a pattern config/routes.php: $app->get( '/bitcoin', App\Action\BitcoinPageAction::class, 'bitcoin' ); Rob Allen ~ @akrabat
29. FastRoute URI pattern • Literal string match $app->get('/hello', …); Rob Allen ~ @akrabat
30. FastRoute URI pattern • Literal string match $app->get('/hello', …); • Placeholders are wrapped in { } $app->get('/hello/{name}', …); Rob Allen ~ @akrabat
31. FastRoute URI pattern • Literal string match $app->get('/hello', …); • Placeholders are wrapped in { } $app->get('/hello/{name}', …); • Optional segments are wrapped with [ ] $app->get('/news[/{year}[/{month}]]', …); Rob Allen ~ @akrabat
32. FastRoute URI pattern • Literal string match $app->get('/hello', …); • Placeholders are wrapped in { } $app->get('/hello/{name}', …); • Optional segments are wrapped with [ ] $app->get('/news[/{year}[/{month}]]', …); • Constrain placeholders via Regex $app->get('/news/{year:\d{4}}}', …); // exactly 4 digits Rob Allen ~ @akrabat
33. Routes have a name config/routes.php: $app->get( '/bitcoin', App\Action\BitcoinPageAction::class, 'bitcoin' ); Rob Allen ~ @akrabat
34. Url helper • Builds URLs from route names • Can be helpful to use . to group related route names Use the router: $router->generateUri('user.profile', ['name' => 'Rob']); or in the template: {{ path('user.profile', {'name': 'Rob'}) }} Rob Allen ~ @akrabat
35. Routes have an action config/routes.php: $app->get( '/bitcoin', App\Action\BitcoinPageAction::class, 'bitcoin' ); Rob Allen ~ @akrabat
36. Actions • Receive a PSR-7 Request • Manage business logic operations • Must return a PSR-7 Response • Implemented as PSR-15 Middleware Rob Allen ~ @akrabat
37. Bitcoin action class BitcoinPageAction implements MiddlewareInterface { public function process( ServerRequestInterface $request, RequestHandlerInterface $handler ) : ResponseInterface { $data['prices'] = $this->btcService->getCurrentPrices(); return new HtmlResponse( $this->template->render('app::bitcoin-page', $data) ); } Rob Allen ~ @akrabat
38. Bitcoin action class BitcoinPageAction implements MiddlewareInterface { public function process( ServerRequestInterface $request, RequestHandlerInterface $handler ) : ResponseInterface { $data['prices'] = $this->btcService->getCurrentPrices(); return new HtmlResponse( $this->template->render('app::bitcoin-page', $data) ); } Rob Allen ~ @akrabat
39. Bitcoin action class BitcoinPageAction implements MiddlewareInterface { public function process( ServerRequestInterface $request, RequestHandlerInterface $handler ) : ResponseInterface { $data['prices'] = $this->btcService->getCurrentPrices(); return new HtmlResponse( $this->template->render('app::bitcoin-page', $data) ); } Rob Allen ~ @akrabat
40. Bitcoin action class BitcoinPageAction implements MiddlewareInterface { public function process( ServerRequestInterface $request, RequestHandlerInterface $handler ) : ResponseInterface { $data['prices'] = $this->btcService->getCurrentPrices(); return new HtmlResponse( $this->template->render('app::bitcoin-page', $data) ); } Rob Allen ~ @akrabat
41. Injecting dependencies class BitcoinPageAction implements MiddlewareInterface { protected $template; protected $btcService; public function __construct( TemplateRendererInterface $template, BitcoinService $btcService ) { $this->template = $template; $this->btcService = $btcService; } // … Rob Allen ~ @akrabat
42. Expressive configuration A mushed-up associative array created from: • Invoked ConfigProvider classes from libs and modules • Config files in config/autoload/ Common top level keys: • dependencies • templates • twig • filters • validators • db • cache Rob Allen ~ @akrabat
43. ConfigProvider namespace App; class ConfigProvider { public function __invoke() : array { return [ 'dependencies' => $this->getDependencies(), 'templates' => $this->getTemplates(), ]; } Rob Allen ~ @akrabat
44. ConfigProvider namespace App; class ConfigProvider { public function __invoke() : array { return [ 'dependencies' => $this->getDependencies(), 'templates' => $this->getTemplates(), ]; } Rob Allen ~ @akrabat
45. Dependency configuration public function getDependencies() : array { return [ 'factories' => [ Action\BitcoinPageAction::class => Action\BitcoinPageFactory::class, ], ]; } Rob Allen ~ @akrabat
46. Dependency configuration public function getDependencies() : array { return [ 'factories' => [ Action\BitcoinPageAction::class => Action\BitcoinPageFactory::class, ], ]; } Rob Allen ~ @akrabat
47. Dependency configuration public function getDependencies() : array { return [ 'factories' => [ Action\BitcoinPageAction::class => Action\BitcoinPageFactory::class, ], ]; } Rob Allen ~ @akrabat
48. Action factory Return an instance of the action with its injected dependencies class BitcoinPageFactory { public function __invoke($container) { return new BitcoinPageAction( $container->get(TemplateRendererInterface::class), $container->get(BitcoinService::class) ); } } Rob Allen ~ @akrabat
49. Action factory Return an instance of the action with its injected dependencies class BitcoinPageFactory { public function __invoke($container) { return new BitcoinPageAction( $container->get(TemplateRendererInterface::class), $container->get(BitcoinService::class) ); } } Rob Allen ~ @akrabat
50. Action factory Return an instance of the action with its injected dependencies class BitcoinPageFactory { public function __invoke($container) { return new BitcoinPageAction( $container->get(TemplateRendererInterface::class), $container->get(BitcoinService::class) ); } } Rob Allen ~ @akrabat
51. Templates Expressive's view layer Rob Allen ~ @akrabat
52. Templating • Render method to convert page: $html = $this->template->render('app::bitcoin-page', $data); • Templates are namespaced: namespace::template • Extension is resolved by the adapter: app::bitcoin-page => app/bitcoin-page.html.twig Rob Allen ~ @akrabat
53. Twig templates "Twig is a modern template engine for PHP" • Manual: https://twig.symfony.com • Script extension: .twig • Variables: {{ }} • Control statements: {% %} • Comments: {# #} Rob Allen ~ @akrabat
54. Action template {% extends '@layout/default.html.twig' %} {% block title %}Bitcoin converter{% endblock %} {% block content %} <h1>Bitcoin converter</h1> <p>One BTC:</p> {% for price in prices %} {{ price.symbol }} {{ price.rate_float|number_format(2, '.', ',') }}<br> {% endfor %} {% endblock %} Rob Allen ~ @akrabat
55. Print variables {% extends '@layout/default.html.twig' %} {% block title %}Bitcoin converter{% endblock %} {% block content %} <h1>Bitcoin converter</h1> <p>One BTC:</p> {% for price in prices %} {{ price.symbol }} {{ price.rate_float|number_format(2, '.', ',') }}<br> {% endfor %} {% endblock %} Rob Allen ~ @akrabat
56. Control statements {% extends '@layout/default.html.twig' %} {% block title %}Bitcoin converter{% endblock %} {% block content %} <h1>Bitcoin converter</h1> <p>One BTC:</p> {% for price in prices %} {{ price.symbol }} {{ price.rate_float|number_format(2, '.', ',') }}<br> {% endfor %} {% endblock %} Rob Allen ~ @akrabat
57. Template inheritance {% extends '@layout/default.html.twig' %} {% block title %}Bitcoin converter{% endblock %} {% block content %} <h1>Bitcoin converter</h1> <p>One BTC:</p> {% for price in prices %} {{ price.symbol }} {{ price.rate_float|number_format(2, '.', ',') }}<br> {% endfor %} {% endblock %} Rob Allen ~ @akrabat
58. Template inheritance • For cohesive look and feel • includes default CSS, JS & structural HTML • Build a base skeleton • Define blocks for children to override • Each child chooses which template to inherit from Rob Allen ~ @akrabat
59. Base skeleton src/App/templates/layout/default.html.twig: <!DOCTYPE html> <html> <head> {% block head %} <link rel="stylesheet" href="style.css" /> <title>{% block title %}{% endblock %} - Akrabat</title> {% endblock %} </head> <body> {% block content %}{% endblock %} <footer>{% block footer %}&copy; 2017{% endblock %}</footer> </body> </html> Rob Allen ~ @akrabat
60. Base skeleton src/App/templates/layout/default.html.twig: <!DOCTYPE html> <html> <head> {% block head %} <link rel="stylesheet" href="style.css" /> <title>{% block title %}{% endblock %} - Akrabat</title> {% endblock %} </head> <body> {% block content %}{% endblock %} <footer>{% block footer %}&copy; 2017{% endblock %}</footer> </body> </html> Rob Allen ~ @akrabat
61. Base skeleton src/App/templates/layout/default.html.twig: <!DOCTYPE html> <html> <head> {% block head %} <link rel="stylesheet" href="style.css" /> <title>{% block title %}{% endblock %} - Akrabat</title> {% endblock %} </head> <body> {% block content %}{% endblock %} <footer>{% block footer %}&copy; 2017{% endblock %}</footer> </body> </html> Rob Allen ~ @akrabat
62. Base skeleton src/App/templates/layout/default.html.twig: <!DOCTYPE html> <html> <head> {% block head %} <link rel="stylesheet" href="style.css" /> <title>{% block title %}{% endblock %} - Akrabat</title> {% endblock %} </head> <body> {% block content %}{% endblock %} <footer>{% block footer %}&copy; 2017{% endblock %}</footer> </body> </html> Rob Allen ~ @akrabat
63. . Rob Allen ~ @akrabat
64. Adding components Rob Allen ~ @akrabat
65. Add a form Rob Allen ~ @akrabat
66. Add a form: HTML <form method="GET" action="/bitcoin"> <label>&pound;</label> <input name="amount" value="{{ amount }}"> <button>Convert</button> </form> <p>&pound;{{amount}} is {{ bitcoins|number_format(6) }} BTC Rob Allen ~ @akrabat
67. Add a form: HTML <form method="GET" action="/bitcoin"> <label>&pound;</label> <input name="amount" value="{{ amount }}"> <button>Convert</button> </form> <p>&pound;{{amount}} is {{ bitcoins|number_format(6) }} BTC Rob Allen ~ @akrabat
68. Add a form: HTML <form method="GET" action="/bitcoin"> <label>&pound;</label> <input name="amount" value="{{ amount }}"> <button>Convert</button> </form> <p>&pound;{{amount}} is {{ bitcoins|number_format(6) }} BTC Rob Allen ~ @akrabat
69. Add a form: HTML <form method="GET" action="/bitcoin"> <label>&pound;</label> <input name="amount" value="{{ amount }}"> <button>Convert</button> </form> <p>&pound;{{amount}} is {{ bitcoins|number_format(6) }} BTC Rob Allen ~ @akrabat
70. Add a form: HTML <form method="GET" action="/bitcoin"> <label>&pound;</label> <input name="amount" value="{{ amount }}"> <button>Convert</button> </form> <p>&pound;{{amount}} is {{ bitcoins|number_format(6) }} BTC</p> Rob Allen ~ @akrabat
71. Zend-InputFilter Rob Allen ~ @akrabat
72. Integration via ConfigProvider Rob Allen ~ @akrabat
73. Create an input filter $factory = new Zend\InputFilter\Factory(); $inputFilter = $factory->createInputFilter([ 'amount' => [ 'filters' => [ ['name' => 'ToInt'], ], 'validators' => [ [ 'name' => 'GreaterThan', 'options' => ['min' => 0], ], ] ], ]); Rob Allen ~ @akrabat
74. Create an input filter $factory = new Zend\InputFilter\Factory(); $inputFilter = $factory->createInputFilter([ 'amount' => [ 'filters' => [ ['name' => 'ToInt'], ], 'validators' => [ [ 'name' => 'GreaterThan', 'options' => ['min' => 0], ], ] ], ]); Rob Allen ~ @akrabat
75. Create an input filter $factory = new Zend\InputFilter\Factory(); $inputFilter = $factory->createInputFilter([ 'amount' => [ 'filters' => [ ['name' => 'ToInt'], ], 'validators' => [ [ 'name' => 'GreaterThan', 'options' => ['min' => 0], ], ] ], ]); Rob Allen ~ @akrabat
76. Create an input filter $factory = new Zend\InputFilter\Factory(); $inputFilter = $factory->createInputFilter([ 'amount' => [ 'filters' => [ ['name' => 'ToInt'], ], 'validators' => [ [ 'name' => 'GreaterThan', 'options' => ['min' => 0], ], ] ], ]); Rob Allen ~ @akrabat
77. Create an input filter $factory = new Zend\InputFilter\Factory(); $inputFilter = $factory->createInputFilter([ 'amount' => [ 'filters' => [ ['name' => 'ToInt'], ], 'validators' => [ [ 'name' => 'GreaterThan', 'options' => ['min' => 0], ], ] ], ]); Rob Allen ~ @akrabat
78. Validating request data 1.Retrieve data from Request object 2.Pass to InputFilter 3.Call isValid() 4.Retrieve sanitized, valid data using getValues() 5.Use getMessages() to find out what failed Rob Allen ~ @akrabat
79. Validating request data public function process($request, $handler) { $requestData = $request->getQueryParams(); $this->inputFilter->setData($requestData); if ($this->inputFilter->isValid()) { /* request data is valid */ $values = $this->inputFilter->getValues(); $btc = $this->btcService->convert($values['amount']); } else { /* request data is invalid */ $errors = $this->inputFilter->getMessages(); } Rob Allen ~ @akrabat
80. Validating request data public function process($request, $handler) { $requestData = $request->getQueryParams(); $this->inputFilter->setData($requestData); if ($this->inputFilter->isValid()) { /* request data is valid */ $values = $this->inputFilter->getValues(); $btc = $this->btcService->convert($values['amount']); } else { /* request data is invalid */ $errors = $this->inputFilter->getMessages(); } Rob Allen ~ @akrabat
81. Validating request data public function process($request, $handler) { $requestData = $request->getQueryParams(); $this->inputFilter->setData($requestData); if ($this->inputFilter->isValid()) { /* request data is valid */ $values = $this->inputFilter->getValues(); $btc = $this->btcService->convert($values['amount']); } else { /* request data is invalid */ $errors = $this->inputFilter->getMessages(); } Rob Allen ~ @akrabat
82. Validating request data public function process($request, $handler) { $requestData = $request->getQueryParams(); $this->inputFilter->setData($requestData); if ($this->inputFilter->isValid()) { /* request data is valid */ $values = $this->inputFilter->getValues(); $btc = $this->btcService->convert($values['amount']); } else { /* request data is invalid */ $errors = $this->inputFilter->getMessages(); } Rob Allen ~ @akrabat
83. Validating request data public function process($request, $handler) { $requestData = $request->getQueryParams(); $this->inputFilter->setData($requestData); if ($this->inputFilter->isValid()) { /* request data is valid */ $values = $this->inputFilter->getValues(); $btc = $this->btcService->convert($values['amount']); } else { /* request data is invalid */ $errors = $this->inputFilter->getMessages(); } Rob Allen ~ @akrabat
84. Summary Rob Allen ~ @akrabat
85. Resources • https://docs.zendframework.com/zend-expressive/ • https://github.com/zendframework/ • https://akrabat.com/category/zend-expressive/ • https://framework.zend.com/blog Rob Allen ~ @akrabat
86. Thank you! Rob Allen ~ @akrabat