getfocus.io

Des outils pour construire des interfaces modernes et centrées sur vos utilisateurs

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

speaker

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.

speaker

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)
speaker

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.

memory

Focus webpack

Une config webpack clef en main pour builder votre projet focus
functions

Focus eslint

Une config eslint clef en main pour votre projet. Règle de codage, bonnes pratiques, ...
album

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.

opacity

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
face

Conception

Coming soon...

favorite

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
opacity

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
extension

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
group_work

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 !