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.

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)
Mobile-native

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.
FrontEnd_Côté serveur

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.
Plateformes d’intégrations continues_Environnement de développement

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

AURAN

Application webSIG : découverte et analyse du territoire

Fort de ce succès, l’Agence souhaitait déployer une nouvelle version accessible à tous enrichie de nouvelles fonctionnalités. Dans ce contexte, l’AURAN a confié à Makina Corpus la refonte de l'application Cart’en Main. Cette nouvelle version est basée sur la plate-forme webSIG open-source développée par l'équipe Makina Corpus.

Cart'en Main est maintenant responsive, elle s'adapte donc à tous les supports et facilite l'utilisation sur mobiles et tablettes.  Aujourd'hui les données sont accessibles sur le périmètre du Grand Ouest (Régions Pays de la Loire et Bretagne), et aux échelles communale, intercommunale ou départementale et devraient s'enrichir avec de nouvelles données à l'avenir.

En savoir plus
Image
Application WebSig
SOLAGRO

Site d'informations sur les changements climatiques pour le secteur agricole

Soutenu par le programme LIFE de la Commission Européenne, le projet AgriAdapt associe des partenaires - français, espagnols, allemands et estoniens - qui représentent quatre zones contraintes par des risques climatiques différents. L'objectif du projet est double : d'évaluer la vulnérabilité des principales productions agricoles européennes face aux changements climatiques; et aussi de proposer des plans d’adaptation durables permettant à ces systèmes de devenir plus résilients.

En savoir plus
Image
Solagro
CELESTE

Carte d'éligibilité d'un fournisseur d'accès Internet

Le fournisseur d’accès Internet CELESTE souhaitait créer une carte représentant les différentes technologies réseaux (téléphonie mobile, fibre, cuivre) et leurs zones de couverture pour pouvoir ensuite communiquer sur son site sur ces différentes technologies qu’il propose à ses clients. Le but de ce projet était de permettre à un prospect de regarder, en fonction de sa localisation, quelle est la couverture possible dans les différentes technologies offertes par CELESTE et quelles seraient les qualités de service atteignables.

En savoir plus
Image
reference-celeste

actualités Front-End à la une

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

28/02/2024

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
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.

Publier une documentation VitePress sur Read The Docs

01/02/2024

À 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
Read The Docs

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

04/04/2023

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
Image
Widget

Formez-vous

Formations Front end

Formation Développement d'applications JavaScript

À distance (FOAD) Du 2 au 4 avril 2025

Voir la Formation Développement d'applications JavaScript

Formations Front end

Formation ReactJS

Toulouse Du 4 au 6 février 2025

Voir la Formation ReactJS

Formations Front end

Formation Angular

Nantes Du 21 au 23 mai 2025

Voir la Formation Angular

Inscription à la newsletter

Nous vous avons convaincus