Nova 4.0 is er!

Laravel Nova 3.0 had al veel nuttige functionaliteiten:

• een hele hoop aan premade fields
• een global search
• CRUD integratie
• Lenses 
• Actions
• ...

Maar er zijn ook wel wat pijnpunten die vanuit de community vaak terugkwamen. In 4.0 hebben de Nova developers dan ook laten zien dat ze luisteren naar de community en Nova vooral willen vormen naar de noden van de mensen die het gebruiken.

Een goed voorbeeld hiervan is het gebruik van dependent fields. De mogelijkheid om je fields in een fictieve container te steken die zichtbaar wordt aan de hand van afhankelijke waarden in het formulier.

Tot heden moest je hiervoor een package gebruiken (epartment /nova-dependency-container), een package die alles kon en ook super werkt met 2,5M downloads op de teller. Hieraan was dus zeker te zien dat heel veel mensen dit nodig hadden en ook actief gebruiken.

Deze functionaliteit is nu mee ingewerkt in Laravel Nova 4.0, zodat je backend niet meer afhankelijk hoeft te zijn van deze 3rd party package.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Select::make('Purchase Type', 'type')
    ->options([
        'personal' => 'Personal',
        'gift' => 'Gift',
    ]),

// Recipient field configuration is customized based on purchase type...
Text::make('Recipient')
    ->readonly()
    ->dependsOn(
        ['type'],
        function (Text $field, NovaRequest $request, FormData $formData) {
            if ($formData->type === 'gift') {
                $field->readonly(false)->rules(['required', 'email']);
            }
        }
    ),

 

Laravel-mix

Laravel Nova bestaat ondertussen al een langere tijd en Laravel Mix werd in die tijd nooit geüpdatete, daardoor is er nu een grote inhaalbeweging gedaan van v1 naar v6.

Tailwind 3

In Nova 3.0 wordt nog gebruikt gemaakt van Tailwind CSS 0.6.0, ook hier komt een upgrade: Tailwind CSS 3!

Inertia.JS

Inertia implementeert een nieuwe benadering voor het bouwen van klassieke server-driven web-apps.
Dankzij Inertia wordt het mogelijk om volledig client-side rendered, single page apps te maken zonder veel complexiteit met zich mee te brengen dat meestal wel meekomt met moderne SPA’s . Het doet dit door gebruik te maken van bestaande server-side frameworks.

Inertia heeft geen routing aan de client-side en er is ook geen API voor nodig. Bouw eenvoudig controllers en page views zoals u altijd hebt gedaan!

Not a framework

Inertia is geen framework en het is ook geen vervanging voor uw bestaande framework aan de server- of client-side. Het is eerder ontworpen om met hen samen te werken. Zie Inertia als lijm die de twee verbindt. Inertia doet dit via adapters. Er zijn momenteel drie officiële client-side adapters (React, Vue en Svelte) en twee server-side adapters (Laravel en Rails).

Concreet voorbeeld in Nova 4.0

Het gebruik van Inertia.js zal je vooral merken als je custom tools hebt/gaat maken die gebruik maken van de Vue router.
Nova heeft hierbij dus de Vue router vervangen door Inertia.js. Hiedoor zal je bij de upgrade naar 4.0 en hoger custom tools moeten gaan migraten van Vue routes naar het registreren van Inertia page components en backend routes.

Als voorbeeld hebben we een Nova 3 Vue router registratie:

1
2
3
4
5
6
7
8
9
10
11
// In tool.js...

Nova.booting((Vue, router) => {
  router.addRoutes([
    {
      name: 'sidebar-tool',
      path: '/sidebar-tool',
      component: require('./components/Tool'),
    },
  ])
})

Wanneer we naar Nova 4 upgraden, zal je de tool components moeten registeren als volgt:

1
2
3
4
5
// In tool.js...

Nova.booting((Vue) => {
  Nova.inertia('SidebarTool', require('./component/Tool').default)
})

Wanneer je Vue component geregistreerd is, zal je een server-side route moeten definiëren voor je tool om je component te kunnen renderen:

1
2
3
4
5
6
7
8
9
10
// In je ToolServiceProvider.php...

use Laravel\Nova\Nova;

Nova::router()
    ->group(function ($router) {
        $router->get('sidebar-tool', function ($request) {
            return inertia('SidebarTool');
        });
    });