Δημιουργία Vue SPA μέσα σε Laravel

Δημιουργία Vue SPA μέσα σε Laravel
03/03/2020
Για να φτιάξει κανείς μια Vue SPA εφαρμογή σε συνεργασία με Laravel (για API), το απλό είναι να τα διαχωρίσει σε 2 ανεξάρτητα projects. Ξεχωριστά το frontend από το backend.

Είναι δυνατό όμως το frontend να βρίσκεται μέσα στο ίδιο project με το backend. To Vue μέρος μπορεί να αντικαθιστά τα views του Laravel.

Πάμε να δούμε πως μπορεί να γίνει αυτό.

Φυσικά ξεκινάμε φτιάχνοντας ένα νέο Laravel project. (όπως έγραψα κι εδώ, μπορεί να χρησιμοποιηθεί αυτό για PHP και αυτό για MySQL)

Κάνουμε εγκατάσταση του vue και του vue-router
```
npm install -s vue vue-router
npm install
```
Στο αρχείο resources/assets/js/app.js βάζουμε τον παρακάτω κώδικα, ο οποίος θα περιέχει τα routes του SPA μας
```
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import App from './views/App'
import Hello from './views/Hello'
import Home from './views/Home'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/hello',
            name: 'hello',
            component: Hello,
        },
    ],
});

const app = new Vue({
    el: '#app',
    components: { App },
    router,
});
```
Προσέχουμε ότι κάνει import 3 αρχεία από τον φάκελο views. Ο φάκελος αυτός βρίσκεται κι αυτός μέσα στον resources/assets/js/. Οπότε τον δημιουργούμε και φτιάχνουμε τα αντίστοιχα αρχεία μέσα του. App.vue, Home.vue, Hello.vue. Το βασικότερο από όλα αυτά είναι το App.vue. Τα υπόλοιπα είναι όποια views θέλουμε να έχει η εφαρμογή μας. Φυσικά, μπορούν να είναι όσα θέλουμε.

Το App.vue θα έχει κάτι τέτοιο
```
<template>
    <div>
        <h1>Vue Router Demo App</h1>

        <p>
            <router-link :to="{ name: 'home' }">Home</router-link> |
            <router-link :to="{ name: 'hello' }">Hello World</router-link>
        </p>

        <div class="container">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
    export default {}
</script>
```
Τα router-link είναι τα links προς τα διάφορα views μας και όταν πατάμε σε κάποιο αυτά, το περιεχόμενο τους θα εμφανιστεί μέσα στο <router-view></router-view>.

Τα views με την σειρά τους μπορούν να είναι οποιαδήποτε vue components της μορφής
```
<template>
  <p>This is the homepage</p>
</template>

<script>
    export default {}
</script>

<style>
</style>
```
Μπορούμε φυσικά να βάλουμε και οποιαδήποτε επιμέρους vue components, μέσα στον φάκελο resources/assets/js/components.

Τώρα πρέπει να πούμε στο Laravel πως πρέπει να βρει το Vue SPA μας. Στο αρχείο routes/web.php, βάζουμε κάτι τέτοιο
```
Route::get('/{any}', 'SpaController@index')->where('any', '.*');
```
Αυτό σημαίνει ότι για οποιοδήποτε request γίνεται στο http://my.site.com/, θα αναλαμβάνει ο SpaController. Οπότε τον δημιουργούμε, εκτελώντας την εντολή
```
php artisan make:controller SpaController
```
Αυτός θα έχει για περιεχόμενο κάτι τέτοιο
```
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SpaController extends Controller
{
    public function index()
    {
        return view('spa');
    }
}
```
To return view(‘spa’) θα είναι το αρχείο resources/views/spa.blade.php, με περιεχόμενο
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue SPA Demo</title>
</head>
<body>
    <div id="app">
        <app></app>
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
```
Η εφαρμογή μας θα εμφανιστεί μέσα στο <div id=”app”>

Όλα είναι έτοιμα να τρέξει η εφαρμογή μας.

Τρέχουμε αναλόγως μια από τις παρακάτω εντολές για να κάνουμε build το javascript κομμάτι.
```
npm run watch
ή
npm run development
ή 
npm run production
```
Ξεκινάμε φυσικά και το Laravel application μας. Για παράδειγμα, σε dev mode
```
php artisan serve
```
Από εδώ και πέρα δημιουργούμε τα απαραίτητα API routes στο backend και αντίστοιχα κάνουμε τα calls μας από το frontend. Όπως ακριβώς θα κάναμε, αν δουλεύαμε με 2 ξεχωριστά projects.

Ο παραπάνω οδηγός έχει φτιαχτεί σύμφωνα με το post στο Laravel News.
Τι είναι η GraphQL;
01/03/2020

Η GraphQL είναι μία query γλώσσα για API. Μια εναλλακτική του RESTful API. Αναπτύχθηκε από το Facebook για εσωτερική χρήση το 2012, ενώ το 2015 έγινε public release. To 2018 το project “τρέχει” από το GraphQL Foundation, κάτω από το Linux Foundation.

H GraphQL λύνει κάποια από τα προβλήματα που έχει το RESTful API, όπως τα πολλά μπρος πίσω, τα πολλαπλά calls για να πάρει κανείς πολύπλοκα sets δεδομένων. Είναι επίσης πολύ πιο ευέλικτη στις όποιες μελλοντικές αλλαγές μπορεί να γίνουν στο API.

Μπορείτε να δείτε ένα λεπτομερές εισαγωγικό βίντεο για το τι είναι η GraphQL, ποια προβλήματα λύνει και πως λειτουργεί.

Πολύ ενδιαφέρον είναι και το ντοκιμαντέρ για την GraphQL που δείχνει όλη την ιστορία της.
Αντικατάσταση Ubuntu με Manjaro
01/03/2020

Είπα να δοκιμάσω κάτι διαφορετικό και να δω μήπως το Manjaro κάθεται καλύτερα στο laptop.

Το πρόβλημα ήταν “ποιος κάθεται τώρα να ξαναστήνει το περιβάλλον, όπως το είχα στρώσει πολύ ωραία και βολικά;”

Κανένα πρόβλημα τελικά. Το /home το είχα σε ξεχωριστό partition, οπότε όλα κύλησαν αναπάντεχα πολύ ωραία. Πέρα από κάποια πράγματα που έπρεπε να δω στην διαδικασία του install και δεν είχα ξανακάνει.

Για παράδειγμα, στην εγκατάσταση είχα επιλέξει να κάνει αντικατάσταση του partition που ήταν εγκατεστημένο το Ubuntu. Αυτό έγινε, αλλά έπρεπε να πειραχτεί και το GRUB για να καταλαβαίνει ότι πλέον κάνει boot από Manjaro. Δεν έβγαλα άκρη. Δεν τα ξέρω αυτά. Είναι του διαβόλου. Αφού παιδεύτηκα αρκετά, ξαναγύρισα στην διαδικασία της εγκατάστασης από την αρχή.

Αυτή την φορά διάλεξα να επιλέξω manually τα partitions. Έτσι του είπα πιο partition θα γίνει mount που. Δηλαδή το /root, το /home και το partition του EFI. Απλό edit στα partitions κάνεις και επιλέγεις το mount point.

Η εγκατάσταση ολοκληρώθηκε και έγινε boot κανονικά σε Manjaro. Κάνω login και όλο το σύστημα μου είναι ίδιο και απαράλλαχτο με πριν. Φυσικά έχω εγκαταστήσει πάλι Gnome, οπότε τίποτα δεν έχει αλλάξει ουσιαστικά. Όλα τα settings μου στο περιβάλλον είναι τα ίδια, όπως και όλα τα settings για την κάθε εφαρμογή.

Το μόνο που θέλει, είναι η εγκατάσταση των εφαρμογών από την αρχή, γιατί έχει και διαφορετικό package installer (pacman). Για πρώτη φορά μου πήρε αρκετά για να το κάνω, αλλά πλέον έχω φτιάξει το scriptάκι μου, για να τις εγκαθιστά όλες με την μία.

Από εκεί και πέρα 2-3 θεματάκια τα πετυχαίνεις, αλλά λύνονται με λίγο ψάξιμο. Άλλωστε και η κοινότητα του Manjaro είναι πολύ δυνατή. Κι έτσι κι αλλιώς Linux είναι πάλι.

Το τελικό συμπέρασμα. Άξιζε όλη αυτή η φασαρία; Φυσικά. Καταρχήν έγινα ένα κλικ σοφότερος. Είδα ότι η αντικατάσταση distro είναι πολύ πιο αναίμακτη διαδικασία από όσο φοβόμουν. Δουλεύω σε νέο σύστημα, οπότε ότι καινούργιο σε ενθουσιάζει. Ο package installer φαίνεται πιο δυνατός, ειδικά το AUR. Αν και θέλει καιρό να συνηθίσω, από εκεί που είχα συνηθίσει με το apt.

Το περιβάλλον, αν και Gnome πάλι, έχει κάποιες extra πινελιές και μου φαίνεται πιο καλαίσθητο από το Ubuntu.

Τέλος, έχω μια αίσθηση ότι οι εφαρμογές ανοίγουν πιο γρήγορα και ότι όντως κάθισε λίγο καλύτερα στο laptop η εγκατάσταση. Θα δείξει καλύτερα η συνέχεια.

Δημιουργία Vue SPA μέσα σε Laravel

Τι είναι η GraphQL;

Αντικατάσταση Ubuntu με Manjaro