Livewire & Alpine web app redesign from the ground

I am React and Laravel web app developer. I have decided to re-setup or re-design one of my web apps with Livewire and Alpine from the ground. during this conversion, I share with you the sense, problems, needs and so on.
the web app is multilingual (en and ar), has complicated model relations with modal, Ajax and…

3/25/2020

  1. navigating between view and class of a component is frustrating, especially when the livewire components go high. it is better a folder named livewire with two subfolder class and view.

  2. in modal there is other colors of a product and by click, on each color, I want to add a class (isactive) to that clicked other color, it was what I did in Alpine by @click and :class instead of addClass and removeClass in jquery:

            <div x-data="{id:null}">
              @if(isset($product))
                @foreach($product->othercolors as $color)
                  <img wire:click="theOtherColor({{ $color->id }})" @click="id = {{ $color->id }}"  **:class="{'isactive': id === {{ $color->id }}}"** src="{{ asset('images/colors/' . $color->image) }}">
                @endforeach
              @endif
            </div>

3/24/2020

  1. I use IntelliJ and a dedicated plugin to cover livewire seems is a need.
  2. in modal section the x-data, x-show is fantastic, clear and less jquery.
1 Like