Développeurs et concepteurs Web ASP.NET Webforms: comment interagir?

Je suis développeur ASP.NET Webforms et je rencontre des problèmes lorsque je traite avec des concepteurs.

Les designers se plaignent toujours de la asp.net server controls. Ils préfèrent simplement avoir un fichier html et créer des cssfichiers avec les images requises pour les accompagner. Parfois, si la phase de conception est effectuée à l'avance, j'obtiens des fichiers html avec des fichiers css associés, mais nous rencontrons ensuite de nombreux problèmes d'intégration de la conception avec les aspxfichiers (plusieurs serveurs contrôlent un telerik, etc.).

Ce que je veux demander, c'est:

• Comment surmonter ces problèmes? Les concepteurs préfèrent les développeurs php et mvc en raison des problèmes avec les contrôles du serveur .net. J'ai besoin de savoir comment interagir correctement avec les concepteurs.
• Existe-t-il des outils ou des applications pour fournir aux concepteurs le rendu (page html) des pages .aspx? J'entends par là la page dans l'exécution plutôt que l'aspx dans Visual Studio. Ils utilisent Web Expression mais veulent également la page rendue en html.

L'ancien designer ici, devenu Dev, et moi aussi, je pissais et gémissais sur les contrôles Web. Honnêtement, il est BEAUCOUP moins cher pour un concepteur d'ajuster ses pratiques que pour un développeur .NET de se plonger dans une impelmentation personnalisée d'un GridView parce que le concepteur a INSISTE que chaque TD ait une balise `` rel '' (ou autre).

Comme Arseni Mourzenko l'a très judicieusement souligné, la décision d'utiliser Webforms est un choix de l'entreprise qui limite une partie du contrôle sur le HTML tout en accordant des gains d'efficacité dans le codage. À moins que l'entreprise ne soit prête à reconsidérer (ce qu'elle ne devrait PAS faire uniquement pour faire plaisir aux concepteurs), les concepteurs doivent accepter cette réalité. Voici quelques choses qu'ils peuvent faire:

1) Arrêtez de dépendre de l'ID pour quoi que ce soit . Même si cela semblait mal au début, j'ai trouvé que la vie était en fait beaucoup plus facile quand je stylisais tout avec des classes (et l'héritage, bien sûr). Tout d'abord, il a égalisé tous mes poids de sélecteur. Dans l'héritage CSS, l'ID l'emporte sur CLASS. C'était en fait assez agréable d'avoir tout un enfant et / ou un sélecteur de classe, et cela a rendu la détermination de l'ordre de spécificité un peu plus simple. Même chose dans la couche JS, cela m'a donné ZERO douleur pour échanger mes sélecteurs basés sur ID pour ceux basés sur la classe.

2) Apprenez-leur à convertir les listes RadioButtonLists et CheckboxLists , ainsi que Label = span, Panel = div et les autres éléments non évidents de contrôle en HTML. La façon dont .NET les rend au format HTML était un peu plus étrange que ce à quoi je m'attendais, et il m'a été beaucoup plus facile de créer des écrans lorsque je savais comment le HTML sortirait de ces contrôles.

3) Demandez-leur de faire leurs concepteurs EN ASPX DIRECTEMENT , pas en HTML brut ( ! Important ). Apprenez aux concepteurs les bases de GridViews, ListViews, etc. Donnez-leur des extraits de code pour pousser une collection d'objets anonymes dans un contrôle Grid / ListView. S'ils peuvent apprendre CSS, ils peuvent apprendre à copier-coller ce code. Ils peuvent utiliser la version gratuite de VS Web Express, qui est assez bonne pour le travail CSS & JS maintenant. Ces projets Web factices donneront aux concepteurs une chance d'entrer dans certains contrôles, puis de visualiser la source pour voir comment ils sont rendus.

4) Expliquez comment la balise FORM est utilisée dans .NET . J'ai oublié celui-ci plus tôt, mais une autre chose à laquelle le concepteur doit s'habituer est qu'en général, une seule balise FORM enveloppe la page entière. Cela modifie le comportement des contrôles de formulaire et vous ne pouvez pas imbriquer les balises FORM sans effets secondaires vraiment étranges. Assurez-vous que les concepteurs comprennent cela, sinon leur formulaire HTML sera un cauchemar à transformer en WebForms.

5) Éloignez-vous des thèmes et de la peau . Même si le framework .NET dispose de ces outils pour aider à contrôler les contrôles dans une application, ils sont maladroits et étranges pour les concepteurs Web normaux, et je ne les ai jamais trouvés valant mon temps. Ils semblent être un bon outil pour les développeurs qui ne connaissent pas bien le CSS, mais ne feront que ralentir les concepteurs. Laissez les concepteurs travailler dans leur environnement naturel (fichiers html et css) et ils seront plus heureux et plus productifs.

6) Conservez les projets «prototypes» dans les solutions de votre site . Pour vous assurer que les développeurs ont toujours une cible contre laquelle coder, demandez aux concepteurs de créer un faux projet Web dans votre vraie solution pour garder leurs pages ASPX uniquement préservées et intactes par les vrais développeurs. Cela signifie que les concepteurs peuvent regarder leurs prototypes dans la même solution que le vrai projet pour vérifier comment les développeurs l'ont fait, et les développeurs peuvent exécuter le prototype à tout moment pour s'assurer que leur travail correspond à l'intention des concepteurs.

Enfin, résistez à toutes les plaintes pour convertir en MVC, à moins que vous ne soyez prêt à recycler vos développeurs. J'aime personnellement MVC, mais si vous avez une équipe avec une tonne de connaissances WebForms, ne jetez pas cela sans raison. Si vos applications rencontrent des problèmes ViewState, des problèmes de référencement ou des problèmes d'accessibilité, alors jetez absolument un œil à MVC. Mais il faudra BEAUCOUP plus de temps pour former les développeurs WebForms sur MVC que pour former les concepteurs à l'utilisation des contrôles Web.

À la fin de la journée, il n'y avait PAS DE DESIGN I CAME ACROSS, que je ne pouvais pas personnellement faire travailler dans WebForms, même si je finissais par jurer sur ce sacré GridView pendant une heure avant de le comprendre.

Existe-t-il des outils ou des applications pour fournir aux concepteurs le rendu (page html) des pages .aspx?

Oubliez l'expression (je ne l'ai jamais aimé). Obtenez-leur la version gratuite de Visual Studio (Web Developer Express). Il peut se connecter à n'importe quelle solution de contrôle de source que vous avez, et il permettra aux concepteurs d'exécuter leurs pages ASPX et de voir le HTML rendu dans un navigateur. Les outils CSS et JS sont bien meilleurs qu'auparavant, et il existe des outils impressionnants intégrés dans des extensions comme Web Essentials. Transformation en un clic des règles CSS en toutes leurs déviations spécifiques au fournisseur, sélecteurs de couleurs et palettes directement dans l'interface VS, intégration en un clic d'images dans des fichiers CSS, moins de transformations CSS (vous pouvez `` coder '' en CSS), F12 'Navigate To' sur JavaScript, plus une véritable intelligence, et bien plus encore. C'est un trésor pour les concepteurs maintenant, pour info,

Il existe une solution à vos problèmes, mais elle implique un changement de modèle de conception vers MVP . Il s'agit d'un investissement de temps initial qui doit être sérieusement étudié avant de commencer.

Fondamentalement, les problèmes que vous rencontrez ne sont pas nouveaux. En bref, vous devez introduire une abstraction de vue via une interface qui identifie le modèle de données pris en charge par la vue.

C'est un sujet très complet qui a du sens de voir le modèle comme un exemple de vie. Vous trouverez cet exemple assez informatif pour votre cas - De meilleurs formulaires Web avec le modèle MVP .

Edit: Si la suggestion ci-dessus est trop chère (en termes de temps et de ressources) à suivre, je conseillerais certainement de travailler plus étroitement avec votre designer . Je crois que la communication de vos problèmes au sein d'une équipe devrait grandement aider à résoudre les obstacles dans votre travail (de concepteur et de développeur). C'est un travail d'équipe et une bonne collaboration des enjeux pour lever tous les obstacles pour effectuer le travail est le moyen de réussir un projet en équipe ! C'est quelque chose que nous faisons dans notre projet.

ASP.NET est un framework qui résume le code HTML généré. Cela signifie que vous ne pouvez pas être invité à reproduire exactement un code HTML donné dans une application ASP.NET, sauf si vous disposez d'un budget suffisant pour réécrire tout ce qui est généré par les contrôles ASP.NET .

Il appartiendrait aux parties prenantes de décider: soit vous utilisez des contrôles ASP.NET avec leurs points forts et leurs inconvénients, soit vous passez au HTML manuel (ou à ASP.NET MVC), augmentant le coût du projet actuel de milliers de dollars .

L'incapacité à personnaliser HTML dans ce contexte est une contrainte comme les autres. Les concepteurs doivent tenir compte de cette contrainte technique dans leur travail. Le cas est très similaire à si le concepteur vous disait qu'un texte devrait être affiché dans la police exacte avec la taille exacte: c'est un support Web, pas d'impression, ce qui signifie que la taille du texte variera.

En ce qui concerne les outils, je ne connais pas d'outils qui convertiront du HTML brut en un modèle ASP.NET. Comment pourrait-il deviner qu'une table spécifique doit être convertie en un contrôle ASP.NET spécifique?

Lors de mon dernier travail, les développeurs construisaient l'application, puis la transmettaient aux concepteurs afin qu'ils puissent la faire ressembler à un tas de programmeurs de logiciels qui n'y arrivaient pas. :)

Lorsque nous avons commencé ce processus, il y avait beaucoup de va-et-vient entre les développeurs et les concepteurs. Ils n'ont pas compris les pages qui leur ont été remises. Que le ciel nous plaise si nous construisions une page dynamiquement! C'était à peu près la même chose que la situation que vous décrivez ici.

Je me suis assis avec chaque designer et leur ai appris à installer l'application web sur leur box local. Je leur ai montré comment le faire fonctionner et tout. J'ai expliqué comment les contrôles asp étaient rendus à l'écran. Et puis nous l'avons ouvert dans le navigateur et utilisé firebug pour voir le lien entre les contrôles asp et ce qui a été rendu.

Cela les a beaucoup aidés. Une fois qu'ils pouvaient le voir et l'exécuter sur leurs boîtes et utiliser leurs outils de conception pour modifier et jouer avec les styles, cela leur a facilité la vie.

Après avoir fait cela, j'ai eu une réunion avec les développeurs et leur ai fait savoir qu'ils devraient utiliser la balise CssClass et s'assurer que les styles étaient définis. Et tout ce qui était affiché dynamiquement doit avoir une classe CSS attachée, car les concepteurs ne pourraient pas l'ajouter.

C'était un processus. Il a fallu un certain temps aux deux parties pour se familiariser avec l'arrangement. Mais cela a ouvert les voies de communication. Au lieu de se plaindre des contrôles utilisés, les concepteurs ont pu demander l'ajout de styles à divers éléments.

Donc, ma suggestion serait de s'asseoir avec les concepteurs et de leur montrer comment la page s'affiche. Utilisez Firebug pour disséquer la page et expliquer comment la page s'est formée.

Voici quelques approches utiles que j'ai adoptées par le passé avec des concepteurs lorsqu'ils doivent travailler sur un projet ASP.NET WebForms en cours de développement.

1. Déployer localement: les développeurs fournissent une version intermédiaire du projet déployé localement. Cela fait gagner du temps aux deux. Le concepteur demande un .aspx mais interagit avec le code HTML rendu au lieu du code serveur. Cette approche extrait le code du serveur du concepteur. Il n'a pas besoin de savoir comment le HTML est généré ou comment les fichiers javscript et csssont livrés au client. Cela suppose bien sûr que les concepteurs sont compétents avec les débogueurs de navigateur / inspecteur DOM. Le concepteur peut appliquer toutes ses cssmodifications dans le navigateur et les appliquer ensuite aux cssfichiers.
2. Fournir des modèles: Afin de rendre plus judicieux pour les concepteurs de travailler avec du HTML, fournissez-leur un modèle du HTML rendu par le contrôle serveur. Ils peuvent modifier ce HTML au point où ils l'aiment et proposer les modifications à appliquer dans l'implémentation côté serveur. Cela doit être fait tôt et souvent , car vous ne voulez pas vous retrouver avec une structure HTML sur laquelle repose l'implémentation côté client, puis pour que le concepteur propose des modifications sur cette structure.

Les concepteurs devraient en général avoir le moins de points de contact avec le code côté serveur que possible, alors abstenez-vous-en autant que possible.

En tant que développeur hybride, moi-même (après avoir fait beaucoup de travail dans les rôles back-end et front-end, souvent ensemble), je n'aime pas non plus depuis longtemps le modèle ASP.NET WebForms ... alors que sa version initiale l'impulsion de conception était de fournir des outils de conception simples et par glisser-déposer pour démocratiser le développement Web (de la même manière que Visual Basic a rendu la programmation d'applications accessible aux non-CS-major), les méthodes qu'il a utilisées pour essayer de forcer l'état sur un L'environnement sans état (le Web) est tendu et forcé (oh ViewState, comment je te déteste!).

Ils violent également certains des principes centraux du développement et du style du balisage, juste par le fait même que, par défaut, ASP.NET prend en charge l'attribut ID, forçant les concepteurs CSS à utiliser les classes de la même manière que les ID devaient être utilisés, superposer des éléments dans des piles profondes de divs et de balises imbriquées qui peuvent faire du style des commandes un cauchemar dans tous les systèmes, sauf les plus simplistes.

Compte tenu de ces choses, votre chemin n'est pas facile, car je suppose qu'une réécriture pour MVC serait coûteuse ou temporelle.

Existe-t-il un moyen de fournir au concepteur un environnement dans lequel exécuter l'application Web, afin qu'il puisse voir ses modifications CSS en temps réel? Lorsque je fais du travail de conception dans ASP.NET WebForms, je trouve inestimable de pouvoir lancer l'application Web sur ma propre machine, apporter des modifications au CSS et l'exécuter localement pour voir comment cela affecte l'application.

Une option pourrait être de configurer une machine virtuelle spécialement conçue pour le développement ASP.NET que le concepteur peut exécuter à partir de son poste de travail, afin de ne pas avoir à mélanger leurs deux ensembles d'outils, et s'ils se trompent dans le développement. l'espace, il peut toujours être rechargé à partir d'une image qui fonctionne.

Oui, cela signifie que le concepteur devra apprendre à appuyer sur F5 pour exécuter l'application. (Ou donnez-leur simplement l'accès FTP aux répertoires où se trouvent le CSS, le JS et les images, même dans un environnement de test!) Cela signifie également qu'ils verront beaucoup de code principal, bien que si vous leur dites de ignorez simplement vos fichiers .cs ou .vb, cela les empêchera de paniquer ... Bien sûr, cela signifie que vous devez être sûr de ne pas faire des choses comme définir des styles à partir de vos fichiers codebehind .. (mais vous ne feriez pas cela, n'est-ce pas, car cela lie les données et les regarde de trop près, non?).

Si votre site est bien structuré, avec des fichiers CSS et JS distincts, et pas beaucoup de style en ligne imposé sur le balisage, il est possible qu'ils puissent faire la plupart de leur travail en les faisant simplement éviter les zones <%%>. D'un autre côté, cela pourrait également donner au concepteur un peu plus d'appréciation pour ce que vous devez traverser, lorsqu'il essaie de traduire son HTML / CSS statique en quelque chose qui fonctionne pour une application dynamique.

Vous devez les faire parler ensemble, comprendre les besoins et les préférences des autres. C'est un "problème" qui ne peut pas être résolu par des logiciels et des outils. N'essayez pas de plaire aux deux parties, cela ne fonctionnera jamais. Ils doivent faire des compromis - c'est comme un mariage.

Une façon consiste à organiser f.ex. des ateliers où chaque partie a la possibilité d'expliquer pourquoi c'est pour qu'elle préfère ce qu'elle préfère. Une bonne communication est toujours une clé dans des situations comme celle-ci. De tels rassemblements peuvent être considérés comme des investissements.

Ou tout simplement dit, le problème est orienté vers l'organisation, pas technique et c'est là que vous devez fournir une solution.

L'autre option consiste à augmenter le salaire et à leur dire de se taire (généralement une solution à court terme ...).