Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Livewire. It's like Vue or React. Without the JavaScript.

Livewire. It's like Vue or React. Without the JavaScript.

E157a71a8b1585e6a33e2c6da01d4cac?s=128

Christian Leo-Pernold

September 19, 2019
Tweet

Transcript

  1. It's like Vue or React. Without the JavaScript.

  2. Okay, there's some JS. 2/26

  3. About me ! Christian Leo-Pernold "#$%&'(⛰*+,- . @mazedlx ⭐ github.com/mazedlx

    0 mazedlx.net 1 repod.at 3/26
  4. What is Livewire? 4/26

  5. Livewire is a full-stack framework for Laravel that makes building

    dynamic front-ends as simple as writing vanilla PHP (literally). — Caleb Porzio (@calebporzio) 5/26
  6. Example Vue component <template> <div> <button @click="increment">+</button> <button @click="decrement">-</button> <span>{{

    count }}</span> </div> </template> <script> export default { data() { return { count: 0 } }, methods: { increment() { this.count++; }, decrement() { this.count--; } } }; </script> 6/26
  7. Example Vue component <template> <div> <button @click="increment">+</button> <button @click="decrement">-</button> <span>{{

    count }}</span> </div> </template> <script> export default { data() { return { count: 0 } }, methods: { increment() { this.count++; }, decrement() { this.count--; } } }; </script> 6/26
  8. Example Vue component <template> <div> <button @click="increment">+</button> <button @click="decrement">-</button> <span>{{

    count }}</span> </div> </template> <script> export default { data() { return { count: 0 } }, methods: { increment() { this.count++; }, decrement() { this.count--; } } }; </script> 6/26
  9. Example Vue component <template> <div> <button @click="increment">+</button> <button @click="decrement">-</button> <span>{{

    count }}</span> </div> </template> <script> export default { data() { return { count: 0 } }, methods: { increment() { this.count++; }, decrement() { this.count--; } } }; </script> 6/26
  10. Example Vue component <template> <div> <button @click="increment">+</button> <button @click="decrement">-</button> <span>{{

    count }}</span> </div> </template> <script> export default { data() { return { count: 0 } }, methods: { increment() { this.count++; }, decrement() { this.count--; } } }; </script> 6/26
  11. Example React component class Counter extends React.Component { constructor(props) {

    super(props); this.state = { count: 0, }; } increment() { this.setState({ count: this.state.count + 1 }); } decrement() { this.setState({ count: this.state.count - 1 }); } render() { return ( <div> <button onClick={() => this.increment()}>+</button> <button onClick={() => this.decrement()}>-</button> <span>{this.state.count}</span> </div> ); } } 7/26
  12. Example React component class Counter extends React.Component { constructor(props) {

    super(props); this.state = { count: 0, }; } increment() { this.setState({ count: this.state.count + 1 }); } decrement() { this.setState({ count: this.state.count - 1 }); } render() { return ( <div> <button onClick={() => this.increment()}>+</button> <button onClick={() => this.decrement()}>-</button> <span>{this.state.count}</span> </div> ); } } 7/26
  13. Example React component class Counter extends React.Component { constructor(props) {

    super(props); this.state = { count: 0, }; } increment() { this.setState({ count: this.state.count + 1 }); } decrement() { this.setState({ count: this.state.count - 1 }); } render() { return ( <div> <button onClick={() => this.increment()}>+</button> <button onClick={() => this.decrement()}>-</button> <span>{this.state.count}</span> </div> ); } } 7/26
  14. Example React component class Counter extends React.Component { constructor(props) {

    super(props); this.state = { count: 0, }; } increment() { this.setState({ count: this.state.count + 1 }); } decrement() { this.setState({ count: this.state.count - 1 }); } render() { return ( <div> <button onClick={() => this.increment()}>+</button> <button onClick={() => this.decrement()}>-</button> <span>{this.state.count}</span> </div> ); } } 7/26
  15. Example React component class Counter extends React.Component { constructor(props) {

    super(props); this.state = { count: 0, }; } increment() { this.setState({ count: this.state.count + 1 }); } decrement() { this.setState({ count: this.state.count - 1 }); } render() { return ( <div> <button onClick={() => this.increment()}>+</button> <button onClick={() => this.decrement()}>-</button> <span>{this.state.count}</span> </div> ); } } 7/26
  16. How would one accomplish the same thing using Livewire? 8/26

  17. Install via composer $ composer require calebporzio/livewire Using version ^0.2.7

    for calebporzio/livewire ./composer.json has been updated Loading composer repositories with package information Updating dependencies (including require-dev) Package operations: 1 install, 0 updates, 0 removals - Installing calebporzio/livewire (v0.2.7): Downloading (100%) Writing lock file Generating optimized autoload files > Illuminate\Foundation\ComposerScripts::postAutoloadDump > @php artisan package:discover --ansi Discovered Package: beyondcode/laravel-dump-server Discovered Package: calebporzio/livewire Discovered Package: fideloper/proxy Discovered Package: laravel/tinker Discovered Package: nesbot/carbon Discovered Package: nunomaduro/collision Package manifest generated successfully. 9/26
  18. Include Blade directive <html> <head> <title>Livewire Demo</title> </head> <body> @livewireAssets

    </body> </html> 10/26
  19. Include Blade directive <html> <head> <title>Livewire Demo</title> </head> <body> @livewireAssets

    </body> </html> 10/26
  20. Create a component $ php artisan make:livewire counter ! Files

    created: -> [.../app/Http/Livewire/Counter.php] -> [.../resources/views/livewire/counter.blade.php] 11/26
  21. The Livewire component namespace App\Http\Livewire; use Livewire\Component; class Counter extends

    Component { public function render() { return view('livewire.counter'); } } 12/26
  22. The Livewire view <div> {{-- The whole world belongs to

    you --}} </div> 13/26
  23. Let's add some functionality <div> <button wire:click="increment">+</button> <button wire:click="decrement">-</button> <span>{{

    $count }}</span> </div> 14/26
  24. Let's add some functionality <div> <button wire:click="increment">+</button> <button wire:click="decrement">-</button> <span>{{

    $count }}</span> </div> 14/26
  25. Let's add some functionality <div> <button wire:click="increment">+</button> <button wire:click="decrement">-</button> <span>{{

    $count }}</span> </div> 14/26
  26. Let's add some functionality <div> <button wire:click="increment">+</button> <button wire:click="decrement">-</button> <span>{{

    $count }}</span> </div> 14/26
  27. Let's add some functionality class Counter extends Component { public

    $count = 0; public function increment() { $this->count++; } public function decrement() { $this->count--; } public function render() { return view('livewire.counter'); } } 15/26
  28. Let's add some functionality class Counter extends Component { public

    $count = 0; public function increment() { $this->count++; } public function decrement() { $this->count--; } public function render() { return view('livewire.counter'); } } 15/26
  29. Let's add some functionality class Counter extends Component { public

    $count = 0; public function increment() { $this->count++; } public function decrement() { $this->count--; } public function render() { return view('livewire.counter'); } } 15/26
  30. Let's add some functionality class Counter extends Component { public

    $count = 0; public function increment() { $this->count++; } public function decrement() { $this->count--; } public function render() { return view('livewire.counter'); } } 15/26
  31. Let's add some functionality class Counter extends Component { public

    $count = 0; public function increment() { $this->count++; } public function decrement() { $this->count--; } public function render() { return view('livewire.counter'); } } 15/26
  32. Include the component <html> <head> <title>Livewire Demo</title> </head> <body> <div>

    @livewire('counter') </div> @livewireAssets </body> </html> 16/26
  33. Include the component <html> <head> <title>Livewire Demo</title> </head> <body> <div>

    @livewire('counter') </div> @livewireAssets </body> </html> 16/26
  34. ! Demo Time! 17/26

  35. Awesome! But how does it work? 18/26

  36. 1. Livewire hears the click because of wire:click="increment" 2. Livewire

    sends an ajax request to PHP 3. PHP calls the corresponding method, which updates $count 4. PHP re-renders the Blade template and sends back the HTML 5. Livewire receives the response, and updates the DOM 19/26
  37. ! Demo Time! 20/26

  38. Wait! There's more! https://livewire-framework.com/docs/ Lifecycle Hooks Defer loading Prefetching Events

    Testing 21/26
  39. Should you replace all your Vue components with Livewire components

    now? Not exactly. [...] it's better to use JavaScript for things that need to be instant (like animations) [...] A good rule of thumb is: any JavaScript components that rely on ajax for server communication, will be better off as Livewire components. — Caleb Porzio 22/26
  40. Can you use it in your projects? Right now, the

    project is still in pre-release. Sign up for my email newsletter to get notified when It's ready for prime-time. — Caleb Porzio 23/26
  41. Livewire Fiddle I'm really taking my time with this to

    make sure it's beautiful, functional, secure, and user friendly. Honestly, it has some features I wish CodePen had. — Caleb Porzio 24/26
  42. Q&A with Caleb 25/26

  43. !" Slides can be found at speakerdeck.com/mazedlx 26/26