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.
Front end pour optimiser l’ergonomie et la navigation d’une application
Image
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.
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.
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)
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.
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.
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
Afficher n'importe quel drapeau du monde avec flag-icons
J'ai récemment eu besoin d'implémenter un sélecteur de langue avec des drapeaux dans une application web. J'avais envie de trouver une manière rapide de le faire sans avoir à intégrer tous les drapeaux un par un, et de la manière la plus légère possible.
Pour faire des essais ou bien démarrer un nouveau projet, vous avez besoin de créer rapidement une application Symfony couplée avec un front Vue.js ? Suivez le guide !
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.
