Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Highlights from the Flare codebase (Full Stack Ghent)

Highlights from the Flare codebase (Full Stack Ghent)

Freek Van der Herten

November 13, 2019
Tweet

More Decks by Freek Van der Herten

Other Decks in Programming

Transcript

  1. View Slide

  2. About me
    Freek Van der Herten
    Partner & developer at Spatie
    @freekmurze
    freek.dev
    mailcoach.app
    flareapp.io
    ohdear.app

    View Slide

  3. Open source stats
    ± 250 packages on Packagist
    ± 3,500,000 downloads a month
    ± 50,000,000 total downloads
    spatie.be/open-source/packages

    View Slide

  4. spatie.be/open-source

    View Slide

  5. spatie.be/open-source/postcards

    View Slide

  6. Our address
    SPATIE
    Samberstraat 69D
    BE-2060 Antwerp
    Belgium
    Europe

    View Slide

  7. Highlights from
    the Flare codebase

    View Slide

  8. A way to structure
    a large Laravel app

    View Slide

  9. Take a look at the Flare codebase
    Not a sales talk
    Techniques you can use in your own projects
    Opinionated

    View Slide

  10. Short walkthrough of the UI
    Domains
    Inertia / React / TypeScript

    View Slide

  11. Let's take a look
    at Flare

    View Slide

  12. Using domains

    View Slide

  13. Using domains
    Term taken from DDD
    A sphere of knowledge
    Grouping code
    Larger projects

    View Slide

  14. Refactor to domains
    app/
    ├── Models/
    │ ├── User.php
    │ ├── Team.php
    │ └── Project.php
    ├── Mails/
    │ ├── Welcome.php
    │ ├── InvitedToTeam.php
    │ └── ApiKeyRegenerated.php
    └── Events/
    ├── UserDeleted.php
    └── Project.php

    View Slide

  15. Refactor to domains
    app/
    └── Domain/
    ├── Team
    └── Project

    View Slide

  16. Show me the code

    View Slide

  17. Front end

    View Slide

  18. Front end
    “I strongly believe JavaScript is a requirement for excellent user
    experiences. Not good experiences, excellent experiences.”
    —Seb

    View Slide

  19. Front end: JavaScript
    Inertia
    Built by Jonathan Reinink
    Replace Blade by React (or Vue or whatever)
    Makes server client communication seamless
    No full pages refreshes

    View Slide

  20. public function index(Team $team)
    {
    return view('team.settings', collect('team'));
    }

    View Slide

  21. public function index(Team $team)
    {
    return inertia()->render('team.settings', collect('team'));
    }

    View Slide

  22. Show me the code!

    View Slide

  23. In closing

    View Slide

  24. Using domains
    stitcher.io/blog/laravel-beyond-crud-01-domain-oriented-laravel
    freek.dev/1371-refactoring-to-actions
    freek.dev/1433-supercharging-common-controllers

    View Slide

  25. Front end
    inertiajs.com
    typescriptlang.org
    freek.dev/1391-how-to-handle-front-end-authorization-using-
    laravel-inertia-and-typescript

    View Slide

  26. Thank you!
    speakerdeck.com/freekmurze/highlights-flare-codebase-fullstack
    spatie.be/open-source
    freek.dev
    mailcoach.app
    flareapp.io
    ohdear.app

    View Slide