Les 8 outils parfaits pour coder une page de vente
Lorsque l'on pense à une page de vente, on pense systématiquement à Shopify. Cet outil fonctionne très bien et est très efficace. Cependant, pour un développeur c'est assez frustrant de ne pas pouvoir faire tout ce que l'on veut de sa page. Si je devais faire une page de vente de A à Z moi-même, voici ce que j'utiliserais en tant que développeur.
Je vous propose une liste d'outils j'utiliserais pour accélérer les développements et à la fin de cet article je vous dévoilerai combien de temps je peux mettre à le faire.
Entendons-nous bien, cette estimation est faite pour un site mono produit, avec pas ou peu de déclinaisons et un design assez simple à intégrer. Je ne prends pas en compte le design car je le fais en même temps que mes composants mais autant compter 1 à 2 jours en plus pour peaufiner le rendu.
Les librairies que j'utilise pour coder une page de vente
Moteur de page 🚀
Nextjs et Typescript pour bénéficier d'un système de page avec React comme moteur de rendu et une API rapide à mettre en œuvre. Next nous fait gagner au moins 2 semaines de boulot et est maintenu par une communauté active.
Les outils de style et design 💅
Tailwind pour le CSS car même si cette librairie ne fait pas tout, elle permet d'aller très très vite avec des classes pré construites. Pour peu qu'on les connaisse bien, le gain de temps n'est pas négligeable. Couplé au package classnames , ces librairies permettront d'ajouter des classes optionnelles, de les concaténer etc...
Les outils de formulaires ✏️
React-Hook-Form pour les formulaires, il me font gagner 10% à 15% de mon temps sur les formulaires. Elles permettent un two-way binding très simple à intégrer au lieu de tout faire à la main avec un useState.
Les outils de requêtes client/server 📡
React-Query (devenu Tanstack query dernièrement) pour les requêtes, car c'est un outil pratique et permettant de mettre en cache des réponses serveur. Il gère tout seul l'invalidation de donnés et se couple parfaitement avec des hooks. De plus avec next il existe d'autres fonctionnalités tels que le prefetch en server side qui sont des alternatives intéressantes en cas de besoin.
Les outils de paiement 💰
Stripe pour le paiement ! C'est un must have lorsque vous intégrez un système de paiement. J'ai l'impression qu'il a été créé pour les développeurs tant il est pratique à intégrer et fourni énormément d'outils pour vous faciliter davantage la tâche.
Stripe ne se contente pas uniquement d'exposer une API, il fourni lui même des librairies client et serveur pour vous permettre d'intégrer le service plus facilement.
Vous avez notamment des outils et CLI qui vous permettront de tester les webhook en mode développement (pour un retour sur une IP local). Ainsi que tout un système de jeu de test pour faire des essais d'achat sans frais pendant les développements.
Je précise qu'en général j'opte pour une intégration totale de la partie paiement sur le site pour éviter les redirections. Le temps de friction épargné peut augmenter le nombre de ventes.
Les outils de base de données 💾
Mongodb comme base de données pour structurer à son rythme très facilement. Pour des projets un peu plus matures en terme de structure et de donnés je dirai un Postgresql .
Le choix de l'ORM 🛠
Pour accélérer notre développement, il nous faut un ORM pour faire le lien code/base. Si mon choix de base se porte sur Mongo je prendrais la librairie Mongoose pour l'intégration et pour Postgres je choisirais Prisma .
Prisma fonctionne aussi avec les bases Mongo mais son approche est très orienté sequel, de ce fait vous écrivez les requêtes un peu trop comme s'ils étaient en SQL, a moins de faire du raw mais cela n'a pas beaucoup de sens.
Les outils d'envoie d'emails ✉️
Mailgun pour les emails transactionnels. Cela ne vous épargnera pas le fait de devoir obtenir un SMTP pour vos envois mais mailgun se chargera du reste.
Combien de temps faut-il avec ces outils pour coder sa propre page de vente ?
Avec ces 8 outils, je dirais qu'il me faut entre 3 et 4 jours pour créer de A à Z un tunnel de vente totalement personnalisé avec paiements, mails, contact messages. Et ce temps est nécessaire que pour un premier projet, car, avec des briques réutilisables ce temps peut être divisé par 3 ou plus.
Ce qui signifie que votre première page de vente serait la plus longue et par la suite ce temps deviendrait dérisoire.
La première page de vente que j'ai codé date de 2020 et utilise d'autres technologies (entre-autres : Node, Handlebars, Stripe, Jquery, Mailgun). Cette page m'avait pris une semaine à l'époque avec des outils moins efficaces.
En ce moment même je travaille sur un projet de page de vente pour un SaaS et même en incluant le temps de développement du service je suis à moins d'une semaine de développement.
Alors vous attendez quoi pour vous lancer ? 🧐
Alexandre P.
Développeur passionné depuis plus de 20 ans, j'ai une appétence particulière pour les défis techniques et changer de technologie ne me fait pas froid aux yeux.
