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 (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 :

  • le 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 webmapping 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/webmapping : 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 meetup 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
Logo Cypress
11/10/2021

Retour d’expérience : tests fonctionnels avec Cypress

Dans le cadre d'un de nos projets de développement spécifique, l’équipe Makina Corpus a été amenée à coder un important logiciel métier avec de nombreuses entités et règles de gestion : l’Hydroportail.

Voir l'article
29/03/2019

Des boucles de composants génériques avec Angular

Ou comment faire des composants de listes réutilisables avec n'importe quel objet.

Voir l'article
Image
IA_Angular_Universal
08/10/2018

Mettre en place Angular Universal avec Angular 6 et 7

Le fonctionnement d'Angular Universal expliqué. Toutes les étapes de mise en place détaillées. Les pièges à éviter.

Voir l'article

Formez-vous

Front-end

Développement d'applications JavaScript

A distance (foad) Du 25 au 28 janvier 2022

Voir la formation

Front-end

ReactJS

Aucune session de formation n'est prévue pour le moment.

Pour plus d'informations, n'hésitez pas à nous contacter.

Voir la formation

Front-end

Angular

A distance (foad) Du 23 au 25 février 2021

Voir la formation

Inscription à la newsletter

Nous vous avons convaincus