Qu'est-ce qu'un workflow résonable pour la conception d'applications Web?

9

Cela fait un moment que je n'ai effectué aucun développement web substantiel et j'aimerais profiter des dernières pratiques mais j'ai du mal à visualiser le flux de travail pour tout incorporer.

Voici ce que je cherche à utiliser:

  • Cadre CakePHP
  • jsmin (JavaScript Minify)
  • SASS (Feuilles de style impressionnantes sur le plan syntaxique)
  • Git

CakePHP:

Assez explicite, faites des modifications et mettez à jour la source.

jsmin:

Lorsque vous modifiez un script, exécutez-vous manuellement jsmin pour sortir le nouveau code minifié, ou serait-il préférable d'exécuter un hook de pré-validation qui génère automatiquement des sorties jsmin des fichiers javascript qui ont changé. Supposons que je n'ai aucune connaissance de l'implémentation de hooks de validation.

TOUPET:

J'aime vraiment ce que SASS a à offrir, mais je suis également conscient que le code SASS n'est pas pris en charge par les navigateurs par défaut, donc, à un moment donné, le code SASS doit être transformé en CSS normal. À quel stade du workflow est-ce fait?

Git

Je suis terrifié de l'admettre mais, la dernière fois que j'ai effectué un développement Web substantiel, je n'ai pas utilisé le contrôle de source SCM (IE, j'ai utilisé le contrôle de source mais il s'agissait d'un journal des modifications très détaillé avec des sauvegardes).

J'ai depuis eu beaucoup d'expérience en utilisant Git (ainsi que mercurial et SVN) pour le développement de bureau, mais je me demande comment le mettre en œuvre au mieux pour le développement Web).

Est-il courant d'implémenter un référentiel distant sur l'hôte Web afin que je puisse pousser les modifications directement vers le serveur de production, ou existe-t-il un outil multiplateforme (windows / linux) qui facilite le téléchargement de fichiers modifiés uniquement sur le serveur de production . Existe-t-il des sociétés d'hébergement Web qui facilitent la mise en œuvre d'un référentiel distant, ai-je besoin d'un accès SSH, etc ...

Je sais comment accomplir cela sur mon propre serveur de test avec un référentiel distant avec une branche de suivi à distance séparée, mais je ne l'ai jamais fait auparavant sur un serveur d'hébergement Web de production à distance, donc je ne suis pas encore au courant des options.

Supplémentaire:

J'envisageais d'implémenter un framework javascript où des fichiers javascript séparés utilisés sur une page sont compilés en un seul fichier pour chaque page du serveur de production afin de limiter le nombre de téléchargements de fichiers nécessaires par page.

Est-ce que quelque chose comme ça existe déjà? Existe-t-il déjà un projet open source dans la nature qui implémente quelque chose de similaire que je pourrais utiliser et contribuer?

Compte tenu de la façon dont les développeurs Web paranoïaques sont sur les performances (et le fait que le nombre de demandes de fichiers sur un site Web est un gros coup pour les performances), je suppose qu'il y a un pirate informatique sur le net qui a déjà résolu ce problème.

Plie d'Evan
la source

Réponses:

2

Vous pouvez consulter l'extension PageSpeed ​​de Google pour Apache : afaik, il y a une option pour agréger et minimiser Javascript et CSS automatiquement et combinée avec la mise en cache, cela correspondrait à ce que vous mentionnez que vous recherchez à la fin de votre message.

pics sauvages
la source
1
Cool, je ne savais pas que tout cela pouvait être fait avec un seul module Apache. Minification Javascript / css, concaténation javascript / css, ainsi que de nombreuses autres améliorations de performances optionnelles. Après quelques recherches sur Google, j'ai même découvert que Dreamhost le fournit avec leur hébergement partagé / VPN. Je suis surpris qu'il n'y ait pas plus d'informations à ce sujet sur webmasters.stackexchange.com ou stackoverflow.com.
Evan Plaice
5

jsmin

Si vous n'avez pas une tonne de JS, vous pouvez configurer quelque chose à réduire à chaque fois que vous appuyez sur Enregistrer. Si vous avez beaucoup de JS, intégrez-le à votre processus de déploiement (voir Git ci-dessous).

TOUPET

Utilisez le Compass Framework . Il comprend SASS, plus un petit script qui "surveille" votre répertoire SASS et compile les fichiers en CSS (y compris le CSS minifié, si vous le souhaitez) chaque fois que vous enregistrez. Il est construit avec RoR à l'esprit, mais vous pouvez facilement l'utiliser avec n'importe quel framework Web en créant un fichier de configuration Compass et en exécutant la commande "compass watch". Compass comprend également de nombreux autres outils pratiques tels que Blueprint , des mixins utiles et la génération automatique de sprites via le plugin Lemonade (qui devrait être intégré à Compass dans la prochaine version ).

Git

En fonction de la taille / complexité du site, pensez à suivre le Capistranomodèle de déploiement. Je ne sais pas si vous pouvez utiliser Capistrano directement avec CakePHP, mais l'essentiel est le suivant: chaque serveur de production a un dossier "actuel" qui contient tout le code qui s'exécute en production à ce moment. Chaque fois que vous souhaitez déployer du nouveau code, vous exécutez un script qui ssh est sur chaque serveur de production et le fait (a) copier le contenu du dossier "actuel" dans un dossier de sauvegarde (avec le nom de la version / l'horodatage), ( b) extraire le dernier code de Git dans le dossier "actuel" et (c) commencer à servir ce nouveau code à partir du dossier "actuel". De cette façon, vous pouvez revenir à n'importe quelle version précédente si nécessaire et vous pouvez dire exactement quelle révision est en cours de production. Capistrano vous permet également d'ajouter toutes sortes de tâches personnalisées dans le cadre du processus de déploiement, y compris la minifaction JS / CSS,

Supplémentaire

Oui, il y en a un tas. Google pour quelque chose comme "CSS / JS concat". En voici un rapide que j'ai trouvé pour CakePHP: Asset Packer .

Yevgeniy Brikman
la source
Merci beaucoup pour la contribution. J'aime vraiment ce que j'ai vu avec le Compass Framework. Je souhaite seulement connaître un moyen de le déployer en PHP. J'ai cherché sur Google, mais je ne trouve pas d'alternative. Capistrano semble également très intéressant, mais au lieu du modèle de copie de fichiers coûteux et fragile, j'utiliserais simplement ssh pour dire au client git sur tous les serveurs distants de faire un rapide 'git pull --rebase' après avoir vérifié qu'il a fonctionné sur un test serveur d'abord.
Evan Plaice
(suite) Asset packer semble également très intéressant. La seule raison pour laquelle j'ai choisi l'autre réponse par rapport à la vôtre était qu'elle contenait tout cela d'un seul coup, le traitement étant effectué sur le serveur lui-même (donc aucun script supplémentaire nécessaire). Le seul inconvénient que je vois à la vitesse de page est le traitement supplémentaire du contenu statique (qui est facilement résolu en utilisant la mise en cache de contenu statique et / ou CDN. J'aimerais vraiment pouvoir accepter 2 parce que votre réponse contient beaucoup d'informations précieuses.
Evan Plaice
Vous ne "déployez" pas le framework Compass avec PHP. Vous l'exécutez pendant que vous codez, il compile vos fichiers CSS à chaque fois que vous appuyez sur Enregistrer, et les fichiers CSS sont réellement déployés. Pour "exécuter" la boussole, vous devez d'abord générer votre fichier de configuration (compass.rb) - utilisez-le pour générer les options de ligne de commande: jsfiddle.net/chriseppstein/PG46q/3 . Une fois que vous avez la configuration du fichier de configuration avec tous vos chemins, exécutez simplement "watch boussole" dans le même dossier que le fichier de configuration, et la boussole commencera à recompiler votre SASS chaque fois que vous appuyez sur enregistrer. Essayez-le sur un projet parallèle: c'est TRÈS facile et rapide.
Yevgeniy Brikman
Aussi, pour autant que je sache, Capistrano ne fait pas beaucoup de copie. Chaque fois que vous déployez, il vérifie le dernier code et échange simplement les noms de dossier. L'avantage est que vous pouvez toujours revenir à une version antérieure en échangeant simplement à nouveau les noms de dossier.
Yevgeniy Brikman
J'ai trouvé un article sur la façon de le faire fonctionner en PHP. Il est plus facile à utiliser en dehors d'un projet Ruby que ce à quoi je m'attendais. Grattez mon dernier commentaire sur Capistrano. Je pensais qu'il était utilisé pour envoyer une commande distribuée à plusieurs serveurs. Si j'ai un accès ssh aux serveurs distants, je préférerais de loin laisser tomber un client git pour tirer les dernières modifications de la branche de production. À mon humble avis, l'échange de dossiers est une mauvaise idée. Je préférerais de loin marquer les révisions dans le cycle de publication et simplement extraire une balise précédente si la balise actuelle a des problèmes.
Evan Plaice