Martin ve své přednášce poukázal na to, jak je možné integrovat nové technologické postupy k vývoji aplikací a to zejména v oblasti frontendových frameworků. Konkrétně jak postupně nasazovat Vue.js a nahrazovat tím už přežitou knihovnu jQuery.

1. NA POMEZÍ PHP ANA POMEZÍ PHP A
VUE.JSVUE.JS
Martin Hasoň
16. 5. 2018
Péhápkáři, Brno

3. MOTIVACEMOTIVACE
backend × frontend × mobile × isomorphic apps
full stack developer
PHP vs. Javascript vs. ?
https://github.com/kamranahmedse/developer-
roadmap

6. POPULARITA?POPULARITA?

7. POPULARITA?POPULARITA?

8. POPULARITA?POPULARITA?

9. JAK (TAKÉ) PÍŠEME APLIKACE?JAK (TAKÉ) PÍŠEME APLIKACE?
Python (AI, API)
PHP (ORM, API)
Javascript (Vue.js, React, Angular)
…

10. PHPPHP
Symfony 4
Doctrine
EasyAdmin Bundle
API Platform

11. ENTITAENTITA
<?php
namespace AppEntity;
use DoctrineCommonCollectionsArrayCollection;
use DoctrineORMMapping as ORM;
/**
* @ORMEntity
*/
class Product
{
/**
* @var int The id of this product.
*
* @ORMId
* @ORMGeneratedValue
* @ORMColumn(type="uuid")
*/
private $id;
/**
* @var string The name of this product.
*
* @ORMColumn
*/
public $name;
}

13. APIAPI
<?php
namespace AppEntity;
+use ApiPlatformCoreAnnotationApiResource;
use DoctrineCommonCollectionsArrayCollection;
use DoctrineORMMapping as ORM;
/**
* @ORMEntity
+* @ApiResource
*/
class Product
{
/**
* @var int The id of this product.
*
* @ORMId
* @ORMGeneratedValue
* @ORMColumn(type="uuid")
*/
private $id;
/**
* @var string The name of this product.
*
* @ORMColumn
*/
public $name;
}

15. A TEĎ FRONTENDA TEĎ FRONTEND
PHP + Twig
PHP + Twig + AJAX
SPA
SPA + SSR

16. PRVNÍ KROKPRVNÍ KROK
Nahradit jQuery za Vue
https://www.smashingmagazine.com/2018/02/jquery-
vue-javascript/

17. <main>
<div class="thing">
<p>Some content here</p>
</div>
</main>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<script>
//some vue code here
</script>

18. Ukázka jQuery
<div id="app">
<label for="thing">Name:</label>
<input id="thing" type="text" />
<p class="formname"></p>
</div>
// this is an alias to $(document).ready(function() {
$(function() {
//keypress wouldn't include delete key, keyup does. We also query the div id app and find the
$('#app').keyup(function(e) {
var formname = $(this).find('.formname');
//store in a variable to reduce repetition
var n_input = $(this).find('#thing').val();
formname.empty();
formname.append(n_input);
});
});

19. Ukázka Vue
<div id="app">
<label for="name">Name:</label>
<input id="name" type="text" v-model="name" /> <!--v-model is doing the magic here-->
<p>{{ name }}</p>
</div>
//this is a vue instance
new Vue({
//this targets the div id app
el: '#app',
data: {
name: '' //this stores data values for ‘name’
}
})

20. KOMPLEXNÍ UKÁZKAKOMPLEXNÍ UKÁZKA
jQuery:
Vue:
https://codepen.io/sdras/pen/100e681e2a5aa5259f5fe
https://codepen.io/sdras/pen/aa180b495814b39d46af

21. DOTAZYDOTAZY