Topic outline

  • Présentation

    Collapse all Expand all

    Contrairement à un logiciel classique (ex : Photoshop) qui fonctionne sur un modèle d’architecture dit "standalone" ou "client lourd", une application web va fonctionner en mode client / serveur. Cela veux dire qu'une partie de l'application s'exécute sur l'ordinateur client, et une autre partie sur l'ordinateur serveur. Internet et toutes ses applications fonctionnent comme cela, sinon vous devriez stocker tout Internet sur votre disque dur.

    Donc en tant que développeur d'applications web vous devez bien saisir que votre application s'exécute dans deux environnements distincts et séparés (physiquement parlant). Vous, le client, pouvez être à Toulouse, et le serveur peut être à Paris. Mais vous êtes bien sur la même application !


    On parle souvent dans ce cas là de "client léger", car la partie la plus lourde est pris en charge par le serveur, tandis que le client ne se charge que de recevoir les données déjà traitées par le serveur, et affiche une interface pour les présenter correctement à l'utilisateur. Cela veux dire que le client ne stocke pas l'intégralité de l'application, il est donc "léger", contrairement aux applications "client lourd" telles que Photoshop, ou votre navigateur Web.

    Exemples d'applications "client lourd" :

    • jeux vidéo 3D
    • navigateur web
    • logiciel de traitement d'image
    • logiciel d'enregistrement audio

    Exemple d'applications "client serveur" :

    • site web
    • site e-commerce
    • moteur de recherche web
    • réseau social
    • plateforme de streaming



    Résumé

    1. le client envoie une requête au serveur (ex : envoi moi le contenu de la page http://google.fr)
    2. le serveur effectue une série de traitements, puis renvoie la page demandée au client
    3. le client réceptionne la page, et effectue à son tour une série de traitements afin de l'afficher correctement à l'utilisateur


    Différence entre front-end et back-end



  • Côté client : le front-end

    En développement web, le client est généralement le navigateur web. C'est vous qui contrôlez le navigateur, mais le logiciel qui émet la requête vers le serveur, c'est bien le navigateur web. En développement web, quand on parle de développer quelque chose côté client, on parle de front-end. On peux alors diviser cette partie en trois grandes catégories : le HTML, le CSS et le Javascript.



    Le langage HTML

    Donc quand vous naviguez sur Internet, votre navigateur émet des requêtes, et reçoit des réponses. Par exemple une page HTML. Et bien le navigateur dispose des outils (un moteur de rendu) pour transformer un code HTML en document facile à lire pour l’œil et le cerveau humain (communément appelé : une page web ! ). Pour ceux qui ne savent pas encore à quoi cela pourrait ressembler, inspecter le code source de cette page web, et vous verrez alors la version HTML (vous pouvez faire selon les navigateurs : F12, ou bien clic droit -> inspecter). HTML veux dire HyperText Markup Language (langage de balises hyper texte), et c'est un langage de balisage. Ça n'est pas un langage de programmation à proprement parler car il ne permet pas de faire d’algorithmie. Il sert seulement à structurer un document et des données. Voici quelques exemple de balises HTML :

    • <h1> : titre de type 1
    • <p> : paragraphe
    • <a> : lien
    • <video> : lecteur vidéo
    • etc...

    La version actuelle du HTML est la version 5, on parle alors de HTML5. Cette version a apporté de nombreuses avancées et possibilités par rapport aux anciennes versions du HTML.


    Le langage CSS

    Un autre aspect important du client, c'est la gestion du style. Je vous présente le CSS, pour Cascading Style Sheets (feuilles de style en cascade). Le HTML permet de structurer votre information, tandis que le CSS va vous permettre de lui donner un style graphique. Par exemple la gestion des couleurs, la taille des polices, ou bien encore la forme des menus de votre application. Une page HTML sans CSS, c'est très moche, et ça ne se fait quasiment plus. La logique du CSS est assez simple, vous y trouverez :

    • des sélecteurs, qui vous permettent de cibler une partie de votre code HTML (tous les <h2> par exemple)
    • des propriétés, qui vont vous permettre de cibler le type de modifications que vous souhaitez opérer (par exemple text-color permet de modifier la couleur d'un texte)
    • des valeurs, qui vont vous permettre de changer les valeurs par défaut (par exemple : text-color: green va changer la couleur d'un texte en vert)

    Le CSS n'est pas un langage de programmation, c'est un langage de présentation.


    Le langage Javascript

    Le Javascript (de son petit nom JS) est le seul langage de programmation que vous utiliserez côté client. Cela veux dire que ce langage vous permet d'écrire des algorithmes qui seront exécutés par le navigateur. A son apparition, le Javascript était un petit langage "utilitaire", qui permettait de faire un peu de programmation dans les pages web. Depuis, de l'eau a coulée sous les ponts, et c'est devenu un des langages les plus utilisés dans le développement web. Il est incontournable, et vous permettra de faire absolument tout ce que vous voulez dans une page web. Que ce soit pour des des animations visuelles, des contrôles de saisies de l'utilisateur, de la communication temps réel avec le serveur, etc... javascript est partout et très puissant. C'est donc le JS qui va dynamiser vos pages côtés client.






    Les différents supports

    Une des particularité du développement web c'est que la même application doit fonctionner sur des supports de natures différentes. Pour commencer, vous avez différents navigateurs web "desktop" :

    • Google Chrome
    • Firefox
    • Internet Explorer / Edge
    • etc...
    Ils fonctionnent tous de la même manière, mais comportent quelques petites différences. C'est à vous de faire en sorte que votre application fonctionne bien dans tout ces navigateurs différents.

    Une autres problématique (assez récente), ce sont les différents périphériques. Il y a encore quelques années, seul un ordinateur de bureau (desktop), pouvez naviguer sur le web (à quelques rares exceptions). Désormais, avec l'apparition des smartphones et autres tablettes votre site va devoir fonctionner aussi bien sur un ordinateur de bureau proposant une haute résolution, que sur un petit écran de smartphone bon marché. Ce sont les utilisateurs qui décident, et vous devez vous y adapter. C'est ce que l'on appel le responsive design : une application aura un rendu différent selon le périphérique qui l'exécute.


    Conclusion


    • HTML : structuration
    • CSS : style
    • Javascript : programmation


  • Côté serveur : le back-end

    Un serveur, n'est rien d'autre qu'un ordinateur qui traite des demandes provenant des différents clients, et qui leur renvoient une réponse. Techniquement, n'importe quel ordinateur peux être un serveur (le votre par exemple), la différence se joue dans le rôle qu'il va remplir, et dans les logiciels installés dessus. En pratique, un serveur est un des nombreux ordinateurs empilés dans les data-center, et qui, via la connexion à Internet, va pouvoir traiter toutes les demandes des clients.

    Une fois que le réseau aura transmis la requête du client au bon serveur, via l'adresse IP et les DNS, l'ordinateur qui reçoit la requête va l'envoyer dans le logiciel prévu à cet effet. En web, quand on parle de serveur web, on parle à la fois de la machine physique, et du logiciel qui traite les requêtes. De nombreux logiciels remplissent le rôle de serveurs web, voici quelques exemples :

    • Apache
    • Nginx
    • NodeJS
    • etc..



    Le serveur web est un point d'entrée de l'information. Suivant la manière dont il a été configuré, une série de traitements vont être appliqués à la requête via l'application que vous aurez façonné, et le serveur retournera une réponse en fonction. C'est ce que l'on appel le "back-end" en anglais. Le back-end comporte de multiples facettes : administration serveur, développement logiciel, gestion et exploitation d'une base de données, etc...

    Si on se focalise sur le développement pur, vous avez de très nombreux langages de programmation qui permettent de réaliser la partie back-end de votre application :

    • PHP
    • Javascript
    • Java
    • C#
    • Python
    • etc...

    Il n'y a pas de meilleur langage, ils ont tous leurs avantages et leurs inconvénients. Nous ne rentrerons pas ici dans le détail de chaque langage, mais sachez qu'ils sont tous répandues et appréciés selon divers secteurs d'activités, et selon la nature du projet que vous aurez à réaliser. Par exemple vous n'utiliserez pas les mêmes technos si vous travaillez sur le projet d'une banque, ou sur le site web d'une petite association locale. Pas les mêmes technos si vous avez 50 visiteurs par jour, ou 100000. Pas les mêmes technos pour un service de streaming ou un site e-commerce. Et ce ne sont pas forcément des choix purement techniques, ou liés à la performance des différents langages, qui vont déterminer la décision finale.



    Si le front-end est plus axé sur l'apparence et l'interface, le back-end lui est plutôt axé sur la mécanique et le comportement de votre application. C'est dans le back-end que l'on exploite la base de données et que l'on définie la logique métier par exemple. Côté back-end, il n'y a pas d'affichage à proprement parler, c'est pour ça qu'il n'y a pas de langages de balisage ou de présentation.

  • Les bases de données

  • Les API REST

  • Topic 5