Framework Javascript | Introduction

Depuis le milieu des années 2010, l'utilisation de différents frameworks JavaScript s'est imposée dans le développement Web frontend pour faciliter la création d'applications toujours plus complexes. Ces frameworks répondent notamment à des enjeux de réactivité des données au sein des applications, permettent une meilleure décomposition et maintenabilité du code, et offrent des solutions élégantes à des problématiques courantes (routage, gestion d'état, etc.).

Ce cours abordera d'abord les concepts essentiels pour comprendre ces frameworks, depuis l'installation d'un projet jusqu'à la manipulation de données provenant d'une API. Dans les chapitres plus avancés, vous découvrirez comment créer des applications plus élaborées comprenant plusieurs pages (routage), des formulaires, et bien plus encore.

Prérequis

Ce cours présente quelques prérequis pour l’aborder sans difficulté :

• Savoir appréhender un fichier HTML : être en mesure de comprendre la structure d’un document HTML, en particulier les concepts de balise et d’attribut. Une connaissance de base des balises les plus communes (div, p, a, img, etc.) est requise.
• Savoir appréhender un fichier CSS : être en mesure de déclarer des règles de style impactant un document HTML. Comprendre les concepts de sélecteur, de déclaration et de propriété. Savoir effectuer une sélection par type, par classe et par identifiant. Il est aussi recommandé de savoir définir des règles permettant la conception d’un site en responsive.
• Avoir des bases algorithmiques appliquées au langage Javascript : être capable d’énoncer une variable, une condition, une itération, un objet et une fonction. Être familier avec les concept d’évènement Javascript et de fonction callback. Une connaissance basique des syntaxes ES6+, du concept de DOM et de sa manipulation, ainsi que du concept d’asynchrone est recommandé.

Si vous ressentez quelques lacunes concernant ces prérequis, vous pouvez explorer les notions annexes qui accompagnent ce cours. Ces annexes traitent des concepts et des technologies sur lesquels le cours s'appuiera comme l’utilisation de Node.js, et des bundlers JS. Elles détaillent les concepts de DOM et d’asynchrone en Javascript. Elles contiennent enfin des fiches contextuelles pour comprendre la place des frameworks JS d’un point de vue historique et au regard des métiers du web.

Fonctionnement du cours

Structure

Chaque chapitre (ou page) se concentre sur la présentation d’un concept clé des frameworks JavaScript modernes. Les chapitres sont regroupés en différentes parties de cours, chacun représentant un jalon dans la maîtrise de ces frameworks. Chaque chapitre s’appuie généralement sur les notions abordées dans les chapitres et parties précédents. Il est donc recommandé de lire les chapitres dans l’ordre. Un profil plus expérimenté pourra sauter les chapitres portant sur des concepts qu’il maîtrise déjà.

Chaque chapitre se divise en trois sections distinctes :

• Un présentation théorique : le concept du chapitre est présenté de manière plutôt abstraite, à travers des exemples génériques.

• Une section "🐶 Dog Center" : elle mettra en application le concept du chapitre au sein d’un exemple “fil rouge”, consistant à concevoir une application pour un chenil de chien. L'application visé consiste à proposer une forme de gallerie de bloc (dit, gallerie de cards), chaque bloc venant présenter un chien du chenil avec une image et ses infos essentiels. Dans les parties suivantes du cours, l'application évolura pour permettre de rechercher les chiens en fonction de leur nom, de les trier par age. Elle proposera également un carousel d'actualité sur le chenil, etc.

• Une section Aller plus loin : cette section, présentée sous la forme d'une liste de questions, soulève des interrogations sur des aspects plus avancés de la notion abordée dans le chapitre. Chaque question est accompagnée d'une réponse. La lecture de cette section n’est pas necessaire à la compréhension des chapitres suivants.

Pour un profil débutant avec les frameworks JavaScript, il est recommandé d’ignorer la section “Aller plus loin” afin de se concentrer sur la maîtrise des aspects fondamentaux. La lecture de cette troisième partie pourra être effectuée lors d’une seconde lecture.

Le choix du framework

Ce cours vous offre la possibilité de vous appuyer sur l'un des deux frameworks JavaScript suivants : React.js ou Vue.js. Tout au long du cours, vous rencontrerez différents encarts dotés de deux onglets, comme celui-ci :

Bienvenue sur React.js !

Ces encarts vous permettront de concrétiser les notions abordées à travers des exemples dans le framework choisi. Si vous débutez avec les frameworks JavaScript, il est fortement recommandé de ne pas passer d’un framework à l’autre et de concentrer votre apprentissage sur un framework bien précis.

Une fois que vous aurez approfondi la maîtrise d’un framework, le cours pourra vous aider à passer plus facilement à un autre en mettant en évidence les similitudes avec celui déja connu.