Probably every backend developer had to face the frontend. I am sure that this interaction did not always end without mental trauma. However, today, thanks to Full Stack frameworks, we can forget about this headache, because we have the opportunity to describe and generate a frontend on the PHP side.

2. Прелюдия

3. Какой фрэймворк выбрать?
Front-end
?

4. ЧтотакоеFullStackFramework?Какиеунегодолжныбытьвозможности?
Какиепроблемыондолженрешать?
FullStackFramework

5. Однакодоваябаза
Что такое Full Stack Framework? Какие у него должны быть возможности?
Какие проблемы он должен решать?
Full Stack Framework

6. АвтономныйAJAX‍
Однакодоваябаза
Что такое Full Stack Framework? Какие у него должны быть возможности?
Какие проблемы он должен решать?
Full Stack Framework

7. МутацияDOM
АвтономныйAJAX‍
Однакодоваябаза
Что такое Full Stack Framework? Какие у него должны быть возможности?
Какие проблемы он должен решать?
Full Stack Framework

8. СовместимостьсSEO
РендерингHTML
МутацияDOM
АвтономныйAJAX‍
Однакодоваябаза
ЧтотакоеFullStackFramework?Какиеунегодолжныбытьвозможности?
Какиепроблемыондолженрешать?
FullStackFramework

9. Livewire is awesome at building front-end
interactivity without writing any
JavaScript at all. It’s completely changed
the way I write and think about web apps.
Решение
Laravel Livewire

10. Vue Blade
If Vue and Blade had a baby, it would be a jellyfish
Livewire: что за зверь?

11. Bringing simplicity, joy, and order to web
development
The автор
Hi, I’m Caleb. ‍♂ ️I left my day job in January,
2019 to pursue open source. Since then,
I’ve built Laravel Livewire, AlpineJS, and a
bunch of other stuff. My mission is to make
web development as productive and joyful
as possible. That’s why I build and teach
the things I do. That’s what drives me every
day. Oh, and I’m also severely addicted
to fly fishing.

12. Bringing simplicity, joy, and order to web
development
The автор
Hi, I’m Caleb. ‍♂ ️I left my day job in January,
2019 to pursue open source. Since then,
I’ve built Laravel Livewire, AlpineJS, and a
bunch of other stuff. My mission is to make
web development as productive and joyful
as possible. That’s why I build and teach
the things I do. That’s what drives me every
day. Oh, and I’m also severely addicted
to fly fishing.

13. Good-Hearted Folks Sponsorware
Фаза 2 Фаза 3
Фаза 1
Screencasts
How He Did Hit $100k/yr On GitHub Sponsors! ️
Спонсирование

14. УстановкаLivewire
composerrequirelivewire/livewire

15. УстановкаLivewire
//resources/views/layout.blade.php
...
</ >
< >
...
</ >
</ >
head
body
body
html
1
2
3
4
5
6
7
8
9
0
10
11
12

16. УстановкаLivewire
//resources/views/layout.blade.php
...
</ >
< >
...
</ >
</ >
@livewireStyles
@livewireScripts
head
body
body
html
1
2
3
4
5
6
7
8
9
0
10
11
12

17. Контакт

18. Демонстрация
Счётчик

19. Создание компонента
// app/Http/Livewire/Counter.php
livewire.counter
namespace
use
App Http Livewire
Livewire Component
;
;
{
()
{
view(' ');
}
}
class extends
public function
return
Counter Component
render
1
2
3
4
5
6
7
8
9
0
10
11
12
//resources/views
/livewire/counter.blade.php
< >
...
</ >
div
div
1
2
3
4
5
6
7
8
9
0
10
11
12

20. Реализация счётчика
// app/Http/Livewire/Counter.php
// ...
// ...
class extends
public
public function
{
$ = ;
()
{
$this-> ++;
}
}
Counter Component
count 0
count
increment
1
2
3
4
5
6
7
8
9
0
10
11
12
//resources/views
/livewire/counter.blade.php
text-align: center
increment
< =" ">
<
=" "
> </ >
< > </ >
</ >
div
button
button
h1 h1
div
style
wire:click
+
{{ $count }}
1
2
3
4
5
6
7
8
9
0
10
11
12

21. Клиент
Сервер
Графическая демонстрация работы компонента
Компонент: счётчик
<h1>1</h1>
{ count: 1 } { count: 1 }
<h1>2</h1>
{ count: 2 }
первоначальный запрос последующий запрос
первый визит клик на кнопку “+”

22. Клиент
Сервер
Графическая демонстрация работы компонента
Компонент: счётчик
<h1>1</h1>
{ count: 1 } { count: 1 }
<h1>2</h1>
{ count: 2 }
первоначальный запрос последующий запрос
первый визит клик на кнопку “+”

23. Клиент
Сервер
Графическая демонстрация работы компонента
Компонент: счётчик
<h1>1</h1>
{ count: 1 } { count: 1 }
<h1>2</h1>
{ count: 2 }
первоначальный запрос последующий запрос
первый визит клик на кнопку “+”

24. Обычные возможности

25. Обычные возможности
FormValidation
Events
Components
LifecycleHooks
Actions
DataBinding

26. < >
</ >
div
div
1
2
3
4
5
6
class extends
User Component
{
}
1
2
3
4
Связывание данных
Свойства компонентов

27. < >
</ >
div
div
< > </ >
h1 h1
{{ $first_name }}
1
2
3
4
5
6
class extends
User Component
{
}
public $ ;
first_name
1
2
3
4
Однонаправленное связывание данных
Свойства компонентов

28. < >
< > </ >
</ >
div
h1 h1
div
< =" " =" ">
input wire:model type
first_name text
{{ $first_name }}
1
2
3
4
5
6
class extends
User Component
{
}
public $ ;
first_name
1
2
3
4
Двунаправленное связывание данных
Свойства компонентов

29. class extends
UserComponent Component
{
}
1
2
3
4
5
6
7
8
9
10
11
12
13
Связывание данных: модель
Свойства компонентов

30. class extends
UserComponent Component
{
}
public User $ ;
user
1
2
3
4
5
6
7
8
9
10
11
12
13
Связывание данных: модель
Свойства компонентов

31. class extends
public
UserComponent Component
User
{
$ ;
([
}
}
user
public function save
validate
save
()
{
$this->
' ' => ' '
,
' ' => ' '
,
];
$this-> -> ();
user.first_name required|string
user.last_name required|string
user
1
2
3
4
5
6
7
8
9
10
11
12
13
Связывание данных: модель
Свойства компонентов

32. class extends
public
public function
UserComponent Component
User
{
()
{
$this-> ([
' ' => ' '
,
' ' => ' '
,
];
}
}
$ ;
$this-> -> ();
user
user
save
validate
user.first_name
user.last_name
required|string
required|string
save
1
2
3
4
5
6
7
8
9
10
11
12
13
Связывание данных: модель
Свойства компонентов

33. < =" ">
< =" "> </ >
</ >
form
button button
form
wire:submit.prevent
type
save
submit Save
1
2
3
4
5
6
7
8
9
10
11
12
13
Связывание данных: модель и представление
Свойства компонентов

34. < =" ">
< =" "> </ >
</ >
form
button button
form
wire:submit.prevent
type
save
submit
< =" " =" ">
< =" " =" ">
input
input
type wire:model
type wire:model
text user.first_name
text user.last_name
Save
1
2
3
4
5
6
7
8
9
10
11
12
13
Связывание данных: модель и представление
Свойства компонентов

35. Плюсы и минусы
Связывание данных
клёвовыглядит
несложно
режимlive

36. Плюсы и минусы
Связывание данных

37. Связывание данных: debounce
Свойства компонентов
150 мс
Клиент Сервер

38. <input type="text" ="name">
wire:model.debounce.500ms
1
2
3
4
Связывание данных: debounce
Свойства компонентов
500 мс
Клиент Сервер

39. Связывание данных: lazy
Свойства компонентов
change
Клиент Сервер

40. <input type="text" ="name">
wire:model.lazy
1
2
3
4
Связывание данных: lazy
Свойства компонентов
unfocus
Клиент Сервер

41. Связывание данных: defer
Свойства компонентов
defer
Клиент Сервер

42. <input type="text" ="name">
<button >Save</button>
wire:model.defer
wire:click=" "
save
1
2
3
4
Связывание данных: defer
Свойства компонентов
defer
Клиент Сервер

43. <input type="text" ="name">
<button >Save</button>
wire:model.defer
wire:click=" "
save
1
2
3
4
Связывание данных: defer
Свойства компонентов
save
2 действия в одном запросе
Клиент Сервер

44. Реакция на взаимодействие со страницей
Действия
wire:submit
wire:keydown
wire:click
ACTION

45. Действие: click
< >
< =" ">
</ >
</ >
div
button
button
div
wire:click like
Like
1
2
3
4
5
6
7
8
9
0
10
11
12
class extends
public
public function
addLikeBy
ShowPost Component
Post
{
$ ;
()
{
$this->
-> ( ()-> ());
}
}
post
post
like
auth user
1
2
3
4
5
6
7
8
9
0
10
11
12

46. Действие: click
< >
< >
</ >
</ >
div
button
button
div
wire:click=" "
like
Like
1
2
3
4
5
6
7
8
9
0
10
11
12
class extends
public
ShowPost Component
Post
{
$ ;
$this->
-> ( ()-> ());
}
()
{
}
post
post
public function like
addLikeBy auth user
1
2
3
4
5
6
7
8
9
0
10
11
12

47. Действие с параметрами
< =" ">
</ >
button
button
wire:click like({{ $post->id }})
Like
1
2
3
public function ($ ) { ... }
like id
public function
public function
public function
like
like
like
( $ ) { ... }
( $ , $ ) { ... }
( $ , $ ) { ... }
Post
LikeService
LikeService Post
post
service id
service post
1
2
3
4
5
6
7
8

48. Действие с параметрами
< =" ">
</ >
button
button
wire:click like({{ $post->id }})
Like
1
2
3
public function
public function
public function
( $ ) { ... }
like
like
like
($ ) { ... }
( $ , $ ) { ... }
( $ , $ ) { ... }
id
service id
service post
public function like Post post
LikeService
LikeService Post
1
2
3
4
5
6
7
8

49. Действие с параметрами
< =" ">
</ >
button
button
wire:click like({{ $post->id }})
Like
1
2
3
public function
public function
public function
( $ , $ ) { ... }
like
like
like
($ ) { ... }
( $ ) { ... }
( $ , $ ) { ... }
id
post
service post
Post
LikeService Post
public function like LikeService service id
1
2
3
4
5
6
7
8

50. Действие с параметрами
< =" ">
</ >
button
button
wire:click like({{ $post->id }})
Like
1
2
3
public function
public function
public function
( $ , $ ) { ... }
like
like
like
($ ) { ... }
( $ ) { ... }
( $ , $ ) { ... }
id
post
service id
Post
LikeService
public function like LikeService Post
service post
1
2
3
4
5
6
7
8

51. Действие Описание
Public Launch March 2018
$refresh
$set('property', value)
$toggle('property')
$emit('event', ...params)
$event
рендеринг компонента
обновление свойства
переключатель boolean
запуск события
пойманное события
Куда в PHP без магии?🪄
Магические действия

52. Демонстрация
To-Do List

53. изшаблона
< =" ">
button wire:click $emit('liked')
Методы отправки
События

54. изшаблона
< =" ">
button wire:click $emit('liked')
Методы отправки
События
изкомпонента
$this-> (' ');
emit liked

55. из JavaScript
< > </ >
script script
Livewire.emit('liked')
из шаблона
< =" ">
button wire:click $emit('liked')
Методы отправки
События
из компонента
$this-> (' ');
emit liked

56. из JavaScript
< > </ >
script script
Livewire.emit('liked')
из шаблона
< =" ">
button wire:click $emit('liked', {{ $post->id }})
Методы отправки
События
из компонента
$this-> (' ', $ -> );
emit liked post id

57. Обработка события
class extends
Post Component
{
}
1
2
3
4
5
6
7
8
9
0
10
11
12

58. Обработка события
class extends
{
}
Post Component
public $ ;
likes
1
2
3
4
5
6
7
8
9
0
10
11
12

59. Обработка события
class extends
{
}
Post Component
public
public function
$ ;
( $ )
{
$this-> = $ -> ()-> ();
}
likes
post
likes post
refresh
likes count
Post
1
2
3
4
5
6
7
8
9
0
10
11
12

60. Обработка события
class extends
public
public function
{
$ ;
( $ )
{
$this-> = $ -> ()-> ();
}
}
Post Component
Post
refresh
likes count
likes
post
likes post
protected $ = [' ' => ' '];
listeners like refresh
1
2
3
4
5
6
7
8
9
0
10
11
12

61. Демонстрация
To-Do List: интеграция событий

62. Продвинутые возможности

63. Socket Friendly
Pagination
Authorization
File Uploads
Продвинутые возможности

64. 1
2
3
4
5
6
7
8
9
10
11
12
13
Активация турбо-ядерной фичи в компоненте
Загрузка файлов

65. use LivewireWithFileUploads;
class FileUpload extends Component
{
use WithFileUploads;
}
use
use
Livewire WithFileUploads
WithFileUploads
;
;
class extends
FileUpload Component
{
}
1
2
3
4
5
6
7
8
9
10
11
12
13
Активация турбо-ядерной фичи в компоненте
Загрузка файлов

66. use LivewireWithFileUploads;
class FileUpload extends Component
{
use WithFileUploads;
public $file;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
use
use
Livewire WithFileUploads
WithFileUploads
;
$ ;
class extends
FileUpload Component
{
;
}
public file
1
2
3
4
5
6
7
8
9
10
11
12
13
Активация турбо-ядерной фичи в компоненте
Загрузка файлов

67. use LivewireWithFileUploads;
class FileUpload extends Component
{
use WithFileUploads;
public $file;
public function save()
{
$this->file->store('files');
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
use
use
Livewire WithFileUploads
WithFileUploads
file
file
;
{
;
$ ;
()
{
$this-> -> (' ');
}
}
class extends
public
public function
FileUpload Component
files
save
store
1
2
3
4
5
6
7
8
9
10
11
12
13
Активация турбо-ядерной фичи в компоненте
Загрузка файлов

68. <form wire:submit.prevent="save">
<input type="file" wire:model="file">
<button type="submit">Save File</button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
< =" ">
< =" "> </ >
</ >
form
button button
form
Save File
wire:submit.prevent
type
save
submit
< =" " =" ">
input type wire:model
file file
1
2
3
4
5
6
7
8
9
10
11
12
13
Активация турбо-ядерной фичи в представлении
Загрузка файлов

69. <form wire:submit.prevent="save">
<input type="file" wire:model="file">
@error('file') <span class="error">{{ $message }}</span> @enderror
<button type="submit">Save File</button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
< =" ">
< =" " =" ">
< =" "> </ >
< =" "> </ >
</ >
form
input
span span
button button
form
wire:submit.prevent
type wire:model
class
type
save
file file
error
submit
@error('file') {{ $message }} @enderror
Save File
1
2
3
4
5
6
7
8
9
10
11
12
13
Активация турбо-ядерной фичи в представлении
Загрузка файлов

70. class FileUpload extends Component
{
}
1
2
3
4
5
6
7
8
9
10
11
12
13
class extends
FileUpload Component
{
}
1
2
3
4
5
6
7
8
9
10
11
12
13
Активация турбо-ядерной фичи в компоненте
Загрузка файлов

71. use LivewireWithFileUploads;
class FileUpload extends Component
{
use WithFileUploads;
public $file;
public function save()
{
$this->file->store('files');
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
use
use
Livewire WithFileUploads
WithFileUploads
file
;
{
;
$ ;
}
class extends
public
FileUpload Component
()
{
$this-> -> (' ');
}
file files
public function save
store
1
2
3
4
5
6
7
8
9
10
11
12
13
Активация турбо-ядерной фичи в компоненте
Загрузка файлов

72. class FileUpload extends Component
{
use WithFileUploads;
public function save()
{
$this->validate([
'file' => 'required|in:pdf|max:10240',
]);
$this->file->store('files');
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
class extends
public function
FileUpload Component
{
;
()
{
$this-> -> (' ');
}
}
use WithFileUploads
save
file store
file required|in:pdf|max:10240
$this-> ([
' ' => ' ',
]);
validate
files
1
2
3
4
5
6
7
8
9
10
11
12
13
Валидация файла перед сохранением
Загрузка файлов

73. 1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13
Активация турбо-ядерной фичи в представлении
Загрузка файлов

74. <form wire:submit.prevent="save">
<button type="submit">Save File</button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
< =" ">
< =" "> </ >
</ >
form
button button
form
wire:submit.prevent
type
save
submit Save File
1
2
3
4
5
6
7
8
9
10
11
12
13
Активация турбо-ядерной фичи в представлении
Загрузка файлов

75. <form wire:submit.prevent="save">
<input type="file" wire:model="file">
@error('file') <span class="error">{{ $message }}</span> @enderror
<button type="submit">Save File</button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
< =" ">
< =" " ="file">
< =" "> </ >
</ >
form
input
button button
form
Save File
wire:submit.prevent
type wire:model
type
save
file
submit
@error('file') {{ $message }} @enderror
< =" "> </ >
span span
class error
1
2
3
4
5
6
7
8
9
10
11
12
13
Активация турбо-ядерной фичи в представлении
Загрузка файлов

76. Что под капотом?
Загрузка файлов

77. 1. Запрос на сервер
за временным URL для загрузки
Что под капотом?
Загрузка файлов

78. 1. Запрос на сервер
за временным URL для загрузки
2. Загрузка файла по URL,
сохранение во временном каталоге
Что под капотом?
Загрузка файлов

79. <form wire:submit.prevent="save">
@if ($file)
File Preview:
<a href="{{ $file->temporaryUrl() }}">
@endif
<input type="file" wire:model="file">
@error('file') <span class="error">{{ $message }}</span> @enderror
<button type="submit">Save File</button>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
< =" ">
< =" " ="file">
< =" "> </ >
< =" "> </ >
</ >
form
input
span span
button button
form
@error('file') {{ $message }} @enderror
Save File
wire:submit.prevent
type wire:model
class
type
save
file
error
submit
@if ($file)
File Preview:
@endif
< =" ">
a href {{ $file->temporaryUrl() }}
1
2
3
4
5
6
7
8
9
10
11
12
13
Отображение ссылки на временный файл
Загрузка файлов

80. 1. Запрос на сервер
за временным URL для загрузки
2. Загрузка файла по URL,
сохранение во временном каталоге
3. Передача информации о файле в
соответствующее публичное поле компонента
Что под капотом?
Загрузка файлов

81. 1. Запрос на сервер
за временным URL для загрузки
2. Загрузка файла по URL,
сохранение во временном каталоге
3. Передача информации о файле в
соответствующее публичное поле компонента
4. Файл готов для дополнительной
валидации и сохранения
Что под капотом?
Загрузка файлов

82. Демонстрация
Галерея

83. Минусы. Сложности
Загрузка файлов
#1. Отсутствие валидации на стороне фронта ️
️

84. Минусы. Сложности
Загрузка файлов
#2. Невозможность работы с моделью

85. use LivewireWithFileUploads;
class FileUpload extends Component
{
use WithFileUploads;
public Report $report; // ->file
}
1
2
3
4
5
6
7
8
9
10
11
12
13
use
use
Livewire WithFileUploads
WithFileUploads
;
{
;
}
class extends
FileUpload Component
$ ;
public report
Report // ->file
1
2
3
4
5
6
7
8
9
10
11
12
13
Проблема: невозможность работы с моделью
Загрузка файлов

86. use LivewireWithFileUploads;
class FileUpload extends Component
{
use WithFileUploads;
public Report $report; // ->file
public function save()
{
$this->report->file->store('files'); // не пашет
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
use
use
Livewire WithFileUploads
WithFileUploads
;
{
;
}
class extends
FileUpload Component
$ ;
()
{
$this-> -> -> (' ');
}
public
public function
report
report file
Report // ->file
files // не пашет
save
store
1
2
3
4
5
6
7
8
9
10
11
12
13
Проблема: невозможность работы с моделью
Загрузка файлов

87. Best Practices

88. #1. Архитектурный подход
Best Practices
Service Repository Model
Controller

89. #1. Архитектурный подход
Best Practices
Service Repository Model
Controller

90. #1. Архитектурный подход
Best Practices
Service Repository Model
Controller

91. #1. Архитектурный подход
Best Practices
Service Repository Model
Component

92. #1. Архитектурный подход
Best Practices
Service Repository Model
API

93. Демонстрация
To-Do List на паттерне Repository-Service

94. #2. Компоненты blade
Best Practices
Don'trepeatyourself

95. #2. Компоненты blade
Best Practices
<
=" "
=" "
=" "
=" "
="
"
=" "
/>
x-input
name
type
placeholder
help
required
:label
:grid
email
email
default
Input information text.
[
'class' => 'custom-label-class',
'text' => 'Email Address',
]
['col-sm-3', 'col-sm-9']
1
2
3
4
5
6
7
8
9
10
11
12
13

96. #2. Компоненты blade
Best Practices
< =" ">
< =" ">
</ >
< =" ">
< =" " =" " =" "
=" " =" " =" ">
< =" " =" ">
</ >
< =" ">
</ >
</ >
</ >
div
label
label
div
input
small
small
div
div
div
div
class
class
class
class type name
placeholder required id
id class
class
form-group form-row
col-sm-3 custom-label-class" for="input-email
col-sm-9
form-control is-valid email email
default required input-email
help-email form-text text-muted
valid-feedback
Email Address
Input information text.
Looks good!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

97. #2. Компоненты blade
Best Practices
<
=" "
=" "
=" "
=" "
="
"
=" "
/>
x-input
=" "
wire:model email
name
type
placeholder
help
required
:label
:grid
email
email
default
Input information text.
[
'class' => 'custom-label-class',
'text' => 'Email Address',
]
['col-sm-3', 'col-sm-9']
1
2
3
4
5
6
7
8
9
10
11
12
13

98. #2. Компоненты blade: идеальная схема
Best Practices
x-input
x-checkbox
x-select
x-textarea
x-datetime
...

99. #2. Компоненты blade: идеальная схема
Best Practices
x-input
x-checkbox
x-select
x-textarea
x-datetime
...

100. #2. Компоненты blade: идеальная схема
Best Practices
x-input
x-checkbox
x-select
x-textarea
x-datetime
...
x-input
x-checkbox
x-select
x-textarea
x-datetime
...

101. #2. Компоненты blade: идеальная схема
Best Practices

102. #2. Компоненты blade: идеальная схема
Best Practices

103. #2. Компоненты blade: идеальная схема
Best Practices
BLADE
components
=

104. Альтернатива

105. inertia
Альтернатива

106. LiveWire VS Inertia
Альтернатива
Model Controller View Client
LiveWire
DB

107. LiveWire VS Inertia
Альтернатива
Model Controller View Client
LiveWire
DB
Model Controller
inertia
Vue
React
Angular
Client
DB

108. LiveWire VS Inertia
Альтернатива

109. Бонус

110. Событие
Интеграция с сокетами
class implements
public function
{
, , ;
()
{
return (' ');
}
}
Event ShouldBroadcast
Dispatchable InteractsWithSockets SerializesModels
Channel
use
new
broadcastOn
channel
1
2
3
4
5
6
7
8
9
10
11
12
13

111. Событие
Интеграция с сокетами
class extends
public
protected
public function
{
$ = false;
$ = [' ' => ' '];
()
{
$this-> = true;
}
}
Handler Component
eventHandled
listeners
eventHandled
echo:channel,Event handle
handle
1
2
3
4
5
6
7
8
9
10
11
12
13

112. Демонстрация
Игра