Javascript

1995

var xhr;
try {
  xhr = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
  try {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
  } catch (e2) {
    try {
      xhr = new XMLHttpRequest();
    } catch (e3) {
      xhr = false;
    }
  }
}

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    if (xhr.status == 200) {
      "ok";
    }
  }
};

xhr.open("GET", "data.xml", true);
xhr.send(null);

jQuery

2006

Script.aculo.us, Mootools, YUI

var xhr;
try {
  xhr = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
  try {
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
  } catch (e2) {
    try {
      xhr = new XMLHttpRequest();
    } catch (e3) {
      xhr = false;
    }
  }
}

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    if (xhr.status == 200) {
      "ok";
    }
  }
};

xhr.open("GET", "data.xml", true);
xhr.send(null);

$.get( "data.xml", function( data ) {
  "ok"
});

Javascript pure

jQuery

$.post('/login', credentials, function( user ) {
    $('.user-notlogged').hide();
    $('.user').show();
    $('.user__firstname').text(user.firstname);
    $('.user__lastname').text(user.lastname);
});

<header>  
    <div class="user-notlogged">Not logged in</div>
    <div class="user">
        <div class="user__firstname"></div>
        <div class="user__lastname"></div>
    </div>
</header>

jQuery

AngularJS

2009

Backbonejs (2010), Embersjs (2011)

app.controller('UserCtrl', function ($scope, $http) {

  $scope.user = false

  $http.post('/login').success(function(user) {
    $scope.user = user;
  });

});

<header>  
    <div class="user-notlogged" ng-hide="user">Not logged in</div>
    <div class="user" ng-show="user">
        <div class="user__firstname">{{ user.firstname }}</div>
        <div class="user__lastname">{{ user.lastname }}</div>
    </div>
</header>

AngularJS

ReactJS

2013

RiotJS (2014), VueJS (2015)

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});

ReactDOM.render(<Timer />, mountNode);

ReactJS

Redux

2015

Flux

import { createStore } from 'redux'

function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1
  case 'DECREMENT':
    return state - 1
  default:
    return state
  }
}

let store = createStore(counter)

store.subscribe(() =>
  console.log(store.getState())
)

store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'DECREMENT' })

Redux

2017

Choisir l'outil qui correspond à votre besoin