Forem: Arifin

Does anyone knows how to debug Volt component in Laravel using vscode?

Arifin — Sat, 19 Oct 2024 08:34:46 +0000

I'm currently stuck in how to debug logic that is written inside a volt component. I use vscode and xdebug, setting up a breakpoint in regular PHP file is easy (thanks for all the maintainer). But it's not available on PHP logic written in volt component .blade.php.

On regular laravel class:

On volt component, breakpoint is not available:

Inheritance in Go

Arifin — Sun, 13 Oct 2024 11:39:37 +0000

Go is not an object oriented language. However, you could still get the benefit of OOP by using different approach provided by Go language. This article talks about how you can "inherit" behavior from one type to another in Go.

Embedding

In Go, to automatically implement the methods and properties of one type to another is called "embedding". Look at the following code:

type Greeter struct {
    Style string
}

func (g *Greeter) Greet(name string) string {
    return fmt.Sprintf("%s, %s", g.Style, name)
}

type CustomerService struct {
    Greeter // embed Greeter in CustomerService
}

On the code above, type CustomerService "embed" type Greeter into it. By doing that, instance of CustomerService automatically has method Greet defined on Greeter.

c := CustomerService{}
c.Style = "Halo"
greeting := c.Greet("John") // "Halo, John"

Embedding multiple types

In OOP, you are allowed to inherit a class from only one parent. In go, you can embed multiple types.

type Greeter struct {
    Style string
}

func (g *Greeter) Greet(name string) string {
    return fmt.Sprintf("%s, %s", g.Style, name)
}

type Helper struct {}

func (h *Helper) Help() string {
    return "I'm here to help"
}

type CustomerService struct {
    Greeter
    Helper
}

However, you have to make sure there is no overlapping methods between the types that you embed. Otherwise, Go will gives you "ambigous selector" error and won't compile.

type Greeter struct {}

func (g *Greeter) Greet(name string) string {
    return fmt.Sprintf("%s, %s", g.Style, name)
}

type Helper struct {}

// second Greet method is defined in Helper.
// type that embed both Greeter and Helper
// wouldn't be able to call `Greet`
func (h *Helper) Greet(name string) string {
    return fmt.Sprintf("Hello, %s", name)
}

type CustomerService struct {
    Greeter
    Helper
}

func main() {
    c := CustomerService{}
    fmt.Println(c.Greet("John")) // ambiguous selector c.Greet
}

Conclusion

While go is not an OOP language, you still can get the benefit of inheritance using the "embedding" technique.

Laravel and NextJs

Arifin — Fri, 13 Sep 2024 08:54:30 +0000

Laravel is a great framework based on PHP to build a web application. It gives almost everything you’ll ever need to build a web app. When it comes to backend implementation, you’ll rarely find Laravel doesn’t cover your use case.

When Laravel is great for backend development, it is not built for front end optimization in mind. The way you show the UI to your user is through enhanced traditional PHP rendering named blade, and lately, Livewire.

Rendering the web page using Livewire is a great developer experience. But let’s face it, modern web application demands more than that. A dynamic, fast, and efficient web page is now something that your user expect. Based on my experience, you can’t achieve that bleeding edge experience with Livewire.

Laravel put Vue in it’s official documentation for front end Engine. Vue is great to develop front end web application and it covers what you can’t do with Laravel alone. But application that is built with Vue is not optimized for SEO because it requires browser to dynamically render the page using Javascript code. On the other hand, all the code that you compile for the whole app will be sent to the client, eventhough user probably don’t need that. Often results in a bulky javascript code that is included even in a simple page that don’t really need it.

Next.js comes to solve that problem. It tries to gives you the capability of both world: rendering the page on your server while also gives dynamic interaction to the user. They call it: partial rendering.

With partial rendering, Next.js intelligently decide which part of the code should be sent to the client for dynamic interaction and which part of the code should stay and run on the server to generate the end results of the response (the HTML doc).

It results on significantly more performant web application because now all the needed data can be populated on the server - reducing the network roundtrip between client and server significantly. It also improves the SEO because now the crawler will immediately get the content of your page without having to run all the javascript first - bringing back the old wise server generated content.

It’s a clever solution to the current gap between server rendered content and browser dynamic reactive interaction in the web development.

Next js developer said that partial rendering is still on the experiment, but they’re confident that in the near future this should be the default way of building the web app.

Back to Laravel. To optimize the SEO score, you might want to render part of your web page on the server using blade (or Livewire), and write the other part using Vue to give dynamic experience to user. Based on my experience, you’ll end up with mixing messy incosistent structure on the code. You’ll try to maintain some route on blade and some others on Vue. Resulting in bad development experience and less maintainable project.

I love Next.js, but I also don’t want to leave the powerful feature and great experience that Laravel offers on backend development.

I’m currently still exploring how the community can utilize the greatness of both world.

My first post on dev.to

Arifin — Fri, 13 Sep 2024 08:32:26 +0000

I'm currently looking for the best blogging platform that can satisfy the following needs:

Syntax highlight, because most of my post would be related to programming.
Simple and beautiful appearance.
Help me getting the audience.

I tried substack but don't find a built in syntax highlighting feature. Let's see if dev.to has it

'use client';

// This is a code block for javascript extension
// Using a simple react component as the example

export default function Page() {
  return (
    <h1>Hi there, welcome to my blog</h1>
  )
}

Hmm, looks great so far.

Ok, I think I'll use dev.to as my main blog platform.