The more I think about this, the more I understand and appreciate the benefits of @laravelphp's Livewire or @elixirphoenix's LiveView.

Let's think of some use cases and think this through.

1/13 https://twitter.com/lukasender/status/1310142489081319425

I mostly write JavaScript/Typescript and React these days. So I'll use this for my examples.

2/13

A typical app/dynamic website has a lot of React components.

For interactivity, the client needs to load these components.

3/13

Now, if everything you see on the page is rendered by React, then the bundle needs to contain all React components you see.

Including the code you need for interactivity and dynamic features.

Think of click handlers, input handlers, libs to make requests, charts, etc.

4/13

We serve all this code in one or more client bundles.

Bigger sites/apps -> more components -> bigger bundles (more bundles if code-splitting is used).

5/13

If you require additional data from the server, you probably fetch data via an API.

Let's say we're talking about a search input and want to display suggestions and the search results.

6/13

You detect input changes, fetch data from a REST or GraphQL API.

The response contains your requested results and *probably* more than you need (that's typically better for GraphQL APIs as you can easily describe in what data you're interested).

7/13

The JSON response needs to be parsed, processed by your app and eventually gets rendered by your React components.

Nice This works well.

However, there's quite a lot going on in a client and you need an extra API.

There is a different way: Livewire and LiveView.

8/13

Laravel Livewire does it a little bit differently.

Instead of fetching JSON from an API and then processing the data in the client, it:

- makes a request and sends data to the server
- the *server* re-renders the component and responds with the new HTML
- DOM is updated

9/13

Phoenix Framework's LiveView does things pretty similarly.

But instead of making an AJAX request, it sends data bi-directionally over a websocket connection.

It also does not return complete pre-rendered HTML, but an optimised data structure.

The client then updates DOM

10/13

In all cases we still require JavaScript, but much less so in the last 2!

Sending re-rendered HTML sounds counterintuitive at first ("isn't this bigger than just JSON?").

Maybe, but *only* if the JSON response really just contains what you need. Which it often does not.

11/13

Like mentioned before, LiveView returns an optimised data structure telling the client exactly what to update where.

We also still have an API when using Livewire or LiveView, but we don't have write it ourselves.

Livewire and LiveView takes care of it for us.

12/13

Sounds counterintuitive at first.

But to me, it sounds more and more attractive the more I think about.

Fewer moving parts. Less complexity.

Smaller bundle sizes.

SEO friendly from the beginning (it's fully rendered by a server at first).

Less data transferred overall

13/13

After saying all this

I don't want to say "JavaScript/React is bad".
Writing JS & React components is fun!

Just wanted to think through certain concepts about how to build rich, interactive websites/apps & how to combine different worlds.

#javascript #php #myelixirstatus