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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. What is Livewire?
   4/26
   

   View Slide

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
   

   View Slide

6. Example Vue component
   
   
   +
   -
   {{ count }}
   
   
   <br/>export default {<br/>data() {<br/>return {<br/>count: 0<br/>}<br/>},<br/>methods: {<br/>increment() {<br/>this.count++;<br/>},<br/>decrement() {<br/>this.count--;<br/>}<br/>}<br/>};<br/>
   6/26
   

   View Slide

7. Example Vue component
   
   
   +
   -
   {{ count }}
   
   
   <br/>export default {<br/>data() {<br/>return {<br/>count: 0<br/>}<br/>},<br/>methods: {<br/>increment() {<br/>this.count++;<br/>},<br/>decrement() {<br/>this.count--;<br/>}<br/>}<br/>};<br/>
   6/26
   

   View Slide

8. Example Vue component
   
   
   +
   -
   {{ count }}
   
   
   <br/>export default {<br/>data() {<br/>return {<br/>count: 0<br/>}<br/>},<br/>methods: {<br/>increment() {<br/>this.count++;<br/>},<br/>decrement() {<br/>this.count--;<br/>}<br/>}<br/>};<br/>
   6/26
   

   View Slide

9. Example Vue component
   
   
   +
   -
   {{ count }}
   
   
   <br/>export default {<br/>data() {<br/>return {<br/>count: 0<br/>}<br/>},<br/>methods: {<br/>increment() {<br/>this.count++;<br/>},<br/>decrement() {<br/>this.count--;<br/>}<br/>}<br/>};<br/>
   6/26
   

   View Slide

10. Example Vue component
    
    
    +
    -
    {{ count }}
    
    
    <br/>export default {<br/>data() {<br/>return {<br/>count: 0<br/>}<br/>},<br/>methods: {<br/>increment() {<br/>this.count++;<br/>},<br/>decrement() {<br/>this.count--;<br/>}<br/>}<br/>};<br/>
    6/26
    

    View Slide

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 (
    
    this.increment()}>+
    this.decrement()}>-
    {this.state.count}
    
    );
    }
    }
    7/26
    

    View Slide

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 (
    
    this.increment()}>+
    this.decrement()}>-
    {this.state.count}
    
    );
    }
    }
    7/26
    

    View Slide

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 (
    
    this.increment()}>+
    this.decrement()}>-
    {this.state.count}
    
    );
    }
    }
    7/26
    

    View Slide

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 (
    
    this.increment()}>+
    this.decrement()}>-
    {this.state.count}
    
    );
    }
    }
    7/26
    

    View Slide

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 (
    
    this.increment()}>+
    this.decrement()}>-
    {this.state.count}
    
    );
    }
    }
    7/26
    

    View Slide

16. How would one accomplish
    the same thing using
    Livewire?
    8/26
    

    View Slide

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
    

    View Slide

18. Include Blade directive
    
    
    Livewire Demo
    
    
    @livewireAssets
    
    
    10/26
    

    View Slide

19. Include Blade directive
    
    
    Livewire Demo
    
    
    @livewireAssets
    
    
    10/26
    

    View Slide

20. Create a component
    $ php artisan make:livewire counter
    !
    Files created:
    -> [.../app/Http/Livewire/Counter.php]
    -> [.../resources/views/livewire/counter.blade.php]
    11/26
    

    View Slide

21. The Livewire component
    namespace App\Http\Livewire;
    use Livewire\Component;
    class Counter extends Component
    {
    public function render()
    {
    return view('livewire.counter');
    }
    }
    12/26
    

    View Slide

22. The Livewire view
    
    {{-- The whole world belongs to you --}}
    
    13/26
    

    View Slide

23. Let's add some functionality
    
    +
    -
    {{ $count }}
    
    14/26
    

    View Slide

24. Let's add some functionality
    
    +
    -
    {{ $count }}
    
    14/26
    

    View Slide

25. Let's add some functionality
    
    +
    -
    {{ $count }}
    
    14/26
    

    View Slide

26. Let's add some functionality
    
    +
    -
    {{ $count }}
    
    14/26
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

32. Include the component
    
    
    Livewire Demo
    
    
    
    @livewire('counter')
    
    @livewireAssets
    
    
    16/26
    

    View Slide

33. Include the component
    
    
    Livewire Demo
    
    
    
    @livewire('counter')
    
    @livewireAssets
    
    
    16/26
    

    View Slide

34. !
    Demo Time!
    17/26
    

    View Slide

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

    View Slide

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
    

    View Slide

37. !
    Demo Time!
    20/26
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

42. Q&A with
    Caleb
    25/26
    

    View Slide

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

    View Slide