Tenha um site com sucesso memorável: Laravel e Inertia

Laravel é um dos frameworks PHP de maior sucesso atualmente. A tecnologia se juntou a outras que trouxeram uma verdadeira revolução ao desenvolvimento web com PHP, que trazem o padrão Model View Controller (MVC), ferramenta de comandos Artisan, Mapeamento Objeto Relacional (ORM) Eloquent, além de funcionalidades prontas de autorização, roteamento e cache. Com a adoção da tecnologia Vue pelo Laravel, Vue passou a crescer no mercado de desenvolvimento. Hoje, o Tailwind , outra tecnologia de grande sucesso, também se integra à plataforma, trazendo recursos úteis para o desenvolvimento frontend. Já com Inertia o desenvolvedor passa a ter um menor esforço ao deixar de implementar uma Application Programming Interface (API) para trabalhar com Single Page Applications (SPA) ou aplicação de uma página só, em Vue , React ou Svelte no Laravel. A experiência do usuário costuma ser melhor em uma SPA. Pode também dispensar o desenvolvimento de um aplicativo nativo para celular, por exemplo.

Outra vantagem é a possibilidade do uso da tecnologia de Server Side Rendering (SSR), com isso o HTML é renderizado no servidor. A SSR diminui os problemas com as páginas SPA que renderizam no cliente. As perdas com falta de indexação de conteúdo pelos serviços de busca é uma queixa que se destaca em relação à frameworks que implementam essa tecnologia. A SPA pode ser mais confortável para o usuário, por se comportar como uma aplicação desktop rodando na web, mas ela precisa encontrada para que seja útil, de alguma forma. A indexação é a chave do sucesso. Quando combinada com o uso adequado de palavras chaves e um conteúdo rico – com textos mais completos, bem ilustrados com gráficos, fotos e vídeos, você terá mais chances de ter sucesso.

Com a SPA pode haver maior demora no carregamento inicial do aplicativo, já que o arquivo pode ser bem maior que o usual de outros sites na Internet. Mas a navegação em “diferentes páginas” costuma ser mais rápida por não carregar todo o código HTML repetidamente para cada mudança de página. Cada clique chama um componente que é renderizado quase que instantaneamente.

Você pode usar bancos de dados relacionais como MySQL, MariaDB e PostgreSQL e NoSQL, como MongoDB, CouchDB, Redis, etc. Você ganha a facilidade de lidar com um banco de dados limpo e organizado, sem escrever muito código SQL.

Instale o Laravel no Docker, com isso você evita a implantação de servidores PHP e de banco de dados em seu computador. Você pode usar o WSL 2, no Windows, ou implantar o Docker em outra plataforma. Depois de inicializar o Docker, abra um terminal e entre com o comando curl -s “https://laravel.build/projeto?with=pgsql” | bash. Assim, você já prepara a instalação para usar PosgreSQL, se for o caso. Deixando apenas o nome do seu projeto, sem parâmetro para SGBD, você pode configurar a persistência no arquivo .env, trocando número de portas ou escolhendo um banco.

Agora, acesse o diretório gerado pelo instalador e execute esse comando via terminal – PowerShell, CMD, bash etc.

docker run --rm \
    -u "$(id -u):$(id -g)" \
    -v "$(pwd):/var/www/html" \
    -w /var/www/html \
    laravelsail/php82-composer:latest \
    composer install --ignore-platform-reqs

Para executar comandos no Docker, ao invés de usar os comando para inicializar a aplicação como php artisan serve, você vai passar a usar, por exemplo, o parâmetro -d permite que você interaja com a aplicação pelo mesmo terminal:

./vendor/bin/sail up -d

Caso tenha conflito de portas, você pode ver o nome das portas no arquivo de configuração do Docker – docker-compose.yml. Para Mysql o nome é FORWARD_DB_PORT. Pelo terminal, você pode informar uma outra porta disponível no container, assim, por exemplo:

FORWARD_DB_PORT=4999 ./vendor/bin/sail up -d

Para começar. Você pode instalar o Inertia manualmente ou seguir a recomendação do Laravel e usar procedimentos mais simples para isso, com kits de iniciantes: Breeze & React/Vue ou Laravel Jetstream.

Para instalar o Jetstream:

./vendor/bin/sail composer require laravel/jetstream

Para instalar o Inertia:

./vendor/bin/sail artisan jetstream:install inertia

Para habilitar o Server Side Rendering (SSR) – Renderização do Lado do Servidor:

./vendor/bin/sail artisan jetstream:install inertia --ssr

Para finalizar, instale o npm e faça a migração da base de dados:

./vendor/bin/sail npm install
./vendor/bin/sail npm run build
./vendor/bin/sail artisan migrate

Você pode usar o kit Breeze, Jetstream ou conhecer ambos. Com eles você pode aprender como usar o Blade para montar modelos em Laravel, por exemplo. Pode se habituar a lidar com rotas a partir do diretório routes. Vai também entender como lidar com migrations, proteção CSRF, usar os comandos do Artisan CLI como serve – para inicializar a aplicação, tinker para você interagir com a base de dados, list para mostrar os comandos Artisan CLI, db:seed para preencher a tabela com dados, com o db:show você vê as informações de sua base de dados e o db:table você vê as informações das tabelas, já com o db:wipe você apaga todas as tabelas, views e tipos. Veja aqui:

./vendor/bin/sail artisan list

Personalizar marca. Depois de instalar o Jetstream, agora coloque a marca de seu projeto nas páginas de autenticação e na barra superior do aplicativo. Basta modificar alguns componentes do Jetstream: resources/js/Components/AuthenticationCardLogo.vue, resources/js/Components/ApplicationLogo.vue e resources/js/Components/ApplicationMark.vue. O formato da marca do Jetsream é o svg, caso você queira o aplicativo www.pngtosvg.com é uma opção. Em seguida, execute:

./vendor/bin/sail npm run build

Com Inertia a maioria das rotas passa a ser feita de outra forma. Elas são feitas no lado do servidor, dispensando um roteador Vue ou React. Então, para páginas que não precisem de um controller, com uma página quem somos ou de dúvidas comuns, basta rotear diretamente para um componente pelo método Route::inertia().

Route::inertia('/sobre, "Quem somos')   

Criando páginas com Inertia no Laravel

Com Inertia cada página possui seu próprio controlador e rota e um respectivo componente JavaScript. Com isso é possível recuperar os dados necessários para a respectiva página, dispensando o desenvolvimento de uma API – que costuma ser bastante trabalhosa ao desenvolvedor. Como se não bastasse, todos os dados necessários são recuperados de forma instantânea antes mesmo da página ser renderizada pelo navegador. Nada de avisos como “página sendo carregada”. O resultado é de facilidade para o desenvolvedor e uma melhor experiência para o usuário.

<script setup>
import Layout from './Layout'
import { Head } from '@inertiajs/vue3'

defineProps({ user: Object })
</script>

<template>
  <Layout>
    <Head title="Bem-vindo(a)" />
    <h1>Bem-vindo(a)</h1>
    <p>Olá {{ user.name }}, bem-vindo(a) a nosso primeiro aplicativo Inertia!</p>
  </Layout>
</template>

Dessa página aí em cima, você pode renderizá-la retornando uma resposta do controlador ou rota ao Inertia. No caso, esta página estaria armazenda no Laravel, no arquivo resources/js/Pages/User/Show.vue .

use Inertia\Inertia;

class UserController extends Controller
{
    public function show(User $user)
    {
        return Inertia::render('User/Show', [
          'user' => $user
        ]);
    }
}

Criando Layouts. É uma boa prática criar modelos que possam ser usados no projeto. O conteúdo da página acima é envolvido em um componente, um exemplo de componente: <Layout>. Essa página segue o padrão Vue, não há nada de Inertia nela.

<script setup>
import { Link } from '@inertiajs/vue3'
</script>

<template>
  <main>
    <header>
      <Link href="/">Home</Link>
      <Link href="/about">Sobre</Link>
      <Link href="/contact">Contato</Link>
    </header>
    <article>
      <slot />
    </article>
  </main>
</template>

Layouts persistentes.

<script>
import Layout from './Layout'

export default {
  // Using a render function...
  layout: (h, page) => h(Layout, [page]),

  // Using shorthand syntax...
  layout: Layout,
}
</script>

<script setup>
defineProps({ user: Object })
</script>

<template>
  <H1>Welcome</H1>
  <p>Hello {{ user.name }}, bem-vindo(a) a nosso primeiro aplicativo Inertia!</p>
</template>

Rotas nomeadas. É uma boa prática usar esse recurso do Laravel. Com Inertia você possui duas formas práticas para isso: gerar URLs ou usar a biblioteca Ziggy. Com a instalação dos kits iniciais do Laravel, essa biblioteca já vem implementada.

Inicialmente você pode trabalhar com propriedades das URLs. Neste exemplo, vcoê passa a edit_url e create_url para o componente Users/Index.

class UsersController extends Controller
{
    public function index()
    {
        return Inertia::render('Users/Index', [
            'users' => User::all()->map(function ($user) {
                return [
                    'id' => $user->id,
                    'name' => $user->name,
                    'email' => $user->email,
                    'edit_url' => route('users.edit', $user),
                ];
            }),
            'create_url' => route('users.create'),
        ]);
    }
}

Com o Ziggy no Vue 3, basta usar a $route para implementar as rotas nos modelos. Aqui você ganha em mudanças quase instantâneas de páginas.

app.config.globalProperties.$route = route

<Link :href="$route('users.create')">Criar Usuário</Link>

Formulários. O envio de formulário deve ser interceptado para uma melhor experiência do usuário. Como você pode ver logo abaixo, não é necessária a inspeção dos formulários no lado do cliente.

<script setup>
import { reactive } from 'vue'
import { router } from '@inertiajs/vue3'

const form = reactive({
  first_name: null,
  last_name: null,
  email: null,
})

function submit() {
  router.post('/users', form)
}
</script>

<template>
  <form @submit.prevent="submit">
    <label for="first_name">Nome:</label>
    <input id="first_name" v-model="form.first_name" />
    <label for="last_name">Sobrenome:</label>
    <input id="last_name" v-model="form.last_name" />
    <label for="email">E-mail:</label>
    <input id="email" v-model="form.email" />
    <button type="submit">Enviar</button>
  </form>
</template>

Com Inertia ocorrem processos parecidos como envio de formulários HTML. No caso, o controlador envia uma resposta de redirecionamento, podendo trazer o usuário de voltar ao formulário para corrigir algo. A validação do lado do servidor funciona um pouco diferente. O servidor deixa de enviar o status 422, ao invés disso o controlador redireciona o usuário para o formulário para fazer as devidas correções, como acontece no modo clássico de página HTML. No Laravel, a exibição de erros será exibida automaticamente, então o usuário a página pode fazer as devidas correções no conteúdo do formulário. Use o form helper que vai registrar os erros para o objeto do formulário que faz a solicitação. Caso tenha vários formulários numa mesma página, os dados serão distribuídos para o respectivo objeto do formulário.

<script setup>
import { reactive } from 'vue'
import { router } from '@inertiajs/vue3'

defineProps({ errors: Object })

const form = reactive({
  first_name: null,
  last_name: null,
  email: null,
})

function submit() {
  router.post('/users', form)
}
</script>

<template>
  <form @submit.prevent="submit">
    <label for="first_name">First name:</label>
    <input id="first_name" v-model="form.first_name" />
    <div v-if="errors.first_name">{{ errors.first_name }}</div>
    <label for="last_name">Last name:</label>
    <input id="last_name" v-model="form.last_name" />
    <div v-if="errors.last_name">{{ errors.last_name }}</div>
    <label for="email">Email:</label>
    <input id="email" v-model="form.email" />
    <div v-if="errors.email">{{ errors.email }}</div>
    <button type="submit">Submit</button>
  </form>
</template>

class UsersController extends Controller
{
    public function index()
    {
        return Inertia::render('Users/Index', [
          'users' => User::all(),
        ]);
    }

    public function store(Request $request)
    {
        User::create($request->validate([
          'first_name' => ['required', 'max:50'],
          'last_name' => ['required', 'max:50'],
          'email' => ['required', 'max:50', 'email'],
        ]));

        return to_route('users.index');
    }
}

Roteamento. As rotas ficam no servidor com a implementação simplificada graças ao trabalho da biblioteca Ziggy. Quando você não precisa de um método no Controller, com em páginas sobre, dúvidas frequentes, as rotas podem ser apontadas diretamente para um componente pelo método Route::inertia() .

Route::inertia('/sobre', 'Sobre');

Rotas nomeadas. Para usar rotas nomeadas no lado do cliente, há duas opções. A primeira é gerar URLs no lado do servidor e incluí-los como adereços. Aqui, a gente passa o edit_url e create+url para o componente Users/Index. Mas, com o Laravel o Ziggy pode fazer todo o trabalho. Ao usar um dos kits iniciais do Laravel¸ Ziggy já estará implementado, fazendo esse serviço para você.

Se você usa o Vue, disponibilize essa função para a propriedade $route para que você possa usá-lo nos seus modelos.

Vue 3
app.config.globalProperties.$route = route 

<Link :href="$route('users.create')"> Criar usuário</Link>