ACampanario_-_Presentation.pdf

Transcript

1. How to use Inertia.js to create an SPA with CakePHP and Vue Andrés Campanario andrescampanario@gmail.com 2023-09-28 https://twitter.com/acampanario https://github.com/ACampanario https://www.linkedin.com/in/andrescampanario
2. How to use Inertia.js to create an SPA with CakePHP and Vue Andrés Campanario - About me Andrés started programming creating the first job opportunities website in his university (URV) in 1998. After working in some companies he decided to become a freelance programmer using CakePHP as a base tool for his customers and integrating all types of third party services and efficient systems tools. He also collaborates with an NGO in the Raval neighborhood in Barcelona, which focuses on promoting education, sports, combating marginalisation and exclusion of young immigrants. Currently is a Senior Developer and DevOps Engineer at CakeDC.
3. Presentation is divided in three parts that match with these three tags in the project repository • tag v0.1 is how create a base works a single page application app, sending and printing values generated on back to front • tag v0.2 is how send a request to back and how back response it with json data to front (avoiding page reload) • tag v0.3 is how to generate necessary templates to bake an a complete CRUD system form a sample database model In each slide at the bottom left you can see in which tag we are in case you want to consult the code Summary https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Tag v0.0 How to use Inertia.js to create an SPA with CakePHP and Vue
4. What is Inertia and how it works? Inertia allows you to create single-page, fully rendered client-side applications, without the need to use a specific API for data exchange. Inertia has no client-side routing. Inertia isn't a framework. It can be considered a data exchange interface. How to use Inertia.js to create an SPA with CakePHP and Vue Front Back
5. How to use Inertia.js to create an SPA with CakePHP and Vue Starting point (kick off) https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP • Install basic CakePHP 4 and run it on Docker ◦ $> composer create-project --prefer-dist cakephp/app:~4.4 spa-with-cakephp-and-vue ◦ $> docker-compose up -d • or clone this repository from my github account (don’t forget to choose the corresponding tag) ◦ $> gitclone git@github.com:ACampanario/Spa-CRUD-with-Vue-and-CakePHP.git ◦ $> docker-compose up -d ◦ $> docker exec --user application -w \/application -it spa-inertia-cakephp-vue composer install ◦ $> git checkout tags/v0.x Tag v0.0
6. Install Vue and dependencies • Create package.json in your project root. The most important dependencies that we will develop are: ◦ inertia ▪ @inertiajs/inertia ▪ @inertiajs/inertia-vue ◦ vue (v2.6) ◦ portal-vue (to render components) ◦ vue-meta (metadata manager) ◦ vue-loader (loader for webpack) ◦ laravel-mix (to compile and minify files) • Install required modules $> npm install https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Tag v0.1 How to use Inertia.js to create an SPA with CakePHP and Vue
7. Create Vue App Create app structure inside “resources” dir https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Configure webpack.mix.js Tag v0.1 How to use Inertia.js to create an SPA with CakePHP and Vue
8. How to use Inertia.js to create an SPA with CakePHP and Vue Create Vue App (app.js) https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Line 14 Get the "app" element of the DOM in which our application will be rendered. Line 22 Convert the content obtained from the DOM element dataset to JSON and pass it as properties to the component. Line 23 Import vue component Dashboard.vue Tag v0.1
9. Create Vue App (Dashboard.vue) https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Dashboard.vue is our first component in the App, It’s a simple view that prints values received. Tag v0.1 We create dashboard function on PagesController.php and set an array to $page variable with two positions. Also add specific route on Config/routes.php How to use Inertia.js to create an SPA with CakePHP and Vue
10. InertiaResponseTrait https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP This trait is necessary to include on PagesController to replace the beforeRender function and set the InertiaView class. Tag v0.1 How to use Inertia.js to create an SPA with CakePHP and Vue
11. How to use Inertia.js to create an SPA with CakePHP and Vue InertiaView https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP InertiaView class is responsible for setting the $page variable (which contains all shown variables) and other things like url or component name to let Vue know which component to load. Tag v0.1
12. How to use Inertia.js to create an SPA with CakePHP and Vue InertiaHelper https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Next, we create a helper to render a div tag in which we will place variables that our CakePHP will pass as properties to the component that Vue will generate. We put this helper on layout.php and replace <?= $this->fetch('content') ?> with <?= $this->Inertia->make($page, 'app', ''); ?> Also, we need to add app.js in the HEAD tag <script src="/js/app.js" defer="defer"></script> Tag v0.1
13. That’s all folks! … for tag v0.1 https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Execute “npm run dev” on the project root and clear the browser cache. Tag v0.1 We can see the values that were put on the dashboard’s page function (see slide 9). How to use Inertia.js to create an SPA with CakePHP and Vue
14. InertiaLink https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Now we use the InertiaLink tag provided by Inertia library to create navigable links. • Update Dashboard.vue • Add function whoWeAre on PagesController.php • Update app.js to resolve components by name Tag v0.2 How to use Inertia.js to create an SPA with CakePHP and Vue
15. InertiaMiddleware https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP We need to add a middleware to evaluate the type of call received in order to perform some actions. If it's an Inertia call, we should add detectors. For example to get the received data, or to decide which view to use Tag v0.2 How to use Inertia.js to create an SPA with CakePHP and Vue
16. Create InertiaJsonView as a copy of InertiaView and update render function to return serialized data How to use Inertia.js to create an SPA with CakePHP and Vue InertiaJsonView https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Update InertiaResponseTrait to add InertiaJsonView if the request is “inertia”. Tag v0.2
17. That’s all folks! … for tag v0.2 https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Tag v0.2 Execute “npm run dev” on the project root and clear the browser cache. We can now change page without browser reload and see different values. How to use Inertia.js to create an SPA with CakePHP and Vue
18. Updates (CakePHP) https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP We will create a sample database with pages, categories and tags. Update InertiaResponseTrait and add the flash messages and csrf token. Tag v0.3 How to use Inertia.js to create an SPA with CakePHP and Vue
19. Updates (Vue) https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Update package.json with dependencies, multiselect, datepicker and vue2-editor components and install it executing “npm install” Create Layout.vue as an horizontal menu in resources/Components, and update existing components Dashboard and WhoWeAre Tag v0.3 How to use Inertia.js to create an SPA with CakePHP and Vue
20. Create structure before baking https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP We will create a structure for the controller and templates twig files inside the templates directory. You can see the base tree structure at vendor/cakephp/bake We replicate the following templates in our structure: • controller (Controller/) • controller action templates (element/Controller/) • those of the controller action views (Template/) Tag v0.3 How to use Inertia.js to create an SPA with CakePHP and Vue
21. How to use Inertia.js to create an SPA with CakePHP and Vue Controller.twig and CRUD functions https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Tag v0.3 In the Controller.twig file we need to add InertiaResponseTrait so it is used in all baked Controllers. Also in element/Controller/ we will overwrite the CRUD functions with these changes: • Check schema to parse data in “timestampfractional” columns using FrozenDate Class • set $errors var on template • modify association BelongsToMany to call find(‘all’) instead of find(‘list’)
22. Index.twig controller’s function https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Tag v0.3 Special attention to index.twig controller’s function We need to generate urls for pagination and pass directly to the template, this is for the Vue component to create the pagination links with a simple loop containing the InertiaLink tag provided by the Inertia library. How to use Inertia.js to create an SPA with CakePHP and Vue
23. Template (index.twig) - computed https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP In our Index.twig we will do an Index.vue component. In comparison with original index.php generated we will highlight: • all links are replaced to use InertiaLink provided by Inertia library • on the headers table links we need to apply our function changeDirection to sort elements and alternate direction on runtime • we need to check columnData.type. If it’s a date, we apply moment.format • we need to add csrfToken to postLink Tag v0.3 How to use Inertia.js to create an SPA with CakePHP and Vue
24. As in the previous slide, in our form.twig we will do an Add.vue and Edit.vue components. We will highlight: • Added token, errors and flash as props • Generate one prop for each BelongsToMany • Include Vue Components ◦ VueEditor ◦ Datepicker ◦ Multiselect Template (form.twig) - properties https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Tag v0.3 How to use Inertia.js to create an SPA with CakePHP and Vue
25. On the data() component function created for that structure, we use associations BelongsToMany and field variables. Template (form.twig) - methods https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Tag v0.3 On the mounted() component function, we fill the form values. if it’s an edit action we also fill BelongsToMany values in the form How to use Inertia.js to create an SPA with CakePHP and Vue
26. The last thing to highlight is submit of form. We use the action post of $inertia provided by @inertiajs/inertia-vue. This generates a request with data from the form to an url and adds csrfToken inside it. Template (form.twig) - submit https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Tag v0.3 How to use Inertia.js to create an SPA with CakePHP and Vue
27. Baking Model and Controller https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Bake model as normal $> bin/cake bake model Categories $> bin/cake bake model Tags $> bin/cake bake model Pages Bake controller as normal $> bin/cake bake controller Categories $> bin/cake bake controller Tags $> bin/cake bake controller Pages Tag v0.3 How to use Inertia.js to create an SPA with CakePHP and Vue
28. How to use Inertia.js to create an SPA with CakePHP and Vue Baking templates https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Before baking templates, we need to create a command that extends \Bake\Command\TemplateCommand, for example VueTemplateCommand.php. We only need to modify two things: • on getTemplatePath function, we change the target templates directory to the resources directory • on bake function, we change the files extension to .vue Then bake all $> bin/cake bake vue_template Categories $> bin/cake bake vue_template Tags $> bin/cake bake vue_template Pages Tag v0.3
29. How to use Inertia.js to create an SPA with CakePHP and Vue That’s all folks! … for tag v0.3 https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP Tag v0.3 Execute “npm run dev” on the project root and clear the browser cache. We can add, edit, view, delete and list any entity type without changing the page.
30. Thank you all for coming to Cakefest! Thank you so much for attending my workshop. I hope that you liked it and that it will be useful to you someday in the future. if you have any question or visit Barcelona feel free to email me at andrescampanario@gmail.com And special thanks to CakeDC’s team for their support and help. Farewell and thanks https://github.com/ACampanario/Spa-CRUD-with-Vue-and-CakePHP How to use Inertia.js to create an SPA with CakePHP and Vue