Apprentissage du Web...Rien que ça...

  1. Introduction
  2. Les bases
    1. Le vocabulaire
    2. Les technologies
  3. Tools
  4. IDE
  5. Step by step de mon apprentissage
  6. Installation de l'environnement
  7. Premier projet

Introduction

Cette page devrait permettre aux personnes qui n'ont jamais fait (ou
très peu) de web, de plonger dans ce merveilleux monde. Étant dans cette
situation, et ne sachant pas trop par où commencer, j'ai tenté de trouver des réponses en posant des questions à gauche et à droite. Ce document tente de réorganiser toutes les réponses et les ressources que j'ai récupérées afin de structurer au mieux la démarche d'apprentissage
et de l'optimiser.

Les bases

Je me suis tout d'abord attelé à constituer un lexique du vocabulaire
utilisé dans le domaine, afin de mieux saisir de quoi on me parlait.
Notre wiki est déjà une bonne source d'inspiration pour ça.

Le vocabulaire

REST

SOAP

JSON

DOM

HTML & CSS

Javascript

Framework JS

La programmation en javascript peut être assez complexe. Afin de
faciliter le développement, des librairies fleurissent sur le web. En
général, ces librairies regroupent toute une série de fonctions
facilitant la création d'animation, la manipulation de
fichier/document, ...

SVG

Minification

LESS/SASS - CSS Preprocessor

En gros, ça simplifie l'écriture des fichiers CSS via un langage
intermédiaire qui sera compilé pour généré le CSS. LESS et SASS sont
deux types de ces langages.

Markdown

C'est un langage contenant des balises simples permettant de mettre en
page un texte.

Les technologies

Le monde du web est une horreur de ce point de vue... Il existe une
tonne de "brols", du bon, du moins bien et du pourri. Et, pour ajouter
une bonne couche, cela bouge et change très vite. Une technologie à son
apogée aujourd'hui, peut-être oubliée six mois plus tard... Il est donc
très difficile de choisir quelques choses pour un projet et de se dire
que ces outils seront toujours supportés ou pertinent dans un an.

Dans cette partie, je vais ajouter tout ce que j'ai pu trouver en
parcourant les articles et autres vidéos qui m'ont permis de mieux
appréhender le monde du web.

Site de références

Voici une liste de sites reprenant pas mal d'information sur le monde du
web. On y retrouve des définitions, des tutoriaux, des cours en ligne,
...

Voici aussi une vidéo qui brosse un peu tout le petit monde du
Front-end, à savoir, les outils, les frameworks et tout ce qui tournent
autour. C'est assez complet pour avoir une bonne idée de tout ce qui
existe.

http://www.infoq.com/presentations/front-end-tools-workflows?utm_campaign=infoq_content&utm_source=infoq&utm_medium=feed&utm_term=global

Site de formations

Site de documentation

  • http://devdocs.io
    Ce site est assez impressionnant... En effet, il regroupe toutes les technologies web (langage, framework, ...) et propose une documentation détaillée pour chacune d'elles... A visiter de toute urgence si vous ne le connaissez pas encore !

Site de doc & formations

Tools

Je vais regrouper ici tout ce que je peux trouver et qui est susceptible
d'être utile dans un projet web. Or, donc, vous y trouverez des IDE, des
gestionnaires de dépendances (dans le même style que nuget), des
gestionnaires de tâches automatiques (faciliter le déploiement, ...),
...

IDE

  • Introduction

    Voici un petit article qui introduit certains IDE que je présente rapidement ici. Vous y retrouverez Visual Studio Code, Sublime Text, Brackets, Atom et WebStorm. Ca donne une bonne vision globale des avantages et inconvénients de chacun.

    http://www.johnpapa.net/web-dev-with-editors-and-ides/

  • Visual Studio 2015 (LICENCE)

    Ayant l'habitude de travailler depuis plusieurs années avec visual studio, c'est tout naturellement vers lui que je me suis tourné pour voir ces atouts dans le cadre de développement HTML5/CSS/Javascript. Contrairement à ce que l'on pourrait penser, Visual Studio n'est pas mal pour un développeur Web. La version 2015 intègre Bower/Grunt Manager (qui permet aussi d'installer Gulp). De plus, resharper supporte de le javascript , et il existe des modules pour faciliter les units tests (Chutzpah).

  • http://blogs.msdn.com/b/visualstudio/archive/2015/06/10/javascript-editor-improvements-in-visual-studio-2015.aspx http://vswebessentials.com/

  • http://www.dotnetcurry.com/visualstudio/1096/using-grunt-gulp-bower-visual-studio-2013-2015

  • Visual Studio Code (FREE)
    Voici un nouvel IDE proposé par Microsoft. Il est orienté cross-
    platform developpement, et est assez léger.
    Voici une petite présentation :
    http://www.johnpapa.net/visual-studio-code/

  • Eclipse (FREE) Eclipse avec Web Tool Platform permet de faire du développement Web.
    Voici un petit tutoriel pour l'installer
    http://www.gulland.com/wp/?p=31.

  • Sublime Text (FREE mais avec popup)
    Un éditeur de texte qui a sa petite popularité au sein de la communauté Web. Il est léger, rapide et assez customizable dans ce que j'ai pu comprendre.
    Voici un petit article d'introduction :
    http://www.js-attitude.fr/2013/03/12/sublime-text-dev-web-config-trucs-astuces/

  • Atom (FREE)
    Dans le même ordre d'idée que Sublime Text, il existe aussi Atom.
    Voici une comparaison pertinente des deux (source : http://stackoverflow.com/questions/22126078/what-is-the-difference-between-sublime-text-and-githubs-atom)

    • How is Atom different from Sublime?
      • Atom is an open source text editor/IDE, built on JavaScript/HTML/CSS.
      • Sublime Text is a commercial product, built on C/C++.
      • Comparable to Atom is Adobe Brackets, another open source text editor/IDE built on JavaScript/HTML/CSS. Be minded that this makes Brackets more oriented towards Web development, specially in the front end.
      • Advantages of open source projects are faster rate of development and, of course, price.
    • Does it include IDE features like build tools, function definition jumps, documentations, etc.?
      • The short answer is yes, yes, and yes. The app is completely modular. Open source will give people the freedom to fill the gaps on several of these features.
      • Has anyone using Sublime got a Beta invitation to point out the differences?
      • Advantages of Atom is entry-level hackability, since it's built on the same code that powers Web sites.
      • Advantages of Sublime Text is performance, as it doesn't need to run on top of Node.js, and it's a more mature product, about to reach a stable version 3.
    • There are a long list of minor differences that can be included in the comments (I wish this markdown could be able to draw a table for comparisons, but that's another issue).
      • Because of Atom's rapid turnout, I am afraid some of differences I list here will become outdated over time. Per example, at the time of this writing, Atom is only available on the Macintosh while Sublime Text is already multiplatform.
      • Can I use the themes, schemes and packages from Sublime as is, like Sublime could do with text mate.
      • The short answer is no, but because of Atom's hackability, it will be easy to retool packages from other editors to Atom.
  • Brackets (FREE)
    Voici un petit comparatifréalisé entre Brackets, Atom & Sublime Text. Je le trouve assez pertinent et, me semble t'il, donne un bon aperçu des fonctionnalités de chacun.

  • WebStorm & pyCharms

Gestion de dépendances

Automatisation

Kickstarter

Les kickstarter permettent de créer un skeleton de base, avec les dépenses utiles à votre projet. Ainsi, Yeoman reprend toute une liste de "template" pour différents projets : angularJS+Gulp, Wordpress, ... (http://yeoman.io/generators/). Quant à ng-boilerplate, il est exclusivement utilisé pour les projets AngularJS.

Web components

Les web components sont un ensemble de standard développé par Google
pour permettre au maximum la réutilisation des widgets et composants
dans les documents web. Voici une petite introduction qui vous donnera
une vue d'ensemble du sujet :
http://www.dotnetcurry.com/html5/1079/html5-web-components-tutorial

Framework JS

Comme il y en a beaucoup, je pense qu'il est inutile et non productif de
tous vous les lister. Voici un site bien sympa qui reprend (je l'espère)
tous les frameworks java existant... Il vous permet de rechercher
facilement une librairie particulière en fonction de vos besoins. Vous
n'avez qu'à taper quelques mots clés dans l'outil de recherche, et il
vous ressort tous les frameworks associés !
http://www.javascripting.com/

CSS pre-processor

CSS ayant une syntaxe assez complexe, et des fonctionnalités basiques,
les CSS Preporcessors ont été créé pour élargir les fonctionnalités
et s'affranchir des limitations du CSS. Ainsi, on code dans un langage
que l'on compile afin d'obtenir du CSS. Et pour conclure, voici un petit
article donnant 10 raisons d'utiliser un CSS Preprocessor :
https://www.urbaninsight.com/2012/04/12/ten-reasons-you-should-be-using-css-preprocessor

Afin de vous diriger dans votre choix, voici plusieurs comparatifs
assez objectifs...
Less vs Sass
Less vs Sass vs Stylus

Unit Test & Tools

Jasmine est un framework de test qui suit le principe Behavior Driven
Development.

Chutzpah est un add on pour visual studio qui vous permet d'exécuter du
javascript de test (Qunit, Jasmine et Mocha) dans l'environnement Visual
Studio.

Divers

BrowserSync permet de rafraichir votre page web une fois que vous avez réalisé des modifications dans un fichier. Vous pouvez entre autre ouvrir plusieurs browser différents, et voir l'impact directement. Vous pouvez aussi synchroniser les clicks et les actions sur les différents browser !

IDE

Bon, actuellement, j'hésite encore entre utiliser Visual Studio 2015 ou
Visual Studio Code. Je vais donc utiliser le premier pendant une
semaine, et pareil pour le second, et j'en tirerais des conclusions
par après.

Visual Studio 2015
Installation de Visual Studio 2015 avec

Visual Studio Code

Rien à installer comme plugin

Step by step de mon apprentissage

Voici comment j'ai procédé pour me former... A noter qu'après avoir
terminer mon apprentissage (en tout cas, l'introduction...), je referais
le point afin de proposer une démarche optimale.

  1. Création de cette page, et mise à jour régulière
  2. Apprentissage du vocabulaire
  3. Apprentissage du HTML & CSS via codecacademy.com
  4. Apprentissage du javascript via codecacademy.com
  5. Apprentissage de angularJS
    1. Visionnage de la video Angular JS
  6. Visionnage de la video brossant les Front-end tools et workflow
  7. Introduction rapide sur Javascript et Angular avec un collègue
  8. Apprentissage de angularJS : https://www.codeschool.com/courses/shaping-up-with-angular-js

Installation de l'environnement

  • J'ai tout d'abord installé *Chocolatey *, c'est un gestionnaire de paquet pour windows. Vu que tout ce qui tourne autour du web change assez vite, cela me permet de garder facilement tout up to date. En effet, je vais installer en ligne de commande les différents paquets utiles (node, bower, grunt, gulp,...), et puis je n'aurais plus qu'à réaliser un upate en ligne de commande pour que tout soit mis à jour.

  • Vu le retour en force de la ligne de commande, je me suis permi d'installer ConEmu, combiné avec TCC/LE, cela donne de chouettes couleurs et environnement assez geek...

  • Chocolatey m'a permis d'installer :

  • Avec NPM (le package manager de NodeJS), j'ai installé en global (npm install -g)
    • Bower
    • Grunt
    • Gulp
    • Yo
    • generator-gulp-angular

npm install -g gulp grunt bower yo generator-gulp-angular

  • Ensuite, j'utilise NGinx comme petit serveur Web léger. Je n'ai eu qu'à modifier le fichier .conf afin de pointer vers le répertoire de build, et faire un "start nginx.exe", et hop, tout fonctionnait. A noter qu'avec BrowserSync, il n'est pas nécessaire d'avoir un serveur web pour le développement.

Premier projet