Front end, la partie visible de votre application

Le développement des technologies JavaScript (JS) depuis 2010 permet d’imaginer, dans le cadre d’architectures découplées, des frontaux web riches, dynamiques, puissants et performants.

Maîtrisant les trois grands framework que sont React, Vue et Angular, les experts de Makina Corpus mettront leurs compétences au service de votre projet.

Découvrez nos projets

Image
Makina Corpus - Header Front-end

Front end pour optimiser l’ergonomie et la navigation d’une application

Image
Front-End pour optimiser l’ergonomie et la navigation d’une application

Le front se réfère à tous les éléments, composant le design technique et graphique, qui s’affichent à l’écran au moment du chargement d’une page web sur le navigateur d’un internaute. C'est donc avec cette partie que l’utilisateur interagit. Le front end se compose d'éléments qui sont une combinaison de codes HTML, CSS et JavaScript.

L'objectif du développement front est de proposer une application ergonomique et accessible avec un contenu optimal qui respecte les exigences des navigateurs.

Vous avez un projet?

Développement JavaScript au service du front end

Le front end comprend tout ce qui touche au développement JavaScript et qui s’exécute principalement dans un navigateur ou un moteur JavaScript côté serveur (Runtime, comme le moteur de Chrome embarqué dans NodeJS).

Côté JavaScript, l’équipe Makina Corpus développe dans les normes récentes d’ECMAScript qui évoluent en permanence ces dernières années. Les versions modernes du langages sont transpilées dans des versions plus anciennes pour s’exécuter correctement dans les navigateurs web : la compatibilité. Nos experts front end utilisent également TypeScript qui est une surcouche à JavaScript et ajoute des fonctionnalités comme le typage statique.

JavaScript permet d’introduire un peu de dynamisme ou de Dataviz dans des pages existantes. Avec ce langage, il est aussi possible de bâtir intégralement une application front de type Single Page Application (SPA) avec une des technologies les plus répandues parmi React, Vue ou Angular. Ces bibliothèques ou frameworks permettent un découpage en composants qui porteront une partie de la logique métier ou d’affichage d’une application. Ces derniers sont testables unitairement et potentiellement réutilisables.

Les développeurs JavaScript interviennent à plusieurs niveaux.

Mobile-native

Dans le navigateur web

  • Enrichir simplement les pages HTML
  • Concevoir des applications modernes, qui échangent directement avec les services et API
  • Créer des interfaces interactives riches Technologies ReactJS, Angular, VueJS, Ember, Backbone, MapboxGL, etc.
  • Babel, webpack, etc. (Outils en JS)
FrontEnd_Côté serveur

Côté serveur

  • Développer des applicatifs à part entière grâce à NodeJS
  • Développer des besoins spécifiques : Python ou le PHP Technologies
  • Express, gestion de l’asynchrone, SSR, etc.
Plateformes d’intégrations continues_Environnement de développement

Environnement de développement

  • Possibilités étendues de chargement de contenus (NodeJS)
  • Génération de sites et applications complètes sans solliciter d’autres technologies (NodeJS)
  • Technologies GatsbyJS (sites statiques en JS), etc.

L'intégration web

L’intégration web met en œuvre les dernières versions du HTML et du CSS :

  • L'HTML permet de décrire la structure complexes des pages web, en tenant compte de leur sémantique, de l’accessibilité et de leur référencement
  • Le CSS rend possible des mises en page riches et esthétiques, respectant la créativité des graphistes, avec le potentiel des mises en pages fluides et réactives du responsive web design
  • Le JavaScript occupe également une place dans cet ensemble, en permettant des interactions poussées qui améliorent l’expérience utilisateur.

En plus de ces technologies principales, les intégrateurs font appel à des bibliothèques, favorisant la réutilisation, qui leur permettent d’assembler des composants d’interface : Bootstrap, Foundation, FontAwesome, Bulma et bien d’autres. Pour moderniser et industrialiser ce travail, des outils permettent de gérer les dépendances, d'optimiser les images, d'alléger les fichiers générés ou d'assurer leur comptabilité avec tous les navigateurs (Sass, PostCSS).

Le développeur front end s’appuie sur le travail du designer UX / UI pour une expérience utilisateur durable et efficace à travers une interface ergonomique et un graphisme valorisant.

Vous avez un projet?

Cas d’usages et atouts du front end

Cas d’usages

  • Injecter du visuel et du dynamisme (ergonomie, performance) dans des écrans web traditionnels, générés côté back, qu’il s’agisse de CMS ou d’application métier
  • Créer intégralement une application front découplée du back : Single Page Application, SPA
  • Faire des visualisations de données (Dataviz) assez graphiques, en général avec D3.js
  • Réaliser des cartographies web interactives: la quasi intégralité du web mapping est faite en front / JavaScript (technologies SIG)
  • Produire des sites statiques un peu dynamiques avec Gatsby, consommant diverses sources de données externes (API, CMS)

 

Atouts

  • Souplesse du web pour s’adapter à la fois à un usage « desktop » et « mobile » (Responsive Web design)
  • Ecosystème JavaScript très riche et permettant un développement de fonctionnalités rapide grâce aux librairies open source
  • Double compétences de l’équipe pour faire de l’intégration et du développement
  • Maîtrise des 3 frameworks reconnus par la communauté : React, Vue.js, Angular
  • Experts à disposition avec, pour beaucoup d’entre eux, plus de 10 ans d’expérience

 

Technologies et écosystème open source du front end

Technologies et expertises associées

Le développement front end est en lien avec des technologies et expertises associées :

  • Aux technologies back Python/Django, PHP/Symfony, CMS Drupal puisque le front est indispensable pour les écrans dynamiques dans le navigateur web
  • A l’expertise SIG/web mapping : JS/front, via les librairies Mapbox GL JS, Leaflet

Contributions Open Source de Makina Corpus

Les experts de Makina Corpus participent activement à l’écosystème du front end. Ainsi nos experts interviennent sur les événements des communautés open source associées et contribuent à des projets existants :

  • Interventions sur des meetups et conférences sur diverses thématiques : Gatsby open source framework, Vue.js open source framework JavaScript, async/await, progressive web app (PWA) à l’événement Pyconf, etc.
  • Traduction de la documentation Vue.js en français
  • Contribution à la bibliothèque de composants Element

Références à la Une

actualités Front-End à la une

Image
Capture d'une partie de carte montrant un réseau de voies sur un fond de carte sombre. Au centre, une popup affiche les information de l'un des tronçons du réseau.
28/02/2024

Géné­rer un fichier PMTiles avec Tippe­ca­noe

Exemple de géné­ra­tion et d’af­fi­chage d’un jeu de tuiles vecto­rielles en PMTiles à partir de données publiques.

Voir l'article
Image
Read The Docs
01/02/2024

Publier une documentation VitePress sur Read The Docs

À l'origine, le site de documentation Read The Docs n'acceptait que les documentations Sphinx ou MKDocs. Depuis peu, le site laisse les mains libres pour builder sa documentation avec l'outil de son choix. Voici un exemple avec VitePress.

Voir l'article
Image
Widget
04/04/2023

Créer une application en tant que composant web avec Stencil

Mise en place dans le cadre de Geotrek, cette solution permet de se passer d'une iFrame pour afficher une application dans n'importe quel site.

Voir l'article

Formez-vous

Formations Front end

Formation Développement d'applications JavaScript

À distance (FOAD) Du 20 au 22 novembre 2024

Voir la formation

Formations Front end

Formation ReactJS

À distance (FOAD) Du 21 au 25 octobre 2024

Voir la formation

Formations Front end

Formation Angular

À distance (FOAD) Du 25 au 29 novembre 2024

Voir la formation

Inscription à la newsletter

Nous vous avons convaincus