Ankündigung

Einklappen
Keine Ankündigung bisher.

Ähnliche Seite wie pr0gramm.com

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Ähnliche Seite wie pr0gramm.com

    Hallo,

    ich bin gerade an einer Seite dran die vom Prinzip her wie http://pr0gramm.com/ funktionieren soll.
    Aber bin bin mir total unsicher welche Technologien ich verwenden soll.

    Vorallem folgende Dinge machen meine Entscheidung schwer:
    - Wenn ich auf ein beliebiges Bild klicke, dann wird der Link in der Adresszeile geändert, aber die Seite nicht neu geladen.
    - Wenn ich nun ein Bild weiterklicke wird ebenfalls die Adresszeile angepasst, der Browser läd etwas (Der Lade-Indikator am Tab "arbeitet")
    - Wenn ich ein ewig lange nach unten Scrolle und ein Bild anklicke und den Link kopiere und den Link z.B. in einem neuen Tab öffne, dann wird eine Handvoll Bilder geladen und das, das ich
    mit dem Link teilen wollte wird geöffnet.
    - Obwohl sehr viele Daten zusammengesucht werden Müssen (Der Post selbst, Likes/Dislikes für den Post, Tags, Likes/Dislikes für jedes Tag, Kommentare, Likes/Dislikes für jedes Kommentar, usw.) ladet die Seite wirklich EXTREM schnell.

    Was meint Ihr wäre hier am Sinnvollsten?
    Generell arbeite ich sehr gerne mit Laravel als PHP-Framework. Ich denke dabei kann ich bleiben. Aber welche Technik eignet sich hier für das Frontend?

  • #2
    Zitat von johnnyderdepp Beitrag anzeigen
    - Wenn ich auf ein beliebiges Bild klicke, dann wird der Link in der Adresszeile geändert, aber die Seite nicht neu geladen.
    - Wenn ich nun ein Bild weiterklicke wird ebenfalls die Adresszeile angepasst, der Browser läd etwas (Der Lade-Indikator am Tab "arbeitet")
    https://developer.mozilla.org/en-US/...PI/History_API

    - Wenn ich ein ewig lange nach unten Scrolle und ein Bild anklicke und den Link kopiere und den Link z.B. in einem neuen Tab öffne, dann wird eine Handvoll Bilder geladen und das, das ich
    mit dem Link teilen wollte wird geöffnet.
    Da wird die Bild-ID aus der URL ermittelt und anhand dessen das Bild eingeblendet.

    Zitat von johnnyderdepp Beitrag anzeigen
    - Obwohl sehr viele Daten zusammengesucht werden Müssen (Der Post selbst, Likes/Dislikes für den Post, Tags, Likes/Dislikes für jedes Tag, Kommentare, Likes/Dislikes für jedes Kommentar, usw.) ladet die Seite wirklich EXTREM schnell.
    Da wurde halt ordentlich gearbeitet. Vermutlich wird vieles gecached, die Thumbnails sind auch wirklich winzig.

    Zitat von johnnyderdepp Beitrag anzeigen
    Was meint Ihr wäre hier am Sinnvollsten?
    Generell arbeite ich sehr gerne mit Laravel als PHP-Framework. Ich denke dabei kann ich bleiben. Aber welche Technik eignet sich hier für das Frontend?
    Hier wirst du auf jeden Fall mit JavaScript ran müssen. Ein kurzer Blick in den Code dieser Seite verrät, dass dort mit jQuery gearbeitet wird. Prinzipiell ließe sich das auch mit Vanilla.js oder irgendeinem JS-Framework machen (Angular, Aurelia, Ember, Vue, ..). Wenn es wirklich um hohe Performance geht und der Anwendungsfall derart überschaubar ist, kann man eine reine JS-Lösung durchaus in Erwägung ziehen. Was du serverseitig nutzt ist eigt. völlig wurscht.
    [SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]

    Kommentar


    • #3
      Die Datenquelle im Hintergrund ist nur eine API die Daten ausliefert, der Rest passiert im Frontend (wie lottikarotti schon angemerkt hat).
      Außerdem kommt dir das ganze so schnell vor, weil die Seite immer ein Bild mit Inhalt vorlädt. Natürlich ist die Seite trotzdem noch sehr schnell.
      "Software is like Sex, it's best if it's free." - Linus Torvalds

      Kommentar


      • #4
        danke ihr habt mir schon gut weitergeholfen Aber ich denke auch, dass ein JS-Framework hier übertrieben wäre...


        JaMa was meinst du mit
        weil die Seite immer ein Bild mit Inhalt vorlädt
        Ich habe im Quellcode nix gefunden das danach aussieht. Die Kommentare Likes usw. werden doch erst beim klick geladen!?

        Kommentar


        • #5
          Zitat von johnnyderdepp Beitrag anzeigen
          danke ihr habt mir schon gut weitergeholfen Aber ich denke auch, dass ein JS-Framework hier übertrieben wäre...


          JaMa was meinst du mit

          Ich habe im Quellcode nix gefunden das danach aussieht. Die Kommentare Likes usw. werden doch erst beim klick geladen!?
          Wieso? Die Seite hat ganz eindeutig einen "Frontend-Fokus", dass Backend ist relativ 'dumm' und liefert die Daten aus (#3), für welche Art von Seite würde sich ein JS-Framework mehr anbieten?

          Kommentar


          • #6
            Mein Argument gegen ein JS-Framework wäre, dass die Seite nur sehr wenige Interaktionen anbietet. Ich kann eigentlich nur folgendes machen:

            - Ein Bild anclicken
            - Ein Bild liken / disliken
            - Einen Kommentar liken /disliken
            - Ein Kommentar schrieben

            und das alles passiert innerhalb eines Elements.

            Kommentar


            • #7
              Solange "gegen ein JS-Framework" nicht "gegen eine JS-Lösung" bedeutet, kann ich dir grob beipflichten. Wenn man es auf die Spitze treiben will, macht man das mit Vanilla.js. Ich behaupte aber, dass man die gleiche Performance auch mit Angular hinbekommt
              [SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]

              Kommentar


              • #8
                natürlich bin ich absolut für eine JS-Lösung!

                Kommentar


                • #9
                  Das musst du auch nicht im Quelltext nachschauen.
                  Einfach einen Netzwerkmonitor (z.B. den von Chrome oder Firefox) aufmachen und dann siehst du was da geladen wird. Und da wird der komplette Inhalt vom nächsten Bild/webm direkt geladen.
                  Wenn du aber kein Bild offen hast und nur auf der "Übersicht bist" und dann auf ein Bild klickst, lädt er natürlich erst das entsprechende Bild mit Inhalt. Das geht schon auch sehr zügig.

                  Ich würde hierfür auch kein JS Framework verwenden. Einfach weil du mit jQuery viel schneller und auch leichtgewichtiger ans Ziel kommst.
                  Im Endeffekt sind das ein paar wenige Events die hinter der Seite stehen, die dann eine API abfragen. Kaum Formulare/Aktionen oder sonstiges.

                  Hätte die Seite jetzt etliche verschiedene Seiten, mit diversen Formularen und Aktionen und auch eine größere Template Logik dahinter, sodass sich ein JS Framework mit MVC lohnen würde, dann würde ich das machen.
                  Bei genannter Seite aber nicht.
                  "Software is like Sex, it's best if it's free." - Linus Torvalds

                  Kommentar


                  • #10
                    Zitat von johnnyderdepp Beitrag anzeigen
                    Mein Argument gegen ein JS-Framework wäre, dass die Seite nur sehr wenige Interaktionen anbietet. Ich kann eigentlich nur folgendes machen:

                    - Ein Bild anclicken
                    - Ein Bild liken / disliken
                    - Einen Kommentar liken /disliken
                    - Ein Kommentar schrieben

                    und das alles passiert innerhalb eines Elements.
                    Das sind sicherlich die Hauptaktionen, aber drumherum geht doch auch noch ein bisschen mehr (für eingeloggte Nutzer), hier ist jetzt natürlich die Frage wie ähnlich dein Klon am Ende sein soll.
                    Beispiele:
                    - Bilder hochladen
                    - Nutzerprofile
                    - Accounteinstellungen
                    - Nachrichtensystem
                    - Filtereinstellungen und Suchfunktion

                    Kommentar


                    • #11
                      Hallo Leute,

                      Dank euren Tipps bin ich bisher ganz gut vorangekommen. Nun hätte ich noch ein paar Sachen die ich gerne Fragen würde. Evtl. kann mir jemand helfen


                      1. Ich hab die Seite nun auch genauer unter die Lupe genommen. Die Machen einen Ajax-Request auf ein Item. Es kommen zwar die Kommentare, Tags usw. aber es
                      kommen keine Details zum Post z.B. up / downs für den Post usw... was aber auffällt:
                      cache:"item:1948640"
                      aber im Cache speichert die Seite nix, zumindest wenn ich mit Chrome nachgucke (Dev Tools -> Application)

                      2. Auf meinem Klon mache ich es momentan so, dass wenn ein Post angefragt wird mit ajax auch der vorige und der nächste zurückkommt und dieser im sessionstorage abgelegt wird.
                      Haltet ihr das für eine gute Idee? (Vor dem anfragen eines Posts wird natürlich gecheckt, ob der Post bereits im SessionStorage liegt.)


                      Kommentar


                      • #12
                        Man kopiert das pr0 nicht...

                        Kommentar

                        Lädt...
                        X