1. Dashboard
  2. Forum
    1. Unerledigte Themen
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team-Mitglieder
    4. Trophäen
    5. Mitgliedersuche
  4. Tutorial Bereich
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Seiten
  • Forum
  • Lexikon
  • Erweiterte Suche
  1. Informatik Forum
  2. Webmaster & Internet
  3. Entwicklung

Lieblings Frontend Framework

    • Allgemein
  • Syntafin
  • 14. Mai 2023 um 06:56
  • Unerledigt
  • Syntafin
    27
    Syntafin
    LISTstack Dev
    Reaktionen
    498
    Punkte
    7.793
    Trophäen
    2
    Beiträge
    1.415
    • 14. Mai 2023 um 06:56
    • #1

    Lieblings Frontend Framework/Engine 6

    Das Ergebnis ist nur für Teilnehmer sichtbar.

    Extrem simple Frage! Aber einfach Mal eine Abstimmung zum Lieblings Framework zum Frontend bauen.

    Sollte das geliebte nicht in der Liste sein, gerne so schreiben! Natürlich gerne auch die eigene Wahl begründen :grinning_face_with_smiling_eyes: .

    Ich bitte übrigens darum freundlich zu bleiben, da ich selbst weiß wie sehr man seine Religion verteidigen möchte!

    A red dragon falls from the heavens... Ah, that memory has been lost. A shame. It was a favorite of mine...

  • Tom
    5
    Tom
    Mitglied
    Reaktionen
    21
    Punkte
    221
    Beiträge
    40
    • 14. Mai 2023 um 12:38
    • #2

    Flutter, es ist Platformübergreifend für Windows, Linux, Android, IOS sowie im Web als Javascript Framework

  • Syntafin
    27
    Syntafin
    LISTstack Dev
    Reaktionen
    498
    Punkte
    7.793
    Trophäen
    2
    Beiträge
    1.415
    • 16. Mai 2023 um 08:30
    • #3

    Aktuell überwiegt ja VueJS :grinning_face_with_smiling_eyes: wundert mich ein wenig.

    A red dragon falls from the heavens... Ah, that memory has been lost. A shame. It was a favorite of mine...

  • flyingtable07
    18
    flyingtable07
    Mitglied
    Reaktionen
    59
    Punkte
    3.564
    Trophäen
    1
    Beiträge
    678
    • 16. Mai 2023 um 08:52
    • #4

    Ist Bootstrap nicht auch ein frontend framework oder hab ich das flasch versteanden?

  • Syntafin
    27
    Syntafin
    LISTstack Dev
    Reaktionen
    498
    Punkte
    7.793
    Trophäen
    2
    Beiträge
    1.415
    • 16. Mai 2023 um 10:11
    • #5
    Zitat von flyingtable07

    Ist Bootstrap nicht auch ein frontend framework oder hab ich das flasch versteanden?

    Bootstrap ist nur eine Sammlung vorgefertigter Komponenten, warum auch jede Seite die damit erstellt wurde gleich aussieht.

    A red dragon falls from the heavens... Ah, that memory has been lost. A shame. It was a favorite of mine...

  • flyingtable07
    18
    flyingtable07
    Mitglied
    Reaktionen
    59
    Punkte
    3.564
    Trophäen
    1
    Beiträge
    678
    • 16. Mai 2023 um 16:58
    • #6
    Zitat von Syntafin

    Bootstrap ist nur eine Sammlung vorgefertigter Komponenten, warum auch jede Seite die damit erstellt wurde gleich aussieht.

    und das ist bei anderen framework etwa nixht so? das einzig wahre ist vanilla

  • Syntafin
    27
    Syntafin
    LISTstack Dev
    Reaktionen
    498
    Punkte
    7.793
    Trophäen
    2
    Beiträge
    1.415
    • 16. Mai 2023 um 17:03
    • #7
    Zitat von flyingtable07

    das einzig wahre ist vanilla

    Ich frag dich erneut, wenn du mal ein Framework verwendet hast.

    Zitat von flyingtable07

    und das ist bei anderen framework etwa nixht so?

    Nein. Mal hier ein Beispiel wie die folgende Seite aufgebaut ist:

    Syntafin

    HTML
    <template>
        <AppLayout>
            <Head>
                <title>Beiträge</title>
            </Head>
            <div>
                <h1 class="sr-only">
                    Beiträge
                </h1>
                <div class="grid grid-cols-1 items-start gap-4 lg:grid-cols-3 lg:gap-8">
                    <!-- Left column -->
                    <div v-if="$page.props.empty" class="grid grid-cols-1 gap-4 lg:col-span-2">
                        <PostCard v-for="post in $page.props.posts" :post="post" />
                    </div>
                    <div v-else class="grid grid-cols-1 gap-4 lg:col-span-2">
                        <Card>
                            <div class="flex align-items-center p-4">
                                <InformationCircleIcon class="h-8 w-8" />
                                No Posts so far~
                            </div>
                        </Card>
                    </div>
    
                    <!-- Right column -->
                    <Sidebar :categories="$page.props.categories"/>
                </div>
            </div>
        </AppLayout>
    </template>
    
    <script setup>
    import AppLayout from "../../Layouts/AppLayout.vue";
    import Card from "@/Components/Card.vue";
    import PostCard from "@/Components/PostCard.vue";
    import { Head } from "@inertiajs/vue3";
    import Sidebar from "@/Pages/Blog/Sidebar.vue";
    
    import {
        InformationCircleIcon
    } from "@heroicons/vue/24/outline";
    </script>
    Alles anzeigen

    A red dragon falls from the heavens... Ah, that memory has been lost. A shame. It was a favorite of mine...

  • flyingtable07
    18
    flyingtable07
    Mitglied
    Reaktionen
    59
    Punkte
    3.564
    Trophäen
    1
    Beiträge
    678
    • 17. Mai 2023 um 08:25
    • #8
    Zitat von Syntafin

    Ich frag dich erneut, wenn du mal ein Framework verwendet hast.

    Nein. Mal hier ein Beispiel wie die folgende Seite aufgebaut ist:

    https://new.syntafin.de/posts

    HTML
    <template>
        <AppLayout>
            <Head>
                <title>Beiträge</title>
            </Head>
            <div>
                <h1 class="sr-only">
                    Beiträge
                </h1>
                <div class="grid grid-cols-1 items-start gap-4 lg:grid-cols-3 lg:gap-8">
                    <!-- Left column -->
                    <div v-if="$page.props.empty" class="grid grid-cols-1 gap-4 lg:col-span-2">
                        <PostCard v-for="post in $page.props.posts" :post="post" />
                    </div>
                    <div v-else class="grid grid-cols-1 gap-4 lg:col-span-2">
                        <Card>
                            <div class="flex align-items-center p-4">
                                <InformationCircleIcon class="h-8 w-8" />
                                No Posts so far~
                            </div>
                        </Card>
                    </div>
    
                    <!-- Right column -->
                    <Sidebar :categories="$page.props.categories"/>
                </div>
            </div>
        </AppLayout>
    </template>
    
    <script setup>
    import AppLayout from "../../Layouts/AppLayout.vue";
    import Card from "@/Components/Card.vue";
    import PostCard from "@/Components/PostCard.vue";
    import { Head } from "@inertiajs/vue3";
    import Sidebar from "@/Pages/Blog/Sidebar.vue";
    
    import {
        InformationCircleIcon
    } from "@heroicons/vue/24/outline";
    </script>
    Alles anzeigen

    oha, ich dachte immer frameworks wären auch wie boostrap nur eine Sammlung an Css klassen und Javascriot Funktionen, aber das ist ja eine völlig andere programmiersprache.
    Und die Syntax von vanilla ist einfach komplett ruiniert das kann ich gar nicht ansehen

  • Syntafin
    27
    Syntafin
    LISTstack Dev
    Reaktionen
    498
    Punkte
    7.793
    Trophäen
    2
    Beiträge
    1.415
    • 17. Mai 2023 um 11:24
    • #9
    Zitat von flyingtable07

    oha, ich dachte immer frameworks wären auch wie boostrap nur eine Sammlung an Css klassen und Javascriot Funktionen, aber das ist ja eine völlig andere programmiersprache.
    Und die Syntax von vanilla ist einfach komplett ruiniert das kann ich gar nicht ansehen

    Soll ich dir das ganze heute Abend/Nachmittag nur mir Blade Mal posten :grinning_face_with_smiling_eyes: ?

    Von mir aus gebe ich dir auch Zugriff auf mein altes Repo für meine Seite (nur lesend aber).

    A red dragon falls from the heavens... Ah, that memory has been lost. A shame. It was a favorite of mine...

  • flyingtable07
    18
    flyingtable07
    Mitglied
    Reaktionen
    59
    Punkte
    3.564
    Trophäen
    1
    Beiträge
    678
    • 17. Mai 2023 um 12:49
    • #10
    Zitat von Syntafin

    Soll ich dir das ganze heute Abend/Nachmittag nur mir Blade Mal posten :grinning_face_with_smiling_eyes: ?

    Von mir aus gebe ich dir auch Zugriff auf mein altes Repo für meine Seite (nur lesend aber).

    ui nice danke, das würd ich mir echt mal anschauen

  • Syntafin
    27
    Syntafin
    LISTstack Dev
    Reaktionen
    498
    Punkte
    7.793
    Trophäen
    2
    Beiträge
    1.415
    • 17. Mai 2023 um 17:28
    • #11
    Zitat von flyingtable07

    ui nice danke, das würd ich mir echt mal anschauen

    So, hier das ganze mit Blade statt VueJS:

    HTML
    <div>
        <x-slot name="title">
            Beiträge
        </x-slot>
        <h1 class="sr-only">
            Beiträge
        </h1>
        <div class="grid grid-cols-1 items-start gap-4 lg:grid-cols-3 lg:gap-8">
            {{-- Left Column --}}
            @empty($posts)
            <div class="grid grid-cols-1 gap-4 lg:col-span-2">
                <x-card>
                    <div class="flex align-items-center p-4">
                        <x-icons:information-circle-icon class="h-8 w-8" />
                        @lang('posts.nopost')
                    </div>
                </x-card>
            </div>
            @else
            <div class="grid grid-cols-1 gap-4 lg:col-span-2">
                @foreach($posts as $post)
                <x-post :post="$post" />
                @endforeach
            </div>
            @endempty
        </div>
    </div>
    Alles anzeigen

    A red dragon falls from the heavens... Ah, that memory has been lost. A shame. It was a favorite of mine...

  • flyingtable07
    18
    flyingtable07
    Mitglied
    Reaktionen
    59
    Punkte
    3.564
    Trophäen
    1
    Beiträge
    678
    • 17. Mai 2023 um 18:13
    • #12
    Zitat von Syntafin

    So, hier das ganze mit Blade statt VueJS:

    HTML
    <div>
        <x-slot name="title">
            Beiträge
        </x-slot>
        <h1 class="sr-only">
            Beiträge
        </h1>
        <div class="grid grid-cols-1 items-start gap-4 lg:grid-cols-3 lg:gap-8">
            {{-- Left Column --}}
            @empty($posts)
            <div class="grid grid-cols-1 gap-4 lg:col-span-2">
                <x-card>
                    <div class="flex align-items-center p-4">
                        <x-icons:information-circle-icon class="h-8 w-8" />
                        @lang('posts.nopost')
                    </div>
                </x-card>
            </div>
            @else
            <div class="grid grid-cols-1 gap-4 lg:col-span-2">
                @foreach($posts as $post)
                <x-post :post="$post" />
                @endforeach
            </div>
            @endempty
        </div>
    </div>
    Alles anzeigen

    der code ergibt für mich irgendwie keinen sinn. wird das ganze wie boostrap direkt im browser ausgeführt oder wandelt der server das in normalen code um bevor er es an den server sendet? es sind irgendwie beide elemente drin, einerseits php variablen anderesseits css klasseen und neue html elemte

  • Syntafin
    27
    Syntafin
    LISTstack Dev
    Reaktionen
    498
    Punkte
    7.793
    Trophäen
    2
    Beiträge
    1.415
    • 17. Mai 2023 um 18:20
    • #13
    Zitat von flyingtable07

    der code ergibt für mich irgendwie keinen sinn. wird das ganze wie boostrap direkt im browser ausgeführt oder wandelt der server das in normalen code um bevor er es an den server sendet? es sind irgendwie beide elemente drin, einerseits php variablen anderesseits css klasseen und neue html elemte

    Blade ist eine Template Engine, was an den Browser gesendet wird ist also am Ende "reines HTML"

    So viel Magie ist das gar nicht wenn man sich mal daran gewöhnt hat. Tags die mit X anfangen, sind Anonyme Blade Komponenten, also zB <x-post />.

    Wenn du mir mal deinen Nutzernamen bei GH sagst, kann ich dir gerne lesenden Zugriff auf das alte Repo geben (TALLstack) das zurzeit auch Live verfügbar ist.

    A red dragon falls from the heavens... Ah, that memory has been lost. A shame. It was a favorite of mine...

  • flyingtable07
    18
    flyingtable07
    Mitglied
    Reaktionen
    59
    Punkte
    3.564
    Trophäen
    1
    Beiträge
    678
    • 17. Mai 2023 um 21:06
    • #14
    Zitat von Syntafin

    Blade ist eine Template Engine, was an den Browser gesendet wird ist also am Ende "reines HTML"

    So viel Magie ist das gar nicht wenn man sich mal daran gewöhnt hat. Tags die mit X anfangen, sind Anonyme Blade Komponenten, also zB <x-post />.

    Ah verstehe, da gibst aber trozdem noch ien paar mehr elemente :grinning_face_with_smiling_eyes:

    Zitat

    Wenn du mir mal deinen Nutzernamen bei GH sagst, kann ich dir gerne lesenden Zugriff auf das alte Repo geben (TALLstack) das zurzeit auch Live verfügbar ist.

    Sehr gerne :grinning_face_with_smiling_eyes: Jetzt frag ich mich grade was mein GitHub benutzername ist, da werden irgendwie 2 angezeigt xD

    Brauchst du den oberen oder unternen? mein Profil ist auf jeden fall über PythonSupportForum (flyingapple07) (github.com) erreichbar.

    Bilder

    • pasted-from-clipboard.png
      • 26,87 kB
      • 437 × 851
  • flyingtable07
    18
    flyingtable07
    Mitglied
    Reaktionen
    59
    Punkte
    3.564
    Trophäen
    1
    Beiträge
    678
    • 18. Mai 2023 um 20:15
    • #15

    Syntafin Wie hast du das geschafft, einfach keine Einzige Klasse länger als 100 Zeilen :grinning_face_with_smiling_eyes:
    Und jede Klasse Benutzt 10 Andere die wieder auf andere Klassen zugreifen. Wie kann man da den Überblick behalten was tatsächlich abläuft. Einfach Krass.
    Soweit ich es Überblicken kann ist in /app/ das Backend mit Verarbeitung. In /resources/views/ ist das was die Controller Benutzen um etwas darzustellen also Frontend ähnlich. Richtig?
    Den Rest versteh ich leider nicht, tausende Klassen für irgendwelche Elemente die so aussehen als machen Sie einfach nichts als andere Klassen zu Benutzen. Und Warum wird Boostrap als Begriff im backend verwendet? Und wo ist eigendlich der Einstiegspunkt, an den die Anfrage vom Browser gehen? Ist das index.php? und werden die statischen frontend Dateien auch vom PHP durchgeschleift? Und was ist eigendlich dieses Nova? nd was macht /app/view/components?
    Es ist auf Jeden Fall ehcht krass mal zu sehen wie eine komlziezirte Anwendung struktuiriert ist. Ich muss noch viel lernen hoffentlich werd ich nochmal alles verstehen :grinning_face_with_smiling_eyes:

  • Syntafin
    27
    Syntafin
    LISTstack Dev
    Reaktionen
    498
    Punkte
    7.793
    Trophäen
    2
    Beiträge
    1.415
    • 18. Mai 2023 um 20:42
    • #16
    Zitat von flyingtable07

    Syntafin Wie hast du das geschafft, einfach keine Einzige Klasse länger als 100 Zeilen :grinning_face_with_smiling_eyes:
    Und jede Klasse Benutzt 10 Andere die wieder auf andere Klassen zugreifen. Wie kann man da den Überblick behalten was tatsächlich abläuft. Einfach Krass.
    Soweit ich es Überblicken kann ist in /app/ das Backend mit Verarbeitung. In /resources/views/ ist das was die Controller Benutzen um etwas darzustellen also Frontend ähnlich. Richtig?
    Den Rest versteh ich leider nicht, tausende Klassen für irgendwelche Elemente die so aussehen als machen Sie einfach nichts als andere Klassen zu Benutzen. Und Warum wird Boostrap als Begriff im backend verwendet? Und wo ist eigendlich der Einstiegspunkt, an den die Anfrage vom Browser gehen? Ist das index.php? und werden die statischen frontend Dateien auch vom PHP durchgeschleift? Und was ist eigendlich dieses Nova? nd was macht /app/view/components?
    Es ist auf Jeden Fall ehcht krass mal zu sehen wie eine komlziezirte Anwendung struktuiriert ist. Ich muss noch viel lernen hoffentlich werd ich nochmal alles verstehen :grinning_face_with_smiling_eyes:

    Ziemlich gut alles erkannt!

    app enthält alles was die Anwendung so braucht - hast du ja erkannt

    resources sind alle Sachen für das Frontend drin (CSS, JS, Templates, Bilder) - auch erkannt!

    Nun zu den Fragen: Bootstrap ist ein gängiger Begriff und hat nichts mit dem CSS Framework zu tun, sondern beinhaltet zB Vor-Kompilierte Templates etc (also was beim start der anwendung nötig ist).

    Der Einstiegspunkt ist public/index.php und nein, statische Dateien (CSS, JS, Bilder, etc) werden direkt vom Server ausgeliefert (außer bei den Bildern die bei der dir geteilten App in der Galerie zu finden sind)

    app/Views/Components sind Template Komponenten, die eigenständig Dinge machen können (also zB Daten abfragen etc)

    Und Nova, ist mein Admin Panel :)

    Wenn du willst, kann ich dir ja mal ein wenig zeigen wie das abläuft, ich arbeite gerade (solange jedenfalls mich keiner anschreibt wegen gewissen dingen...) an der neuen Version (die nutzt wie immer Tailwind, und statt Livewire/Blade nun VueJS)

    A red dragon falls from the heavens... Ah, that memory has been lost. A shame. It was a favorite of mine...

  • flyingtable07
    18
    flyingtable07
    Mitglied
    Reaktionen
    59
    Punkte
    3.564
    Trophäen
    1
    Beiträge
    678
    • 18. Mai 2023 um 21:36
    • #17
    Zitat von Syntafin

    Ziemlich gut alles erkannt!

    app enthält alles was die Anwendung so braucht - hast du ja erkannt

    resources sind alle Sachen für das Frontend drin (CSS, JS, Templates, Bilder) - auch erkannt!

    Nun zu den Fragen: Bootstrap ist ein gängiger Begriff und hat nichts mit dem CSS Framework zu tun, sondern beinhaltet zB Vor-Kompilierte Templates etc (also was beim start der anwendung nötig ist).

    Der Einstiegspunkt ist public/index.php und nein, statische Dateien (CSS, JS, Bilder, etc) werden direkt vom Server ausgeliefert (außer bei den Bildern die bei der dir geteilten App in der Galerie zu finden sind)

    app/Views/Components sind Template Komponenten, die eigenständig Dinge machen können (also zB Daten abfragen etc)

    Und Nova, ist mein Admin Panel :)

    Alles anzeigen

    Ah Verstehe, Vielen Dank :)

    Zitat

    Wenn du willst, kann ich dir ja mal ein wenig zeigen wie das abläuft, ich arbeite gerade (solange jedenfalls mich keiner anschreibt wegen gewissen dingen...) an der neuen Version (die nutzt wie immer Tailwind, und statt Livewire/Blade nun VueJS)

    Sehr Gerne, würde mich echt freuen :)

  • Syntafin
    27
    Syntafin
    LISTstack Dev
    Reaktionen
    498
    Punkte
    7.793
    Trophäen
    2
    Beiträge
    1.415
    • 18. Mai 2023 um 21:51
    • #18
    Zitat von flyingtable07

    Sehr Gerne, würde mich echt freuen :)

    Ich schreib dir mal in Discord :grinning_face_with_smiling_eyes:

    Wo wir uns wohl gar nicht haben :thinking_face: dachte das wäre so.

    Adde mich mal:

    Discord - A New Way to Chat with Friends & Communities
    Discord is the easiest way to communicate over voice, video, and text. Chat, hang out, and stay close with your friends and communities.
    www.discordapp.com

    A red dragon falls from the heavens... Ah, that memory has been lost. A shame. It was a favorite of mine...

    Einmal editiert, zuletzt von Syntafin (18. Mai 2023 um 21:56)

  • flyingtable07
    18
    flyingtable07
    Mitglied
    Reaktionen
    59
    Punkte
    3.564
    Trophäen
    1
    Beiträge
    678
    • 19. Mai 2023 um 08:14
    • #19
    Zitat von Syntafin

    Ich schreib dir mal in Discord :grinning_face_with_smiling_eyes:

    Wo wir uns wohl gar nicht haben :thinking_face: dachte das wäre so.

    Adde mich mal:

    https://www.discordapp.com/users/64382083191017472

    Merkwürdig, Eigendlich hast du mir doch schon mal geschrieben, einen Moment

  • flyingtable07
    18
    flyingtable07
    Mitglied
    Reaktionen
    59
    Punkte
    3.564
    Trophäen
    1
    Beiträge
    678
    • 19. Mai 2023 um 08:16
    • #20
    Zitat von Syntafin

    Ich schreib dir mal in Discord :grinning_face_with_smiling_eyes:

    Wo wir uns wohl gar nicht haben :thinking_face: dachte das wäre so.

    Adde mich mal:

    https://www.discordapp.com/users/64382083191017472

    Kann dich nicht hinzufügen, der Link fürhrt ins nichts.
    Und Wenn ich auf dein Profil gehe:

    Kann es sein das du mich blockier hast?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden

Rechtliches

Impressum

Datenschutzerklärung