skip to Main Content

JavaScript et API Rest WordPress : Comment comprendre le Jargon

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 701.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

JavaScript fait partie des sujets à l’actualité sur WordPress. L’API Rest encourage les développeurs non plus seulement à apprendre à interagir avec ce dernier, mais à améliorer leur utilisation avec WordPress des applications web plus efficaces.

Mais si vous êtes nouveau sur JavaScript, vous pourrez facilement vous perdre dans toute cette nouvelle technologie et jargon. un « grunt » pourrait être le bruit que vous faites lorsque vous essayez de déboguer un code JavaScript, AJAX pourrait être une poudre pour nettoyer votre JavaScript et REST peut être ce que vous avez besoin lorsque tout est fini.

Alors dans cet article, nous allons parcourir l’essentiel du jargon de ce nouvel univers autour de JavaScript.

Je vais donc couvrir la terminologie suivante :

  • Core Concepts
  • Librairies
  • Frameworks
  • System de template
  • Outils de Développement

Alors commençons par les « Core Concepts » que vous avez besoin de comprendre pour mieux assimiler la suite.

javascript
Si vous souhaitez en savoir plus, vous pouvez le faire sur JavaScript.com

Core Concepts

Commençons avec le concept le plus fondamentale (C’est tout JavaScript). JavaScript est un langage de programmation « Front-end », ce qui signifie qu’il s’exécute sur l’ordinateur du client. JavaScript peut être utilisé pour tout sorte d’action dynamique: ajouter des interactions, récupérer des données, afficher des pop-up. Ne soyez cependant pas tenté d’en faire trop.

Une librarie est un répertoire de code que vous pouvez utiliser pour compléter un projet. Il ajoute un code supplémentaire qui simplifie l’intégration d’une fonctionnalité ou tout simplement d’améliorer la vitesse de développement.

Un Framework est similaire à une librairie, mais en plus gros en ce sens ou il s’agit d’une collection de librairies et de plusieurs fonctionnalités.

Système de template JavaScript vous permet d’éviter de vous répéter, et adhère au concept « Don’t Repeat Yourself : DRY« . Il renvoi a la partie vue du model de conception « MVC », ce qui vous évite d’avoir a rédiger plusieurs fois le même code. C’est unpeu comme le « templatage sur les thèmes« .

Le model MVC est généralement décrit par des frameworks et librairies. Chaque librairie à tendance à se concentrer sur l’un de ces trois éléments (Model Vue Contrôleur). Le model est une structure de données (sur WordPress, cela renvoi à la base de données). La vue est un élément qui renvoi à l’interface utilisateur (texte, image, bouton, animation, etc). Le contrôleur est la connexion entre le model et la vue. Le code que vous écrivez récupère l’élément d’une page pour interagir avec les données.

reuterstv
Reuteurs.tc un exemple d’une application sur Page Unique.

Une application sur page unique est un site web à une seule page, qui se comporte, non comme un site web avec plusieurs pages, mais comme une application, la différence ici est que les pages se rafraîchissent via le JavaScript. Ceci signifie que le contenu est pré-chargé ce qui réduit considérablement le temps de chargement d’une page.

Les inconvénients sont certainement les impacts sur le SEO, car les robots ne peuvent pas facilement naviguer via une application, surtout qu’ils n’ont pas des navigateurs web au même titre que de simple utilisateur, et par conséquent n’on pas JavaScript.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

API signifie Application Programming Interface (Interface de programmation d’application). C’est une combinaison de code (fonctions, crochets, etc.), fourni par un système qui vous permet d’interagir avec ce dernier. Si vous avez déjà ajouté de widget Twitter sur votre blog, alors vous avez eu a interagir avec l’API Twitter. WordPress propose plusieurs API différentes et chacune permet de gérer aux mieux les ressources et fonctionnalités de ce dernier. L’API REST est différentes en ce sens ou elle permet à d’autres systèmes d’interagir avec WordPress.

feelingrestful

REST signifie Representational State Transfer. Il utilise une architecture découplé, ce qui signifie que plusieurs composantes d’un site ou d’une application sont séparées. Dans la pratique, cela reviens a dire que votre site peut être sauvegardé quelque part, alors que les données qu’il sauvegarde sont enregistré ailleurs.

AJAX signifie Asynchronous JavaScript and XML ou JavaScript et XML asynchrone. C’est une technique qui permet d’effectuer une interaction avec un site web sans rafraîchir une page. L’interface d’administration de WordPress utilise l’AJAX comme le fait la plupart des sites web comme Twitter, Facebook, etc. Ne vous fiez pas au nom, vous n’avez pas besoin de faire du XML pour utiliser AJAX.

JSON signifie JavaScript Oriented Notation. Il vous permet de récupérer des données depuis une application utilisant JavaScript ce qui vous donne la possibilité de manipuler les données. Si dans le passé vous avez utilisé le XML pour sauvegarder et manipuler des données sur des pages web, le JSON sera la nouvelle façon dont vous le ferez maintenant. Dans le model MVC, cela renvoi au contrôleur, car c’est toute l’interaction entre les données et l’interface.

Libraries

Il existe un grand nombre de librairies JavaScript et il peut s’avérer très difficile de savoir quand et quel utiliser. Je vais couvrir quelques plugins JavaScript populaires. Parfois, vous aurez envie de choisir l’un ou l’autre, parfois vous utiliserez les deux ensembles étant donné qu’ils renvoient à différentes parties du model MVC.

Toutes les librairies ci-après sont open-source et gratuit.

jquery

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

jQuery est probablement la librairie JavaScript la plus connu. Plusieurs sites l’utilisent pour ajouter des animtions de « front-end » sur leur site. C’est une librairie qui simplifie vraiment l’utilisation de JavaScript sur votre site web, vous donnant également la possibilité d’accéder à des fonctionnalités spéciales.

jQuery est intégré sur WordPress vous pourrez l’utiliser sur vos thèmes et plugins facilement. Cette librairie est en principe utilisé pour ajouter des animations et n’interagit pas toujours avec les données de votre site.

React est une librarie développée et maintenu par Facebook et hébergé dans un répertoire Github. C’est une librarie qui traite de la vue dans le model MVC. React est une librarie populaire qui vous permettra de créer des interfaces qui utiliseront le format JSON pour interagir avec les API REST.

Angular  est une librairie maintenu et utilisée par Google. Angular fait le travail similaire à React, alors vous pouvez l’utiliser pour interagir avec l’API REST. Si vous choisissez d’interagir avec React, vous n’utiliserez probablement pas Angular et vice versa.

Bootstrap n’est pas uniquement une librarie JavaScript, mais une librairie composé de documents JavaScript, HTML et CSS. Développé par Twitter, c’est une librarie généralement utilisée pour créer des thèmes WordPress. Elle n’interagit cependant pas avec les données: Il s’agit de manipuler la vue uniquement.

underscoreJS

Underscore.js est une autre librairie conçu spécialement pour vous aider à interagir avec la vue dans le model MVC. Il ne doit as être confondu avec « underscores« , le thème WordPress de base conçu par Automattic.

Underscore ajoute des fonctionnalités pour augmenter la vitesse de développement JavaScript. Il propose unpeu plus de fonctionnalités que jQuery dans la gestion des objets et des tableaux JavaScript.

Frameworks

Le framework Backbone est dépendant de la librarie Underscore et de jQuery. Il a été conçu pour créer des applications sur une page unique, en utilisant les trois éléments d’une structure MVP.

Node.js est un framework JavaSript qui s’exécute sur Windows, OSX et sur Linux, alors il est utilisé par la plupart des applications d’application, plutôt que pour le développement d’application web.

handlebars

Système de Template

Mustache vous donne des templates que vous pouvez utiliser sur JavaScript ou avec d’autres framework comme Node.js. C’est un système sans logique, puisqu’il n’intègre pas des conditions « if », « else » ou même des boucles.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Handlebars, utilise Mustache pour afficher un rendu Mustache ou le sien.

Outils de développement

Grunt est un outil de développement JavaScript qui vous permettra d’accélérer votre développement et vos tests. C’est une sorte d’invite de commande qui fourni un ensemble d’outils pour automatiser le processus JavaScript comme le fait de concaténer les fichiers, d’exécuter des tests, minimiser vos scripts.

grunt

Mettre tout ensemble

Ci-avant vous retrouvez des outils que vous pouvez utiliser pour améliorer votre développement JavaScript, et il existe probablement plusieurs autres outils disponibles. Mais vous ne devrez probablement pas tous les utiliser. Plusieurs outils font presque les mêmes tâches, vous aurez probablement à passer du temps à examiner les outils qui vous conviennent le plus.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
10 Partages
Partagez8
Tweetez1
Enregistrer1