busbud/coding-challenge-frontend-a — pull request #6 by Fantomg8 (2014-10-28 23:55:48+00:00)
Title: Completion of the coding challenge by Guillaume

Voici ma démarche:

Comme c'est un challenge d'auto-complete, j'ai fait la majorité du travail client-side. Comme mon temps libre était assez limité, je n'ai pas passé beaucoup de temps à faire du refactoring sur l'application donnée. Je crois que de pouvoir s'adapter à ce qui est déjà existant est plus important que d'ajouter sa touche personnelle.

J'obtiens le token d'identification au chargement de la page en utilisant AJAX et je le store localement en javascript. Je dirais que la difficulté principale de ce challenge est la prochaine étape: ajouter le token d'identification sur un header HTTP et de faire un call AJAX à un domaine différent.

Pour se faire, il n'est pas possible d'utiliser JSONP parce que même si l'API le permet, on ne peux pas l'utiliser en changeant les headers HTTP. J'ai pensé pendant un temps utiliser un proxy mais je crois que le but d'utiliser nodeJS est de minimiser les calls aux serveurs pour minimiser le load des serveurs. En plus, de ma compréhension de nodeJS, attendre pour une requête sur le serveur va faire attendre toutes les requêtes à ce serveur.

Pour régler le problème, j'ai utilisé ce qu'on appel le Cross-origin resource sharing (CORS). J'ai séparé ma requête en deux avec une pré-requête (OPTIONS) qui obtient les headers qui sont permis et la deuxième requête qui envoient le x-busbud-token. En faisant ça, je peux utiliser JQuery UI pour le formulaire auto-complete presque de la même manière que si je ne faisais pas une requête CORS.

Après avoir complété le formulaire auto-complete, je me suis attardé à matcher le UI avec celui demandé. J'ai réutilisé le plus possible le CSS existant sur busbud pour ne pas avoir à réinventer la roue et j'ai fait les modifications principalement sur les éléments de JQuery UI pour me conformer au standard.

Pour ce qui est du message d'erreur, j'utilise deux variables et l'événement "select" de JQuery UI pour m'assurer que les éléments ont été sélectionné dans la liste. La difficulté principale est dans le cas où Javascript est désactivé sur le client. L'utilisation dans mon application et sur le site de Busbud d'un tag HTML "a" plutôt que d'un input(type='submit') empêche de soumettre la page si le javascript est désactivé. Pour régler ce problème, j'ai ajouté un input(type='submit') dans une zone noscript et j'ai caché le "a" en utilisant javascript (malheureusement, il est impossible de savoir si le javascript est activé server-side) si javascript est activé. Il ne s'agit pas de la solution la plus élégante. Normalement, j'utiliserais un input et j'ajouterais l'image en CSS.

C'est pas mal tout je crois. C'était intéressant d'apprendre des nouvelles technologies. J'aime la simplicité et l'efficacité de NodeJS comme serveur. Je ne crois pas nécessairement que cette technologie va remplacer les PHP ou .NET de ce monde car je crois que je préfère encore avoir la possibilité d'exécuter du code lourd pour un utilisateur tel que générer des documents Word ou encoder des données. Par contre, pour une application avec beaucoup de contenu dynamique et d'événements, ça semble très efficace.