$30 off During Our Annual Pro Sale. View Details »

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

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

Christian Leo-Pernold

September 19, 2019
Tweet

More Decks by Christian Leo-Pernold

Other Decks in Programming

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