busbud/coding-challenge-frontend-a — pull request #5 by emagnier (2014-10-06 04:00:48+00:00)
Title: Autocomplete coding challenge

Salut Mike,
Voici mon PR concernant le Coding Challenge Front-End.

Quelques liens:
* Code source sur mon repo (branche `autocomplete`): https://github.com/emagnier/coding-challenge-frontend-a/tree/autocomplete
* Mon travail hébergé sur Heroku: [busbud-etienne.herokuapp.com](http://busbud-etienne.herokuapp.com)
* Les instructions d'installation: [README.md](https://github.com/emagnier/coding-challenge-frontend-a/blob/autocomplete/README.md).

Je pense avoir fait le tour des requirements. Je n'ai pas passé de temps sur IE7 (notamment car React.js ne supporte que IE8+). Et je n'ai pas implémenté la fonctionnalité de suggestion à l'intérieur du textbox (text hint) comme sur busbud.com (par manque de temps), seulement le dropdown avec la liste des suggestions. Mais je vais essayer de l'implémenter cette semaine si j'ai assez de temps.

Et quelques explications sur mon implémentation :

### Workflow
* **Grunt**: toutes les configurations des taches se trouvent dans le dossier `tasks`.
* **`.editorconfig`** à la racine du projet: permet de garder un coding style consistant entre projets/IDE.
* **JSHint** et **SCSS-Lint**, disponible via des taches Grunt.
* **Bower**: comme Front-End package manager.

### CSS `assets/styles`
* J'ai utilisé **Sass** et la syntaxe **BEM** (celle-ci est enfin devenue agréable à utiliser depuis Sass 3.3).
* Le code CSS est basé entre autre sur un Normalizer et quelques modules du frameworks Inuitcss.
* Le site est **responsive**. Il y a un peu de graceful degradation sur IE8/9.

### JavaScript `assets/scripts`
* J'utilise **Browserify**. Je l'apprécie car permet de garder un coding style similaire entre le Front-End et le Back-End.
* J'ai expérimenté l'implémentation de l'autocomplete avec **React.js**. Comme c'est la toute première fois que je l'utilise c'est certains qu'ils y a plusieurs choses que je pourrais améliorer. Par exemple je me suis rendu compte à la fin que j'aurais dût davantage utiliser les `props` et les `states` de React, ce qui m'aurait permis de simplifier mon code à plusieurs endroits. La SearchBar aurait aussi pu être un autre composant React. En tout cas j'ai très apprécié travailler avec cette librairie, et c'est certain que je vais continuer à me former dessus et explorer son API !
* J'ai aussi utilisé la syntaxe **JSX** recommandé avec React. Celle-ci est supportée dans Webstorm 9, et en paramétrant `Javascript language version` à `JSX Harmony` dans les préférences.
* Un server proxy pour interroger le endpoint des villes aurait peut-être été utile. Cela aurait entre permis de sécuriser le token d'accès.
* Je n'ai pas eu le temps de l'implémenter, mais j'ai aussi pensé à un système de cache des villes coté clients. Celles-ci ne changent pas tous les jours, et ça permettrais peut-être à la fois d'augmenter la vitesse client, et de réduire le nombre de requêtes au server (je suppose que les utilisateurs cherchent toujours plus ou moins les même villes).

### Localization
* J'ai ajouté un support très très basique de la localisation. Elle est basée sur la norme **i18n**. Les fichiers de langues sont dans des fichiers JSON, dans le dossier `locale`.

Voilà ! Merci pour cet exercice qui m'a donné plein de nouvelles idées et l'occasion de découvrir de nouvelles technos (React/JSX) !

Bon code review ;-)