Pssst…
Tu veux voir ma stack ?

Au commencement

1994 – HTML

<table>
  <tr>
    <td rowspan="2" id="nav">
      <h1><a href="/">Home</a></h1>
      <ul></ul>
    </td>
  </tr>
  <tr>
    <td id="body" valign="top"></td>
    <td id="footer" valign="bottom"><img src="spacer.gif" alt></td>
  </tr>
</table>

Au commencement

1996 – PHP

<?php include('includes/head.php'); ?>
<table>
  <?php include('includes/nav.php'); ?>
  <tr>
    <td id="body" valign="top"></td>
    <?php include('includes/footer.php'); ?>
  </tr>
</table>

Au commencement

2000 – CSS

Au commencement

2004 – JavaScript II

function getFile(url) {
  if (window.XMLHttpRequest) {
    AJAX=new XMLHttpRequest();
  } else {
    AJAX=new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (AJAX) {
     AJAX.open("GET", url, false);
     AJAX.send(null);
     return AJAX.responseText;
  } else {
     return false;
  }
}

25 ans plus tard

Webapps

25 ans plus tard

DevUI

• Pas un développpeur Back
  mais doit maîtriser les échanges serveur
• Pas un intégrateur
  mais doit connaître parfaitement CSS / A11y
• Pas un designer
  mais une compétence en animations/Canvas/WebGL serait un plus

25 ans plus tard

DevUI

it's soooo coooooool…

25 ans plus tard

Stack ou Pasta ?

25 ans plus tard

Browser is a VM

Let's go again: System

Shell

• Bash + Bash-it
• ZSH + Oh-My-ZSH
• Bonus level: Utilisez le prompt

Let's go again: System

Ruby

• rbenv
  (jetez moi cette *%$@#! de rvm, vous serez sympas)
• Bundler + Gemfile

  source 'https://rubygems.org'
  
  gem 'sass', '=3.4.5'
  gem 'compass', '=1.0.1'

Let's go again: System

Python

• pyenv + pyenv-virtualenv
• pip

  $ easy_install pip
  $ pip install -r requirements.txt

Let's go again: System

Node

• ndenv
• npm + package.json

  $ npm init
  
  $ npm install grunt --save-dev
  $ npm install browserify --save

Let's go again: Front-end dependencies

Packages managers

• NPM + package.json

  $ npm install
  $ ls -l node_modules
  

• Bower + bower.json

  $ npm install -g bower
  $ bower install
  $ ls -l bower_components

Let's go again: Automation

Tasks runner

• Grunt.js + Gruntfile.{js,coffee}
• Gulp.js + gulpfile.js
• Bonus level: Make / Rake / Ant

Let's go again: Automation

Scaffolding

• Yeoman
• Brunch.io

Let's go again: Testing

Boxes

• Docker.io
• Vagrant

Let's go again: Testing

Provisionning

• Puppet
• Chef
• SaltStack
• Ansible

Let's go again: Testing

JS tests frameworks

• Sinon.js
• Mocha.js
• Bonus level: Gremlins.js

Let's go again: Testing

Scripting tests

• Gherkin
• Cucumber

Let's go again: Back to code

CSS tools

• Sass & frameworks (Compass, Bourbon…)
• Less
• Stylus
• Auto-prefixer

Let's go again: Back to code

Linters

• CSSlint
• JSHint + .jshintrc
• JSCS + .jscsrc

Let's go again: Back to code

Templating

✌︎ Liquid Syntax

• Ruby : Liquid
• Python : Jinja2
• PHP : Twig
• JS : Nunjucks / Swig
• Bonus level: handlebars, mustache…

Let's go again: Back to code

Modules

• AMD : require.js / almond.js
• CommonJS : Browserify

Let's go again: back to code

Devtools

• LiveReload / fb-flo
• Browser Devtools
• Headless browsers
  (Selenium, PhantomJS, SlimerJS, CasperJS)

Devops

Continuous
Integration

• Code Quality : Code Climate, SonarHQ
• CI : Jenkins, Travis

Devops

Deploiement

• Fabric
• Capistrano
• Provisioners

brace yourselves

Choose your tools

Vous êtes seul maître de vos outils.