Forem: Vittorio Emmermann

One of the fastest dev stacks

Vittorio Emmermann — Thu, 25 Jun 2020 23:09:30 +0000

This topic is maybe a bit subjective. I think this stack is useful for many but not the fastest at all for everybody. I started "programming" now 9 years ago with the language Basic. Since there, I was fascinated by programming for the web. I started learning ASP.NET because I thought the jump from Visual Basic to ASP.NET couldn't be that big. After tinkering around, I found PHP, and I started loving it. Since there, so many things changed but not my personal conviction that a website or software shouldn't be programmed with more effort than needed. So let's come to the point: What's the fastest stack I figured out and why.

Laravel

Laravel is an excellent basement. Backed by PHP, a language with 5 million people behind, millions of packages, and tons of tutorials and examples. With Laravel, you have one of the most active communities out there. And I don't want to focus too much on Laravel itself, rather than that I want to put my focus on the speed thing here. You can use tons of plug-and-play packages for so many use-cases: Billing (Cashier), Queue management (Horizon), Debugging (Debugbar, Telescope), etc. Just take a look at my previous post, "Packages I never wanna miss again". All these packages are not like you know packages from Node or other communities. They're the most time with a rich UI, great support, and excellent stability.

Laravel Schematics / Laravel Blueprint

I have to packages at once here. Both are serving the same target: Code generation for the most frequently created files: Models, Controllers, Migrations. But that's not all: For example, with Laravel Schematics, you can also create a stable database structure and update it on the fly via a beautiful looking UI and relationship management. Just check it out, you can generate CRUD structures with it in minutes.

Tailwind CSS/UI

I work with tailwind since it's on beta. Since the beginning, it got improved day by day. Also, I purchased "Tailwind UI" immediately, and it wasn't a bad investment. With this set of ready to use components, you can create amazing looking UIs in no time. If you need a beautiful UI in no-time: Use TailwindUI!

Laravel Nova

If you just want to solve a small data-driven solution or an admin panel, Laravel Nova is the fastest tool you can choose here for laravel. I think it's because of it's intuitive Resource Scheme but also because of the creation process of a solution with it. You can generate a list with multiple filters, bulk actions, a create-form, detail-views, and so much more in minutes. This is so fast because you can manage the UI completely from the code-side. You don't have to do things in a UI or something.

Livewire

For the frontend, I often used Vue.js. If you asked a 6 months younger version of mine, I would count vue.js here instead of Livewire. But Livewire is killing it in speed points, syntax, and easiness. With Livewire, you don't have to care about so many things. It's directly serverside, so you don't have to stress with double validations and all the annoying stuff. Of course, you have to get warm with it a bit, but after it, it's amazingly easy and fast to work with. Check out our new Livewire VSCode extension if you want to have some helpers in your editor!

Never forget artisan

Just as a small hint here: php artisan is your friend. Use it for code-generation, you'll save time, I promise. For example, I create all my controllers, tests, models, migrations, and generally everything with it. It speeds up your development so great!

Quick external APIs

Often we want to communicate with external APIs to get data from there or post data to it. Many times you don't have a package for it on the market, and also you can't create one for it because you have to hurry. In this case, the fastest way with laravel 7 is the newly introduced Http Facade. Here a small example of a simple API Client class:

<?php
use \Http;
class SomeServiceClient
{
    public function __construct()
    {
        $this->base_url = config('services.some_service.base_url');
        // And some other configs for auth and so on
    }

    public function get($path)
    {
        return Http::get($this->base_url . $path); // Just add the auth things here
    }
    //....

}

Of course, this is just a small example and can be created a bit more extendable. But after all, it works well. (Actually this snipped is not tested)

Queue/Job architecture scaleable

One big part of modern web apps is processing jobs in a queue. For performance, it's so necessary to put time-consuming things to the background. For example, sending an email can take some time sporadically. One case could be when the Mailserver is busy or in maintenance. Also, chaining jobs can help. But let me take the queue topic to a dedicated post.

Deployment: Vapor, Forge and/or Envoyer

In my latest apps, I use vapor quite often. However, sometimes it's not possible because of your architecture or your app is a bit older, and you would have to rewrite all the assets stuff. With vapor, you need do be aware of some architecture things. Maybe also a topic for a dedicated blog post (or perhaps a screencast??)
If you're in the situation that vapor is not suitable for you, just take Forge. It manages your server stuff for you and allows you to take care of the development, and not your servers. Later if you go live, I highly recommend you use envoyer to manage the deployments. The reason is quite apparent: Your users will not recognize the implementation of new lines of code.

I hope these hints are not too basic. I just wanted to share with you my favorite stack for developing things fast. I'm really thinking about starting some screencasts (of course for free) to show you more of my way of work. Let me know what you think about this idea on twitter or mail!

Quick Tip: Creating pretty JSON files with Laravel

Vittorio Emmermann — Mon, 25 May 2020 10:57:57 +0000

Often I had a situation where my Apps had to generate a JSON file. For example, I'd write a CLI App for package development. This package had to write JSON pretty formatted to the generated composer JSON.

Here is a quick hint of how to generate this JSON string nice and smooth with laravel:



$json = Collection::make([
    'name' => 'Test',
    'description' => 'Another awesome laravel package',
    'license' => 'MIT'
  ])->toJson(JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);

This snipped will give you a $json Variable, which you can print to a file without any stress. It's pretty, escaped and with all formattings you need. We work here with Collection, a class from Laravel itself. Before using it you have to import it at the top of your file:



use Illuminate\Support\Collection;

For the example above, see here the output:

That's it for now. With this variable you can print in files like a CloudFront Configuration, a composer.json for code generation or other things devs need for all-day work.

Game-Changer: Laravel Livewire

Vittorio Emmermann — Sun, 24 May 2020 20:39:11 +0000

Just a small thing I want to drop here because I think it's a game-changer: Laravel Livewire

What is Livewire?

To answer it I'll quote the official Homepage:

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.
So in easy words: You can code with it more or less like a JS framework but with PHP. Nice hm? I personally love it. I love this idea so much that I decided to sponsor the project with my company.

When should you use Livewire?

In general, I can say that 99% of my projects are qualified for Livewire. We're mainly creating data-driven web apps, but I can imagine a few types of projects can be solved better with a framework like vue or react. For example, if you want to build something like webflow, Figma, or framer. These kinds of apps are quite massive in the direct interaction at the user-side, so every time an update with the server can be a bit laggy.

But isn't it a step back?

Maybe you think: "Wait, isn't it the idea we had years ago already with turbolinks and all the DOM replacing stuff?"

And I have to say: A small yes but a considerable NO. Let's talk about the yes: The idea to dynamically replace the body or parts of it isn't an idea from 2020, but the way of doing it wasn't very helpful or intuitive. Livewire is not replacing the whole body; it's just calling the backend and receiving a small DOM part, one component, which will be replaced then. This is a technique that is implemented at GitHub by the way. If you checkout your dev-console while tinkering at GitHub, you'll see that, for example, at a search input, the data is not provided via API, but the HTML which has to be displayed is entirely passed to the frontend. Like Livewire is doing it.

My "user-side" App-experiences

Let's talk about our experience with three apps: GitHub, Everhour, and JIRA. You'll see why I'm doing it here.

JIRA

First, my experience with JIRA is that it's sweet from UI, but not really impressive from the performance side. It's sometimes laggy, and sometimes I had bugs that got solved by refreshing the page.

Everhour

We use Everhour for time-tracking and billing our customers at Cierra. After configuring the hourly fees for a project and then went to the reports to create a billing statement, I often had a huge problem that the changed hourly rates for the team member didn't change in the report. I actually lost money with this! And this is just because of wrong API communication. With Livewire, this cannot happen (ok it could, but not so easy).

GitHub

GitHub is fast, relatively bugfree (for me), and all devices are running with it smoothly. Did you try to run JIRA on an old laptop? It's not really glorious.

So which app would you choose if somebody asks you from where to adapt the Tech-Stack? I would say GitHub! And that's the reason why I'm talking about my experiences here.

The SEO aspect

Let's also talk about the SEO thing. Like you maybe already know: Vue.js, especially with vue-router active, is not very SEO friendly without adding SSR, pre-generating HTML, or a prerenderer. With Livewire, you receive SEO-friendly pages without any workaround! And if you want to have a SPA? No problem, Turbolinks can help out. It's integrated with Livewire in no-time.

Just one language

Shout out to all PHPlers there: Didn't you had the dream vue.js would be available in PHP-Syntax? I think I don't have to say more. Livewire is doing it really well. Of course, you have to rethink a bit, and some structures are not available. For example, you'll not be able to nest your components the same way you did it before with vue.js because you don't have the same emit features to parents as you have at vue.js, but it's quite similar!

Fast Programming

With Livewire, I build a full SaaS in 4 working days. No joke! Of course, there are other things to do to launch a SaaS then coding it. But the actual coding part took 4 days for the MVP with 2 CRUD Elements (with create, edit, delete, etc.) with form validation, sweet notifications, profile management, billing, and all this stuff.

With vue.js and, for example, an API solution, I would say I would have to spend at least 2 weeks for the same result.

And if I would continue thinking about it and writing about it, I'm pretty sure that I would find more and more pros for using Livewire. It's fantastic in performance, syntax, programming speed, and it's stable. Ah, and it's actively maintained for a long time, I would say because I know Caleb, the creator of Livewire, a little bit, and he is a guy who does the things he does with continuity and best of all. Thanks for Livewire, @Caleb.