Le monde du web et du mobile ne cesse d’évoluer et de se diversifier. Afin de rester compétant dans le metier, le développeur Front End se doit de maitriser les nouvelles technologies et ainsi que les outils permettant leur exploitation.

L’IDE :

webstorm

 

WebStorm est l’IDE spécialisé pour le développement javascript d’une application ou d’un site web. Mis à jour fréquemment par son fabriquant JetBrain, il intègre toutes les nouveautés technologiques, fonctionnalités et frameworks. Ainsi il permet de créer un projet construit sur une techno ou framework du moment ( AngularJS, NodeJS, Bootstrap, React…).

Ses principales fonctionnalités sont :

  • Auto-complétion intelligente
  • Inspection du code et correction rapide
  • Navigation rapide du code et recherche d’usage d’un code
  • Refactorisation du code

Version Control System : Permet de lier le projet simplement à un VCS (logiciel de gestion de versions) avec Git, SVN, Mercurial.

Il dispose de nombreux outils intégré permettant de lancer des tâches (Grunt, Gulp, Webpack…), installer via npm, utiliser le terminal.

Ses outils de tests et de debbuging sont très performants.

Il est payant mais accessible gratuitement pour les étudiants et les professeurs.

Autres IDEs :

  • ATOM: très bon IDE développé par Github, gratuit.
  • SublimeText: éditeur léger, parfait pour les petits projets, payant.
  • bracket : plus destiné aux intégrateurs et webdesigners, gratuit.

Les outils graphiques :

photoshopIl est très courant dans un projet web que l’interface de l’appli soit réalisé par un designer. Exception faite pour les projets ne nécessitant qu’un template existant ou un framework CSS (ex: bootstrap).

Photoshop est le logiciel de création et de retouche d’image le plus utilisé sur le marché. Il n’y a pas d’exception pour le web, la plus part des maquettes à intégrer ont été créé sous photoshop en PSD. Ainsi le développeur Front End doit aussi bénéficier d’une bonne formation sur le logiciel pour en maitriser les différents outils afin de découper les maquettes (header, footer, section, images, texte…) et de les intégrer en HTML, CSS à l’aide d’un IDE pour donner vie sur le web aux PSD du designer.

Photoshop n’a qu’un seul réel concurrent actuellement, il s’agit de Sketch. Celui-ci c’est fait une place sur le marché en mettant en place les artboards dans les maquettes, permettant dans un seul fichier d’avoir les gabarits des différents supports de diffusion (desktop, tablette, mobile…).

Les navigateurs :

browsers

C’est le cauchemar des développeur web, la compatibilité navigateur avec comme ennemie numero 1, internet explorer.

Chaque fonctionnalité, élément d’un interface web doit être tester sur les navigateurs web les plus utilisés (chrome, firefox, internet explorer, safari…), qui meme sous leur dernières versions ne sont pas compatibles avec les dernières technologies. Certains éléments s’afficheront de la façon souhaité sur tel navigateur mais casseront la page sur un autre obligeant le développeur à ajouter des scripts ou utiliser des hacks css pour palier à ces soucis de compatibilité. C’est encore pire quand le projet nécessite d’être compatible sur d’ancienne version de ces navigateurs datant de plusieurs années (ex: IE 9).