Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Na pomezi php a vue.js

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.

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

  • Be the first to like this

Na pomezi php a vue.js

  1. 1. NA POMEZÍ PHP ANA POMEZÍ PHP A VUE.JSVUE.JS Martin Hasoň 16. 5. 2018 Péhápkáři, Brno
  2. 2. MOTIVACEMOTIVACE backend × frontend × mobile × isomorphic apps full stack developer PHP vs. Javascript vs. ? https://github.com/kamranahmedse/developer- roadmap
  3. 3. POPULARITA?POPULARITA?
  4. 4. POPULARITA?POPULARITA?
  5. 5. POPULARITA?POPULARITA?
  6. 6. JAK (TAKÉ) PÍŠEME APLIKACE?JAK (TAKÉ) PÍŠEME APLIKACE? Python (AI, API) PHP (ORM, API) Javascript (Vue.js, React, Angular) …
  7. 7. PHPPHP Symfony 4 Doctrine EasyAdmin Bundle API Platform
  8. 8. 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; }
  9. 9. 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; }
  10. 10. A TEĎ FRONTENDA TEĎ FRONTEND PHP + Twig PHP + Twig + AJAX SPA SPA + SSR
  11. 11. PRVNÍ KROKPRVNÍ KROK Nahradit jQuery za Vue https://www.smashingmagazine.com/2018/02/jquery- vue-javascript/
  12. 12. <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>
  13. 13. 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); }); });
  14. 14. 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’ } })
  15. 15. KOMPLEXNÍ UKÁZKAKOMPLEXNÍ UKÁZKA jQuery: Vue: https://codepen.io/sdras/pen/100e681e2a5aa5259f5fe https://codepen.io/sdras/pen/aa180b495814b39d46af
  16. 16. DOTAZYDOTAZY

×