Skip to content

Instantly share code, notes, and snippets.

@acacha

acacha/ItinerariFormatiuTallStack.md

Last active May 15, 2023 08:08
Show Gist options
  • Save acacha/3b3f6b379c8afdecdf129c6b984dfa26 to your computer and use it in GitHub Desktop.
Save acacha/3b3f6b379c8afdecdf129c6b984dfa26 to your computer and use it in GitHub Desktop.
Download ZIP
Itinerari formatiu aplicacions TALL Stack
Raw
ItinerariFormatiuTallStack.md

Aquest document pretén ser un guió dels passos a seguir per començar a aprendre des de zero Laravel, i per tant PHP, programació orientada a Objectes i bones pràctiques en l'escriptura de codi: SOLID, IOC Container, Injecció de depencències, Test Driven Development. Un cop coneixem Laravel, que és una eina de backend, es recomanable aprendre la TALL Stack per tal de poder crear aplicacions FULL stack, és a dir tant de backend com de frontend (navegadors/Javascript) i a més que aquestes aplicacions siguin reactives com si utilitzesim frameworks Javascript com Vue, Angular o React, però gràcies a Livewire i AlpineJS treballant sobretot amb codi PHP i HTML i utilitzar el mínim Javascript. Finalment Tailwind serà el UI framework per crear la UI, el Look&Feel de la nostra app.

Reactive Laravel apps amb stack TALL

Què és TALL?

Parts de la pila (stack):

  • Tailwind CSS: https://tailwindcss.com/ . UI Framework, s'encarregarà de la presentació de les vistes. No cal dominar CSS (tot i que sempre va bé) per fer un bon entorn gràfic i un bon disseny
  • Alpine.js: Comparteix API amb Vue, fàcil d'aprendre pels que coneixen Vue. S'encaregara del codi Javascript reactiu per a la part gràfica (lògica de components). És important fer notar que és possible utilitzar Vue si cal . https://github.com/alpinejs/alpine
  • Laravel: Framework PHP per al codi PHP de backend i API (si s'aplica). https://laravel.com/docs/8.x/installation
  • Livewire: Livewire és un full-stack framework per a Laravel. Amb codi PHP podem encarregar-nos tant del backend com del frontend. Facilita crear codi reactiu, similar al que fem amb frameworks com Vue però amb les dades reactives al backend. Facilita molt la execució de peticions XHR (amb un framework com Vue les fariem amb Axios o client HTTP similiar)

RECURSOS FORMATIUS

Documentacions:

Videotutorials:

IDE, editors

Recomano des de un bon principi començar a utilitzar un IDE. En el meu cas la meva preferida és:

També recomano Visual studio code (la eina és molt més ràpida en carrega inicial que PHPStorm). Busqueu a Laracast videos formatius o els recursos formatius de Caleb Porzio (creador de Livewire i Alpine.js) https://calebporzio.com/my-vs-code-setup-2 o https://learn-vscode.com/

LARAVEL

TL:TR -> https://laracasts.com/skills/laravel

Laravel utilitza PHP i programació orientada objectes. De fet Laracast mateix us pot ajudar amb el vostre Learnin Path o Journey formatiu: https://laracasts.com/skills/laravel. Suposant que comenceu des de zero ues recomano seguir el següent ordre:

PHP Bàsic

Objectiu: aprendre PHP bàsic, però IMPORTANT no cal ni recomano inicialment aprendre "PHP clàsic".

Curs recomanat: https://laracasts.com/series/php-for-beginners

  • Aquest curs m'agrada especialment per què a part de repassar/aprendre els conceptes bàsics de PHP ho fa mirant de fer sense Laravel el que necessitariem per a crear una web app típica.

Què SÍ cal aprendre:

  • Instal·lació PHP, PHP per CLI
  • Variables,
  • PHP i HTML (i l'ús de vistes, separar lògica de presentació). Aprendre només el concepte bàsic, després utilitzarem Laravel Blade com a sistema de plantilles
  • Estructures de dades bàsiques (Arrays, Associative Arrays, Booleans). Un altre cop lo bàsic, amb Laravel utilitzarem Laravel Collections per potenciar el treball amb estructures de dades
  • Condicionals if, fors, etc
  • Funcions com en qualsevol llenguatge de programació
  • MYSQL bàsic. No cal fer un master ja que utilitzarem Laravel Eloquent per a treballar amb base de dades
    • Important tenir una aplicació de desktop per a MYSQL instal·lada en local (NO recomano PHPMyAdmin)
  • Formularis bàsics amb PHP. Un altre cop conèixer el bàsic, amb Laravel i especialment Laravel livewire es facilitarà molt la realització de formularis
  • Concepte de routing, mapeig de URL a codi: No utilitzar directament fitxers .php. Lo bàsic, Laravel té un sistema de Routing propi.
  • Composer i composer AUTOLOAD: importantissím. En resum no més require i no més gestió de dependències de tercers manual

Qué NO cal aprendre:

  • Variables predefinides de PHP: $GLOBALS, $_​SERVER, $_​GET, $_​POST, $_​FILES, $_​REQUEST, $_​SESSION, $_​ENV, $_​COOKIE...
    • No s'utilitza per a res a Laravel teniu eines propies per accedir a aquesta informació
  • Espagueti code PHP i HTML: separar sempre codi HTML de codi PHP. Amb Laravel utilitzarem Laravel Blade
  • Gestionar la sessió de PHP a mà ni cookies

Programació orientada a objectes amb PHP:

Curs recomanat: https://laracasts.com/series/object-oriented-principles-in-php

Orientacions:

  • No abusar de la herència. En farem ús és clar, però utilitzarem molt més el polimorfisme, les interfícies i els traits.
  • Entendre el concepte d'injecció de dependències i la seva relació amb la programació orientada a objectes.
  • Aprendre i entendre el més aviat possible el concepte de IOC Container.

Laravel from Scratch

El curs recomanat: https://laracasts.com/series/laravel-6-from-scratch

Jo priotizaria:

  • Aprendre composer bàsic i treball en local amb Laravel Valet
  • ROUTING: és la base per Model Vista Controlador i com relacionar URL i connectar les diferents parts de la nostra aplicació: Controlador, Vistes (blade views) i Model (codi de negoci, accés a base de dades amb Laravel eloquent)
  • Database:
    • Configuració de base de dades: variables entorn (.env), múltiples connexions
    • Eloquent bàsic: operacions CRUD (Create, Update, Retrieve, Delete), deixeu relacions i consultes complexes per més endavant
    • Migracions, seeders: importantísim canvi de xip, utiltar codi per crear l'estructura de la base de dades
  • Laravel blade, vistes: Com crear layouts, separar la pàgina en components i reutilitzar codi de vista, estructures bàsiques de control en vistes @if, @foreach, etc
  • FORMS: Crear el vostre primer TODOs o aplicació similar amb formularis i vistes. CSRF_TOKEN i com utilitzar mètodes HTTP DELETE o PUT
  • Authentication i Authorixation: Entendre concepte de Middleware, Middleware Auth i sistemes de permisos Laravel. Recomano utilitzar des del principi la llibreria Laravel permissions de la gent de spatie.

Podeu deixer per més endavant altres temes com:

  • Mails
  • Events
  • Notifications

EXTRES. Bones pràctiques de codi i Laravel Internals

Tota la secció "Architecture Concepts" dels docs de Laravel és recomanable:

La secció SECTION 9 Core Concepts de https://laracasts.com/series/laravel-6-from-scratch tracta aquests temes

CREAR UNA APLICACIó

A la secció 2 teniu uns cursos pas a pas per crear apps Laravel: https://laracasts.com/skills/laravel

Molt recomanable, us proposen fer TDD per a crear els cursos. Acostumar-se a aquest flux de treball us pot ajudar molt en el futur.

LIVEWIRE i ALPINE.JS

TL:TR: és recurs de pagament però el millor es esponsoritzar a Caleb Porzio i mirar els videos: https://laravel-livewire.com/screencasts/installation

Teniu més recursos com no a Laracast:

TAILWIND

Screencasts: https://www.youtube.com/tailwindlabs

TAILWIND UI

És un recurs car, però és una biblia de components gràfics habituals on podeu trobar tot el necessari per crear aplicacions web.

https://tailwindui.com/components

Us recomano navegar pels components, i a base de copiar i pegar es poden reutilitzar fàcilment.

Als screencast de Livewire l'utilitzen: https://laravel-livewire.com/screencasts/installation

També s'utilitza Tailwind a Laravel Jetstream i us recomano molt veure com fan ús de components per reutilitzar el codi de vistes.

LARAVEL JETSTREAM

Amb una simple comanda:

php artisan jetstream:install livewire

Tindreu una APP amb TALL STACK bàsica amb Login i Registre i perfil d'usuari. Val la pena perdre una estona a veure com està feta i com organitza el layout i utilitza components.

Veieu: https://jetstream.laravel.com/1.x/installation.html#installing-jetstream


- https://jetstream.laravel.com/1.x/introduction.html
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment