Tout savoir sur le développement d’applications web (2021)

Laurent Gloaguen

English

Ce petit guide vous explique tout ce que vous devez savoir sur le développement d’une application web, toutes les technologies et toutes les étapes qui vont vous mener de l’idée initiale à une application fonctionnelle.

Au sommaire

Qu’est-ce qu’une application web ?

Les applications web sont le plus souvent des applications de type client-serveur qui reposent sur les technologies du web pour le rendu de l’interface et les interactions avec l’utilisateur. Elles sont donc généralement accessibles via un navigateur standard (Google Chrome, Firefox, Microsoft Edge, Opera, Vivaldi, etc.). C’est le cas par exemple pour les suites applicatives Google Workspace et Microsoft 365.

Elles se distinguent d’un site web classique par leur interactivité et par la capacité donnée à l’utilisateur de manipuler des données et d’accomplir des tâches parfois sophistiquées. De fait, en matière de fonctionnalités, elles se rapprochent souvent des applications traditionnelles, tout en s’en distinguant souvent quant à l’aspect, l’expérience utilisateur et parfois la facilité d’utilisation. Si vous avez déjà eu l’occasion d’utiliser l’application desktop Microsoft Office et sa version application web, Office 365, vous savez de quoi il retourne.

L’interface utilisateur d’une application web peut aussi être encapsulée dans une application de visualisation web, ce qui permet de réaliser autant des applications mobiles (grâce à UIWebView sur iOS et WebView sur Android) que des applications “desktop” (grâce au framework Electron par exemple, qui inclut le moteur de rendu web Chromium). Une application de visualisation web est en fait un navigateur réduit à sa plus simple expression, sans interface de navigation, qui ne permet d’accéder qu’à une seule application en ligne. Des applications courantes comme WhatsApp, Twitch, Microsoft Teams et Slack reposent sur cette technologie.

Les applications web offrent de nombreux avantages :

  • Quand elles s’exécutent côté client dans un navigateur, aucune installation complexe n’est nécessaire pour l’utilisateur. Elles sont ainsi immédiatement fonctionnelles.
  • Elles n’exigent pas de l’utilisateur d’effectuer des mises à jour logicielles. C’est toujours la dernière version qui “tourne”.
  • Elles sont généralement peu exigeantes du côté matériel (espace disque, puissance de calcul) pour le client.
  • Elles sont par nature multiplateformes sur ordinateur de bureau (Windows, Mac, Linux). C’est aussi souvent le cas pour les applications web optimisées pour le mobile (iOS et Android).
  • La même application et vos données peuvent être utilisées facilement sur différents appareils, l’ordinateur de votre entreprise et votre ordinateur personnel par exemple, ce qui peut être utile dans un contexte de télétravail.
  • Les données stockées à distance ouvrent la porte à des usages collaboratifs simplifiés (plusieurs utilisateurs modifiant en même temps un même document, par exemple).
  • Etc.

Différents types d’applications web

Les applications web statiques

Plutôt que d’assembler des pièces de contenu dans des processus côté serveur avant de les envoyer à l’utilisateur, ce genre d’applications web s’appuie entièrement sur le navigateur client pour gérer l’interaction et le rendu du contenu. En d’autres termes, une application web statique ne dépend pas d’un serveur pour la fourniture de contenus dynamiques, mais seulement d’un serveur web standard qui délivre des fichiers statiques. Elle repose entièrement sur les technologies du web et est donc composée de fichiers HTML, CSS, JavaScript et d’images (GIF, JPEG, SVG). La manipulation du rendu (HTML+CSS) se fait au sein du navigateur, via JavaScript.

L’un des avantages des applications web statiques est l’économie en ressources côté serveur, puisqu’elles sont simplement des fichiers stockés sur un serveur web ordinaire (HTTP) et envoyés tels quels à l’utilisateur final. Vous n’avez pas à gérer d’infrastructure capable de supporter la montée en charge provoquée par la multiplication de processus actifs sur votre serveur au fur à mesure que le nombre d’utilisateurs de l’application croît. Aussi, il est possible de produire des applications capables de fonctionner hors-ligne. Cela étant dit, leur domaine d’application est somme toute limité.

Les applications web dynamiques

Les applications web dynamiques reposent sur un serveur web pour servir les fichiers au navigateur client (Apache, Nginx, Lighttpd, etc.) et sur un serveur applicatif pour produire le contenu qui répond aux requêtes du client. La technologie du serveur applicatif peut faire appel à différents langages de programmation comme nous le verrons plus loin.

L’inconvénient de ces applications dynamiques est qu’elles ont besoin d’une connexion permanente au serveur sur lequel une instance de l’application s’exécute. Cette connexion peut être exigeante en bande passante pour une application complexe et, sans connexion adéquate, l’utilisateur risque de subir des lenteurs et des dysfonctionnements. En cas de coupure à l’accès Internet, l’application ne peut plus du tout fonctionner. Aussi, plus il y a d’utilisateurs, plus l’infrastructure côté serveur doit être robuste pour supporter la montée en charge.

Les applications web hybrides

Nous les citons pour être exhaustif d’un point de vue théorique et parce que cette dénomination est parfois utilisée. Ces applications dites hybrides ont une partie des fonctionnalités qui s’exécutent en local au sein du navigateur grâce à JavaScript et une autre qui est traitée sur un serveur distant. Elles tiennent donc à la fois de l’application web statique que de l’application web dynamique. Dans la pratique, la plupart des applications web dynamiques actuelles sont en fait aussi hybrides dans une certaine mesure, puisqu’elles font appel à des scripts JavaScript exécutés en local (ne serait-ce que pour injecter du contenu dans le HTML du client via Ajax, une technique basée sur JavaScript).

Les applications web progressives (PWA)

Les applications web progressives (PWA) sont une manière de développer des applications web, qui vise plus particulièrement le mobile et qui met l’accent sur la qualité de l’expérience utilisateur, quels que soient l’appareil utilisé et la qualité de sa connectivité. C’est une sorte une norme qui est soutenue par Google, notamment pour sa plateforme Android. Il est possible de mesurer le pourcentage de conformité d’une application au “standard” PWA. Dans la pratique, il s’agit d’applications web statiques (voir plus haut).

Quelques exemples d’applications web

Les applications web sont omniprésentes sur Internet. Dès que vous êtes sur un site transactionnel, vous faites en fait face à une application web. Elles sont aussi de plus en plus courantes en tant que SaaS (“software as a service” ou logiciel en tant que service). Ces logiciels, gratuits ou vendus sur abonnement, sont accessibles via un navigateur et peuvent être presque aussi sophistiqués qu’une application native pour ordinateur. La suite Office 365 est un bon exemple de SaaS et depuis peu de temps, Adobe propose une version application web tout à fait convaincante de son logiciel phare, Photoshop. Ce qui démontre qu’il est possible de faire des choses très ambitieuses avec les applications web.

Les applications web peuvent aussi se faire discrètes à un tel point que la plupart de leurs utilisateurs ignorent qu’ils interagissent avec une application web. C’est le cas des applications web encapsulées, qui se présentent sur l’ordinateur comme une application standard et qui ne nécessitent pas l’usage d’un navigateur. Ces applications sont réalisées à l’aide de frameworks comme Electron qui combine le moteur de rendu Chromium (le moteur d’affichage du navigateur Chrome) et le runtime Node.js.

Les plateformes de commerce en ligne

Les sites de commerce en ligne sont des applications web qui peuvent prendre à charge de nombreuses fonctionnalités, allant du traitement des commandes à la gestion du stock. Les très gros acteurs comme Amazon ont développé leur propre application qui répond très spécifiquement à leurs besoins. Les petites et moyennes entreprises ont recours à des solutions SaaS comme Shopify par exemple. Ce genre de plateforme offre tous les outils nécessaires à la création et au lancement de sites de commerce électronique, y compris la gestion des produits et de la chaîne d’approvisionnement, et l’intégration des systèmes de paiement.

Les solutions de gestion de la relation client (CRM)

Un logiciel de CRM (pour “customer relationship management”) est un outil conçu pour aider les entreprises à offrir à leurs clients une expérience unique et à entretenir la relation avec eux afin de développer les ventes. Il fournit un portrait complet de toutes les interactions avec les clients et offre des outils sophistiqués de suivi des ventes. Il permet un travail collaboratif entre différentes équipes comme les ventes et le marketing. Des exemples de solutions de gestion de la relation client populaires sont les plateformes Salesforce et HubSpot.

Les logiciels de gestion intégrée (ERP)

Un logiciel d’ERP (pour “enterprise resource planning”) constitue la colonne vertébrale de bien des entreprises en centralisant de nombreuses fonctions essentielles comme la gestion des ressources humaines, la gestion comptable et financière, l’aide à la décision, etc. Ces importants logiciels sont de plus en plus proposés en tant que SaaS, c’est-à-dire en tant qu’application web sur abonnement. Parmi ces solutions en ligne, on trouve Microsoft Dynamics 365, Oracle NetSuite ERP, Sage X3 ERP, SAP Business ByDesign, Plex Manufacturing Cloud, etc.

Les systèmes de gestion de contenus (CMS)

Pour gérer des contenus en ligne, c’est-à-dire bâtir un site web, on a aujourd’hui recours à deux solutions. La première est d’installer une application, par exemple Drupal ou ProcessWire, sur un serveur. La seconde, plus simple, est d’avoir recours à une plateforme SaaS où tout est préinstallé, par exemple Wordpress.com, Squarespace ou Wix. Dans tous les cas, ce sont toujours des applications web pour la partie “back office”, c’est-à-dire les interfaces qui vous permettent de gérer vos contenus.

Le processus de développement d’une application web

Le processus développement d’une application web est similaire à celui de toute autre application. Il passe par des étapes toutes indispensables à la réussite du projet.

1. La planification

La planification est une phase fondamentale du développement d’une application web, basée essentiellement sur des rencontres exploratoires et d’analyse avec l’équipe multidisciplinaire chargée du développement. Elle vise à atténuer les risques et à partir sur de bonnes bases. Il ne faut pas la bâcler ou l’esquiver, car c’est souvent là que se décide le futur succès ou l’échec. Elle sert à définir le concept, à préciser les contours du produit final, à identifier le public cible et à jauger la pertinence de chaque fonction offerte.

2. Les requis

Cette étape reprend le travail effectué à l’étape de planification et ajoute un niveau de détail supplémentaire pour aboutir à un inventaire le plus exhaustif possible des besoins et des objectifs de l’application web. La transcription de ceux-ci se détaille en fonctionnalités applicatives qui pourront être priorisées en équipe (par “sprints” dans le cadre d’un développement mené avec la méthodologie Agile) pour le design et le développement. À la fin de cette tache, vous avez normalement tous les éléments pour évaluer les coûts du projet.

3. Le design et le prototypage

Lors de cette phase, une fois les requis bien définis, on réalise une schématisation de l’architecture de l’application web. Celle-ci peut prendre différentes formes. Elle peut décrire l’architecture technologique (matérielle et logicielle) et les interfaces exposées à différents services ou à des sources de données, par exemple.

Aussi, une analyse de l’expérience usager (User Experience) permet de bâtir des maquettes fonctionnelles (Wireframes) pour valider la fonctionnalité visuelle (User Interface), l’ergonomie et l’usage efficient de navigation au sein de l’application. L’objectif de la conception UX/UI d’une application web est de créer d’excellentes expériences utilisateur via des interfaces interactives, intuitives, fluides, efficientes et conviviales. Le succès d’une application web repose en grande partie sur la qualité de son design qui influe sur la façon dont les utilisateurs adoptent et utilisent toutes les fonctionnalités.

Diverses preuves de concepts peuvent donner lieu à des prototypes fonctionnels. Ceux-ci sont testés et validés du côté frontal (Front-End) avec des utilisateurs représentatifs du public cible avant de pouvoir se lancer dans la prochaine étape.

4. Le développement logiciel

Comme le nom l’indique, c’est l’étape où les développeurs écrivent le code de l’application (Front-End et Back-End) et connectent les interfaces pour atteindre les objectifs définis. Suivant la plateforme côté serveur et le type d’application web, les développeurs sont appelés à utiliser différents langages de programmation et outils logiciels. Tout ceci est développé en détail dans la section “technologies utilisées” que vous trouverez plus bas.

Dans le cadre de la méthodologie Agile-Scrum, la plus courante, c’est un processus itératif. Le client est associé tout au long du processus et il est en mesure de suivre, tester et approuver les fonctionnalités déjà codées et à venir. Ceci permet de livrer une solution opérationnelle en fonction des besoins priorisés par cycles de développement (les “sprints”).

5. Les tests et l’assurance qualité

Pendant la phase de développement, divers tests mettent à l’épreuve l’application web afin de valider son comportement, sa sécurité, ses performances et son fonctionnement dans différents environnements côté client (réels ou virtuels). Il s’agit de contrôler une grande quantité d’aspects : l’application répond-elle de la façon attendue dans tous les cas de figure ? Les interfaces s’affichent-elles correctement sur différents formats d’écrans et dans différentes orientations dans le cas du mobile ? Sont-elles suffisamment réactives ? L’application gère-t-elle correctement la bande passante du réseau ? Est-ce que les détails des comptes-utilisateurs sont stockés de façon suffisamment sécurisée ? Etc.

Les équipes suivent des plans de tests et les résultats sont passés en revue. Durant ce travail d’assurance qualité (AQ), il y a une rétroaction continuelle entre les analystes qualité et les développeurs pour supprimer tout dysfonctionnement, erreur ou non-conformité aux attentes. Une fois que tous les problèmes relevés par les analystes qualité ont été résolus, l’application est prête à être déployée. La réalisation de tests d’assurance qualité approfondis pendant le processus de développement est le seul moyen de s’assurer que l’application web sera stable, utilisable et sûre dès son premier jour.

6. Le déploiement

Le déploiement marque la fin des développements et des tests sur l’application web. Il marque le grand jour où des utilisateurs vont pouvoir découvrir votre application. Cette phase est constituée pour la plupart des applications web de la mise à disposition de l’application client sur une plateforme de diffusion et du transfert de l’application serveur et des bases de données qui lui sont rattachées sur un environnement de production.

Des fournisseurs d’infrastructure dédiée aux services web, comme Amazon Elastic Compute Cloud (EC2) ou Microsoft Azure App Services, proposent des outils qui simplifient et sécurisent le déploiement d’une application web sur leurs serveurs.

La dernière étape est de connecter les côtés client et serveur afin que le routage des requêtes et réponses via HTTPS se fasse correctement. On peut utiliser un équilibreur de charge pour recevoir les demandes faites par le client via le front-end et les acheminer vers les instances du back-end qui renverront une réponse au client. Là encore, les principaux fournisseurs infonuagiques proposent des outils performants comme l’Elastic Load Balancing qui distribue automatiquement le trafic entrant des applications sur plusieurs instances Amazon EC2. Comme il est très fortement indiqué de le faire, tout le trafic entre le client et le serveur doit être encrypté. On aura donc besoin d’un certificat SSL à jour.

7. La maintenance

C’est une phase où, typiquement, une autre équipe prend la relève. Cette nouvelle équipe est en quelque sorte un service à la clientèle post-déploiement. À la suite d’une période de stabilisation de la solution déployée, l’équipe de support et maintenance reste en alerte face aux demandes du client, au monitorage de la performance, aux rapports de plantages et aux problèmes signalés par les utilisateurs finaux. C’est elle aussi qui s’assurera que l’application restera compatible avec de nouvelles générations de navigateurs web et de nouvelles versions de systèmes d’exploitation.

Notez qu’une assistance rapide aux utilisateurs finaux et la mise en production fréquente de correctifs pour améliorer l’application sont essentielles pour maintenir l’engagement des utilisateurs. Encouragez aussi les utilisateurs à vous faire part de leurs commentaires et suggestions concernant votre application. Ils peuvent être une aide majeure dans l’amélioration de votre application.

Les technologies utilisées pour construire des applications web

Dans sa forme la plus courante, une application web dynamique repose sur une architecture client-serveur dite à “trois tiers”. Le premier tiers est l’affichage sur le poste du client. Celui-ci est pris en charge par le navigateur grâce aux technologies du web (principalement HTML, CSS et JavaScript). Le second tiers réside sur un serveur et s’occupe de recevoir les requêtes du client et d’y répondre de façon appropriée. C’est la “logique applicative”. On peut choisir parmi une très grande variété de technologies pour prendre en charge ce tiers, et on peut aussi parfois faire appel à plusieurs d’entre elles pour une seule application (la logique applicative est alors décomposée en plusieurs entités). Le dernier tiers est le stockage des données. C’est une base de données classique qui répond aux requêtes du second tiers. Le choix des technologies est ici plus restreint. On y trouve les très classiques MySQL, PostgreSQL, Microsoft SQL Server, Oracle, SQLite, MongoDB, etc.

Le code côté client

Il s’agit du code qui est téléchargé par le client afin d’assurer l’affichage de l’interface et les transactions de données avec le serveur. Ce code se répartit en trois parties : le HTML, les feuilles de styles et le JavaScript. Pour le réaliser, on peut soit partir de zéro, soit avoir recours à un ou plusieurs frameworks. Les frameworks ont l’avantage d’accélérer les choses et offrent généralement un ensemble de conventions qui facilite le travail à plusieurs.

Le code côté serveur

L’application qui “tourne” sur le serveur peut-être codée en ayant recours à une grande variété de langages de programmation, par exemple : C#, Java, Python, Ruby, PHP. Cette application reçoit les requêtes HTTP du client, les traite et retourne au client les réponses attendues. Là aussi, on peut faire appel à des frameworks de développement, chaque langage en offrant un ou plusieurs.

Les frameworks web

Bien choisir son framework

Bien choisir son framework est une opération toujours délicate, car les conséquences d’un mauvais choix sont toujours une perte de temps et d’argent. Changer d’outil en cours de développement n’est jamais souhaitable et rester bloquer avec une architecture inappropriée générera des problèmes pendant toute la durée de vie de l’application.

Différents critères sont à considérer dans ce choix :

  • Les besoins de l’application. En premier lieu, il est important de bien définir ce que l’application devra faire avant de choisir un framework. Avec une bonne idée des besoins de l’application, il est bien plus facile d’orienter les recherches afin d’établir une première liste de frameworks à évaluer.
  • La popularité du framework. La popularité du framework n’est pas un critère technique, mais il est cependant très important pour guider le choix. Plus le framework est populaire, plus sa communauté est active. Cela signifie plus de réponses aux problèmes courants sur des sites comme StackOverflow, plus de tutoriels, plus de plug-ins, plus de contributions open-source, etc. Aussi, la popularité est un gage de pérennité de la solution.
  • La qualité documentation. Celle-ci peut être très variable suivant les frameworks. Il est donc important de jeter un coup d’œil à la documentation afin de vérifier si elle est bien complète. De nombreux exemples et tutoriels sont généralement de bons indices d’une bonne documentation. Aussi, vérifiez que la documentation est à jour avec la dernière version du framework.
  • Les coûts. Un facteur à considérer lors du choix d’un framework est que certains ne sont pas gratuits, ou seulement partiellement gratuits, ou encore ne sont disponibles que sur des plateformes payantes.
  • L’extensibilité fonctionnelle. De nombreux frameworks sont extensibles via des modules ou plug-ins. Examinez la richesse et la variété du catalogue offert avant de faire votre choix. Il y a peut-être le module qui vous fera économiser du temps de développement sur une fonction clé.
  • La compatibilité avec l’architecture existante. L’application peut avoir à s’intégrer dans une architecture plus large ou sur des serveurs qui imposent des limites aux langages et frameworks possibles. Par exemple, si vous utilisez déjà Microsoft .NET pour des services interagissant avec la base de données ou pour de la logique d’affaires, il peut être intéressant d’opter pour ASP.NET pour vos applications web.
  • Les compétences de l’équipe. Avoir un ou plusieurs développeurs qui maîtrisent déjà le framework envisagé, ainsi que le langage sur lequel il repose, est un atout considérable. Cela signifie moins de temps d’apprentissage et ne pas tomber dans le piège des erreurs les plus communes. Si personne dans l’équipe ne connaît le langage Ruby, il n’est sans doute pas très raisonnable de se lancer avec Ruby on Rails, à moins d’avoir beaucoup de temps à perdre.
  • La sécurité. Dernier point, mais non le moindre. Certains frameworks mettent l’accent sur la sécurité et activent par défaut des protections de base, alors que d’autres demandent au développeur d’y penser. Il est aussi important d’utiliser un framework régulièrement mis à jour pour colmater d’éventuelles brèches dès qu’elles sont découvertes, ce qui est un argument supplémentaire en faveur du critère de la popularité. Enfin, il faut faire très attention aux plug-ins que l’on va utiliser, car ils peuvent introduire des failles dans un framework autrement sûr.

Les frameworks du front-end

Les frameworks web côté client sont basés sur JavaScript et TypeScript (un surensemble syntaxique de JavaScript qui est développé par Microsoft). Nous détaillons ci-après quelques exemples parmi les plus courants, mais la liste est très loin de s’arrêter là.

React est une bibliothèque JavaScript gratuite et open-source qui est extrêmement populaire et qui est utilisée par d’innombrables applications web. Maintenue par Facebook et une communauté de développeurs, elle permet de construire des interfaces utilisateur hautement interactives via la création de composants. À l’usage, React se montre particulièrement flexible et performante, en utilisant un DOM virtuel et en ne mettant à jour le rendu dans le navigateur qu’en cas de réelle nécessité.
⇨ reactjs.org.

Vue est une bibliothèque JavaScript développée par un ancien ingénieur de Google et soutenue par une communauté de développeurs. Dotée d’une excellente documentation et de fonctionnalités qui n’ont rien à envier de la concurrence (dont un DOM virtuel), cette bibliothèque légère jouit d’une grande popularité tout à fait méritée. C’est le framework de choix quand il s’agit de bâtir une application web progressive.
⇨ vuejs.org.

Angular est un framework basé sur TypeScript et développé par Google. Privilégiant la stabilité, la robustesse et la sécurité à l’innovation, il constitue le framework idéal pour le développement de grosses applications d’entreprise. Angular convient plus aux applications complexes qu’à celles hautement interactives. Si sa courbe d’apprentissage est peut-être plus abrupte, une fois maîtrisé, il permet des développements rapides et robustes.
⇨ angular.io.

Ember est un framework JavaScript d’un apprentissage aisé qui est doté d’une communauté très vivante. Existant depuis plus de 10 ans, il offre une bibliothèque de plug-ins étoffée et mature. Il offre la possibilité de faire le rendu du DOM côté serveur (dans Node.js via FastBoot). Le fort accent mis sur la productivité et les conventions de structure vous évite un développement anarchique et facilite le travail collaboratif, à la différence de React, par exemple, qui offre peu de garde-fous. Si vous aimez les choses bien organisées et toutes à leur place, Ember est fait pour vous.
⇨ emberjs.com.

JQuery figure parmi les plus anciens frameworks JavaScript et est toujours bien vivant et largement utilisé. Il est accompagné d’une forte communauté, d’un grand choix de plug-ins et offre de multiples possibilités de manipulation du DOM. S’il est tout à fait approprié pour bon nombre d’applications, il se montre toutefois plus lourd à utiliser que des frameworks plus modernes et perd en popularité chez les développeurs.
⇨ jquery.com.

Backbone est une librairie JavaScript à architecture MVC qui vous encourage à traduire vos données en modèles, les manipulations de DOM en vues, et à les lier entre elles par des événements. Légère, elle est un bon choix pour la création d’applications web simples, de petite taille et monopages.
⇨ backbonejs.org.

Svelte n’est pas vraiment un framework ou une librairie. C’est en fait un compilateur qui offre une approche radicalement différente dans la construction d’interfaces web. Cet outil, bien que plus confidentiel, est très aimé de ses utilisateurs. Il permet de réaliser des projets en codant beaucoup moins qu’avec d’autres frameworks. Le processus de compilation à l’avantage de produire seulement le JavaScript utile à votre application ; le client n’a pas à charger toute une bibliothèque JavaScript. Bref, il est bien plus économique en ressources qu’un React ou un Vue.js et se montre donc très rapide et réactif pour l’utilisateur final.
⇨ svelte.dev.

Les frameworks du back-end

Une large palette de langages est utilisable pour bâtir une application web. Aussi, c’est souvent le choix du langage qui conditionne le choix du framework adéquat.

Django (Python) est un framework MVC gratuit et open source de haut niveau qui permet des développements rapides et qui encourage un design propre et pragmatique. Il prend en charge une grande partie des problèmes liés au développement web, notamment la sécurité, ce qui vous permet de vous concentrer sur l’écriture de votre application sans avoir à réinventer la roue. Basé sur Python, le code Django est facile à lire et à maintenir. Il constitue un choix avisé pour quantité d’applications web.
⇨ www.djangoproject.com.

Ruby on Rails (Ruby) est un framework MVC basé sur le langage Ruby et dont la philosophie est proche de celle de Django. Lancé en 2004, il a révolutionné à son époque le développement d’applications web et la plupart des frameworks modernes lui doivent beaucoup. Doté d’une bonne documentation, il est soutenu par une large communauté aussi enthousiaste qu’accueillante. Les applications RoR peuvent poser quelques défis lors du déploiement en production et même si son apprentissage est au départ assez aisé, les choses se corsent assez vite quand il s’agit d’aborder des problèmes plus complexes.
⇨ rubyonrails.org.

ASP.NET Core (C#, F#) est le framework web open-source de Microsoft. Modulaire, il est conçu pour le développement d’applications lourdes et complexes et surpasse aisément les autres frameworks pour cette tâche. Il peut opérer sur plusieurs plateformes et fonctionne de manière complètement transparente avec les frameworks JavaScript modernes côté client (React, Angular, Vue, Ember). Les développeurs bénéficient du puissant environnement de développement intégré Microsoft Visual Studio, ce qui aide à leur productivité.
⇨ “What is ASP.NET Core?”

Laravel (PHP) est le framework MVC de choix pour les développeurs PHP. Sa syntaxe est réputée expressive et élégante. Cependant, côté performance, Laravel est un cran en dessous bien d’autres frameworks comme Django ou Express. La popularité de Laravel est directement liée à celle de PHP.
⇨ laravel.com.

Flask (Python) est un microframework, c’est à dire minimaliste à la base, mais cependant extensible via des modules, qui est très populaire chez les Pythonistes. Il possède une bonne documentation et une communauté active. Il est un excellent choix quand il s’agit de fournir des services web sur des petits systèmes aux ressources limitées (par exemple, sur une carte Raspberry Pi ou un microcontrôleur Arduino).
⇨ palletsprojects.com/p/flask/.

Express (Node.js/JavaScript) est un framework minimaliste pour le populaire Node.js. Comme Flask, il lui manque à la base de nombreuses fonctionnalités. Vous devez les ajouter selon vos besoins via des composants. C’est un outil de choix pour les développeurs JavaScript de front-end qui souhaitent ajouter le savoir-faire back-end à leur palette. De nombreux frameworks full-stack (c'est à dire alliant frameworks front-end et back-end) reposent sur Express pour le back-end. Citons par exemple Feathers, KeystoneJS, Kraken, LoopBack, MEAN et Sails.
⇨ expressjs.com.

Spring Framework (Java) est un outil puissant, riche en fonctionnalités et bien conçu pour les développements en Java. Il offre une collection de modèles de programmation et de configuration qui visent à simplifier et à rationaliser le processus de développement d’applications web. Il est privilégié dans les projets où la maturité et la stabilité sont plus importantes que la vélocité de développement.
⇨ spring.io.

Combien coûte le développement d’une application web ?

Le coût de développement d’une application web est bien sûr extrêmement variable. Chaque application est unique et répond à des besoins spécifiques qui varient en nombre et qui peuvent être plus ou moins complexes.

Imaginez que vous deviez construire une autoroute. Pour évaluer son coût, vous auriez à répondre à quantité de questions. Quelle est la longueur de l’autoroute projetée ? Combien de voies comporte-t-elle ? Y a-t-il des expropriations à faire ? Quelle est la nature des sols ? Y a-t-il des zones à traverser qui nécessitent des attentions particulières ? Des murs antibruit seront-ils requis en milieu urbain ? Combien d’échangeurs et de ponts ? Etc. Etc. Les réponses à toutes ces questions ont toutes un impact, plus ou moins important, sur le coût final. Pour le développement d’une application, c’est un peu la même chose. Il faut trouver les bonnes questions à se poser et y répondre. Mais, rassurez-vous, la construction d’une application web est un processus normalement moins lourd et moins onéreux que pour une autoroute…

Pour le coût d’une application web, de nombreux facteurs entrent en ligne de compte, mais les principaux sont la portée et la complexité du projet qui vont se traduire en temps de développement, et donc, en argent. Si une application très simple peut revenir à quelques milliers de dollars, une autre offrant de nombreuses fonctions et ayant à traiter des données sensibles peut en coûter 500 000, et même bien plus, et demander plus de 10 mois avant d’être livrée. Le seul moyen de réaliser une estimation précise est de faire l’inventaire le plus exhaustif possible des besoins et des objectifs de l’application web. Cette opération se fait lors de la phase de planification et de collecte des requis (voir plus haut).

Si vous n’avez pas le budget nécessaire pour le développement de l’application que vous souhaitez, la réduction de la portée et de la complexité est votre principal levier d’action. Commencez par définir ce que serait votre produit minimum viable (PMV), c’est-à-dire l’application qui répondra aux besoins essentiels de ses utilisateurs, sans aucune fonction superflue ou dont l’utilité n’est pas parfaitement validée.

Les avantages du produit minimum viable sont multiples. Par exemple :

  • En mettant rapidement et à moindre coût l’application sur le marché, le PMV peut permettre de commencer à générer des revenus qui serviront à financer les futurs développements.
  • Une application fonctionnelle qui a déjà des utilisateurs aide à aller chercher l’appui d’investisseurs.
  • Vous pourrez améliorer itérativement l’application en répondant à de réelles attentes exprimées par vos premiers utilisateurs et éviterez de dépenser de l’argent sur des fonctions qui ne seront dans les faits pas ou peu utilisées.

Il est aussi important de se souvenir qu’il n’y a pas que le coût du développement à prendre en compte. Il y a aussi des frais récurrents, fixes et variables, tout au long de la vie de l’application. Dans le cas d’une application web dynamique, il y aura les coûts liés à l’infrastructure (serveurs, sauvegardes, etc.), à d’éventuels services tiers et à des licences logicielles. Il faut aussi penser aux opérations de maintenance, au support, aux mises à jour, aux améliorations de fonctionnalités, etc.

Les clés du succès

Avoir des objectifs clairs

Bien cerner vos objectifs et définir avec précision vos attentes seront déterminants dans le futur succès de votre application web. La clarification des objectifs d’affaires permettra de correctement guider l’équipe de développement dans l’élaboration d’une stratégie de livraison, la hiérarchisation des requêtes, l’établissement des critères de succès et la définition d’une feuille de route sur le long terme.

Si vous ne voulez pas errer lors du processus de développement, ce qui coûte du temps et donc de l’argent, voire vous perdre en chemin, il est important d’avoir apporté des réponses précises et détaillées aux questions : quoi, pour qui et comment. Ce sont ces réponses qui vous donneront une feuille de route méthodique et de solides bases garantes d’un futur succès et de la minimisation des risques.

Investir dans les interfaces utilisateur

La réalisation des interfaces de votre application repose sur deux piliers essentiels :

Le design de l’expérience utilisateur (UX) qui englobe le travail sur les parcours, les interactions, les perceptions et les ressentis de vos utilisateurs lorsqu’ils utilisent votre application. C’est lui qui procure une sensation de facilité d’utilisation. Et, mal réalisé, c’est aussi lui qui peut entraîner un sentiment de frustration chez les utilisateurs. Ce que l’on veut éviter à tout prix si l’on a à cœur l’acquisition et la rétention de clientèle afin d’atteindre des objectifs d’affaires.

Le design de l’interface utilisateur (UI) complète visuellement le travail fait sur l’UX. Il comprend la création de tous les éléments visuels avec lesquels vos utilisateurs interagissent sur votre application web. Il rend votre application visuellement attrayante et participe grandement à la perception de simplicité d’utilisation. Il aide les utilisateurs à comprendre d’emblée les fonctionnalités d’application et les guide dans la réalisation de leurs objectifs.

Les utilisateurs attendent d’une application web des interactions simples, fluides et efficaces. Ils ne veulent pas avoir à chercher comment atteindre leur objectif et apprécient des mécanismes intuitifs. Offrez-leur une expérience positive basée sur une hiérarchie compréhensible de l’information et des éléments de design prévisibles, ce qui leur permettra de naviguer avec aisance dans votre application web. Aussi, ayez recours aux tests d’utilisation qui permettent de relever d’éventuels points de friction et de s’assurer que l’interface suscitera l’adhésion de son public cible.

S’assurer de la sécurité

Les failles de sécurité doivent être une préoccupation majeure pour ce type d’applications généralement connectées et amenées à stocker et traiter des données aussi bien de l’entreprise que des clients. Intégrer la sécurité aux applications dès le départ est la stratégie la plus efficace sur le long terme, et la sécurité ne doit jamais être une réflexion après coup. Les enjeux peuvent être considérables, allant de la réputation de votre entreprise à la conservation de votre clientèle.

Avoir une infrastructure performante

Vous savez combien une application lente, peu réactive, est déplaisante. N’imposez pas cela à vos utilisateurs. Si votre application tient plus de la tortue que lièvre, les utilisateurs ne vont pas attendre s’ils ont le choix. Ils partiront. La célérité d’une application web dépend de la qualité de son développement et beaucoup de l’infrastructure qui l’héberge (serveurs, connectivité). Afin de conserver la qualité de service, il est important de monitorer la performance.

Prévoir la montée en charge

Votre application est réactive et votre infrastructure est correctement dimensionnée. Vous monitorez la performance en temps réel. Mais si votre nombre d’utilisateurs grimpe rapidement (la rançon du succès… c’est tout le mal qu’on vous souhaite), les performances vont stagner puis décroître, au risque d’irriter vos utilisateurs existants et de faire fuir les nouveaux. Pire, un afflux soudain peut faire crasher votre application côté serveur. Pour diminuer ces risques, il est souhaitable d’avoir défini à l’avance une stratégie pour répondre à la montée en charge et votre application web doit avoir été développée de façon à être facilement évolutive/extensible.

Avoir une application résiliente

L’architecture globale de votre application web ne doit pas comporter, dans la mesure du possible, de point de défaillance unique, c’est-à-dire un élément dont la panne entraîne l’arrêt complet du système. Si vous estimez qu’une panne totale pourrait avoir un impact majeur sur vos affaires, il est recommandé d’étudier les différents scénarios possibles et de déployer à titre préventif les outils nécessaires (redondance, sauvegardes, CDN, etc.). Mais souvenez-vous que même les plus grands acteurs peuvent être victimes d’un point de défaillance unique. Comme ce fut le cas en 2021 pour Facebook dont l’intégralité des systèmes est tombée pendant une journée dans le monde entier. Une seule petite erreur dans la configuration distribuée aux routeurs dorsaux (qui coordonnent le trafic réseau entre les centres de données) aura suffi à mettre le géant à terre.

Trouver le bon partenaire technologique

Si vous ne développez pas votre application en interne, trouver le bon partenaire technologique est essentiel. C’est lui qui va transformer vos idées en application web performante, ce qui conditionnera en grande partie votre succès. Avez-vous besoin de quelques conseils pour guider votre choix ? Ça tombe bien, nous avons un article sur ça : “Identifier le bon partenaire en développement logiciel”.

Everything you need to know about web application development

This short guide explains everything you need to know about developing a web application, all the technologies and all the steps that will take you from the initial idea to a working application.

Overview

What exactly is a web application?

Web applications are most often client-server-type applications whose user interface and interaction rely on web technology, making them accessible through a standard web browser (Google Chrome, Firefox, Microsoft Edge, Opera, Vivaldi, etc.) Some of the better-known web applications are the Google Workspace and Microsoft 365 application suites. 

Web applications are different from traditional websites in that they are more interactive and allow users to manipulate data and accomplish tasks that can be very complex. In terms of functionality, they are often similar to traditional applications, while often differing in appearance, user experience and sometimes ease of use. If you’ve had a chance to use both Microsoft Office’s desktop application and its web application version, Office 365, you’ll know what we mean.

The user interface of a web application can also be encapsulated in a web viewing application, which allows to build both mobile applications (thanks to UIWebView on iOS and WebView on Android) and desktop applications (by using the Electron framework for example, which includes the Chromium web rendering engine). Web viewing applications are in fact pared-down web browsers with no browsing interface, that only provide access to a single online application. Popular applications like WhatsApp, Twitch, Microsoft Teams and Slack are based on this technology. 

Web applications provide many advantages:

  • The client-side execution, performed in a web browser, requires no complex installation for users. As far as the user is concerned, they are plug-and-play.
  • They dispense users from performing updates, since they are always up-to-date by definition.
  • They don’t require much client-side horsepower (disk space, computing power).
  • By their very nature, they run on all desktop platforms (Windows, Mac, Linux), as do web applications that are optimized for mobile devices (iOS and Android).
  • Any such application, as well as connected data, can easily be accessed from several different devices, for example work and personal computers, which can be useful for teleworking.
  • Data stored remotely facilitates collaboration (for example, several users can work on and modify the same document simultaneously).
  • And the list goes on.

What are the various types of web applications?

Static web applications

Instead of fetching content through server-side processes and then sending this content to users, static web applications rely entirely on the client’s web browser to manage their interaction with layout and content. In other words, static web applications don’t rely on a server to provide dynamic content, using instead a standard web server to deliver static files. As it relies entirely on web technologies, it is made up of files in HTML, CSS or JavaScript, as well as images (GIF, JPEG, SVG). Graphics manipulation (HTML+CSS) is handled within the web browser, through JavaScript. 

One of the advantages of static web applications is their frugal use of server-side resources, since they’re just files stored on a plain old web server (HTTP) and sent “as is” to end-users. No need to manage an infrastructure robust enough to ramp-up to handle multiple active processes as the number of users increases. Also, you can produce applications that can function off-line. That being said, their field of application is quite limited.

Dynamic web applications

Dynamic web applications rely on a web server to serve files to the web browser client (Apache, Nginx, Lighttpd, etc.) and on an application server to produce the content requested by the client. Application server technologies can come in several different programming languages, as we’ll see later.

The downside to these dynamic applications is that they need a permanent connection to the server executing the application instance. Plus, said connection must have the bandwidth to support complex applications; otherwise, users experience slow, error-plagued service. And when the Internet connection fails, so does the application. Finally, the more users there are, the more robust the server-side infrastructure should be, to support peak usage.

Hybrid web applications

We’re just touching on these for the sake of theoretical thoroughness, and because you will come across this terminology. “Hybrid” applications execute some of their functions locally, within the web browser, on JavaScript, and the balance of their functions on a remote server. In other words, they’re both static and dynamic. In practice, most dynamic web applications are actually hybrid, insofar as they call on locally-executed JavaScript scripts, if only to inject content in the client’s HTML using Ajax, a technique based on JavaScript.

Progressive Web Applications

Progressive web applications (PWAs) are a method of developing web applications specifically for mobile phones that prioritizes quality of user experience, regardless of the device used or the quality of the Internet connection. It’s an unofficial standard supported by Google, specifically for its Android platform. You can assess the level of compliance of an application to the PWA “standard”. Practically speaking, it’s a static web application (see above).

Some examples of web applications

Web applications rule the Internet. All transactional sites are in fact web applications. They are increasingly common as “software as a service”, or SaaS. These applications, available for free or by subscription, are accessible through a web browser and can be almost as sophisticated as native desktop applications. The Office 365 suite is an example of such a SaaS; more recently, Adobe launched a very decent web application version of its flagship software, Photoshop. It goes to show how versatile and powerful web applications can be.

Web applications can also be so discreet that most users don’t even know they’re using one. This is the case with encapsulated web applications, which look just like a standard desktop application and don’t need a web browser. These applications are developed using frameworks, like Electron, which combine the Chromium rendering engine (the graphics engine underpinning the Chrome web browser) and the runtime Node.js.

On-line commerce platforms

Online commerce sites are in fact web applications that can handle many different tasks, from order processing to inventory management. Large businesses, like Amazon, develop their own applications to meet their specific needs. Small and medium-sized businesses, on the other hand, tend to use SaaS solutions, like Shopify. This kind of platform provides all the tools needed to create and launch electronic commerce sites, including product and supply chain management, and payment systems.

Customer relationship management solutions

Customer relationship management (or CRM) software is a tool designed to help companies offer their clients a unique experience and maintain their relations with them in order to develop sales. CRMs provide a complete picture of every interaction with every customer and offer sophisticated sales tracking tools. CRMs support collaborative work among different teams, like Sales and Marketing, for example. Some examples of popular customer relationship management solutions are the Salesforce and HubSpot platforms.

Enterprise Resource Planning software

Enterprise Resource Planning (or ERP) software is the backbone of many companies; it centralizes several essential functions, like human resources management, accounting, finances, decision-making support, etc. This crucial software is increasingly being offered as a SaaS, i.e. as a subscription-based web application. Some of these online solutions include Microsoft Dynamics 365, Oracle NetSuite ERP, Sage X3 ERP, SAP Business ByDesign, Plex Manufacturing Cloud, and others.

Content Management Systems (CMS)

There are two ways of managing online content, in other words, of building a website. The first one is to install an application, for example Drupal or ProcessWire, on a server. The second one, which is simpler, is to use a SaaS platform where everything is pre-installed, for example Wordpress.com, Squarespace or Wix. In either case, you’re dealing with “back office” web applications, i.e. interfaces that allow you to manage your content.

Web application development process

As for any application, the process of developing a web application must go through several indispensable stages to succeed:

1. Planning

Planning is fundamental to web app development, and is based on exploratory meetings and analysis with the multidisciplinary team in charge of development. At the planning phase, you put in place all your risk abatement measures to start off on the right foot. Do not rush it or worse, dodge it, as your planning is a good predictor of your project’s success or failure. At this stage, you define the concept, set the basic outline of the product, identify the target market and assess the relevance of each one of your projected features.

2. Requirements

This step takes up the work you did in the planning stage while adding a new layer of detail. You seek to comprehensively and accurately capture the needs and objectives of the web application. You’ll end up with a complete list of the application features that each team will prioritize (in “sprints”) for design and development purposes. The completion of this stage should yield all the information you need to assess the cost of your project.

3. Design and prototyping

Once you’ve defined your requirements, the architecture of the application is sketched out in this phase. It can take one of several forms. For example, it can describe the technological architecture (hardware and software), or the interfaces exposed to different services or data sources.

At this stage, an analysis of the User Experience (UX) helps build a functional mock-up (wireframe) to validate the visuals (User Interface), the usability and the efficiency of browsing within the application. The goal of UX/UI for a web application is to provide excellent user experiences through interfaces that are interactive, intuitive, fluid, efficient and user-friendly. The success of a web application rides on the quality of its design, which will dictate whether users adopt and use all of its features.

Different proofs of concept can give rise to different functional prototypes. These proofs of concept are validated and tested on the front-end with representative users of the target market, before launching into the next step.

4. Software Development

As its name indicates, this is the stage when developers write the actual code for the application (front-end and back-end) and connect the interfaces to achieve the defined objectives. Depending on the server-side platform and the type of web application, developers will use various programming languages and software tools. All this is explained in detail in the “Technology Stacks” section below

As we work with the Agile-Scrum methodology, this is an iterative process. This means that the client can monitor, test and approve the features as they get coded, and that an operational solution can be delivered progressively, according to the needs prioritized by development cycles (the “sprints”).

5. Testing and quality assurance

Throughout the development phase, various tests put the web application through its paces with a view to validating its behaviour, security, performance and operation in different client-side environments (real or virtual). Several aspects of the program get validated: do the interfaces display correctly on all screens, regardless of their format and orientation (in the case of mobile), and are they reactive enough? Does the application use up too much battery power? Does it properly manage network bandwidth when trying to connect? Are the details of user accounts stored safely? And so on.

The teams execute test plans and the results are parsed. During this quality assurance (QA) work, a continuous feedback loop between quality analysts and developers serves to eliminate any malfunction, error or unexpected result. When all the problems identified by the quality analysts are addressed, the application is ready for release. In-depth quality assurance tests at the development stage are the only way to ensure that the web application will be stable, usable and secure from day one.

6. Release

Application release marks the end of development and testing of your web application. It’s that great day when users will be able to discover your application.

For most web applications, this phase involves making the client application available on a platform and transferring the server application and related databases to a production environment.

Suppliers of infrastructure dedicated to web services, like Amazon Elastic Compute Cloud (EC2) or Microsoft Azure App Services, offer tools that simplify and secure the deployment of web applications on their servers.

The last step is to connect the client and server sides for a seamless routing of queries and responses through HTTPS. You can use a load balancer to receive queries made by clients on the front-end and forward them to the back-end instances which will send a response. But here again, the main cloud computing suppliers offer sophisticated tools, like Elastic Load Balancing, which automatically distribute incoming traffic over various Amazon EC2 instances. Best practice requires that all client-server traffic be encrypted; therefore, you’ll need an up-to-date SSL certificate.

7. Maintenance

This is the phase where, typically, a new team takes over. This new team is a post-release, after-sales client service team. Following a stabilisation period for the solution after its release, the support and maintenance team monitors client requests, crash reports and any problems flagged by end-users. This team also ensures that the application remains compatible with new generations of web browsers and new versions of operating systems.

Note that swift assistance for end-users and frequent updates to fix and improve the application are essential to retain user engagement. Also, do encourage your users to provide you with comments and suggestions on your application. They can be a great source of ideas for application enhancement.

Technologies used to build web applications

Most commonly, dynamic web applications follow the lines of a three-tier client-server architecture.

The first tier handles the presentation of the application on the user’s screen, called user interface. This is handled by the web browser using web technologies like HTML, CSS and JavaScript.

The second tier resides on an application server and processes client queries, receiving them and sending back appropriate responses. This is referred to as “application logic”. There is a wide choice of different technologies to handle this tier; you can even use several of them for a single application, by breaking up the tier in various entities.

The third tier handles data storage. This tier is basically a traditional database that responds to the queries forwarded from the second tier. The choice of technologies for this tier is more limited: MySQL, PostgreSQL, Microsoft SQL Server, Oracle, SQLite, MongoDB, among others.

Client-side code

This is the code that is loaded by the client’s machine to display the user interface and data transactions with the server. This code is split in three parts: HTML, cascading style sheets and JavaScript. To develop this code, you can start from scratch, or use one or more frameworks. Frameworks make things run faster and usually provide a set of conventions that make life easier for all involved.

Server-side code

The application that runs on the server can be coded in a variety of programming languages, like C#, Java, Python, Ruby, or PHP, for example. This application receives the client’s HTTP queries, processes them and returns the expected responses to the client. Here too, you can use development frameworks; each language offers at least one.

Web frameworks

How to choose your framework

Choosing the right framework is crucial, as a bad choice will waste time and money: while you can’t suddenly change tools mid-development, sticking to an unsuitable architecture will cause problems over the entire life cycle of the application. 

When choosing your framework, consider the following factors:

  • Needs of the application. The first thing to consider before choosing your framework is what the application has to be able to do. With a firm grasp of the needs of the application, you can target your research to come up with a shortlist of potential frameworks. 
  • Popularity of the framework. While the popularity of a framework is not a technical criteria, it is still an important consideration: the more popular the framework, the more active the attendant community. This means more responses to questions on sites like StackOverflow, more tutorials, more plug-ins, more contributions to open-source resources, etc. Furthermore, popularity correlates with a solution’s longevity.
  • Quality of the documentation. Documentation quality can vary immensely from one framework to the next. When choosing your framework, make sure the documentation is exhaustive. As a general rule, the larger the number of examples and tutorials, the better the documentation. Also check that the documentation is up-to-date based on the most current version of the framework.
  • Cost. One thing to remember when choosing a framework is that some are free, others are only partly free, while others are only available on paid platforms.
  • Functional scalability. Many frameworks can be scaled-up or extended through modules or plug-ins. Look at the richness and variety of the catalogue before you make any decisions. You may find a module that will save you time and money on a key function.
  • Compatibility with existing architecture. Your application may have to fit in within a larger architecture, or on servers that support a limited number of languages and frameworks. For example, if you already use Microsoft .NET for services that interact with the database or for business logic, you may want to use ASP.NET for your web applications.
  • Team skills. If one or more of your developers are already conversant with a given framework and language, you’ve got a head start: you’ll have a shorter learning curve and avoid the most common mistakes. Conversely, if none of your developers are familiar with Ruby, you may want to steer clear of Ruby on Rails, unless they have a lot of time on their hands.
  • Security. Last but not least of the issues to consider! Some frameworks emphasize security and have basic security measures built-in, whereas others leave it up to developers. Also, you’ll want to use a framework that is regularly updated to fix any security issues as they crop up, which brings us back to the criteria of popularity. Finally, be very cautious when using plug-ins, as they can introduce chinks in an otherwise secure framework armor.

Front-end frameworks

Client-side web frameworks are based on JavaScript and TypeScript, a strict syntactical superset of JavaScript developed by Microsoft. The following are the most common examples of such frameworks, but there are many more out there.

React is a free, extremely popular, open-source JavaScript library that underpins countless Web applications. Maintained by Facebook and a community of developers, it allows you to build highly interactive interfaces using components. In use, React is particularly flexible and efficient, using a virtual DOM and updating the rendering in the browser only when really necessary.
⇨ reactjs.org.

Vue is a JavaScript library developed by a former Google engineer and maintained by a community of developers. It offers excellent documentation and functionalities, including a virtual DOM, that rival any competitors’. This “lite” library, which enjoys a well-deserved popularity, is the go-to choice for progressive web applications.
⇨ vuejs.org.

Angular is a framework based on TypeScript and developed by Google. Emphasizing stability, robustness and security over innovation, it is ideal for large enterprise applications. Angular is better suited to complex applications than to highly interactive ones. While its learning curve is rather steep, once mastered, it enables quick and robust development.
⇨ angular.io.

Ember is an easy-to-learn JavaScript framework with a very dynamic community. Now in its tenth year of existence, it provides a very plush and mature library of plug-ins. It supports server-side updating of the DOM (in Node.js via FastBoot). Emphasizing productivity and conventions, it fosters orderly development and supports collaborative work, unlike React, for example, which provides few safeguards. If you’re the kind of person who likes a place for everything and everything in its place, Ember is the solution for you.
⇨ emberjs.com.

JQuery, one of the oldest JavaScript frameworks, is still spry and active. It is supported by a large community, offers a vast choice of plug-ins and provides endless possibilities to manipulate the DOM. Though it is perfectly suited for many different kinds of applications, it is more cumbersome than modern frameworks and is losing ground with developers.
⇨ jquery.com.

Backbone is a JavaScript library with an MVC architecture that encourages you to translate your data into models, DOM manipulations into views, and link them together with events. This “lite” framework is ideal for simple, small, one-page web applications.
⇨ backbonejs.org.

Svelte isn’t actually a framework or library, but rather a compiler that offers a radically different approach to building web interfaces. The fans of this tool are fewer but devoted, as it allows them to develop projects with much less coding than other frameworks. The compilation process produces just the JavaScript code necessary for your application; no need for the client to load an entire JavaScript library. It’s much more resource-efficient than React or Vue.js, and is much quicker and reactive from the end-users’ point of view.
⇨ svelte.dev.

Back-end frameworks

As you can use a wide variety of languages to build a web application, very often, the choice of languages will dictate the choice of frameworks.

Django (Python) is a free, high-level, open-source MVC framework that supports quick development and clean, pragmatic design. It takes care of many of the issues related to web development, including security, so that you can concentrate on coding your application without reinventing the wheel. Based on Python, Django code is easy to read and maintain. It is an excellent choice for many web applications.
⇨ www.djangoproject.com.

Ruby on Rails (Ruby) is an MVC framework based on the Ruby language and whose philosophy is close to that of Django. When it launched, in 2004, it revolutionized web application development; most modern frameworks stem from it. It enjoys plentiful documentation and a large community that is as enthusiastic as it is welcoming. RoR applications can present some challenges when deploying into production. While it’s relatively easy to learn at first, things can get complicated when dealing with complex problems.
⇨ rubyonrails.org.

ASP.NET Core (C#, F#) is Microsoft’s open-source web framework. Its modular architecture is geared to developing large, complex applications and excels at it. It can run on various platforms and works completely seamlessly with modern client-side JavaScript frameworks (React, Angular, Vue, Ember). Developers benefit from the powerful Microsoft Visual Studio integrated development environment, which allows them to be more productive.
⇨ “What is ASP.NET Core?”

Laravel (PHP) is the MVC framework of choice for PHP developers. Its syntax is known to be expressive and elegant. However, in terms of performance, Laravel is a step below other frameworks like Django or Express. Its popularity is predicated on PHP’s.
⇨ laravel.com.

Flask (Python), which is very popular with pythonists, is a microframework, i.e. a bare-bones basic package that can be fleshed out with modules. Its documentation and community are solid. It’s an excellent choice to provide web services on small systems with limited means (for example, on a Raspberry Pi card or an Arduino microcontroller).
⇨ palletsprojects.com/p/flask/.

Express (Node.js/JavaScript) is a minimalist framework for the ever-popular Node.js. Like Flask, the basic system is lean, with plumping out through components. It’s the tool of choice for front-end JavaScript developers who wish to add some back-end skills to their toolbox. Many full-stack frameworks (i.e. front- and back-end frameworks) rely on Express for the back-end, including Feathers, KeystoneJS, Kraken, LoopBack, MEAN and Sails.
⇨ expressjs.com.

Spring Framework (Java) is a powerful, functionally-rich and well-thought-out tool for Java development. It provides a collection of programming and configuration models that simplify and streamline the development of web applications. It is well-suited to projects where maturity and stability are more important than speed of development.
⇨ spring.io.

How much does it cost to develop a web application?

The costs of developing a web application can vary hugely. Every application is unique and meets specific needs that can vary in number and degree of complexity.

Imagine that you want to build a highway. In order to estimate the cost, you’d have to answer many questions: How long will it be? How wide? Will it require expropriations? What is the terrain like? Will it cross sensitive areas? Will it require noise barriers in urban settings? How many overpasses and bridges will it require? The answers to these questions, among others, will impact the final cost. The same goes for application development. You need to ask the right questions, and have the right answers. That said, building a web application is usually faster and less expensive than building a highway.

The real answer to the question of the cost of development is as prosaic as it is disappointing: it depends. While many variables come into play, the main ones are the scope and the complexity of the project, which impact development time, which, in turn, translates into dollars and cents. While the simplest applications can be developed for a few thousand dollars, more complex applications that fulfill many different functions and handle sensitive information can cost 500,000$ or more and require a year’s development time. The only way to accurately estimate the cost is to make an exhaustive list of the needs and objectives of your web application. This activity is executed at the planning and requirements stage of the project (see above).

If you don’t have a big budget, your best bet is to restrict your application’s scope and complexity. Start by defining your minimum viable product (MVP), i.e. the application that will meet your users’ basic needs, with features that are only strictly necessary or whose usefulness is established beyond a doubt.

There are many advantages to going for an MVP. For example:

  • By sending your MVP to market quickly and inexpensively, you start generating revenue that will finance future development.
  • A functional application that is actually in use attracts investors more readily.
  • An MVP allows you to capitalize on your early users’ comments, suggestions and expressed needs to improve your application iteratively, instead of wasting money on features that will never actually be used.

Also keep in mind that the cost of an application doesn’t end with development: you need to budget for recurring costs, both fixed and variable, throughout its life cycle. Dynamic web applications, for example, can incur costs related to infrastructure (servers, backups, etc.), third-party services, and software licences, not to mention maintenance operations, support, updates, upgrades, etc. 

The keys to success

Clear goals

The success of your web application will be predicated on clearly identifying your goals and expectations. Clear business goals will guide your development team in developing a delivery strategy, prioritizing requirements, defining the criteria for success and developing a roadmap for the long haul.

To avoid wasting precious time (and money) on the road to development, or losing your way entirely, you should examine three basic questions from every angle: What is it? Who is it for? How to achieve it? The answers to these questions will provide you with a detailed roadmap, increase your chances of reaching success, and minimize risk along the way.

Investing in user interface

Your application’s user interface rests on two essential pillars:

User experience (UX), which includes the paths, interactions, perceptions and impressions experienced by users when interfacing with your application. It’s everything that contributes to a feeling of user-friendliness; conversely, when done poorly, it gives rise to a feeling of frustration, which is the last thing you need when trying to acquire and retain customers to reach business goals.

User interface (UI) visually complements and supports UX. It refers to all the visuals your users interact with on your web application. It makes your application visually appealing and contributes to the feeling of ease of use. It helps users intuitively understand application features and helps them fulfill their objectives.

Users expect simple, fluid and efficient interactions from web applications. They especially don’t want to have to figure out how to do things, and appreciate intuitive design. Make sure to give them a positive experience based on an easy-to-understand hierarchy of information and predictable design elements, so they can easily browse through your application. That’s when the usability tests come into their own; they reveal potential friction points and ensure that the interface engages its target market.

Security

Security must be a paramount consideration with this type of application, which is generally connected to the web and which stores and processes not only enterprise data but also customer information. Baking security into your application right from the get-go is always the most efficient strategy over the long run; it can never be an afterthought. After all, your company’s reputation, and very existence, rides on it.

Robust infrastructure

You know how annoying a slow, sluggish application can be. Don’t do this to your users. If your application looks more like the turtle than the hare, your clients will look elsewhere. The speed of a web application is a function of the quality of development and the infrastructure it relies on (like servers and connectivity). To keep service quality high, keep an eye on your application’s performance.

Scaling up

Now that your application is responsive and your infrastructure suitably robust, monitor its performance in real time. If the number of users surges (a nice problem to have), application performance will plateau and then decline, irritating existing users and turning off new ones. Worse yet, a sudden spike in visitors could crash your application-side server. Devising a pre-emptive strategy ahead of time will minimize these risks and head off any surge-related issues. However, to achieve this, your web application has to be specifically designed with a view to future scaling up and expansion.

Resilience

The overall architecture of your web application must not harbor any single point of failure, i.e. any single element whose failure can take out the rest of the system. Insofar as any system failures can cripple your business, examine every and all imaginable scenarios and deploy preventative measures accordingly, such as redundancies, backups, CDNs, etc. That said, the fact is that even the biggest players are not safe from single point of failure: take Facebook, whose systems shut down worldwide for a whole day, in 2021. One tiny mistake in configuration changes on the backbone routers that coordinate network traffic between data centers was enough to fell the giant.

The right technological partner

Unless you develop your application in-house, you’re going to have to search for the right technological partner, who will turn your ideas into a powerful web application, the precursor to your success. Do you need some advice to make the perfect choice? It just so happens we have a piece on that very issue: “Identify the right software development partner”.