Fermer

juillet 30, 2020

La Renaissance du NoCode pour les concepteurs Web


À propos de l'auteur

Créateur de produits @ Wix • Codeur • Addict de chaussures de course
En savoir plus sur
Uri

Tout comme à la Renaissance, nous vivons une époque d’incroyables innovations culturelles et artistiques. À mesure qu'Internet évolue, les navigateurs s'alignent, les capacités sont ajoutées et l'accessibilité de la technologie devient plus facile, les concepteurs font face à de nouvelles opportunités pour créer, penser et changer leur statut avec des outils sans code.

Le mot Renaissance – qui signifie «renaissance» dans Le français – a été donné à une énorme période de réalisations philosophiques et artistiques qui a commencé au 14ème siècle.

Pendant ce temps, il y avait un large éventail de développements, y compris:

  • Utilisation de peintures à l'huile, plutôt que tempera, qui a facilité le processus de peinture.
  • Utilisation de tissu, plutôt que de planches de bois, ce qui a réduit les dépenses de peinture.
  • Traduction de textes classiques en architecture, anatomie, philosophie, etc., rendant les connaissances plus accessibles au grand public

Ces développements et d'autres ont fait de la Renaissance l'une des époques artistiques les plus productives de l'histoire, réduisant considérablement la barrière créative et attirant un large public plutôt qu'un petit groupe. des élites.

 Bloc de pierre
«Chaque bloc de pierre a une statue à l'intérieur, et c'est la tâche du sculpteur de la découvrir.» – Michel-Ange. Certaines personnes voient un bloc de pierre, tandis que d'autres voient une source de création. Les outils dont nous disposons à tout moment peuvent faire ressortir notre potentiel maximum. ( Grand aperçu )

Tout comme à l'époque de la Renaissance, le domaine de la conception Web d'aujourd'hui explore son potentiel grâce à des plates-formes de développement sans code (NCDP). Ces outils permettent aux non-programmeurs de créer des logiciels d'application via des interfaces utilisateur graphiques et une configuration, au lieu de la programmation informatique traditionnelle.

Le modèle mental du concepteur / développeur

 Un collage réaliste avec une sculpture 3D tenant la foudre dans sa main gauche et la lumière ampoules sa main droite
Tiré de « La singularité est ici: Human 2.0 » par Amit Maman. Dans le cadre de son projet final au Shenkar College of Engineering and Design, Maman a créé ce triptyque pour montrer sa vision de la singularité et du tournant de l'histoire humaine qu'il représente. Son travail s'inspire des principes de la Renaissance. ( Grand aperçu )

En 2000, l'expert en ergonomie Jakob Nielsen a introduit la «loi de Jakob», l'idée selon laquelle les utilisateurs développent des modèles mentaux des produits avec lesquels ils interagissent en fonction de leur expérience antérieure. Plus les utilisateurs peuvent se concentrer sur leur objectif sans remettre en cause ce modèle mental, plus il leur est facile d'atteindre cet objectif.

«CSS est plus proche de la peinture que Python.»
– Chris Coyier, co-fondateur de CodePen

Les compétences de conception et de développement sont ancrées dans différents types de réflexion et nécessitent différents types d'outils. Alors que les concepteurs utilisent des éditeurs WYSIWYG tels que Figma, Sketch et Photoshop pour placer des éléments sur le canevas, les développeurs travaillent avec des IDE tels que VSCode, Webstorm et Brackets. Pour rester productifs, les concepteurs et les développeurs doivent pouvoir apporter des modifications et recevoir des commentaires instantanés, en fonction de leur modèle mental.

Ainsi, l'utilisation de générateurs par glisser-déposer peut en fait interférer avec les développeurs qui souhaitent déboguer rapidement, mais qui fonctionnent seulement avec un éditeur de texte peut être inapproprié pour les concepteurs qui veulent tester la composition.

Designers And Code

De nombreux concepteurs comprennent les différences fonctionnelles entre une maquette et un produit fonctionnel. Afin de comprendre les possibilités du médium, où tracer les limites et comment gérer les contraintes, de nombreux concepteurs sont prêts à «se salir les mains» lorsqu'il s'agit d'apprendre le code – mais ils ont des difficultés.

L'une des principales raisons pour lesquelles les concepteurs ne sont pas des codeurs est qu'il existe un écart important entre le modèle mental du concepteur et le modèle conceptuel de nombreux éditeurs de code. La conception et le développement prennent deux modes de pensée très différents. Cette discordance conduit à une courbe d'apprentissage difficile et frustrante pour les concepteurs qu'ils ne pourraient peut-être pas surmonter.

Code Abstraction

 Un collage réaliste avec une sculpture 3D brisant l'eau
( Grand aperçu )

L'abstraction est un concept fondamental de l'informatique. Les langages, les frameworks et les bibliothèques sont construits sur différentes couches d'abstraction de complexité pour faciliter, optimiser et garantir la productivité.

«Les outils de programmation visuelle extraient le code du créateur, ce qui les rend beaucoup plus accessibles. La vraie magie de ces outils, cependant, est de savoir comment ils intègrent toutes les couches logicielles sous-jacentes dans les produits finaux, fournissant des fonctionnalités utiles grâce à des composants modulaires qui peuvent être exploités via des interfaces visuelles intuitives. »
– Jeremy Q. Ho, Aucun code n'est une nouvelle programmation

Lorsque vous travaillez avec des couches d'abstraction, il existe des outils tels que Editor X et Studio pour les sites Web / applications Web, Draftbit et Kodika pour les applications mobiles et Modulz pour les systèmes de conception, qui permettent une représentation visuelle du code, en plus des capacités de code.

En adoptant un support visuel familier , la courbe d'apprentissage devient plus facile pour les concepteurs.

Si Chris Wanstrath, co-fondateur et ancien PDG de GitHub a dit, «l'avenir du codage n'est pas du tout de codage», alors aucun-code n'est un moyen légitime de se développer – malgré la perception que le Ces outils n'offrent pas la flexibilité d'écrire votre propre code, ligne par ligne.

En effet, nous constatons que l'intérêt pour le terme «nocode» augmente:

 Une capture d'écran de Google Trends
Recherchez le terme «nocode» au cours des 5 dernières années sur Google Trends. ( Grand aperçu )

Différence entre la programmation impérative et déclarative

Afin de comprendre le développement d'outils sans code pour les concepteurs, vous devez connaître la distinction entre deux types de programmation: [19659036] Programmation impérative
Déconstruire le résultat en une séquence d'impératifs, c'est-à-dire un flux de contrôle explicite. Par exemple: JavaScript, Python, C ++.

  • Programmation déclarative
    Déclarez le résultat, c'est-à-dire le flux de contrôle implicite. Par exemple: SQL, HTML, CSS.
  • Les langages déclaratifs sont souvent des langages spécifiques à un domaine, ou DSL, ce qui signifie qu'ils sont utilisés dans un but précis, dans un domaine spécifique.

    Par exemple, SQL est DSL pour en travaillant avec des bases de données, HTML est DSL pour ajouter une structure sémantique et une signification au contenu d'une page Web, et CSS est DSL pour ajouter du style.

    «Il y a trop de variables à prendre en compte. Le but du CSS est de faire en sorte que vous n'ayez pas à vous soucier de tous. Définissez certaines contraintes. Laissez le langage travailler sur les détails. »
    – Keith J. Grant, Résilient, déclaratif, contextuel

    La programmation impérative définit des instructions étape par étape spécifiques au navigateur pour obtenir le contenu souhaité

    Le Moyen Âge

    L'effort de création d'un outil d'interface visuelle pour le développement de la conception Web a commencé dans les années 1990 grâce à des tentatives révolutionnaires comme InContext Spider, Netscape Navigator Gold, Microsoft FrontPage et, bien sûr, Dreamweaver .

     Une capture d'écran de Dreamweaver MX
    Dreamweaver MX, Foundation Dreamweaver MX . ( Grand aperçu )

    Pendant cette période, la terminologie courante comprenait: outil de création visuel HTML, compositeur de page Web WYSIWYG ou simplement éditeur HTML . Le terme «sans code» était populaire dans les années 1990 – mais pour une raison différente. En 1996, le groupe de rock américain Pearl Jam sort son quatrième album studio, No Code .

    Ces outils sans code réduisent considérablement la barrière créative et attirent un large public, Internet n'était pas prêt pour ces types d'outils à l'époque.

    Cet effort a été limité pour les raisons suivantes:

    1. Mise en page

    Lorsque l'inventeur du World Wide Web Tim Berners-Lee a lancé sa création en 1989, il n'a pas proposé de moyen de concevoir un site Web.

    Cela s'est produit en octobre 1994, après une série de suggestions sur comment concevoir Internet par différentes personnes – dont une de Håkon Wium Lie – qui a proposé une idée qui a attiré l'attention de tous. Lie croyait en un style déclaratif qui permettrait aux navigateurs de gérer le traitement – il s'appelait Cascading Style Sheets, ou simplement CSS.

    «CSS se démarquait parce qu'il était simple, surtout par rapport à certains de ses premiers concurrents.»
    – Jason Hoffman, Retour sur l'histoire de CSS

    Pendant longtemps, CSS a fourni des solutions de conception pour un seul objet – mais il n'a pas donné une réponse adéquate à la relation entre

    Les méthodes pour résoudre ce problème étaient en fait des hacks, et ils n'étaient pas capables de gérer une grande complexité. À mesure que les sites évoluaient de simples documents à des applications complexes, les mises en page Web devenaient difficiles à assembler. Au lieu d'utiliser un style de manière déclarative comme Lie l'a conçu, les développeurs Web ont été contraints d'utiliser la programmation impérative.

    Un système de grille basé sur les règles du designer suisse Josef Müller-Brockmann qui était habituel dans l'impression à partir des années 1940 semble être un rêve lointain lorsqu'on considère tout ce qui touche au Web.

     Trois affiches de Josef Muller-Brockmann
    Affiches de Josef Muller-Brockmann. ( Grand aperçu )

    En raison de ces limitations de mise en page, les plates-formes sans code ont été forcées d'ajouter une couche abstraite pour effectuer des calculs en coulisses. Cette couche cause une série de problèmes, y compris la perte de la valeur sémantique des objets, des problèmes de performances, du code volumineux, une courbe d'apprentissage complexe, des problèmes de non évolutivité et d'accessibilité.

    2. Alignement des navigateurs

    Au tout début, ce sont les fabricants de navigateurs qui décident comment construire Internet. Cela a conduit le Web à devenir une marchandise manipulatrice. La concurrence entre les navigateurs a conduit à des «caractéristiques de conception» uniques. Cela a forcé la nécessité de reconstruire le même site plusieurs fois, afin qu'il puisse être consulté à partir de plusieurs navigateurs.

    «Les développeurs dans les années 90 auraient souvent à créer trois ou quatre versions de chaque site Web qu'ils ont construit, afin qu'il soit compatible avec chacun des navigateurs disponibles à l'époque. »
    – Amy Dickens, Web Standards: The What, The Why, And The How

    Pour compenser la nécessité de créer des sites Web adaptés à des navigateurs spécifiques , la communauté du World Wide Web Consortium (WC3) a été créée au MIT en 1994. Le WC3 est une communauté internationale qui travaille à l'élaboration de normes Web fonctionnelles, accessibles et intercompatibles.

    Lorsque les normes ont été introduites, les fabricants de navigateurs ont été encouragés à s'en tenir à une seule façon de faire les choses – empêchant ainsi la construction de plusieurs versions du même site. Malgré les recommandations de WC3, il a fallu beaucoup de temps aux navigateurs pour répondre aux mêmes normes.

    En raison d'un manque d'alignement entre les navigateurs (Internet Explorer, je vous regarde), CSS a été bloqué pendant un certain temps et pas de nouveau des capacités ont été ajoutées. Une fois qu’un langage déclaratif ne prend pas en charge quelque chose, il vous oblige à vous appuyer sur toutes sortes de hacks impératifs pour atteindre cet objectif.

    3. Liaison de données

    Dans les premières années du Web, les sites se développaient comme un ensemble de pages statiques sans signification sémantique. Lorsque le Web 2.0 est arrivé, il a reçu la description «le Web en tant que plate-forme», ce qui a conduit à un changement important – les pages avaient un contenu dynamique, qui affectait la connexion aux données, et bien sûr la signification sémantique.

    les années 1990 étaient généralement soit des brochures (pages HTML statiques avec un contenu insipide), soit elles étaient interactives d'une manière flashy, animée, JavaScript. »
    – Joshua Porter, Web 2.0 for Designers [19659018] En effet, la connexion aux données en utilisant une approche sans code existe depuis longtemps – mais l'expérience utilisateur était difficile. De plus, la transition vers le marquage sémantique afin que le contenu puisse être détecté dans les outils sans code a été difficile en raison du mélange entre la programmation déclarative et impérative.

    Les outils sans code ne concordaient pas avec ces tâches de base.

     Un réaliste Collage avec une 3D tenant Vieille télé avec écran de pépin
    ( Grand aperçu )

    Proto-Renaissance

    Le 29 juin 2007, la nature d'Internet a été radicalement changée. Ce fut le jour où Steve Jobs a présenté l'iPhone – une combinaison de téléphone mobile et de lecteur multimédia qui se connectait à Internet et permettait la navigation multi-touch.

    Lorsque l'iPhone a été introduit en 2007, ce fut un tournant pour la conception Web . Tout à coup, les concepteurs Web ont perdu le contrôle de la toile sur laquelle nous concevions des sites Web. Auparavant, les sites Web ne devaient fonctionner que sur des écrans de surveillance, de taille variable, mais pas tellement. Comment étions-nous censés faire fonctionner nos sites Web sur ces minuscules petits écrans?
    – Clarissa Peterson, Apprentissage de la conception Web réactive

    Cela a créé de nouveaux défis pour le développement de la conception Web. Principalement, comment créer un site pouvant être utilisé sur plusieurs types d'appareils. Beaucoup d'approches «hack» de la conception de mise en page se sont tout simplement effondrées – elles ont causé plus de problèmes qu'elles n'en ont résolu.

    Tout devait être réévalué.

    The No-Code Renaissance

     Une paire de statues flottant dans les airs alors qu'elles s'embrassent
    ( Grand aperçu )

    Les navigateurs prenant en charge les normes WC3 (Chrome et Firefox) ont aujourd'hui une énorme part de marché ce qui a poussé plus de navigateurs à prendre en charge les normes. Le fait que tous les navigateurs prennent en charge la même norme, permettent l'alignement dans la construction des sites et garantissent que ces capacités continueront de fonctionner à mesure que les normes et les navigateurs évoluent.

    Méthodes telles que la requête multimédia, la flexbox et la grille – qui sont disponibles nativement dans les navigateurs pour la conception de mise en page – ont ouvert la voie à des mises en page flexibles, même lorsque la taille des éléments est dynamique.

    «Lorsque CSS Grid a été expédié en mars 2017, notre boîte à outils a atteint un point de basculement. Enfin, nous avons une technologie suffisamment puissante pour nous permettre d'être vraiment créatifs avec la mise en page. Nous pouvons utiliser la puissance de la conception graphique pour transmettre du sens grâce à notre utilisation de la mise en page – en créant des mises en page uniques pour chaque projet, chaque section, chaque type de contenu, chaque page. »
    – Rachel Andrew, The New CSS Layout

    De cette façon, le HTML est devenu plus propre et a pu atteindre son objectif initial: une description sémantique du contenu.

    Enfin, grâce à l'alignement entre les navigateurs et les nouvelles capacités, les outils sans code sont soutenu par une technologie puissante et uniforme. Ces changements ont créé une distinction plus claire entre déclaratif et impératif. De nouvelles possibilités ont été créées pour résoudre d'anciens problèmes.

    «La simplicité est la sophistication ultime.»
    – Leonardo da Vinci

    L'effet de l'absence de code sur les concepteurs

     Une capture d'écran de l'éditeur X en mode édition [19659011] <a href= Rédacteur X | Photo de David par Igor Ferreira sur Unsplash. ( Grand aperçu )

    Les développements d'Internet au fil des ans ont conduit à une situation où l'abstraction entre la conception et le code s'améliore constamment. Cela a des implications sur la manière dont les concepteurs de sites Web planifient et mettent en œuvre leurs conceptions.

    1. Planification de la conception

    Alors que les outils de conception courants utilisent du contenu statique pour la conception Web dynamique, les outils sans code permettent aux concepteurs de travailler avec les propres matériaux du Web.

    «Photoshop est le moyen le plus efficace de montrer à vos clients ce que leur site Web ne fera jamais. ressembler. »
    – Stephen Hay, auteur de Responsive Design Workflow

    Si nous avons une conception complexe avec différents états, micro-interactions, animations et points d'arrêt réactifs – en utilisant des outils sans code, nous pouvons travailler dans un plus

    De plus, le développement du Web permet aux outils sans code de séparer clairement le contenu de la conception (ce qui permet aux concepteurs de gérer visuellement le contenu réel). Le fait de refléter le contenu dynamique de la conception (par exemple, le texte, les images, les vidéos et l'audio) permet aux concepteurs de mieux comprendre comment il apparaîtra.

    L'avantage de travailler dans l'espace de travail sans code est que les interactions apparaissent immédiatement. Cela permet aux concepteurs de tester rapidement leurs choix de conception et de voir s'ils fonctionnent.

    2. Implémentation de la conception

    Après avoir investi dans la perfection de la conception, les concepteurs doivent expliquer les décisions visuelles et conceptuelles aux développeurs à travers des prototypes. Les prototypes prennent non seulement du temps en termes de préparation, mais leur conception est souvent mise en œuvre de manière incorrecte en raison de mauvaises interprétations.

    Avec des outils sans code, les concepteurs peuvent placer des objets sur leur écran et gérer leur visibilité et leur comportement avec facilité et rapidité. . En d'autres termes, ils peuvent concevoir le résultat final sans dépendre de qui que ce soit.

    Pour me prendre en exemple, lorsque la pandémie de coronavirus a frappé, j'ai travaillé avec une petite équipe sur un projet visant à aider les jeunes volontaires à personnes âgées isolées . En seulement trois jours, moi-même et un autre concepteur avons construit le site Web et connecté les données d'enregistrement des utilisateurs à une base de données, tandis que le développeur de l'équipe a travaillé pour intégrer les données du site dans une application mobile distincte.

    The Effect Of No-code On Developers [19659021] Les outils sans code remplaceront-ils complètement les développeurs? La réponse courte: Non. Le changement important concerne la manière dont les concepteurs et les développeurs peuvent travailler ensemble pour créer des sites Web.

    En plus du développement de CSS, Javascript a également évolué en parallèle et peut-être même plus. L'idée que les développeurs frontend doivent contrôler toutes les capacités n'a aucun sens. Et pourtant, le développement du no-code au fil des ans a permis aux concepteurs de créer leurs propres conceptions.

    C'est une situation gagnant-gagnant, dans laquelle les développeurs peuvent se concentrer sur le développement de la logique et les concepteurs ont plus de contrôle sur l'expérience utilisateur et

    L'effort n'est pas encore terminé

    Je ne veux pas vous laisser l'impression que les concepteurs ont la liberté totale de concevoir avec des outils sans code. Il y a encore des capacités de style manquantes que CSS n'a pas encore résolues, et celles-ci nécessitent encore un développement impératif.

    Contrairement au Moyen Âge, où l'art était considéré comme un artisanat sans base théorique, les développements de la Renaissance ont changé le statut de l'artiste – qui était soudainement considéré comme un polymathe.

    Les outils sans code suppriment les goulots d'étranglement, ce qui permet aux concepteurs d'acquérir davantage de propriété, d'influence et de contrôle sur les expériences qu'ils conçoivent.

    Nous avons parcouru un long chemin depuis l'époque où les concepteurs n'ont pas pu donner vie à leurs créations. À mesure qu'Internet évolue, les navigateurs s'alignent, des fonctionnalités sont ajoutées et l'accessibilité de la technologie devient plus facile – les concepteurs sont confrontés à de nouvelles opportunités pour créer, penser et changer leur statut avec des outils sans code.

    Le mouvement sans code n'est pas seulement affecte la manière dont les choses sont faites, mais par qui.

    Crédits : Yoav Avrahami et Jeremy Hoover ont contribué à cet article.

    Lectures complémentaires sur SmashingMag:

     Smashing Editorial (fb, ra, yk, il)




    Source link