LiveWire

Hands on

Frontend moderno senza toccare una riga di javascript

26 Novembre 2020

di Alessandro Cappellozza

LiveWire Hands on Frontend moderno senza toccare una riga di javascript 26 Novembre 2020 di Alessandro Cappellozza

LiveWire Hands-on, frontend moderno senza toccare una riga di javascript

By Alessandro Cappellozza

LiveWire Hands-on, frontend moderno senza toccare una riga di javascript

Sappiamo tutti che per avere un frontend al passo coi tempi è necessario fare spesso due progetti uno di frontend e uno backend distinti e specializzati,complicando sia lo sviluppo che il deploy delle applicazioni. Questo nuovo strumento si prefigge di colmare questo gap consentendo di creare componenti "ajax" con il solo PHP; una strada già battuta da altri linguaggi ma con un approccio nuovo già usato da grossi portali, qui lo vedremo pacchettizzato e standardizzato per Laravel. Analizzeremo il principio di funzionamento, cosa mette a disposizione di base, un esempio pratico e dei contesti dove può effettivamente essere utile.

4 years ago
1,168

	php artisan make:model Product --migration
	php artisan make:factory Product
	php artisan migrate:fresh --seed
	php artisan livewire:make Products
	php artisan livewre:make ProductRow
	php artisan livewire:make Notifier

	class MyComponent extends Component
	{
	public $variable;

	public $reference;

	public function action(UpdateAction $action)
	{
	$action->update(
	$this->variable,
	$this->reference
	);
	}

	public function render()
	{
	return view('some.view');
	}
	}

	class UpdateAction
	{
	public function update($variable, $ref)
	{
	Gate::forUser($ref)
	->authorize('updateAction', $ref);

	// Action...
	}
	}

	Route::get('/product/{product}',
	Product::class);

	class Product extends Component
	{
	public $product;

	public function mount(Product $product)
	{
	$this->product= $product;
	}

	public function render()
	{
	return view('product')
	->layout('layout');
	}
	}

	<html>
	<head>
	@livewireStyles
	</head>
	<body class="bg-light">

	<div class="container">

	<div class="py-5 text-center">
	<h2>SPA</h2>
	</div>

	{{ $slot }}

	</div>

	@livewireScripts
	</body>
	</html>

LiveWire

Hands on

COs'è

Punto di vista Backend

Per quelli a cui non piace troppo context switch (?)

Principio di funzionamento

Principio di funzionamento

Esempio Pratico

Live coding

EVENT BUS

ASPETTI CHIAVE

ACTION Delegation

PITFALLS

Ringraziamenti e Riferimenti

APPROFONDIMENTI

Orientamento al componente

Estensibilità ed ECOSISTEMA

SPA

POLLING

POLLING: Chat

Un approccio strutturato: MMVM

LiveWire Hands-on, frontend moderno senza toccare una riga di javascript

LiveWire Hands-on, frontend moderno senza toccare una riga di javascript

Alessandro Cappellozza

	<div wire:poll.250ms>
	..
	</div>

	<div wire:poll="action">
	..
	</div>

	<div wire:poll.keep-alive>
	..
	</div>

	<div wire:poll.1000ms="check">
	Refresh...
	</div>

	class Messages extends Component
	{

	public function check(Messages $messages)
	{
	if($messages->unread()) {
	$this->emit('updateMessages');
	}
	}

	public function render()
	{
	return view('notifier');
	}
	}

LiveWire

Hands on

LiveWire Hands-on, frontend moderno senza toccare una riga di javascript

More from Alessandro Cappellozza