Was ist ein vernünftiger Workflow zum Entwerfen von Webanwendungen?

9

Es ist schon eine Weile her, dass ich umfangreiche Webentwicklungen durchgeführt habe und ich möchte die neuesten Praktiken nutzen, aber ich habe Mühe, den Workflow zu visualisieren, um alles zu integrieren.

Folgendes möchte ich verwenden:

  • CakePHP-Framework
  • jsmin (JavaScript Minify)
  • SASS (Synctactically Awesome StyleSheets)
  • Git

CakePHP:

Ziemlich selbsterklärend, nehmen Sie Änderungen vor und aktualisieren Sie die Quelle.

jsmin:

Wenn Sie ein Skript ändern, führen Sie jsmin manuell aus, um den neuen minimierten Code auszugeben, oder führen Sie besser einen Pre-Commit-Hook aus, der automatisch jsmin-Ausgaben von geänderten Javascript-Dateien generiert. Angenommen, ich habe keine Kenntnisse über die Implementierung von Commit-Hooks.

SASS:

Mir gefällt das, was SASS zu bieten hat, sehr gut, aber mir ist auch bewusst, dass SASS-Code standardmäßig nicht von Browsern unterstützt wird. Daher muss der SASS-Code irgendwann in normales CSS umgewandelt werden. An welchem ​​Punkt im Workflow ist dies erledigt?

Git

Ich habe Angst, es zuzugeben, aber als ich das letzte Mal eine wesentliche Webentwicklung durchgeführt habe, habe ich keine SCM-Quellcodeverwaltung verwendet (IE, ich habe die Quellcodeverwaltung verwendet, aber sie bestand aus einem sehr detaillierten Änderungsprotokoll mit Sicherungen).

Ich habe seitdem viel Erfahrung mit Git (sowie Mercurial und SVN) für die Desktop-Entwicklung, aber ich frage mich, wie ich es am besten für die Web-Entwicklung implementieren kann.

Ist es üblich, ein Remote-Repository auf dem Webhost zu implementieren, damit ich die Änderungen direkt auf den Produktionsserver übertragen kann, oder gibt es ein plattformübergreifendes Tool (Windows / Linux), mit dem nur geänderte Dateien einfach auf den Produktionsserver hochgeladen werden können? . Gibt es Webhosting-Unternehmen, die die Implementierung eines Remote-Repositorys vereinfachen? Benötige ich SSH-Zugriff usw.

Ich weiß, wie ich dies auf meinem eigenen Testserver mit einem Remote-Repository mit einem separaten Remote-Tracking-Zweig erreichen kann, aber ich habe es noch nie zuvor auf einem Remote-Produktions-Webhosting-Server durchgeführt, sodass mir die Optionen noch nicht bekannt sind.

Extra:

Ich habe überlegt, ein Javascript-Framework zu implementieren, bei dem separate Javascript-Dateien, die auf einer Seite verwendet werden, für jede Seite auf dem Produktionsserver zu einer einzigen Datei kompiliert werden, um die Anzahl der pro Seite erforderlichen Dateidownloads zu begrenzen.

Gibt es so etwas schon? Gibt es bereits ein Open-Source-Projekt in freier Wildbahn, das etwas Ähnliches implementiert, das ich verwenden und dazu beitragen könnte?

In Anbetracht der paranoiden Webentwickler in Bezug auf die Leistung (und der Tatsache, dass die Anzahl der Dateianforderungen auf einer Website einen großen Einfluss auf die Leistung hat) schätze ich, dass es im Internet einen Assistenten-Hacker gibt, der dieses Problem bereits behoben hat.

Evan Scholle
quelle

Antworten:

2

Sie können sich die PageSpeed-Erweiterung von Google für Apache ansehen: afaik, es gibt eine Option zum automatischen Aggregieren und Minimieren von Javascript und CSS und kombiniert mit Caching. Dies würde zu dem passen, was Sie am Ende Ihres Beitrags suchen.

Wildpeaks
quelle
1
Cool, ich wusste nicht, dass dies alles mit einem Apache-Modul möglich ist. Javascript / CSS-Minimierung, Javascript / CSS-Verkettung sowie eine Reihe weiterer optionaler Leistungsverbesserungen. Nach einigem Googeln fand ich sogar heraus, dass Dreamhost es mit ihrem Shared / VPN-Hosting bereitstellt. Ich bin überrascht, dass es auf webmasters.stackexchange.com oder stackoverflow.com keine weiteren Informationen dazu gibt.
Evan Plaice
5

jsmin

Wenn Sie nicht über eine Menge JS verfügen, können Sie jedes Mal, wenn Sie auf Speichern klicken, eine Minimierung vornehmen. Wenn Sie viel JS haben, machen Sie es zu einem Teil Ihres Bereitstellungsprozesses (siehe Git unten).

SASS

Verwenden Sie das Compass Framework . Es enthält SASS sowie ein kleines Skript, das Ihr SASS-Verzeichnis "überwacht" und die Dateien bei jedem Speichern in CSS (einschließlich minimiertem CSS, falls gewünscht) kompiliert. Es wurde unter Berücksichtigung von RoR erstellt, aber Sie können es problemlos mit jedem Webframework verwenden, indem Sie eine Kompass-Konfigurationsdatei erstellen und den Befehl "Kompassüberwachung" ausführen. Compass enthält auch viele andere nützliche Tools wie Blueprint , nützliche Mixins und die automatische Sprite-Generierung über das Lemonade-Plugin (das in der nächsten Version in Compass integriert werden sollte ).

Git

Je nach Größe / Komplexität des Standorts sollten Sie dem Capistrano folgenBereitstellungsmodell. Sie sind sich nicht sicher, ob Sie Capistrano direkt mit CakePHP verwenden können, aber das Wesentliche ist: Jeder Produktionsserver verfügt über einen "aktuellen" Ordner, der den gesamten Code enthält, der gerade in der Produktion ausgeführt wird. Jedes Mal, wenn Sie neuen Code bereitstellen möchten, führen Sie ein Skript aus, das auf jedem Produktionsserver sshs ist, und lassen es (a) den Inhalt des "aktuellen" Ordners in einen Sicherungsordner kopieren (mit dem Versionsnamen / Zeitstempel darauf), ( b) Überprüfen Sie den neuesten Code von Git in den "aktuellen" Ordner und (c) starten Sie diesen neuen Code aus dem "aktuellen" Ordner. Auf diese Weise können Sie bei Bedarf auf eine frühere Version zurücksetzen und genau feststellen, welche Revision in Produktion ist. Mit Capistrano können Sie im Rahmen des Bereitstellungsprozesses auch alle Arten von benutzerdefinierten Aufgaben hinzufügen, einschließlich der JS / CSS-Minifaktion.

Extra

Ja, es gibt eine Menge. Google für so etwas wie "CSS / JS concat". Hier ist eine kurze Beschreibung, die ich für CakePHP gefunden habe: Asset Packer .

Jewgenij Brikman
quelle
Vielen Dank für die Eingabe. Mir gefällt sehr gut, was ich mit dem Compass Framework gesehen habe. Ich wünschte nur, ich wüsste eine Möglichkeit, es in PHP bereitzustellen. Ich habe herum gegoogelt, aber keine Alternative gefunden. Capistrano sieht auch sehr interessant aus, aber anstelle des teuren und fragilen Dateikopiermodells würde ich nur ssh verwenden, um den Git-Client auf allen Remote-Servern anzuweisen, eine schnelle "Git-Pull-Rebase" durchzuführen, nachdem überprüft wurde, ob es bei einem Test funktioniert Server zuerst.
Evan Plaice
(Forts.) Asset Packer sieht auch sehr interessant aus. Der einzige Grund, warum ich die andere Antwort über Ihre ausgewählt habe, war, dass sie alles auf einmal enthielt, wobei die Verarbeitung auf dem Server selbst durchgeführt wurde (daher sind keine zusätzlichen Skripte erforderlich). Der einzige Nachteil, den ich bei Pagespeed sehe, ist die zusätzliche Verarbeitung von statischem Inhalt (die leicht durch Zwischenspeichern von statischem Inhalt und / oder CDN behoben werden kann. Ich wünschte wirklich, ich könnte 2 akzeptieren, da Ihre Antwort viele wertvolle Informationen enthält.
Evan Plaice
Sie "implementieren" das Compass-Framework nicht mit PHP. Sie führen es einfach aus, während Sie codieren, es kompiliert Ihre CSS-Dateien jedes Mal, wenn Sie auf Speichern klicken, und die CSS-Dateien werden tatsächlich bereitgestellt. Um Kompass "auszuführen", müssen Sie zuerst Ihre Konfigurationsdatei (kompass.rb) generieren. Verwenden Sie diese Option, um die Befehlszeilenoptionen zu generieren: jsfiddle.net/chriseppstein/PG46q/3 . Sobald Sie die Konfigurationsdatei mit all Ihren Pfaden eingerichtet haben, führen Sie einfach "Compass Watch" im selben Ordner wie die Konfigurationsdatei aus, und Compass beginnt jedes Mal, wenn Sie auf Speichern klicken, mit der Neukompilierung Ihres SASS. Probieren Sie es bei einem Nebenprojekt aus: Es ist SEHR einfach und schnell.
Jewgenij Brikman
Soweit ich weiß, kopiert Capistrano auch nicht viel. Bei jeder Bereitstellung wird der neueste Code ausgecheckt und nur die Ordnernamen ausgetauscht. Der Vorteil ist, dass Sie jederzeit zu einer früheren Version zurückkehren können, indem Sie die Ordnernamen erneut austauschen.
Jewgenij Brikman
Ich habe einen Artikel darüber gefunden, wie man es in PHP zum Laufen bringt. Es ist einfacher, es außerhalb eines Ruby-Projekts zu verwenden, als ich erwartet hatte. Scratch meinen letzten Kommentar zu Capistrano. Ich dachte, es wurde verwendet, um einen verteilten Befehl an mehrere Server zu senden. Wenn ich SSH-Zugriff auf die Remote-Server habe, würde ich lieber einen Git-Client löschen, um die neuesten Änderungen aus dem Produktionszweig abzurufen. IMHO, Ordnerwechsel Ordner ist eine schlechte Idee. Ich würde es vorziehen, Revisionen im Release-Zyklus mit Tags zu versehen und nur ein vorheriges Tag auszuchecken, wenn das aktuelle Probleme aufweist.
Evan Plaice