Les librairies FOCUS
Ces librairies JavaScript offrent tous les outils pour accélérer le développement d'une application web SPA (Single Page Application).
Tous nos développements sont Open-Source et disponibles sur Github.
Toutes les releases des libraires sont publiées sur la plateforme NPM.
Focus Core
Focus-core est la librairie au coeur des développements FOCUS.
Elle met à disposition l'ensemble des outils pour accélérer et fiabiliser le développement de comportements récurrents au sein de votre application.
Parmi ces outils, en voici les principaux :
- Les communications réseaux avec les serveurs BACKEND
- La gestion automatisée des formulaires (domaines, définitions...)
- L'implémentation de l'architecture FLUX qui spécifie le modèle de communication et des composants dans l'application
- Le router de l'application, qui standardise une méthode commune pour la navigation au travers de "routes" applicatives
Cette librairie ne publie aucun composant graphique. Elle est cependant au coeur des dépendances des développements FOCUS.
Focus Components
Focus-components est la librairie des éléments graphiques FOCUS, prêts à l'emploi.
Telle une boite de LEGO®, elle met à disposition beaucoup de composants pour accélérer le développements des pages respectant un template FOCUS.
Ces composants sont issus d'une recherche du "best of the web" et intègrent une réelle réflexion UX (User Experience). Ils sont optimisés au quotidien pour tenter de maximer la DX (Developer Exeperience) et facilier ainsi la prise en main et l'utilisation par les développeurs Fontend.
Enfin, côté UI, cette librairie reprend tous les codes du Matérial Design en se basant sur la librairie Material Design Lite de Google.
Les extensions (disponibles)
Une extension FOCUS est une application à part entière, dont le métier lui est propre. Elle a pour vocation d'être autonome et publie :
- son API
- son interface d'administration
- un morceau d'IHM déportable dans les applications métier, via un JavaScript très simple d'intégration
Tous nos développements sont Open-Source et disponibles sur Github.
Toutes les releases des extensions sont publiées sur la plateforme NPM.
Focus File
Focus-file est une extension permettant de gérer l'upload de fichier de manière simple : via Drag and Drop.
Focus Notifications
Focus notifications centralise les notification entre votre ou vos applications. A la manière d'un centre de notification sur votre smart-phone.
Focus Comments
Focus comments vous permet d'ajouter une fonctionnalité de commentaire sur une entité spécifique, à la manière des réseaux sociaux.
Les extensions (à venir)
Les extensions suivantes sont en cours de conception. Elles seront disponibles très bientôt.
Focus Help
Le centre d'aide ajoute de l'aide contextuelle à votre application.
Focus Mobile
La gestion des applications mobiles avec Focus.
La documentation
Vous débutez sur FOCUS, vous souhaitez suivre l'actualité FOCUS, vous inspirer de la philosopie, explorer les outils et développer avec FOCUS... Vous ne savez pas par où commencer ? Commencez par choisir votre point d'entrée ici :)
Focus Blog
Le blog interne à Klee autour de la philosophie FOCUS. Vous y trouverez les derniers articles sur :
- des éléments de discours
- les dernières tendances du web
- des points d'entrées FOCUS
- des bonnes et mauvaises pratiques
- des éléments de veille
- des fiches projet FOCUS
- ...
Vertigo Blog
Le blog interne à Klee regroupant de fiches techniques autour de Vertigo, des bonnes pratiques, ...
Focus DOCS
La documentation technique de focus. Tout pour prendre en main les outils FOCUS !
Les démonstrateurs FOCUS
Les librairies, les composants et les extensions FOCUS sont aussi visibles au travers de démonstrateurs, afin que chacun d'entre nous puisse se les approprier au mieux.
Le showcase
Le showcase a but d'exposer une démo unitaire de chacun des composants FOCUS avec :
- Une fiche descriptive et fonctionnelle de chacun composant, decrivant son cadre d'utilisation et ses interaction
- Un exemple d'utilisation avec code source
- Une démo unitaire en live (avec possibilité de jouer avec le code source du composant)
La démo
Le démonstration FOCUS met en musique les composants et extensions au sein d'une application web, sur le thème du cinéma. Il est à destination :
- des développeurs, pour disposer d'un cas concret d'utilisation des composants
- des designers, pour visualiser les templates et interactions FOCUS
- des commerciaux, pour démontrer en live les concepts FOCUS auprès des clients
- de toute personne intéressée et inspirée par FOCUS :)
Bientôt disponible
Les outils mis à disposition par Focus
Nous travaillons également également sur des outils et des configurations, facilement déployables dans vos projets, ayant pour vocation de faciliter la prise en main des technologies ou outils FOUCS et d'améliorer la qualité globale des applications que vous développez.
Focus webpack
Une config webpack clef en main pour builder votre projet focusFocus eslint
Une config eslint clef en main pour votre projet. Règle de codage, bonnes pratiques, ...Focus babel
Une config babel de base pour vos projets.Les technologies utiliseés par Focus
Cette section répertorie les technologies clés au coeur des développements FOCUS. Voici des points d'entrée intéressants pour les développeurs.
React (by Facebook)
Elle est construite autour de principes très simples:
- React ne sert qu'à créer des composants graphiques
- Les composants sont par définition composables à l'infini. (un peu comme des Lego)
- les composants graphques disposent de deux informations les props qui sont fournies par un composant parent et qui sont non mutables, le state qui est mutable et qui traduit de l'état interne du composant.
- Habituellement les composants graphiques sont rendu directrement dans le Document Object Model aussi appellé DOM. Ce dernier, lié au navigateur est assez lent et possède de nombreuses informations liée au navigateur rendant complexe l'interaction avec ce dernier. En s'inspirant des moteurs de jeux video, React s'appuie sur un DOM Virtuel, à chaque changement d'état de l'application les composants concernés sont rendus à nouveau dans DOM virtuel. React a construit un pont entre le DOM réel et le DOM virtuel, chaque changement dans le DOM virtuel est reporté efficacement dans le DOM réel. Les gains en fiabilité et en performance sont concidérables sur une application.
- React apporte également la syntaxe JSX qui permet de combiner un style d'écriture à la HTML pour les composants tout en utilisant le JavaScript. Cette syntaxe a grandement contribué au succès de React
Material Design Lite (by Google)
Focus prend le parti de s'appuyer sur les codes Material Design, dont les spécifications sont proposés par Google (qui adopte également ces recommandations sur l'ensemble de ses plateformes web). C'est la librairie CSS Material Design Lite réalisée également par Google qui a été choisie pour FOCUS.
Un bon nombre des composants "Material" sont déjà intégrés dans les libs Focus mais n'hésitez pas à parcourir la documentation de Google (qui est très bien réalisée) si vous avez d'autres besoins.
Les formations
Vous cherchez des supports de formation FOCUS ? C'est ici que vous trouverez les différents supports de formation données dans le cadre des projets utilisant FOCUS. Ces formations n'ont pas vocation à vous former de manière exhaustive sur ces sujets, mais plutôt de :
- transmettre la philisophie
- fournir des élements de discours
- parcourir les bonnes / mauvaises pratiques
- donner les bons points d'entrée
Conception
Coming soon...
Les concepts clés du JavaScript
Sujets abordés :
- Les bases du JavaScript (fonctions, mots clés, closures,…)
- ECMA SCRIPT 6
- Comment utiliser les outils de debug ?
- Qu’est-ce que node.js, les node-modules, npm ?
- Introduction à Webpack
- Qu’est-ce que Backbone.js ? comment écrire une route ?
- Qualité du code et ES Lint…
- Exercices
Les bases pour styler votre application
Sujets abordés :
- Les bases du CSS
- Les sélecteurs et le poids des sélecteurs
- Quelques nouveautés CSS3 importantes à maitriser (Flexbox, animations, …)
- Matérial Design Lite
- SASS
- Les bonnes pratiques dans le cadre des projets FOCUS
React
Sujets abordés :
- Les bases de la lib REACT : component, props, state, DOM virtuel
- Composants / Fonctions / mixins
- Les classes REACT
- Architecture FLUX (Store / dispatcher / actions)
- Excercices
Focus
Sujets abordés :
- La démarche de FOCUS
- Présentation des libs FOCUS
- Les écrans types : Détail / recherche / quick search / admin
- FOCUS.core : FLUX, domaines, masterdata
- FOCUS.components
- Les starter kit d’une application FOCUS (arborescence des fichiers et du code source)
- Présentation des outils FOUCS : Github, Showcase, Focus-docs, npmjs
Vous souhaitez nous rejoindre et intégrer un projet FOCUS ?
De nombreux postes autour des technologies Javascript, React, Material Design sont disponibles. Bosser sur ces technos vous intéresse ?
Rejoignez nous !
Développeur Frontend
Intégré au sein des équipes KLEE, vous travaillerez au coeur des projets FOCUS en co-création avec :
- des UX Designers
- des UX Developers
- des architectes techniques
Stage Marketing FOCUS
Fiche de poste bientôt disponible !