199 files changed, 1547 insertions, 2001 deletions

diff --git a/.babelrc b/.babelrc
new file mode 100644
index 000000000..efa322372
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,19 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": "> 1%",
+        "uglify": true
+      },
+      "useBuiltIns": true
+    }],
+      "react"
+  ],
+
+  "plugins": [
+    "syntax-dynamic-import",
+    "transform-object-rest-spread",
+    ["transform-class-properties", { "spec": true }]
+  ]
+}
diff --git a/.gitignore b/.gitignore
index 02627b2f9..a950559ef 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,6 +33,7 @@ coverage
 
 # Ignore uploaded files
 /public/uploads
+/public/packs
 
 # Ignore node modules
 /node_modules
@@ -44,4 +45,6 @@ coverage
 /bin/spring
 
 # FIXME Ignore ./spec/services/zip_service/regression_4273_spec.rb files
-/spec/fixtures/target_*.zip
+/spec/fixtures/target_*.zip/public/packs
+/public/packs-test
+/node_modules
diff --git a/.postcssrc.yml b/.postcssrc.yml
new file mode 100644
index 000000000..a123d1fd2
--- /dev/null
+++ b/.postcssrc.yml
@@ -0,0 +1,3 @@
+plugins:
+  postcss-smart-import: {}
+  postcss-cssnext: {}
diff --git a/Gemfile b/Gemfile
index ed4778c94..80956c332 100644
--- a/Gemfile
+++ b/Gemfile
@@ -15,8 +15,8 @@ gem 'uglifier', '~> 2.7.2'
 # Use CoffeeScript for .js.coffee assets and views
 gem 'coffee-rails', '~> 4.0.0'
 
-# ES6 powa
-gem 'browserify-rails'
+# Webpacker
+gem 'webpacker', '~> 3.0'
 
 # Use jquery as the JavaScript library
 gem 'jquery-rails', '~> 3.1.4' # Update to v4 for Rails 4.2
diff --git a/Gemfile.lock b/Gemfile.lock
deleted file mode 100644
index 065390ebe..000000000
--- a/Gemfile.lock
+++ /dev/null
@@ -1,676 +0,0 @@
-GIT
-  remote: git@github.com:af83/has_array_of.git
-  revision: a6439d93291c7a1ca224ea95a8d39ed101e2f05f
-  specs:
-    has_array_of (0.0.1)
-      activerecord (>= 4.0)
-      pg
-      railties (>= 4.0)
-
-GIT
-  remote: git@github.com:af83/stif-codifline-api.git
-  revision: c0efb26bf202e0770348bdac060b14c28e575ac2
-  specs:
-    codifligne (0.0.2)
-      nokogiri (>= 1.7.2)
-
-GIT
-  remote: git@github.com:af83/stif-reflex-api.git
-  revision: 7c517b98c3900c9bb0b81dd0ccab97f8e8f5f249
-  specs:
-    reflex (0.0.1)
-      nokogiri (~> 1.6)
-
-GIT
-  remote: https://github.com/af83/language_engine.git
-  revision: c4d7d5af781b55c1df4806c3960caf3c22f1ee96
-  specs:
-    language_engine (0.0.7)
-      rails (~> 4.2)
-
-GIT
-  remote: https://github.com/af83/whenever.git
-  revision: b7963381a11243affe4f35881c85be0710f434e3
-  specs:
-    whenever (0.9.4)
-      chronic (>= 0.6.3)
-
-GEM
-  remote: https://rubygems.org/
-  remote: https://rails-assets.org/
-  specs:
-    RedCloth (4.3.2)
-    SyslogLogger (2.0)
-    aasm (4.12.0)
-      concurrent-ruby (~> 1.0)
-    actionmailer (4.2.8)
-      actionpack (= 4.2.8)
-      actionview (= 4.2.8)
-      activejob (= 4.2.8)
-      mail (~> 2.5, >= 2.5.4)
-      rails-dom-testing (~> 1.0, >= 1.0.5)
-    actionpack (4.2.8)
-      actionview (= 4.2.8)
-      activesupport (= 4.2.8)
-      rack (~> 1.6)
-      rack-test (~> 0.6.2)
-      rails-dom-testing (~> 1.0, >= 1.0.5)
-      rails-html-sanitizer (~> 1.0, >= 1.0.2)
-    actionview (4.2.8)
-      activesupport (= 4.2.8)
-      builder (~> 3.1)
-      erubis (~> 2.7.0)
-      rails-dom-testing (~> 1.0, >= 1.0.5)
-      rails-html-sanitizer (~> 1.0, >= 1.0.3)
-    active_attr (0.10.0)
-      activemodel (>= 3.0.2, < 5.1)
-      activesupport (>= 3.0.2, < 5.1)
-    activejob (4.2.8)
-      activesupport (= 4.2.8)
-      globalid (>= 0.3.0)
-    activemodel (4.2.8)
-      activesupport (= 4.2.8)
-      builder (~> 3.1)
-    activerecord (4.2.8)
-      activemodel (= 4.2.8)
-      activesupport (= 4.2.8)
-      arel (~> 6.0)
-    activerecord-postgis-adapter (3.0.0)
-      activerecord (~> 4.2)
-      rgeo-activerecord (~> 4.0)
-    activesupport (4.2.8)
-      i18n (~> 0.7)
-      minitest (~> 5.1)
-      thread_safe (~> 0.3, >= 0.3.4)
-      tzinfo (~> 1.1)
-    acts-as-taggable-on (4.0.0)
-      activerecord (>= 4.0)
-    acts_as_list (0.6.0)
-      activerecord (>= 3.0)
-    acts_as_tree (2.1.0)
-      activerecord (>= 3.0.0)
-    addressable (2.3.8)
-    apartment (1.0.2)
-      activerecord (>= 3.1.2, < 5.0)
-      rack (>= 1.3.6)
-    arel (6.0.4)
-    ast (2.3.0)
-    astrolabe (1.3.1)
-      parser (~> 2.2)
-    awesome_print (1.7.0)
-    bcrypt (3.1.11)
-    better_errors (2.1.1)
-      coderay (>= 1.0.0)
-      erubis (>= 2.6.6)
-      rack (>= 0.9.0)
-    binding_of_caller (0.7.2)
-      debug_inspector (>= 0.0.1)
-    breadcrumbs_on_rails (3.0.1)
-    browserify-rails (1.1.0)
-      railties (>= 4.0.0, < 5.0)
-    builder (3.2.3)
-    bundler-audit (0.5.0)
-      bundler (~> 1.2)
-      thor (~> 0.18)
-    byebug (9.0.6)
-    calendar_helper (0.2.5)
-      open4
-    capistrano (2.13.5)
-      highline
-      net-scp (>= 1.0.0)
-      net-sftp (>= 2.0.0)
-      net-ssh (>= 2.0.14)
-      net-ssh-gateway (>= 1.1.0)
-    capistrano-ext (1.2.1)
-      capistrano (>= 1.0.0)
-    capistrano-npm (0.0.2)
-      capistrano (>= 2.5.5)
-    capybara (2.4.4)
-      mime-types (>= 1.16)
-      nokogiri (>= 1.3.3)
-      rack (>= 1.0.0)
-      rack-test (>= 0.5.4)
-      xpath (~> 2.0)
-    carrierwave (1.0.0)
-      activemodel (>= 4.0.0)
-      activesupport (>= 4.0.0)
-      mime-types (>= 1.16)
-    choice (0.2.0)
-    chronic (0.10.2)
-    cliver (0.3.2)
-    cocoon (1.2.9)
-    coderay (1.1.1)
-    coffee-rails (4.0.1)
-      coffee-script (>= 2.2.0)
-      railties (>= 4.0.0, < 5.0)
-    coffee-script (2.4.1)
-      coffee-script-source
-      execjs
-    coffee-script-source (1.12.2)
-    concurrent-ruby (1.0.5)
-    connection_pool (2.2.1)
-    crack (0.4.3)
-      safe_yaml (~> 1.0.0)
-    cucumber (2.4.0)
-      builder (>= 2.1.2)
-      cucumber-core (~> 1.5.0)
-      cucumber-wire (~> 0.0.1)
-      diff-lcs (>= 1.1.3)
-      gherkin (~> 4.0)
-      multi_json (>= 1.7.5, < 2.0)
-      multi_test (>= 0.1.2)
-    cucumber-core (1.5.0)
-      gherkin (~> 4.0)
-    cucumber-rails (1.4.5)
-      capybara (>= 1.1.2, < 3)
-      cucumber (>= 1.3.8, < 4)
-      mime-types (>= 1.16, < 4)
-      nokogiri (~> 1.5)
-      railties (>= 3, < 5.1)
-    cucumber-wire (0.0.1)
-    daemons (1.2.4)
-    database_cleaner (1.5.3)
-    dbf (3.1.0)
-    dbshell-rails (0.0.2)
-    debug_inspector (0.0.2)
-    deep_cloneable (2.0.2)
-      activerecord (>= 3.1.0, < 5.0.0)
-    devise (3.5.10)
-      bcrypt (~> 3.0)
-      orm_adapter (~> 0.1)
-      railties (>= 3.2.6, < 5)
-      responders
-      thread_safe (~> 0.1)
-      warden (~> 1.2.3)
-    devise-async (0.10.2)
-      devise (>= 3.2, < 4.0)
-    devise-encryptable (0.2.0)
-      devise (>= 2.1.0)
-    devise-i18n (1.1.2)
-    devise_cas_authenticatable (1.10.0)
-      devise (>= 1.2.0)
-      rubycas-client (>= 2.2.1)
-    devise_invitable (1.6.1)
-      actionmailer (>= 3.2.6)
-      devise (>= 3.2.0)
-    diff-lcs (1.3)
-    docile (1.1.5)
-    dr-ffi-proj4 (0.0.3)
-      ffi (>= 1.0.0)
-    draper (2.1.0)
-      actionpack (>= 3.0)
-      activemodel (>= 3.0)
-      activesupport (>= 3.0)
-      request_store (~> 1.0)
-    easy_translate (0.5.0)
-      json
-      thread
-      thread_safe
-    email_spec (1.6.0)
-      launchy (~> 2.1)
-      mail (~> 2.2)
-    enumerize (2.1.2)
-      activesupport (>= 3.2)
-    erubis (2.7.0)
-    execjs (2.7.0)
-    fabrication (2.14.1)
-    factory_girl (4.8.0)
-      activesupport (>= 3.0.0)
-    factory_girl_rails (4.8.0)
-      factory_girl (~> 4.8.0)
-      railties (>= 3.0.0)
-    faker (1.7.3)
-      i18n (~> 0.5)
-    fakeweb (1.3.0)
-    faraday (0.9.2)
-      multipart-post (>= 1.2, < 3)
-    faraday_middleware (0.9.2)
-      faraday (>= 0.7.4, < 0.10)
-    ffaker (2.1.0)
-    ffi (1.9.18)
-    ffi-geos (1.2.0)
-      ffi (>= 1.0.0)
-    font-awesome-sass (4.7.0)
-      sass (>= 3.2)
-    formtastic (3.1.5)
-      actionpack (>= 3.2.13)
-    geokit (1.6.7)
-      multi_json (>= 1.3.2)
-    georuby (2.3.0)
-    georuby-ext (0.0.5)
-      activesupport (>= 3.2.6)
-      dbf
-      dr-ffi-proj4 (>= 0.0.3)
-      ffi-geos (>= 0.1.1)
-      geokit (= 1.6.7)
-      georuby (>= 1.9.8)
-      rgeo (>= 0.3.20)
-    gherkin (4.1.1)
-    globalid (0.3.7)
-      activesupport (>= 4.1.0)
-    google-analytics-rails (1.1.0)
-    has_scope (0.7.0)
-      actionpack (>= 4.1, < 5.1)
-      activesupport (>= 4.1, < 5.1)
-    hashdiff (0.3.4)
-    highline (1.7.8)
-    hike (1.2.3)
-    hstore_accessor (1.1.0)
-      activerecord (>= 4.0.0)
-    htmlbeautifier (1.3.1)
-    httparty (0.14.0)
-      multi_xml (>= 0.5.2)
-    i18n (0.8.6)
-    i18n-tasks (0.9.15)
-      activesupport (>= 4.0.2)
-      ast (>= 2.1.0)
-      easy_translate (>= 0.5.0)
-      erubis
-      highline (>= 1.7.3)
-      i18n
-      parser (>= 2.2.3.0)
-      rainbow (~> 2.2)
-      terminal-table (>= 1.5.1)
-    inherited_resources (1.7.1)
-      actionpack (>= 3.2, < 5.1)
-      has_scope (~> 0.6)
-      railties (>= 3.2, < 5.1)
-      responders
-    jbuilder (2.6.3)
-      activesupport (>= 3.0.0, < 5.2)
-      multi_json (~> 1.2)
-    jquery-rails (3.1.4)
-      railties (>= 3.0, < 5.0)
-      thor (>= 0.14, < 2.0)
-    json (1.8.6)
-    launchy (2.4.3)
-      addressable (~> 2.3)
-    letter_opener (1.4.1)
-      launchy (~> 2.2)
-    libv8 (3.16.14.19)
-    license_finder (3.0.0)
-      bundler
-      httparty
-      rubyzip
-      thor
-      with_env (> 1.0)
-      xml-simple
-    loofah (2.0.3)
-      nokogiri (>= 1.5.9)
-    mail (2.6.4)
-      mime-types (>= 1.16, < 4)
-    map_layers (0.0.4)
-    method_source (0.8.2)
-    mime-types (3.1)
-      mime-types-data (~> 3.2015)
-    mime-types-data (3.2016.0521)
-    mimemagic (0.3.2)
-    mini_portile2 (2.3.0)
-    minitest (5.10.3)
-    multi_json (1.12.1)
-    multi_test (0.1.2)
-    multi_xml (0.6.0)
-    multipart-post (2.0.0)
-    net-scp (1.2.1)
-      net-ssh (>= 2.6.5)
-    net-sftp (2.1.2)
-      net-ssh (>= 2.6.5)
-    net-ssh (4.1.0)
-    net-ssh-gateway (2.0.0)
-      net-ssh (>= 4.0.0)
-    newrelic_rpm (4.0.0.332)
-    nokogiri (1.8.1)
-      mini_portile2 (~> 2.3.0)
-    open4 (1.3.4)
-    orm_adapter (0.5.0)
-    parser (2.4.0.0)
-      ast (~> 2.2)
-    pg (0.20.0)
-    phantomjs (2.1.1.0)
-    poltergeist (1.14.0)
-      capybara (~> 2.1)
-      cliver (~> 0.3.1)
-      websocket-driver (>= 0.2.0)
-    polyamorous (1.3.1)
-      activerecord (>= 3.0)
-    polylines (0.3.0)
-    pry (0.10.4)
-      coderay (~> 1.1.0)
-      method_source (~> 0.8.1)
-      slop (~> 3.4)
-    pry-byebug (3.4.2)
-      byebug (~> 9.0)
-      pry (~> 0.10)
-    pry-rails (0.3.6)
-      pry (>= 0.10.4)
-    pundit (1.1.0)
-      activesupport (>= 3.0.0)
-    quiet_assets (1.1.0)
-      railties (>= 3.1, < 5.0)
-    rabl (0.13.1)
-      activesupport (>= 2.3.14)
-    rack (1.6.8)
-    rack-protection (1.5.3)
-      rack
-    rack-test (0.6.3)
-      rack (>= 1.0)
-    rails (4.2.8)
-      actionmailer (= 4.2.8)
-      actionpack (= 4.2.8)
-      actionview (= 4.2.8)
-      activejob (= 4.2.8)
-      activemodel (= 4.2.8)
-      activerecord (= 4.2.8)
-      activesupport (= 4.2.8)
-      bundler (>= 1.3.0, < 2.0)
-      railties (= 4.2.8)
-      sprockets-rails
-    rails-assets-bootstrap-sass-official (3.3.7)
-      rails-assets-jquery (>= 1.9.1, < 4)
-    rails-assets-footable (2.0.3)
-      rails-assets-jquery (>= 1.4.4)
-    rails-assets-jquery (3.2.1)
-    rails-assets-jquery-tokeninput (1.7.0)
-      rails-assets-jquery (>= 1.5)
-    rails-assets-modernizr (2.0.6)
-    rails-assets-respond (1.4.2)
-    rails-assets-tagmanager (3.0.1)
-      rails-assets-jquery (>= 1.0.0)
-    rails-deprecated_sanitizer (1.0.3)
-      activesupport (>= 4.2.0.alpha)
-    rails-dom-testing (1.0.8)
-      activesupport (>= 4.2.0.beta, < 5.0)
-      nokogiri (~> 1.6)
-      rails-deprecated_sanitizer (>= 1.0.1)
-    rails-erd (1.5.0)
-      activerecord (>= 3.2)
-      activesupport (>= 3.2)
-      choice (~> 0.2.0)
-      ruby-graphviz (~> 1.2)
-    rails-html-sanitizer (1.0.3)
-      loofah (~> 2.0)
-    rails-i18n (4.0.9)
-      i18n (~> 0.7)
-      railties (~> 4.0)
-    rails-observers (0.1.2)
-      activemodel (~> 4.0)
-    railties (4.2.8)
-      actionpack (= 4.2.8)
-      activesupport (= 4.2.8)
-      rake (>= 0.8.7)
-      thor (>= 0.18.1, < 2.0)
-    rainbow (2.2.2)
-      rake
-    rake (12.0.0)
-    ransack (1.8.3)
-      actionpack (>= 3.0)
-      activerecord (>= 3.0)
-      activesupport (>= 3.0)
-      i18n
-      polyamorous (~> 1.3)
-    rb-fsevent (0.9.8)
-    rb-inotify (0.9.8)
-      ffi (>= 0.5.0)
-    rdoc (4.3.0)
-    redis (3.3.3)
-    ref (2.0.0)
-    request_store (1.3.2)
-    responders (2.3.0)
-      railties (>= 4.2.0, < 5.1)
-    rgeo (0.5.3)
-    rgeo-activerecord (4.0.5)
-      activerecord (~> 4.2)
-      rgeo (~> 0.3)
-    roo (2.7.1)
-      nokogiri (~> 1)
-      rubyzip (~> 1.1, < 2.0.0)
-    rspec-core (3.5.4)
-      rspec-support (~> 3.5.0)
-    rspec-expectations (3.5.0)
-      diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.5.0)
-    rspec-mocks (3.5.0)
-      diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.5.0)
-    rspec-rails (3.5.2)
-      actionpack (>= 3.0)
-      activesupport (>= 3.0)
-      railties (>= 3.0)
-      rspec-core (~> 3.5.0)
-      rspec-expectations (~> 3.5.0)
-      rspec-mocks (~> 3.5.0)
-      rspec-support (~> 3.5.0)
-    rspec-support (3.5.0)
-    ruby-graphviz (1.2.3)
-    rubycas-client (2.3.9)
-      activesupport
-    rubyzip (1.2.1)
-    safe_yaml (1.0.4)
-    sass (3.2.19)
-    sass-rails (4.0.5)
-      railties (>= 4.0.0, < 5.0)
-      sass (~> 3.2.2)
-      sprockets (~> 2.8, < 3.0)
-      sprockets-rails (~> 2.0)
-    sawyer (0.6.0)
-      addressable (~> 2.3.5)
-      faraday (~> 0.8, < 0.10)
-    sdoc (0.4.2)
-      json (~> 1.7, >= 1.7.7)
-      rdoc (~> 4.0)
-    select2-rails (4.0.3)
-      thor (~> 0.14)
-    sequel (4.47.0)
-    shoulda-matchers (3.1.1)
-      activesupport (>= 4.0.0)
-    sidekiq (4.2.10)
-      concurrent-ruby (~> 1.0)
-      connection_pool (~> 2.2, >= 2.2.0)
-      rack-protection (>= 1.5.0)
-      redis (~> 3.2, >= 3.2.1)
-    simple_form (3.1.1)
-      actionpack (~> 4.0)
-      activemodel (~> 4.0)
-    simplecov (0.14.1)
-      docile (~> 1.1.0)
-      json (>= 1.8, < 3)
-      simplecov-html (~> 0.10.0)
-    simplecov-html (0.10.0)
-    simplecov-rcov (0.2.3)
-      simplecov (>= 0.4.1)
-    sinatra (1.4.8)
-      rack (~> 1.5)
-      rack-protection (~> 1.4)
-      tilt (>= 1.3, < 3)
-    slim (3.0.7)
-      temple (~> 0.7.6)
-      tilt (>= 1.3.3, < 2.1)
-    slim-rails (3.1.2)
-      actionpack (>= 3.1)
-      railties (>= 3.1)
-      slim (~> 3.0)
-    slop (3.6.0)
-    spring (2.0.1)
-      activesupport (>= 4.2)
-    spring-commands-rspec (1.0.4)
-      spring (>= 0.9.1)
-    sprockets (2.12.4)
-      hike (~> 1.2)
-      multi_json (~> 1.0)
-      rack (~> 1.0)
-      tilt (~> 1.1, != 1.3.0)
-    sprockets-rails (2.3.3)
-      actionpack (>= 3.0)
-      activesupport (>= 3.0)
-      sprockets (>= 2.8, < 4.0)
-    sqlite3 (1.3.13)
-    teaspoon (1.1.5)
-      railties (>= 3.2.5, < 6)
-    teaspoon-jasmine (2.3.4)
-      teaspoon (>= 1.0.0)
-    temple (0.7.7)
-    terminal-table (1.8.0)
-      unicode-display_width (~> 1.1, >= 1.1.1)
-    therubyracer (0.12.3)
-      libv8 (~> 3.16.14.15)
-      ref
-    thor (0.19.4)
-    thread (0.2.2)
-    thread_safe (0.3.6)
-    tilt (1.4.1)
-    timecop (0.9.1)
-    transpec (3.3.0)
-      activesupport (>= 3.0, < 6.0)
-      astrolabe (~> 1.2)
-      bundler (~> 1.3)
-      json (>= 1.8, < 3.0)
-      parser (>= 2.3.0.7)
-      rainbow (>= 1.99.1, < 3.0)
-    tzinfo (1.2.3)
-      thread_safe (~> 0.1)
-    uglifier (2.7.2)
-      execjs (>= 0.3.0)
-      json (>= 1.8.0)
-    unicode-display_width (1.3.0)
-    warden (1.2.7)
-      rack (>= 1.0)
-    webmock (3.0.1)
-      addressable (>= 2.3.6)
-      crack (>= 0.3.2)
-      hashdiff
-    websocket-driver (0.6.5)
-      websocket-extensions (>= 0.1.0)
-    websocket-extensions (0.1.2)
-    will_paginate (3.1.5)
-    will_paginate-bootstrap (1.0.1)
-      will_paginate (>= 3.0.3)
-    with_env (1.1.0)
-    xml-simple (1.1.5)
-    xpath (2.0.0)
-      nokogiri (~> 1.3)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  RedCloth (~> 4.3.0)
-  SyslogLogger
-  aasm
-  active_attr
-  activerecord-postgis-adapter (~> 3.0.0)
-  acts-as-taggable-on (~> 4.0.0)
-  acts_as_list (~> 0.6.0)
-  acts_as_tree (~> 2.1.0)
-  apartment (~> 1.0.0)
-  awesome_print
-  better_errors
-  binding_of_caller
-  breadcrumbs_on_rails
-  browserify-rails
-  bundler-audit
-  calendar_helper (= 0.2.5)
-  capistrano (= 2.13.5)
-  capistrano-ext
-  capistrano-npm
-  capybara (~> 2.4.0)
-  carrierwave (~> 1.0)
-  cocoon
-  codifligne!
-  coffee-rails (~> 4.0.0)
-  cucumber-rails
-  daemons
-  database_cleaner
-  dbshell-rails
-  deep_cloneable (~> 2.0.0)
-  devise (~> 3.5.4)
-  devise-async
-  devise-encryptable
-  devise-i18n
-  devise_cas_authenticatable
-  devise_invitable
-  draper
-  email_spec
-  enumerize (~> 2.1.2)
-  fabrication (~> 2.14.1)
-  factory_girl_rails (~> 4.0)
-  faker
-  fakeweb
-  faraday (~> 0.9.1)
-  faraday_middleware (~> 0.9.1)
-  ffaker (~> 2.1.0)
-  font-awesome-sass (~> 4.7)
-  formtastic (= 3.1.5)
-  georuby (= 2.3.0)
-  georuby-ext (= 0.0.5)
-  google-analytics-rails
-  has_array_of!
-  hstore_accessor (~> 1.1)
-  htmlbeautifier
-  i18n-tasks
-  inherited_resources
-  jbuilder (~> 2.0)
-  jquery-rails (~> 3.1.4)
-  json
-  language_engine!
-  launchy
-  letter_opener
-  license_finder
-  map_layers (= 0.0.4)
-  mimemagic
-  newrelic_rpm
-  pg
-  phantomjs
-  poltergeist
-  polylines
-  pry-byebug
-  pry-rails
-  pundit
-  quiet_assets
-  rabl
-  rails (~> 4.2.8)
-  rails-assets-bootstrap-sass-official (~> 3.3.0)!
-  rails-assets-footable (~> 2.0.3)!
-  rails-assets-jquery-tokeninput (~> 1.7.0)!
-  rails-assets-modernizr (~> 2.0.6)!
-  rails-assets-respond!
-  rails-assets-tagmanager (~> 3.0.1.0)!
-  rails-erd
-  rails-i18n (~> 4.0.0)
-  rails-observers
-  rake
-  ransack
-  rb-fsevent
-  rb-inotify
-  reflex!
-  responders
-  rgeo (~> 0.5.2)
-  roo
-  rspec-rails (~> 3.5.0)
-  rubyzip
-  sass-rails (~> 4.0.3)
-  sawyer (~> 0.6.0)
-  sdoc (~> 0.4.0)
-  select2-rails (~> 4.0, >= 4.0.3)
-  sequel
-  shoulda-matchers (~> 3.1)
-  sidekiq
-  simple_form (~> 3.1.0)
-  simplecov
-  simplecov-rcov
-  sinatra
-  slim-rails (~> 3.1)
-  spring
-  spring-commands-rspec
-  sqlite3
-  teaspoon-jasmine
-  therubyracer (~> 0.12)
-  timecop
-  transpec
-  uglifier (~> 2.7.2)
-  webmock
-  whenever!
-  will_paginate
-  will_paginate-bootstrap
-
-BUNDLED WITH
-   1.15.4
diff --git a/Procfile b/Procfile
new file mode 100644
index 000000000..49e7bf922
--- /dev/null
+++ b/Procfile
@@ -0,0 +1,2 @@
+web: bundle exec rails s
+webpack: bin/webpack --progress --colors --watch
\ No newline at end of file
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 0024b62b5..4c5aff22f 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -20,5 +20,5 @@
 //= require footable/footable.sort
 //= require_directory ./plugins
 //= require_directory .
-require('whatwg-fetch')
-require('babel-polyfill')
+// require('whatwg-fetch')
+// require('babel-polyfill')
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/App.js b/app/assets/javascripts/es6_browserified/itineraries/components/App.js
deleted file mode 100644
index f4cc5e4a6..000000000
--- a/app/assets/javascripts/es6_browserified/itineraries/components/App.js
+++ /dev/null
@@ -1,28 +0,0 @@
-var React = require('react')
-var { Component, PropTypes } = require('react')
-var AddStopPoint = require('../containers/AddStopPoint')
-var VisibleStopPoints = require('../containers/VisibleStopPoints')
-const clone = require('../../helpers/clone')
-const I18n = clone(window , "I18n", true)
-
-class App extends Component {
-
-  getChildContext() {
-    return { I18n }
-  }
-
-  render() {
-    return (
-      <div>
-        <VisibleStopPoints />
-        <AddStopPoint />
-      </div>
-    )  
-  } 
-}
-
-App.childContextTypes = {
-  I18n: PropTypes.object
-}
-
-module.exports = App
diff --git a/app/assets/javascripts/es6_browserified/itineraries/reducers/index.js b/app/assets/javascripts/es6_browserified/itineraries/reducers/index.js
deleted file mode 100644
index 446c9ed36..000000000
--- a/app/assets/javascripts/es6_browserified/itineraries/reducers/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-var combineReducers = require('redux').combineReducers
-var stopPoints = require('./stopPoints')
-
-const stopPointsApp = combineReducers({
-  stopPoints
-})
-
-module.exports = stopPointsApp
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/App.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/App.js
deleted file mode 100644
index 7513fc506..000000000
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/App.js
+++ /dev/null
@@ -1,21 +0,0 @@
-var React = require('react')
-var AddJourneyPattern = require('../containers/AddJourneyPattern')
-var Navigate = require('../containers/Navigate')
-var Modal = require('../containers/Modal')
-var ConfirmModal = require('../containers/ConfirmModal')
-var SaveJourneyPattern = require('../containers/SaveJourneyPattern')
-var JourneyPatternList = require('../containers/JourneyPatternList')
-
-const App = () => (
-  <div>
-    <Navigate />
-    <JourneyPatternList />
-    <Navigate />
-    <AddJourneyPattern />
-    <SaveJourneyPattern />
-    <ConfirmModal />
-    <Modal/>
-  </div>
-)
-
-module.exports = App
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js b/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js
deleted file mode 100644
index c2229d991..000000000
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/ConfirmModal.js
+++ /dev/null
@@ -1,48 +0,0 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-
-const ConfirmModal = ({dispatch, modal, onModalAccept, onModalCancel, journeyPatterns}) => (
-  <div className={ 'modal fade ' + ((modal.type == 'confirm') ? 'in' : '') } id='ConfirmModal'>
-    <div className='modal-container'>
-      <div className='modal-dialog'>
-        <div className='modal-content'>
-          <div className='modal-header'>
-            <h4 className='modal-title'>Confirmation</h4>
-          </div>
-          <div className='modal-body'>
-            <div className='mt-md mb-md'>
-              <p>Vous vous apprêtez à changer de page. Voulez-vous valider vos modifications avant cela ?</p>
-            </div>
-          </div>
-          <div className='modal-footer'>
-            <button
-              className='btn btn-link'
-              data-dismiss='modal'
-              type='button'
-              onClick= {() => {onModalCancel(modal.confirmModal.callback)}}
-              >
-              Ne pas valider
-            </button>
-            <button
-              className='btn btn-primary'
-              data-dismiss='modal'
-              type='button'
-              onClick = {() => {onModalAccept(modal.confirmModal.callback, journeyPatterns)}}
-              >
-              Valider
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-)
-
-ConfirmModal.propTypes = {
-  modal: PropTypes.object.isRequired,
-  onModalAccept: PropTypes.func.isRequired,
-  onModalCancel: PropTypes.func.isRequired
-}
-
-module.exports = ConfirmModal
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/index.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/index.js
deleted file mode 100644
index a9c28b83e..000000000
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-var combineReducers = require('redux').combineReducers
-var editMode = require('./editMode')
-var status = require('./status')
-var journeyPatterns = require('./journeyPatterns')
-var pagination = require('./pagination')
-var modal = require('./modal')
-var stopPointsList = require('./stopPointsList')
-
-const journeyPatternsApp = combineReducers({
-  editMode,
-  status,
-  journeyPatterns,
-  pagination,
-  stopPointsList,
-  modal
-})
-
-module.exports = journeyPatternsApp
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/stopPointsList.js b/app/assets/javascripts/es6_browserified/journey_patterns/reducers/stopPointsList.js
deleted file mode 100644
index 9abacc8c8..000000000
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/stopPointsList.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const stopPointsList = (state = [], action) => {
-  switch (action.type) {
-    default:
-      return state
-  }
-}
-
-module.exports = stopPointsList
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/ConfirmModal.js b/app/assets/javascripts/es6_browserified/time_tables/components/ConfirmModal.js
deleted file mode 100644
index 674a03296..000000000
--- a/app/assets/javascripts/es6_browserified/time_tables/components/ConfirmModal.js
+++ /dev/null
@@ -1,51 +0,0 @@
-var React = require('react')
-var { PropTypes } = require('react')
-
-const ConfirmModal = ({dispatch, modal, onModalAccept, onModalCancel, timetable, metas}, {I18n}) => (
-  <div className={ 'modal fade ' + ((modal.type == 'confirm') ? 'in' : '') } id='ConfirmModal'>
-    <div className='modal-container'>
-      <div className='modal-dialog'>
-        <div className='modal-content'>
-          <div className='modal-header'>
-            <h4 className='modal-title'>{I18n.time_tables.edit.confirm_modal.title}</h4>
-          </div>
-          <div className='modal-body'>
-            <div className='mt-md mb-md'>
-              <p>{I18n.time_tables.edit.confirm_modal.message}</p>
-            </div>
-          </div>
-          <div className='modal-footer'>
-            <button
-              className='btn btn-link'
-              data-dismiss='modal'
-              type='button'
-              onClick= {() => {onModalCancel(modal.confirmModal.callback)}}
-              >
-              {I18n.cancel}
-            </button>
-            <button
-              className='btn btn-primary'
-              data-dismiss='modal'
-              type='button'
-              onClick = {() => {onModalAccept(modal.confirmModal.callback, timetable, metas)}}
-              >
-              {I18n.actions.submit}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-)
-
-ConfirmModal.propTypes = {
-  modal: PropTypes.object.isRequired,
-  onModalAccept: PropTypes.func.isRequired,
-  onModalCancel: PropTypes.func.isRequired
-}
-
-ConfirmModal.contextTypes = {
-  I18n: PropTypes.object
-}
-
-module.exports = ConfirmModal
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/ErrorModal.js b/app/assets/javascripts/es6_browserified/time_tables/components/ErrorModal.js
deleted file mode 100644
index 2597a4870..000000000
--- a/app/assets/javascripts/es6_browserified/time_tables/components/ErrorModal.js
+++ /dev/null
@@ -1,43 +0,0 @@
-var React = require('react')
-var { PropTypes } = require('react')
-var { errorModalMessage } = require('../actions')
-
-const ErrorModal = ({dispatch, modal, onModalClose}, {I18n}) => (
-  <div className={ 'modal fade ' + ((modal.type == 'error') ? 'in' : '') } id='ErrorModal'>
-    <div className='modal-container'>
-      <div className='modal-dialog'>
-        <div className='modal-content'>
-          <div className='modal-header'>
-            <h4 className='modal-title'>{I18n.time_tables.edit.error_modal.title}</h4>
-          </div>
-          <div className='modal-body'>
-            <div className='mt-md mb-md'>
-              <p>{errorModalMessage(modal.modalProps.error)}</p>
-            </div>
-          </div>
-          <div className='modal-footer'>
-            <button
-              className='btn btn-link'
-              data-dismiss='modal'
-              type='button'
-              onClick= {() => {onModalClose()}}
-              >
-              {I18n.back}
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-)
-
-ErrorModal.propTypes = {
-  modal: PropTypes.object.isRequired,
-  onModalClose: PropTypes.func.isRequired
-}
-
-ErrorModal.contextTypes = {
-  I18n: PropTypes.object
-}
-
-module.exports = ErrorModal
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodForm.js b/app/assets/javascripts/es6_browserified/time_tables/components/PeriodForm.js
deleted file mode 100644
index d494109cc..000000000
--- a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodForm.js
+++ /dev/null
@@ -1,149 +0,0 @@
-var React = require('react')
-var { PropTypes } = require('react')
-var _ = require('lodash')
-let monthsArray = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
-
-const formatNumber = (val) => {
-  return ("0" + val).slice(-2)
-}
-
-const makeDaysOptions = (daySelected) => {
-  let arr = []
-  for(let i = 1; i < 32; i++) {
-    arr.push(<option value={formatNumber(i)} key={i}>{formatNumber(i)}</option>)
-  }
-  return arr
-}
-
-const makeMonthsOptions = (monthSelected) => {
-  let arr = []
-  for(let i = 1; i < 13; i++) {
-    arr.push(<option value={formatNumber(i)} key={i}>{monthsArray[i - 1]}</option>)
-  }
-  return arr
-}
-
-const makeYearsOptions = (yearSelected) => {
-  let arr = []
-  let startYear = new Date().getFullYear() - 3
-  for(let i = startYear; i <= startYear + 6; i++) {
-    arr.push(<option key={i}>{i}</option>)
-  }
-  return arr
-}
-
-const PeriodForm = ({modal, timetable, metas, onOpenAddPeriodForm, onClosePeriodForm, onUpdatePeriodForm, onValidatePeriodForm}, {I18n}) => (
-  <div className="container-fluid">
-    <div className="row">
-      <div className="col lg-6 col-lg-offset-3">
-        <div className='subform'>
-          {modal.modalProps.active &&
-            <div>
-              <div className="nested-head">
-                <div className="wrapper">
-                  <div>
-                    <div className="form-group">
-                      <label htmlFor="" className="control-label required">
-                        {I18n.time_tables.edit.period_form.begin}
-                        <abbr title="requis">*</abbr>
-                      </label>
-                    </div>
-                  </div>
-                  <div>
-                    <div className="form-group">
-                      <label htmlFor="" className="control-label required">
-                      {I18n.time_tables.edit.period_form.end}
-                        <abbr title="requis">*</abbr>
-                      </label>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="nested-fields">
-                <div className="wrapper">
-                  <div>
-                    <div className={'form-group date ' + (modal.modalProps.error ? ' has-error' : '')}>
-                      <div className="form-inline">
-                        <select value={formatNumber(modal.modalProps.begin.day)} onChange={(e) => onUpdatePeriodForm(e, 'begin', 'day', modal.modalProps)} id="q_validity_period_begin_gteq_3i" className="date required form-control">
-                          {makeDaysOptions(modal.modalProps.begin.day)}
-                        </select>
-                        <select value={formatNumber(modal.modalProps.begin.month)} onChange={(e) => onUpdatePeriodForm(e, 'begin', 'month', modal.modalProps)} id="q_validity_period_begin_gteq_2i" className="date required form-control">
-                          {makeMonthsOptions(modal.modalProps.begin.month)}
-                        </select>
-                        <select value={modal.modalProps.begin.year} onChange={(e) => onUpdatePeriodForm(e, 'begin', 'year', modal.modalProps)} id="q_validity_period_begin_gteq_1i" className="date required form-control">
-                          {makeYearsOptions(modal.modalProps.begin.year)}
-                        </select>
-                      </div>
-                    </div>
-                  </div>
-                  <div>
-                    <div className={'form-group date ' + (modal.modalProps.error ? ' has-error' : '')}>
-                      <div className="form-inline">
-                        <select value={formatNumber(modal.modalProps.end.day)} onChange={(e) => onUpdatePeriodForm(e, 'end', 'day', modal.modalProps)} id="q_validity_period_end_gteq_3i" className="date required form-control">
-                          {makeDaysOptions(modal.modalProps.end.day)}
-                        </select>
-                        <select value={formatNumber(modal.modalProps.end.month)} onChange={(e) => onUpdatePeriodForm(e, 'end', 'month', modal.modalProps)} id="q_validity_period_end_gteq_2i" className="date required form-control">
-                          {makeMonthsOptions(modal.modalProps.end.month)}
-                        </select>
-                        <select value={modal.modalProps.end.year} onChange={(e) => onUpdatePeriodForm(e, 'end', 'year', modal.modalProps)} id="q_validity_period_end_gteq_1i" className="date required form-control">
-                          {makeYearsOptions(modal.modalProps.end.year)}
-                        </select>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className='links nested-linker'>
-                <span className='help-block small text-danger pull-left mt-xs ml-sm'>
-                  {modal.modalProps.error}
-                </span>
-                <button
-                  type='button'
-                  className='btn btn-link'
-                  onClick={onClosePeriodForm}
-                >
-                  {I18n.cancel}
-                </button>
-                <button
-                  type='button'
-                  className='btn btn-outline-primary mr-sm'
-                  onClick={() => onValidatePeriodForm(modal.modalProps, timetable.time_table_periods, metas, _.filter(timetable.time_table_dates, ['in_out', true]))}
-                >
-                  {I18n.actions.submit}
-                </button>
-              </div>
-            </div>
-          }
-          {!modal.modalProps.active &&
-            <div className="text-right">
-              <button
-                type='button'
-                className='btn btn-outline-primary'
-                onClick={onOpenAddPeriodForm}
-                >
-                {I18n.time_tables.actions.add_period}
-              </button>
-            </div>
-          }
-        </div>
-      </div>
-    </div>
-  </div>
-)
-
-PeriodForm.propTypes = {
-  modal: PropTypes.object.isRequired,
-  metas: PropTypes.object.isRequired,
-  onOpenAddPeriodForm: PropTypes.func.isRequired,
-  onClosePeriodForm: PropTypes.func.isRequired,
-  onUpdatePeriodForm: PropTypes.func.isRequired,
-  onValidatePeriodForm: PropTypes.func.isRequired,
-  timetable: PropTypes.object.isRequired
-}
-
-PeriodForm.contextTypes = {
-  I18n: PropTypes.object
-}
-
-module.exports = PeriodForm
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/index.js b/app/assets/javascripts/es6_browserified/time_tables/reducers/index.js
deleted file mode 100644
index 5b05aadda..000000000
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-var combineReducers = require('redux').combineReducers
-var status = require('./status')
-var pagination = require('./pagination')
-var modal = require('./modal')
-var timetable = require('./timetable')
-var metas = require('./metas')
-
-const timeTablesApp = combineReducers({
-  timetable,
-  metas,
-  status,
-  pagination,
-  modal
-})
-
-module.exports = timeTablesApp
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/status.js b/app/assets/javascripts/es6_browserified/time_tables/reducers/status.js
deleted file mode 100644
index fc205d0ae..000000000
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/status.js
+++ /dev/null
@@ -1,17 +0,0 @@
-var _ = require('lodash')
-
-const status = (state = {}, action) => {
-  switch (action.type) {
-    case 'UNAVAILABLE_SERVER':
-      return _.assign({}, state, {fetchSuccess: false})
-    case 'FETCH_API':
-      return _.assign({}, state, {isFetching: true})
-    case 'RECEIVE_TIME_TABLES':
-    case 'RECEIVE_MONTH':
-      return _.assign({}, state, {fetchSuccess: true, isFetching: false})
-    default:
-      return state
-  }
-}
-
-module.exports = status
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/batch.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/batch.js
deleted file mode 100644
index 284d7b268..000000000
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/batch.js
+++ /dev/null
@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-	value: true
-});
-exports.batchActions = batchActions;
-exports.enableBatching = enableBatching;
-var BATCH = exports.BATCH = 'BATCH';
-
-function batchActions(actions) {
-	return {
-    type: BATCH,
-    payload: actions
-  };
-}
-
-function enableBatching(reduce) {
-	return function batchingReducer(state, action) {
-		switch (action.type) {
-			case BATCH:
-				return action.payload.reduce(batchingReducer, state);
-			default:
-				return reduce(state, action);
-		}
-	};
-}
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
deleted file mode 100644
index d5f419747..000000000
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/App.js
+++ /dev/null
@@ -1,38 +0,0 @@
-var React = require('react')
-var VehicleJourneysList = require('../containers/VehicleJourneysList')
-var Navigate = require('../containers/Navigate')
-var ToggleArrivals = require('../containers/ToggleArrivals')
-var Filters = require('../containers/Filters')
-var SaveVehicleJourneys = require('../containers/SaveVehicleJourneys')
-var ConfirmModal = require('../containers/ConfirmModal')
-var Tools = require('../containers/Tools')
-
-const App = () => (
-  <div>
-
-    <div className='row'>
-      <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
-        <ToggleArrivals />
-      </div>
-      <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right'>
-        <Navigate />
-      </div>
-    </div>
-
-    <Filters />
-    <VehicleJourneysList />
-
-    <div className='row'>
-      <div className='col-lg-12 text-right'>
-        <Navigate />
-      </div>
-    </div>
-
-    <SaveVehicleJourneys />
-    <Tools />
-
-    <ConfirmModal />
-  </div>
-)
-
-module.exports = App
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/ConfirmModal.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/ConfirmModal.js
deleted file mode 100644
index 54f0287c6..000000000
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/ConfirmModal.js
+++ /dev/null
@@ -1,42 +0,0 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-
-const ConfirmModal = ({dispatch, modal, onModalAccept, onModalCancel, vehicleJourneys}) => (
-  <div className={ 'modal fade ' + ((modal.type == 'confirm') ? 'in' : '') } id='ConfirmModal'>
-    <div className='modal-dialog'>
-      <div className='modal-content'>
-        <div className='modal-body'>
-          <p> Voulez-vous valider vos modifications avant de changer de page? </p>
-        </div>
-        <div className='modal-footer'>
-          <button
-            className='btn btn-default'
-            data-dismiss='modal'
-            type='button'
-            onClick= {() => {onModalCancel(modal.confirmModal.callback)}}
-            >
-            Ne pas valider
-          </button>
-          <button
-            className='btn btn-danger'
-            data-dismiss='modal'
-            type='button'
-            onClick = {() => {onModalAccept(modal.confirmModal.callback, vehicleJourneys)}}
-            >
-            Valider
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-)
-
-ConfirmModal.propTypes = {
-  vehicleJourneys: PropTypes.array.isRequired,
-  modal: PropTypes.object.isRequired,
-  onModalAccept: PropTypes.func.isRequired,
-  onModalCancel: PropTypes.func.isRequired
-}
-
-module.exports = ConfirmModal
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/index.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/index.js
deleted file mode 100644
index 4e0839102..000000000
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-var combineReducers = require('redux').combineReducers
-var vehicleJourneys = require('./vehicleJourneys')
-var pagination = require('./pagination')
-var modal = require('./modal')
-var status = require('./status')
-var filters = require('./filters')
-var editMode = require('./editMode')
-var stopPointsList = require('./stopPointsList')
-
-const vehicleJourneysApp = combineReducers({
-  vehicleJourneys,
-  pagination,
-  modal,
-  status,
-  filters,
-  editMode,
-  stopPointsList
-})
-
-module.exports = vehicleJourneysApp
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/stopPointsList.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/stopPointsList.js
deleted file mode 100644
index 9abacc8c8..000000000
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/stopPointsList.js
+++ /dev/null
@@ -1,8 +0,0 @@
-const stopPointsList = (state = [], action) => {
-  switch (action.type) {
-    default:
-      return state
-  }
-}
-
-module.exports = stopPointsList
diff --git a/app/assets/javascripts/filters/calendar.js b/app/assets/javascripts/filters/calendar.js
deleted file mode 100644
index a4e84777c..000000000
--- a/app/assets/javascripts/filters/calendar.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const DateFilter = require('../helpers/date_filters')
-
-$(document).ready(function(){
-  const calendarDF = new DateFilter("#calendar_filter_btn", "Tous les champs du filtre de date doivent être remplis", "#q_contains_date_NUMi")
-  calendarDF()
-})
diff --git a/app/assets/javascripts/filters/compliance_control_set.js b/app/assets/javascripts/filters/compliance_control_set.js
deleted file mode 100644
index b0b00dea5..000000000
--- a/app/assets/javascripts/filters/compliance_control_set.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const DateFilter = require('../helpers/date_filters')
-
-$(document).ready(function () {
-  const complianceControlSetDF = new DateFilter("#compliance_control_set_filter_btn", "Tous les champs du filtre de date doivent être remplis", "#q_updated_at_start_date_NUMi", "#q_updated_at_end_date_NUMi")
-  complianceControlSetDF()
-})
diff --git a/app/assets/javascripts/filters/import.js b/app/assets/javascripts/filters/import.js
deleted file mode 100644
index d437dc7ed..000000000
--- a/app/assets/javascripts/filters/import.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const DateFilter = require('../helpers/date_filters')
-
-$(document).ready(function(){
-  const importDF = new DateFilter("#import_filter_btn", "Tous les champs du filtre de date doivent être remplis", "#q_started_at_start_date_NUMi", "#q_started_at_end_date_NUMi")
-  importDF()
-})
diff --git a/app/assets/javascripts/filters/time_table.js b/app/assets/javascripts/filters/time_table.js
deleted file mode 100644
index a336d2664..000000000
--- a/app/assets/javascripts/filters/time_table.js
+++ /dev/null
@@ -1,7 +0,0 @@
-$(document).ready(function(){
-  const DateFilter = require('../helpers/date_filters')
-
-  const timetableDF = new DateFilter("#time_table_filter_btn", window.I18n.fr.time_tables.error_period_filter, "#q_bounding_dates_start_date_NUMi", "#q_bounding_dates_end_date_NUMi")
-
-  timetableDF()
-})
diff --git a/app/assets/javascripts/filters/workbench.js b/app/assets/javascripts/filters/workbench.js
deleted file mode 100644
index dc5ac8487..000000000
--- a/app/assets/javascripts/filters/workbench.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const DateFilter = require('../helpers/date_filters')
-
-$(document).ready(function(){
-  const workbenchDF = new DateFilter("#referential_filter_btn", window.I18n.fr.referentials.error_period_filter, "#q_validity_period_start_date_NUMi", "#q_validity_period_end_date_NUMi")
-  workbenchDF()
-})
diff --git a/app/assets/javascripts/helpers/date_filters.js b/app/assets/javascripts/helpers/date_filters.js
deleted file mode 100644
index 1f48bb28f..000000000
--- a/app/assets/javascripts/helpers/date_filters.js
+++ /dev/null
@@ -1,38 +0,0 @@
-const DateFilter = function(buttonId, message, ...inputIds) {
-  this.buttonId = buttonId
-  this.inputIds = inputIds
-  this.message = message
-
-  const getVal = (str, key) => {
-    let newStr = str.replace(/NUM/, key)
-    return $(newStr).val()
-  }
-
-  const getDates = () => {
-    return this.inputIds.reduce((arr, id) => {
-      let newIds = [1, 2, 3].map(key => getVal(id, key))
-      arr.push(...newIds)
-      return arr
-    },[])
-  }
-
-  const allInputFilled = () => {
-    return getDates().every(date => !!date)
-  }
-
-  const noInputFilled = () => {
-    return getDates().every(date => !date)
-  }
-
-  const execute = () => {
-    $(this.buttonId).on("click", (e) => {
-      if (allInputFilled() == false && noInputFilled() == false) {
-        e.preventDefault()
-        alert(this.message)
-      }
-    })
-  }
-  return execute
-}
-
-module.exports = DateFilter
diff --git a/app/javascript/date_filters/calendar.js b/app/javascript/date_filters/calendar.js
new file mode 100644
index 000000000..7e5f678e2
--- /dev/null
+++ b/app/javascript/date_filters/calendar.js
@@ -0,0 +1,5 @@
+import DateFilter from '../helpers/date_filters'
+
+const calendarDF = new DateFilter("calendar_filter_btn", "Tous les champs du filtre de date doivent être remplis", "q_contains_date_NUMi")
+
+export default calendarDF
\ No newline at end of file
diff --git a/app/javascript/date_filters/compliance_check_set.js b/app/javascript/date_filters/compliance_check_set.js
new file mode 100644
index 000000000..09544a3cd
--- /dev/null
+++ b/app/javascript/date_filters/compliance_check_set.js
@@ -0,0 +1,5 @@
+import DateFilter from '../helpers/date_filters'
+
+const complianceCheckSetDF = new DateFilter("compliance_check_set_filter_btn", "Tous les champs du filtre de date doivent être remplis", "q_created_at_start_date_NUMi", "q_created_at_end_date_NUMi")
+
+export default complianceCheckSetDF
\ No newline at end of file
diff --git a/app/javascript/date_filters/compliance_control_set.js b/app/javascript/date_filters/compliance_control_set.js
new file mode 100644
index 000000000..60d8e3bfa
--- /dev/null
+++ b/app/javascript/date_filters/compliance_control_set.js
@@ -0,0 +1,5 @@
+import DateFilter from '../helpers/date_filters'
+
+const complianceControlSetDF = new DateFilter("compliance_control_set_filter_btn", "Tous les champs du filtre de date doivent être remplis", "q_updated_at_start_date_NUMi", "q_updated_at_end_date_NUMi")
+
+export default complianceControlSetDF
\ No newline at end of file
diff --git a/app/javascript/date_filters/import.js b/app/javascript/date_filters/import.js
new file mode 100644
index 000000000..356371d30
--- /dev/null
+++ b/app/javascript/date_filters/import.js
@@ -0,0 +1,5 @@
+import DateFilter from '../helpers/date_filters'
+
+const importDF = new DateFilter("import_filter_btn", "Tous les champs du filtre de date doivent être remplis", "q_started_at_start_date_NUMi", "q_started_at_end_date_NUMi")
+
+export default importDF
\ No newline at end of file
diff --git a/app/javascript/date_filters/index.js b/app/javascript/date_filters/index.js
new file mode 100644
index 000000000..ee892a7fe
--- /dev/null
+++ b/app/javascript/date_filters/index.js
@@ -0,0 +1,17 @@
+import calendarDF from './calendar'
+import complianceControlSetDF from './compliance_control_set'
+import complianceCheckSetDF from './compliance_check_set'
+import timetableDF from './time_table'
+import importDF from './import'
+import workbenchDF from './workbench'
+
+const DateFilters = {
+  calendarDF,
+  complianceCheckSetDF,
+  complianceControlSetDF,
+  importDF,
+  timetableDF,
+  workbenchDF
+}
+
+export default DateFilters
\ No newline at end of file
diff --git a/app/javascript/date_filters/time_table.js b/app/javascript/date_filters/time_table.js
new file mode 100644
index 000000000..d26693993
--- /dev/null
+++ b/app/javascript/date_filters/time_table.js
@@ -0,0 +1,5 @@
+import DateFilter from '../helpers/date_filters'
+
+const timetableDF = new DateFilter("time_table_filter_btn", "Tous les champs du filtre de date doivent être remplis", "q_bounding_dates_start_date_NUMi", "q_bounding_dates_end_date_NUMi")
+
+export default timetableDF
\ No newline at end of file
diff --git a/app/javascript/date_filters/workbench.js b/app/javascript/date_filters/workbench.js
new file mode 100644
index 000000000..cc4112d73
--- /dev/null
+++ b/app/javascript/date_filters/workbench.js
@@ -0,0 +1,5 @@
+import DateFilter from '../helpers/date_filters'
+
+const workbenchDF = new DateFilter("referential_filter_btn", "Tous les champs du filtre de date doivent être remplis", "q_validity_period_start_date_NUMi", "q_validity_period_end_date_NUMi")
+
+export default workbenchDF
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/helpers/clone.js b/app/javascript/helpers/clone.js
index c3b627858..00127e2b1 100644
--- a/app/assets/javascripts/es6_browserified/helpers/clone.js
+++ b/app/javascript/helpers/clone.js
@@ -1,14 +1,12 @@
-const _ = require("lodash")
+import _ from 'lodash'
 
 /* This function helps having a bit more security when we pass data from the backend to the React parts
   It clones the obj (window variable) and then conditionnaly delete the window variable
 */
 
-const clone = (window, key, deletable = false) => {
+export default function clone(window, key, deletable = false) {
   let obj = _.cloneDeep(window[key])
   
   if (deletable) delete window[key]
   return obj
-}
-
-module.exports = clone
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/app/javascript/helpers/date_filters.js b/app/javascript/helpers/date_filters.js
new file mode 100644
index 000000000..53c9da641
--- /dev/null
+++ b/app/javascript/helpers/date_filters.js
@@ -0,0 +1,29 @@
+export default function DateFilter(buttonId, message, ...inputIds) {
+  this.button = document.getElementById(buttonId)
+  this.inputIds = inputIds
+  this.message = message
+
+  const getVal = (str, key) => {
+    let newStr = str.replace(/NUM/, key)
+    return document.getElementById(newStr).value
+  }
+
+  const getDates = () => {
+    return this.inputIds.reduce((arr, id) => {
+      let newIds = [1, 2, 3].map(key => getVal(id, key))
+      arr.push(...newIds)
+      return arr
+    }, [])
+  }
+
+  const allInputFilled = () => getDates().every(date => !!date)
+
+  const noInputFilled = () => getDates().every(date => !date)
+  
+  this.button && this.button.addEventListener('click', (event) => {
+    if (!allInputFilled() && !noInputFilled()) {
+      event.preventDefault()
+      alert(this.message)
+    }
+  })
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js b/app/javascript/journey_patterns/actions/index.js
index 825e7bb7d..0c1cb5f5c 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/actions/index.js
+++ b/app/javascript/journey_patterns/actions/index.js
@@ -1,4 +1,4 @@
-var Promise = require('promise-polyfill')
+import Promise from 'promise-polyfill'
 
 // To add to window
 if (!window.Promise) {
@@ -217,4 +217,4 @@ const actions = {
   }
 }
 
-module.exports = actions
+export default actions
\ No newline at end of file
diff --git a/app/javascript/journey_patterns/components/App.js b/app/javascript/journey_patterns/components/App.js
new file mode 100644
index 000000000..ac6214cc1
--- /dev/null
+++ b/app/javascript/journey_patterns/components/App.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import AddJourneyPattern from '../containers/AddJourneyPattern'
+import Navigate from '../containers/Navigate'
+import Modal from '../containers/Modal'
+import ConfirmModal from '../containers/ConfirmModal'
+import SaveJourneyPattern from '../containers/SaveJourneyPattern'
+import JourneyPatternList from '../containers/JourneyPatternList'
+
+const App = () => (
+  <div>
+    <Navigate />
+    <JourneyPatternList />
+    <Navigate />
+    <AddJourneyPattern />
+    <SaveJourneyPattern />
+    <ConfirmModal />
+    <Modal/>
+  </div>
+)
+
+export default App
diff --git a/app/javascript/journey_patterns/components/ConfirmModal.js b/app/javascript/journey_patterns/components/ConfirmModal.js
new file mode 100644
index 000000000..2cc1bef44
--- /dev/null
+++ b/app/javascript/journey_patterns/components/ConfirmModal.js
@@ -0,0 +1,46 @@
+import React, { PropTypes } from 'react'
+
+export default function ConfirmModal({dispatch, modal, onModalAccept, onModalCancel, journeyPatterns}) {
+  return (
+    <div className={'modal fade ' + ((modal.type == 'confirm') ? 'in' : '')} id='ConfirmModal'>
+      <div className='modal-container'>
+        <div className='modal-dialog'>
+          <div className='modal-content'>
+            <div className='modal-header'>
+              <h4 className='modal-title'>Confirmation</h4>
+            </div>
+            <div className='modal-body'>
+              <div className='mt-md mb-md'>
+                <p>Vous vous apprêtez à changer de page. Voulez-vous valider vos modifications avant cela ?</p>
+              </div>
+            </div>
+            <div className='modal-footer'>
+              <button
+                className='btn btn-link'
+                data-dismiss='modal'
+                type='button'
+                onClick={() => { onModalCancel(modal.confirmModal.callback) }}
+              >
+                Ne pas valider
+            </button>
+              <button
+                className='btn btn-primary'
+                data-dismiss='modal'
+                type='button'
+                onClick={() => { onModalAccept(modal.confirmModal.callback, journeyPatterns) }}
+              >
+                Valider
+            </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+ConfirmModal.propTypes = {
+  modal: PropTypes.object.isRequired,
+  onModalAccept: PropTypes.func.isRequired,
+  onModalCancel: PropTypes.func.isRequired
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js b/app/javascript/journey_patterns/components/CreateModal.js
index 12871431a..d0eff6e57 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/CreateModal.js
+++ b/app/javascript/journey_patterns/components/CreateModal.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-class CreateModal extends Component {
+export default class CreateModal extends Component {
   constructor(props) {
     super(props)
   }
@@ -121,6 +119,4 @@ CreateModal.propTypes = {
   onOpenCreateModal: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired,
   onAddJourneyPattern: PropTypes.func.isRequired
-}
-
-module.exports = CreateModal
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js b/app/javascript/journey_patterns/components/EditModal.js
index 1fc935932..699f89b85 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/EditModal.js
+++ b/app/javascript/journey_patterns/components/EditModal.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-class EditModal extends Component {
+export default class EditModal extends Component {
   constructor(props) {
     super(props)
   }
@@ -109,6 +107,4 @@ EditModal.propTypes = {
   modal: PropTypes.object,
   onModalClose: PropTypes.func.isRequired,
   saveModal: PropTypes.func.isRequired
-}
-
-module.exports = EditModal
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js b/app/javascript/journey_patterns/components/JourneyPattern.js
index 1e569d584..dde73a957 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPattern.js
+++ b/app/javascript/journey_patterns/components/JourneyPattern.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-class JourneyPattern extends Component{
+export default class JourneyPattern extends Component{
   constructor(props){
     super(props)
     this.previousCity = undefined
@@ -130,6 +128,4 @@ JourneyPattern.propTypes = {
   onCheckboxChange: PropTypes.func.isRequired,
   onOpenEditModal: PropTypes.func.isRequired,
   onDeleteJourneyPattern: PropTypes.func.isRequired
-}
-
-module.exports = JourneyPattern
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js b/app/javascript/journey_patterns/components/JourneyPatterns.js
index 6506b706c..4b2badabb 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/JourneyPatterns.js
+++ b/app/javascript/journey_patterns/components/JourneyPatterns.js
@@ -1,10 +1,9 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var JourneyPattern = require('./JourneyPattern')
-var _ = require('lodash')
+import React, { PropTypes, Component } from 'react'
+import _ from 'lodash'
+import JourneyPattern from './JourneyPattern'
 
-class JourneyPatterns extends Component{
+
+export default class JourneyPatterns extends Component {
   constructor(props){
     super(props)
     this.previousCity = undefined
@@ -153,6 +152,4 @@ JourneyPatterns.propTypes = {
   onCheckboxChange: PropTypes.func.isRequired,
   onLoadFirstPage: PropTypes.func.isRequired,
   onOpenEditModal: PropTypes.func.isRequired
-}
-
-module.exports = JourneyPatterns
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/Navigate.js b/app/javascript/journey_patterns/components/Navigate.js
index 5747aa5ce..f2fdd668f 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/Navigate.js
+++ b/app/javascript/journey_patterns/components/Navigate.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-let Navigate = ({ dispatch, journeyPatterns, pagination, status }) => {
+export default function Navigate({ dispatch, journeyPatterns, pagination, status }) {
   let firstPage = 1
   let lastPage = Math.ceil(pagination.totalCount / window.journeyPatternsPerPage)
 
@@ -61,6 +59,4 @@ Navigate.propTypes = {
   status: PropTypes.object.isRequired,
   pagination: PropTypes.object.isRequired,
   dispatch: PropTypes.func.isRequired
-}
-
-module.exports = Navigate
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/components/SaveJourneyPattern.js b/app/javascript/journey_patterns/components/SaveJourneyPattern.js
index 767dab088..d071fa542 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/components/SaveJourneyPattern.js
+++ b/app/javascript/journey_patterns/components/SaveJourneyPattern.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-class SaveJourneyPattern extends Component{
+export default class SaveJourneyPattern extends Component {
   constructor(props){
     super(props)
   }
@@ -38,6 +36,4 @@ SaveJourneyPattern.propTypes = {
   journeyPatterns: PropTypes.array.isRequired,
   status: PropTypes.object.isRequired,
   page: PropTypes.number.isRequired
-}
-
-module.exports = SaveJourneyPattern
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/AddJourneyPattern.js b/app/javascript/journey_patterns/containers/AddJourneyPattern.js
index 7aa27754e..b093fd111 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/AddJourneyPattern.js
+++ b/app/javascript/journey_patterns/containers/AddJourneyPattern.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var CreateModal = require('../components/CreateModal')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import CreateModal from '../components/CreateModal'
 
 const mapStateToProps = (state) => {
   return {
@@ -27,4 +27,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const AddJourneyPattern = connect(mapStateToProps, mapDispatchToProps)(CreateModal)
 
-module.exports = AddJourneyPattern
+export default AddJourneyPattern
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/ConfirmModal.js b/app/javascript/journey_patterns/containers/ConfirmModal.js
index d66425a3a..92ce09f33 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/ConfirmModal.js
+++ b/app/javascript/journey_patterns/containers/ConfirmModal.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var ConfirmModal = require('../components/ConfirmModal')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import ConfirmModal from '../components/ConfirmModal'
 
 const mapStateToProps = (state) => {
   return {
@@ -27,4 +27,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const ConfirmModalContainer = connect(mapStateToProps, mapDispatchToProps)(ConfirmModal)
 
-module.exports = ConfirmModalContainer
+export default ConfirmModalContainer
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js b/app/javascript/journey_patterns/containers/JourneyPatternList.js
index 228df3ede..d98734407 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/JourneyPatternList.js
+++ b/app/javascript/journey_patterns/containers/JourneyPatternList.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var JourneyPatterns = require('../components/JourneyPatterns')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import JourneyPatterns from '../components/JourneyPatterns'
 
 const mapStateToProps = (state) => {
   return {
@@ -31,4 +31,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const JourneyPatternList = connect(mapStateToProps, mapDispatchToProps)(JourneyPatterns)
 
-module.exports = JourneyPatternList
+export default JourneyPatternList
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js b/app/javascript/journey_patterns/containers/Modal.js
index ef6a4a6b1..ace71a857 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Modal.js
+++ b/app/javascript/journey_patterns/containers/Modal.js
@@ -1,7 +1,7 @@
-var connect = require('react-redux').connect
-var EditModal = require('../components/EditModal')
-var CreateModal = require('../components/CreateModal')
-var actions = require('../actions')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import EditModal from '../components/EditModal'
+import CreateModal from '../components/CreateModal'
 
 const mapStateToProps = (state) => {
   return {
@@ -23,4 +23,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const ModalContainer = connect(mapStateToProps, mapDispatchToProps)(EditModal, CreateModal)
 
-module.exports = ModalContainer
+export default ModalContainer
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Navigate.js b/app/javascript/journey_patterns/containers/Navigate.js
index ef9f8859c..d34e0b4c5 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/Navigate.js
+++ b/app/javascript/journey_patterns/containers/Navigate.js
@@ -1,7 +1,6 @@
-var React = require('react')
-var connect = require('react-redux').connect
-var actions = require('../actions')
-var NavigateComponent = require('../components/Navigate')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import NavigateComponent from '../components/Navigate'
 
 const mapStateToProps = (state) => {
   return {
@@ -11,7 +10,6 @@ const mapStateToProps = (state) => {
   }
 }
 
-
 const Navigate = connect(mapStateToProps)(NavigateComponent)
 
-module.exports = Navigate
+export default Navigate
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/containers/SaveJourneyPattern.js b/app/javascript/journey_patterns/containers/SaveJourneyPattern.js
index 434264fea..b630c121c 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/containers/SaveJourneyPattern.js
+++ b/app/javascript/journey_patterns/containers/SaveJourneyPattern.js
@@ -1,7 +1,6 @@
-var React = require('react')
-var connect = require('react-redux').connect
-var actions = require('../actions')
-var SaveJourneyPatternComponent = require('../components/SaveJourneyPattern')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import SaveJourneyPatternComponent from '../components/SaveJourneyPattern'
 
 const mapStateToProps = (state) => {
   return {
@@ -25,4 +24,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const SaveJourneyPattern = connect(mapStateToProps, mapDispatchToProps)(SaveJourneyPatternComponent)
 
-module.exports = SaveJourneyPattern
+export default SaveJourneyPattern
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/editMode.js b/app/javascript/journey_patterns/reducers/editMode.js
index 2e8af1aa8..bff976804 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/editMode.js
+++ b/app/javascript/journey_patterns/reducers/editMode.js
@@ -1,4 +1,4 @@
-const editMode = (state = {}, action ) => {
+export default function editMode(state = {}, action ) {
   switch (action.type) {
     case "ENTER_EDIT_MODE":
       return true
@@ -7,6 +7,4 @@ const editMode = (state = {}, action ) => {
     default:
       return state
   }
-}
-
-module.exports = editMode
+}
\ No newline at end of file
diff --git a/app/javascript/journey_patterns/reducers/index.js b/app/javascript/journey_patterns/reducers/index.js
new file mode 100644
index 000000000..2ffaf86d4
--- /dev/null
+++ b/app/javascript/journey_patterns/reducers/index.js
@@ -0,0 +1,18 @@
+import { combineReducers } from 'redux'
+import editMode from './editMode'
+import status from './status'
+import journeyPatterns from './journeyPatterns'
+import pagination from './pagination'
+import modal from './modal'
+import stopPointsList from './stopPointsList'
+
+const journeyPatternsApp = combineReducers({
+  editMode,
+  status,
+  journeyPatterns,
+  pagination,
+  stopPointsList,
+  modal
+})
+
+export default journeyPatternsApp
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js b/app/javascript/journey_patterns/reducers/journeyPatterns.js
index d4f7257d7..7702e21bc 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/journeyPatterns.js
+++ b/app/javascript/journey_patterns/reducers/journeyPatterns.js
@@ -1,7 +1,7 @@
-var _ = require('lodash')
-var actions = require("../actions")
+import _ from 'lodash'
+import actions from "../actions"
 
-const journeyPattern = (state = {}, action) => {
+export default function journeyPattern(state = {}, action) {
   switch (action.type) {
     case 'ADD_JOURNEYPATTERN':
       let stopPoints = window.stopPoints
@@ -87,6 +87,4 @@ const journeyPatterns = (state = [], action) => {
     default:
       return state
   }
-}
-
-module.exports = journeyPatterns
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js b/app/javascript/journey_patterns/reducers/modal.js
index 86cfb5a25..0a96f1679 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/modal.js
+++ b/app/javascript/journey_patterns/reducers/modal.js
@@ -1,5 +1,6 @@
-var _ = require('lodash')
-const modal = (state = {}, action) => {
+import _ from 'lodash'
+
+export default function modal(state = {}, action) {
   switch (action.type) {
     case 'OPEN_CONFIRM_MODAL':
       $('#ConfirmModal').modal('show')
@@ -37,6 +38,4 @@ const modal = (state = {}, action) => {
     default:
       return state
   }
-}
-
-module.exports = modal
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/pagination.js b/app/javascript/journey_patterns/reducers/pagination.js
index 0714ca843..01fdf21d4 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/pagination.js
+++ b/app/javascript/journey_patterns/reducers/pagination.js
@@ -1,5 +1,6 @@
-var _ = require('lodash')
-const pagination = (state = {}, action) => {
+import _ from 'lodash'
+
+export default function pagination (state = {}, action) {
   switch (action.type) {
     case 'RECEIVE_JOURNEY_PATTERNS':
       return _.assign({}, state, {stateChanged: false})
@@ -31,6 +32,4 @@ const toggleOnConfirmModal = (arg = '') =>{
   $('.confirm').each(function(){
     $(this).data('toggle','')
   })
-}
-
-module.exports = pagination
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/status.js b/app/javascript/journey_patterns/reducers/status.js
index 07bbdc249..88c75966d 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/reducers/status.js
+++ b/app/javascript/journey_patterns/reducers/status.js
@@ -1,7 +1,7 @@
-var _ = require('lodash')
-var actions = require("../actions")
+import _ from 'lodash'
+import actions from '../actions'
 
-const status = (state = {}, action) => {
+export default function status (state = {}, action) {
   switch (action.type) {
     case 'UNAVAILABLE_SERVER':
       return _.assign({}, state, {fetchSuccess: false})
@@ -18,6 +18,4 @@ const status = (state = {}, action) => {
     default:
       return state
   }
-}
-
-module.exports = status
+}
\ No newline at end of file
diff --git a/app/javascript/journey_patterns/reducers/stopPointsList.js b/app/javascript/journey_patterns/reducers/stopPointsList.js
new file mode 100644
index 000000000..ee5eb1a80
--- /dev/null
+++ b/app/javascript/journey_patterns/reducers/stopPointsList.js
@@ -0,0 +1,6 @@
+export default function stopPointsList (state = [], action) {
+  switch (action.type) {
+    default:
+      return state
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
new file mode 100644
index 000000000..0b3711e53
--- /dev/null
+++ b/app/javascript/packs/application.js
@@ -0,0 +1,11 @@
+/* eslint no-console:0 */
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within app/javascript and only use these pack files to reference
+// that code so it'll be compiled.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+// import jQuery from 'jquery'
+// import {} from 'jquery-ujs'
diff --git a/app/javascript/packs/date_filters.js b/app/javascript/packs/date_filters.js
new file mode 100644
index 000000000..88f508152
--- /dev/null
+++ b/app/javascript/packs/date_filters.js
@@ -0,0 +1 @@
+import DateFilter from '../date_filters'
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/journey_patterns/index.js b/app/javascript/packs/journey_patterns/index.js
index ca9efd2d0..fde28b45d 100644
--- a/app/assets/javascripts/es6_browserified/journey_patterns/index.js
+++ b/app/javascript/packs/journey_patterns/index.js
@@ -1,9 +1,10 @@
-var React = require('react')
-var render = require('react-dom').render
-var Provider = require('react-redux').Provider
-var createStore = require('redux').createStore
-var journeyPatternsApp = require('./reducers')
-var App = require('./components/App')
+import React from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+import journeyPatternsApp from '../../journey_patterns/reducers'
+import App from '../../journey_patterns/components/App'
+import clone from '../../helpers/clone'
 
 // logger, DO NOT REMOVE
 // var applyMiddleware = require('redux').applyMiddleware
diff --git a/app/javascript/packs/routes/edit.js b/app/javascript/packs/routes/edit.js
new file mode 100644
index 000000000..d6ceed60f
--- /dev/null
+++ b/app/javascript/packs/routes/edit.js
@@ -0,0 +1,81 @@
+import React, { PropTypes } from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+
+import reducers from '../../routes/reducers'
+import App from '../../routes/components/App'
+import formHelper from '../../routes/form_helper'
+import clone from '../../helpers/clone'
+let datas = clone(window, "itinerary_stop", true)
+datas = JSON.parse(decodeURIComponent(datas))
+
+// logger, DO NOT REMOVE
+var applyMiddleware = require('redux').applyMiddleware
+var createLogger = require('redux-logger')
+var thunkMiddleware = require('redux-thunk').default
+var promise = require('redux-promise')
+
+const getInitialState = () => {
+  let state = []
+
+  datas.map(function (v, i) {
+    let fancyText = v.name.replace("&#39;", "\'")
+    if (v.zip_code && v.city_name)
+      fancyText += ", " + v.zip_code + " " + v.city_name.replace("&#39;", "\'")
+
+    state.push({
+      stoppoint_id: v.stoppoint_id,
+      stoparea_id: v.stoparea_id,
+      user_objectid: v.user_objectid,
+      short_name: v.short_name ? v.short_name.replace("&#39;", "\'") : '',
+      area_type: v.area_type,
+      index: i,
+      edit: false,
+      city_name: v.city_name ? v.city_name.replace("&#39;", "\'") : '',
+      zip_code: v.zip_code,
+      name: v.name ? v.name.replace("&#39;", "\'") : '',
+      registration_number: v.registration_number,
+      text: fancyText,
+      for_boarding: v.for_boarding || "normal",
+      for_alighting: v.for_alighting || "normal",
+      longitude: v.longitude || 0,
+      latitude: v.latitude || 0,
+      comment: v.comment ? v.comment.replace("&#39;", "\'") : '',
+      olMap: {
+        isOpened: false,
+        json: {}
+      }
+    })
+  })
+
+  return state
+}
+
+var initialState = { stopPoints: getInitialState() }
+const loggerMiddleware = createLogger()
+let store = createStore(
+  reducers,
+  initialState,
+  applyMiddleware(thunkMiddleware, promise, loggerMiddleware)
+)
+
+render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById('stop_points')
+)
+
+document.querySelector('input[name=commit]').addEventListener('click', (event) => {
+  let state = store.getState()
+
+  let name = $("#route_name").val()
+  let publicName = $("#route_published_name").val()
+  if (name == "" || publicName == "") {
+    event.preventDefault()
+    formHelper.handleForm("#route_name", "#route_published_name")
+  }
+
+  formHelper.handleStopPoints(event, state)
+})
diff --git a/app/javascript/packs/routes/show.js b/app/javascript/packs/routes/show.js
new file mode 100644
index 000000000..7f14a6f11
--- /dev/null
+++ b/app/javascript/packs/routes/show.js
@@ -0,0 +1,102 @@
+import clone from '../../helpers/clone'
+let route = clone(window, "route", true)
+route = JSON.parse(decodeURIComponent(route))
+
+const geoColPts = []
+const geoColLns = []
+const geoColEdges = [
+  new ol.Feature({
+    geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(route[0].longitude), parseFloat(route[0].latitude)]))
+  }),
+  new ol.Feature({
+    geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(route[route.length - 1].longitude), parseFloat(route[route.length - 1].latitude)]))
+  })
+]
+route.forEach(function (stop, i) {
+  if (i < route.length - 1) {
+    geoColLns.push(new ol.Feature({
+      geometry: new ol.geom.LineString([
+        ol.proj.fromLonLat([parseFloat(route[i].longitude), parseFloat(route[i].latitude)]),
+        ol.proj.fromLonLat([parseFloat(route[i + 1].longitude), parseFloat(route[i + 1].latitude)])
+      ])
+    }))
+  }
+  geoColPts.push(new ol.Feature({
+    geometry: new ol.geom.Point(ol.proj.fromLonLat([parseFloat(stop.longitude), parseFloat(stop.latitude)]))
+  })
+  )
+})
+var edgeStyles = new ol.style.Style({
+  image: new ol.style.Circle(({
+    radius: 5,
+    stroke: new ol.style.Stroke({
+      color: '#007fbb',
+      width: 2
+    }),
+    fill: new ol.style.Fill({
+      color: '#007fbb',
+      width: 2
+    })
+  }))
+})
+var defaultStyles = new ol.style.Style({
+  image: new ol.style.Circle(({
+    radius: 4,
+    stroke: new ol.style.Stroke({
+      color: '#007fbb',
+      width: 2
+    }),
+    fill: new ol.style.Fill({
+      color: '#ffffff',
+      width: 2
+    })
+  }))
+})
+var lineStyle = new ol.style.Style({
+  stroke: new ol.style.Stroke({
+    color: '#007fbb',
+    width: 3
+  })
+})
+
+var vectorPtsLayer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: geoColPts
+  }),
+  style: defaultStyles,
+  zIndex: 2
+})
+var vectorEdgesLayer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: geoColEdges
+  }),
+  style: edgeStyles,
+  zIndex: 3
+})
+var vectorLnsLayer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: geoColLns
+  }),
+  style: [lineStyle],
+  zIndex: 1
+})
+
+var map = new ol.Map({
+  target: 'route_map',
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM()
+    }),
+    vectorPtsLayer,
+    vectorEdgesLayer,
+    vectorLnsLayer
+  ],
+  controls: [new ol.control.ScaleLine(), new ol.control.Zoom(), new ol.control.ZoomSlider()],
+  interactions: ol.interaction.defaults({
+    zoom: true
+  }),
+  view: new ol.View({
+    center: ol.proj.fromLonLat([parseFloat(route[0].longitude), parseFloat(route[0].latitude)]),
+    zoom: 13
+  })
+});
diff --git a/app/assets/javascripts/es6_browserified/time_tables/index.js b/app/javascript/packs/time_tables/edit.js
index 6c352df6b..cf058d501 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/index.js
+++ b/app/javascript/packs/time_tables/edit.js
@@ -1,11 +1,11 @@
-var React = require('react')
-var render = require('react-dom').render
-var Provider = require('react-redux').Provider
-var createStore = require('redux').createStore
-var timeTablesApp = require('./reducers')
-var App = require('./containers/App')
+import React from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+import timeTablesApp from '../../time_tables/reducers'
+import App from '../../time_tables/containers/App'
+import clone from '../../helpers/clone'
 
-const clone = require('../helpers/clone')
 const actionType = clone(window, "actionType", true)
 
 // logger, DO NOT REMOVE
@@ -14,7 +14,7 @@ const actionType = clone(window, "actionType", true)
 // var thunkMiddleware = require('redux-thunk').default
 // var promise = require('redux-promise')
 
-var initialState = {
+let initialState = {
   status: {
     actionType: actionType,
     policy: window.perms,
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/index.js b/app/javascript/packs/vehicle_journeys/index.js
index 53bbcf952..38431af1d 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/index.js
+++ b/app/javascript/packs/vehicle_journeys/index.js
@@ -1,11 +1,11 @@
-var React = require('react')
-var render = require('react-dom').render
-var Provider = require('react-redux').Provider
-var createStore = require('redux').createStore
-var vehicleJourneysApp = require('./reducers')
-var App = require('./components/App')
-var actions = require("./actions")
-var enableBatching = require('./batch').enableBatching
+import React from 'react'
+import { render } from 'react-dom'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+import vehicleJourneysApp from '../../vehicle_journeys/reducers'
+import App from '../../vehicle_journeys/components/App'
+import actions from "../../vehicle_journeys/actions"
+import { enableBatching } from '../../vehicle_journeys/batch'
 
 // logger, DO NOT REMOVE
 // var applyMiddleware = require('redux').applyMiddleware
@@ -99,4 +99,4 @@ render(
     <App />
   </Provider>,
   document.getElementById('vehicle_journeys_wip')
-)
+)
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/itineraries/actions/index.js b/app/javascript/routes/actions/index.js
index 13b2d60b2..13b2d60b2 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/actions/index.js
+++ b/app/javascript/routes/actions/index.js
diff --git a/app/javascript/routes/components/App.js b/app/javascript/routes/components/App.js
new file mode 100644
index 000000000..0f5786407
--- /dev/null
+++ b/app/javascript/routes/components/App.js
@@ -0,0 +1,25 @@
+import React, { Component, PropTypes } from 'react'
+import AddStopPoint from '../containers/AddStopPoint'
+import VisibleStopPoints from'../containers/VisibleStopPoints'
+import clone  from '../../helpers/clone'
+const I18n = clone(window , "I18n", true)
+
+export default class App extends Component {
+
+  getChildContext() {
+    return { I18n }
+  }
+
+  render() {
+    return (
+      <div>
+        <VisibleStopPoints />
+        <AddStopPoint />
+      </div>
+    )  
+  } 
+}
+
+App.childContextTypes = {
+  I18n: PropTypes.object
+}
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/BSelect2.js b/app/javascript/routes/components/BSelect2.js
index 9a82b7925..340d9df95 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/BSelect2.js
+++ b/app/javascript/routes/components/BSelect2.js
@@ -1,7 +1,6 @@
-var _ = require('lodash')
-var React = require('react')
-var { Component, PropTypes } = require('react')
-var Select2 = require('react-select2')
+import _ from'lodash'
+import React, { Component, PropTypes } from 'react'
+import Select2 from 'react-select2'
 
 
 // get JSON full path
@@ -9,7 +8,7 @@ var origin = window.location.origin
 var path = window.location.pathname.split('/', 3).join('/')
 
 
-class BSelect3 extends Component{
+export default class BSelect3 extends Component {
   constructor(props, context) {
     super(props, context)
   }
@@ -124,5 +123,3 @@ class BSelect2 extends Component{
 BSelect2.contextTypes = {
   I18n: PropTypes.object
 }
-
-module.exports = BSelect3
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js b/app/javascript/routes/components/OlMap.js
index 937871346..2c01dfa7f 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/OlMap.js
+++ b/app/javascript/routes/components/OlMap.js
@@ -1,8 +1,7 @@
-var _ = require('lodash')
-var React = require('react')
-var { Component, PropTypes } = require('react')
+import _ from 'lodash'
+import React, { Component, PropTypes } from 'react'
 
-class OlMap extends Component{
+export default class OlMap extends Component{
   constructor(props, context){
     super(props, context)
   }
@@ -168,5 +167,3 @@ OlMap.PropTypes = {
 OlMap.contextTypes = {
   I18n: PropTypes.object
 }
-
-module.exports = OlMap
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js b/app/javascript/routes/components/StopPoint.js
index c3996f5b3..606121f99 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/StopPoint.js
+++ b/app/javascript/routes/components/StopPoint.js
@@ -1,9 +1,8 @@
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var BSelect2 = require('./BSelect2')
-var OlMap = require('./OlMap')
+import React, { PropTypes } from 'react'
+import BSelect2 from './BSelect2'
+import OlMap from './OlMap'
 
-const StopPoint = (props, {I18n}) => {
+export default function StopPoint(props, {I18n}) {
   return (
     <div className='nested-fields'>
       <div className='wrapper'>
@@ -76,7 +75,7 @@ const StopPoint = (props, {I18n}) => {
   )
 }
 
-StopPoint.propTypes = {
+StopPoint.PropTypes = {
   onToggleMap: PropTypes.func.isRequired,
   onToggleEdit: PropTypes.func.isRequired,
   onDeleteClick: PropTypes.func.isRequired,
@@ -92,6 +91,4 @@ StopPoint.propTypes = {
 
 StopPoint.contextTypes = {
   I18n: PropTypes.object
-}
-
-module.exports = StopPoint
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/itineraries/components/StopPointList.js b/app/javascript/routes/components/StopPointList.js
index 37a480fca..68af16f57 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/components/StopPointList.js
+++ b/app/javascript/routes/components/StopPointList.js
@@ -1,8 +1,7 @@
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var StopPoint = require('./StopPoint')
+import React, { PropTypes } from 'react'
+import StopPoint from './StopPoint'
 
-const StopPointList = ({ stopPoints, onDeleteClick, onMoveUpClick, onMoveDownClick, onChange, onSelectChange, onToggleMap, onToggleEdit, onSelectMarker, onUnselectMarker, onUpdateViaOlMap }, {I18n}) => {
+export default function StopPointList({ stopPoints, onDeleteClick, onMoveUpClick, onMoveDownClick, onChange, onSelectChange, onToggleMap, onToggleEdit, onSelectMarker, onUnselectMarker, onUpdateViaOlMap }, {I18n}) {
   return (
     <div className='subform'>
       <div className='nested-head'>
@@ -55,7 +54,7 @@ const StopPointList = ({ stopPoints, onDeleteClick, onMoveUpClick, onMoveDownCli
   )
 }
 
-StopPointList.propTypes = {
+StopPointList.PropTypes = {
   stopPoints: PropTypes.array.isRequired,
   onDeleteClick: PropTypes.func.isRequired,
   onMoveUpClick: PropTypes.func.isRequired,
@@ -67,6 +66,4 @@ StopPointList.propTypes = {
 
 StopPointList.contextTypes = {
   I18n: PropTypes.object
-}
-
-module.exports = StopPointList
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/itineraries/containers/AddStopPoint.js b/app/javascript/routes/containers/AddStopPoint.js
index ea5ae90db..fd9227ff3 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/containers/AddStopPoint.js
+++ b/app/javascript/routes/containers/AddStopPoint.js
@@ -1,6 +1,6 @@
-var React = require('react')
-var connect = require('react-redux').connect
-var actions = require('../actions')
+import React from 'react'
+import { connect } from 'react-redux'
+import actions from '../actions'
 
 let AddStopPoint = ({ dispatch }) => {
   return (
@@ -17,6 +17,4 @@ let AddStopPoint = ({ dispatch }) => {
     </div>
   )
 }
-AddStopPoint = connect()(AddStopPoint)
-
-module.exports = AddStopPoint
+export default AddStopPoint = connect()(AddStopPoint)
diff --git a/app/assets/javascripts/es6_browserified/itineraries/containers/VisibleStopPoints.js b/app/javascript/routes/containers/VisibleStopPoints.js
index 8b08a1e5f..67d77af50 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/containers/VisibleStopPoints.js
+++ b/app/javascript/routes/containers/VisibleStopPoints.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var StopPointList = require('../components/StopPointList')
+import actions from '../actions'
+import  { connect } from 'react-redux'
+import StopPointList from '../components/StopPointList'
 
 const mapStateToProps = (state) => {
   return {
@@ -55,4 +55,4 @@ const VisibleStopPoints = connect(
   mapDispatchToProps
 )(StopPointList)
 
-module.exports = VisibleStopPoints
+export default VisibleStopPoints
diff --git a/app/assets/javascripts/es6_browserified/itineraries/form_helper.js b/app/javascript/routes/form_helper.js
index f682e39c0..8a3277234 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/form_helper.js
+++ b/app/javascript/routes/form_helper.js
@@ -52,4 +52,4 @@ const formHelper = {
   }
 }
 
-module.exports = formHelper
\ No newline at end of file
+export default formHelper
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/itineraries/index.js b/app/javascript/routes/index.js
index 13d89bec5..febae7d54 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/index.js
+++ b/app/javascript/routes/index.js
@@ -1,11 +1,11 @@
-var React = require('react')
-var render = require('react-dom').render
-var Provider = require('react-redux').Provider
-var createStore = require('redux').createStore
-var reducers = require('./reducers')
-var App = require('./components/App')
-var { handleForm, handleStopPoints } = require('./form_helper')
-let clone = require('../helpers/clone')
+import React from 'react'
+import { render  } from 'react-dom'
+import { Provider } from 'react-redux'
+import { createStore } from 'redux'
+import reducers from './reducers'
+import App from './components/App'
+import { handleForm, handleStopPoints } from './form_helper'
+import clone from '../helpers/clone'
 let datas = clone(window, "itinerary_stop", true)
 datas = JSON.parse(decodeURIComponent(datas))
 
diff --git a/app/javascript/routes/reducers/index.js b/app/javascript/routes/reducers/index.js
new file mode 100644
index 000000000..eb01ea9f7
--- /dev/null
+++ b/app/javascript/routes/reducers/index.js
@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux'
+import stopPoints from './stopPoints'
+
+const stopPointsApp = combineReducers({
+  stopPoints
+})
+
+export default stopPointsApp
diff --git a/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js b/app/javascript/routes/reducers/stopPoints.js
index f3a26b8d7..eeec06327 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/reducers/stopPoints.js
+++ b/app/javascript/routes/reducers/stopPoints.js
@@ -1,5 +1,5 @@
-var _ = require('lodash')
-var { addInput } = require('../form_helper')
+import _ from 'lodash'
+import formHelper from '../form_helper'
 
 const stopPoint = (state = {}, action, length) => {
   switch (action.type) {
@@ -23,8 +23,8 @@ const stopPoint = (state = {}, action, length) => {
 const updateFormForDeletion = (stop) =>{
   if (stop.stoppoint_id !== undefined){
     let now = Date.now()
-    addInput('id', stop.stoppoint_id, now)
-    addInput('_destroy', 'true', now)
+    formHelper.addInput('id', stop.stoppoint_id, now)
+    formHelper.addInput('_destroy', 'true', now)
   }
 }
 
@@ -141,4 +141,4 @@ const stopPoints = (state = [], action) => {
   }
 }
 
-module.exports = stopPoints
+export default stopPoints
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/itineraries/show.js b/app/javascript/routes/show.js
index e88469900..e88469900 100644
--- a/app/assets/javascripts/es6_browserified/itineraries/show.js
+++ b/app/javascript/routes/show.js
diff --git a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js b/app/javascript/time_tables/actions/index.js
index a421a8ed6..13cb96b64 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/actions/index.js
+++ b/app/javascript/time_tables/actions/index.js
@@ -1,10 +1,14 @@
-const _ = require('lodash')
-const clone = require('../../helpers/clone')
+import range from 'lodash/range'
+import assign from 'lodash/assign'
+import reject from 'lodash/reject'
+import some from 'lodash/some'
+import every from 'lodash/every'
+import clone from '../../helpers/clone'
 const I18n = clone(window, "I18n")
 
 const actions = {
   weekDays: (index) => {
-    return _.range(1, 8).map(n => I18n.time_tables.edit.metas.days[n])
+    return range(1, 8).map(n => I18n.time_tables.edit.metas.days[n])
   },
   strToArrayDayTypes: (str) =>{
     return actions.weekDays().map(day => str.indexOf(day) !== -1)
@@ -151,7 +155,7 @@ const actions = {
     type : 'CLOSE_MODAL'
   }),
   monthName(strDate) {
-    let monthList = _.range(1,13).map(n => I18n.calendars.months[n])
+    let monthList = range(1,13).map(n => I18n.calendars.months[n])
     let date = new Date(strDate)
     return monthList[date.getMonth()]
   },
@@ -172,12 +176,12 @@ const actions = {
     return date.toLocaleDateString()
   },
   updateSynthesis: ({current_month, time_table_dates: dates, time_table_periods: periods}) => {
-    let newPeriods = _.reject(periods, 'deleted')
+    let newPeriods = reject(periods, 'deleted')
     let improvedCM = current_month.map((d, i) => {
       let isInPeriod = actions.isInPeriod(newPeriods, d.date)
-      let isIncluded = _.some(dates, {'date': d.date, 'in_out': true})
+      let isIncluded = some(dates, {'date': d.date, 'in_out': true})
 
-      return _.assign({}, current_month[i], {
+      return assign({}, current_month[i], {
         in_periods: isInPeriod,
         include_date: isIncluded,
         excluded_date: !isInPeriod ? false : current_month[i].excluded_date
@@ -271,8 +275,8 @@ const actions = {
   submitTimetable: (dispatch, timetable, metas, next) => {
     dispatch(actions.fetchingApi())
     let strDayTypes = actions.arrayToStrDayTypes(metas.day_types)
-    metas.day_types= strDayTypes
-    let sentState = _.assign({}, timetable, metas)
+    metas.day_types = strDayTypes
+    let sentState = assign({}, timetable, metas)
     let urlJSON = window.location.pathname.split('/', 5).join('/')
     let hasError = false
     fetch(urlJSON + '.json', {
@@ -302,8 +306,8 @@ const actions = {
       })
   },
   errorModalKey: (periods, dayTypes) => {
-    const withoutPeriodsWithDaysTypes = _.reject(periods, 'deleted').length == 0 && _.some(dayTypes) && "withoutPeriodsWithDaysTypes"
-    const withPeriodsWithoutDayTypes = _.reject(periods, 'deleted').length > 0 &&  _.every(dayTypes, dt => dt == false) && "withPeriodsWithoutDayTypes"
+    const withoutPeriodsWithDaysTypes = reject(periods, 'deleted').length == 0 && some(dayTypes) && "withoutPeriodsWithDaysTypes"
+    const withPeriodsWithoutDayTypes = reject(periods, 'deleted').length > 0 &&  every(dayTypes, dt => dt == false) && "withPeriodsWithoutDayTypes"
 
     return (withoutPeriodsWithDaysTypes || withPeriodsWithoutDayTypes) && (withoutPeriodsWithDaysTypes ? "withoutPeriodsWithDaysTypes" : "withPeriodsWithoutDayTypes")
 
@@ -318,7 +322,7 @@ const actions = {
         return errorKey
 
     }
-  },
+  }
 }
 
-module.exports = actions
+export default actions
\ No newline at end of file
diff --git a/app/javascript/time_tables/components/ConfirmModal.js b/app/javascript/time_tables/components/ConfirmModal.js
new file mode 100644
index 000000000..d89170ee7
--- /dev/null
+++ b/app/javascript/time_tables/components/ConfirmModal.js
@@ -0,0 +1,50 @@
+import React, { PropTypes } from 'react'
+
+export default function ConfirmModal({dispatch, modal, onModalAccept, onModalCancel, timetable, metas}, {I18n}) {
+  return (
+    <div className={'modal fade ' + ((modal.type == 'confirm') ? 'in' : '')} id='ConfirmModal'>
+      <div className='modal-container'>
+        <div className='modal-dialog'>
+          <div className='modal-content'>
+            <div className='modal-header'>
+              <h4 className='modal-title'>{I18n.time_tables.edit.confirm_modal.title}</h4>
+            </div>
+            <div className='modal-body'>
+              <div className='mt-md mb-md'>
+                <p>{I18n.time_tables.edit.confirm_modal.message}</p>
+              </div>
+            </div>
+            <div className='modal-footer'>
+              <button
+                className='btn btn-link'
+                data-dismiss='modal'
+                type='button'
+                onClick={() => { onModalCancel(modal.confirmModal.callback) }}
+              >
+                {I18n.cancel}
+              </button>
+              <button
+                className='btn btn-primary'
+                data-dismiss='modal'
+                type='button'
+                onClick={() => { onModalAccept(modal.confirmModal.callback, timetable, metas) }}
+              >
+                {I18n.actions.submit}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+ConfirmModal.propTypes = {
+  modal: PropTypes.object.isRequired,
+  onModalAccept: PropTypes.func.isRequired,
+  onModalCancel: PropTypes.func.isRequired
+}
+
+ConfirmModal.contextTypes = {
+  I18n: PropTypes.object
+}
\ No newline at end of file
diff --git a/app/javascript/time_tables/components/ErrorModal.js b/app/javascript/time_tables/components/ErrorModal.js
new file mode 100644
index 000000000..e810f49ab
--- /dev/null
+++ b/app/javascript/time_tables/components/ErrorModal.js
@@ -0,0 +1,42 @@
+import React, { PropTypes } from 'react'
+import actions from '../actions'
+
+export default function ErrorModal({dispatch, modal, onModalClose}, {I18n}) {
+  return (
+    <div className={'modal fade ' + ((modal.type == 'error') ? 'in' : '')} id='ErrorModal'>
+      <div className='modal-container'>
+        <div className='modal-dialog'>
+          <div className='modal-content'>
+            <div className='modal-header'>
+              <h4 className='modal-title'>{I18n.time_tables.edit.error_modal.title}</h4>
+            </div>
+            <div className='modal-body'>
+              <div className='mt-md mb-md'>
+                <p>{actions.errorModalMessage(modal.modalProps.error)}</p>
+              </div>
+            </div>
+            <div className='modal-footer'>
+              <button
+                className='btn btn-link'
+                data-dismiss='modal'
+                type='button'
+                onClick={() => { onModalClose() }}
+              >
+                {I18n.back}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+ErrorModal.propTypes = {
+  modal: PropTypes.object.isRequired,
+  onModalClose: PropTypes.func.isRequired
+}
+
+ErrorModal.contextTypes = {
+  I18n: PropTypes.object
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/ExceptionsInDay.js b/app/javascript/time_tables/components/ExceptionsInDay.js
index 80c2e4b7a..3335ee89d 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/ExceptionsInDay.js
+++ b/app/javascript/time_tables/components/ExceptionsInDay.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-class ExceptionsInDay extends Component {
+export default class ExceptionsInDay extends Component {
   constructor(props) {
     super(props)
   }
@@ -71,5 +69,3 @@ ExceptionsInDay.propTypes = {
   onIncludeDateInPeriod: PropTypes.func.isRequired,
   index: PropTypes.number.isRequired
 }
-
-module.exports = ExceptionsInDay
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js b/app/javascript/time_tables/components/Metas.js
index 26a96e4a6..7098d2b82 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/Metas.js
+++ b/app/javascript/time_tables/components/Metas.js
@@ -1,9 +1,8 @@
-var React = require('react')
-var  { PropTypes }  = require('react')
-const { weekDays } = require('../actions')
-var TagsSelect2 = require('./TagsSelect2')
+import React, { PropTypes } from 'react'
+import actions from '../actions'
+import TagsSelect2 from './TagsSelect2'
 
-const Metas = ({metas, onUpdateDayTypes, onUpdateComment, onUpdateColor, onSelect2Tags, onUnselect2Tags}, {I18n}) => {
+export default function Metas({metas, onUpdateDayTypes, onUpdateComment, onUpdateColor, onSelect2Tags, onUnselect2Tags}, {I18n}) {
   let colorList = ["", "#9B9B9B", "#FFA070", "#C67300", "#7F551B", "#41CCE3", "#09B09C", "#3655D7",   "#6321A0", "#E796C6", "#DD2DAA"]
   return (
     <div className='form-horizontal'>
@@ -112,7 +111,7 @@ const Metas = ({metas, onUpdateDayTypes, onUpdateComment, onUpdateColor, onSelec
                           type="checkbox"
                           checked={day ? 'checked' : ''}
                           />
-                        <span className='lcbx-group-item-label'>{weekDays()[i]}</span>
+                        <span className='lcbx-group-item-label'>{actions.weekDays()[i]}</span>
                       </label>
                     </div>
                   </div>
@@ -138,5 +137,3 @@ Metas.propTypes = {
 Metas.contextTypes = {
   I18n: PropTypes.object
 }
-
-module.exports = Metas
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/Navigate.js b/app/javascript/time_tables/components/Navigate.js
index 6a3690cb0..7307d819b 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/Navigate.js
+++ b/app/javascript/time_tables/components/Navigate.js
@@ -1,10 +1,8 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
-var _ = require('lodash')
+import React, { PropTypes, Component } from 'react'
+import map from 'lodash/map'
+import actions from '../actions'
 
-let Navigate = ({ dispatch, metas, timetable, pagination, status, filters}) => {
+export default function Navigate({ dispatch, metas, timetable, pagination, status, filters}) {
   if(status.isFetching == true) {
     return false
   }
@@ -32,7 +30,7 @@ let Navigate = ({ dispatch, metas, timetable, pagination, status, filters}) => {
                 className='dropdown-menu'
                 aria-labelledby='date_selector'
                 >
-                {_.map(pagination.periode_range, (month, i) => (
+                {map(pagination.periode_range, (month, i) => (
                   <li key={i}>
                     <button
                       type='button'
@@ -87,6 +85,4 @@ Navigate.propTypes = {
   status: PropTypes.object.isRequired,
   pagination: PropTypes.object.isRequired,
   dispatch: PropTypes.func.isRequired
-}
-
-module.exports = Navigate
+}
\ No newline at end of file
diff --git a/app/javascript/time_tables/components/PeriodForm.js b/app/javascript/time_tables/components/PeriodForm.js
new file mode 100644
index 000000000..d9f1d3437
--- /dev/null
+++ b/app/javascript/time_tables/components/PeriodForm.js
@@ -0,0 +1,148 @@
+import React, { PropTypes } from 'react'
+import filter from 'lodash/filter'
+let monthsArray = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
+
+const formatNumber = (val) => {
+  return ("0" + val).slice(-2)
+}
+
+const makeDaysOptions = (daySelected) => {
+  let arr = []
+  for(let i = 1; i < 32; i++) {
+    arr.push(<option value={formatNumber(i)} key={i}>{formatNumber(i)}</option>)
+  }
+  return arr
+}
+
+const makeMonthsOptions = (monthSelected) => {
+  let arr = []
+  for(let i = 1; i < 13; i++) {
+    arr.push(<option value={formatNumber(i)} key={i}>{monthsArray[i - 1]}</option>)
+  }
+  return arr
+}
+
+const makeYearsOptions = (yearSelected) => {
+  let arr = []
+  let startYear = new Date().getFullYear() - 3
+  for(let i = startYear; i <= startYear + 6; i++) {
+    arr.push(<option key={i}>{i}</option>)
+  }
+  return arr
+}
+
+export default function PeriodForm({modal, timetable, metas, onOpenAddPeriodForm, onClosePeriodForm, onUpdatePeriodForm, onValidatePeriodForm}, {I18n}) {
+  return (
+    <div className="container-fluid">
+      <div className="row">
+        <div className="col lg-6 col-lg-offset-3">
+          <div className='subform'>
+            {modal.modalProps.active &&
+              <div>
+                <div className="nested-head">
+                  <div className="wrapper">
+                    <div>
+                      <div className="form-group">
+                        <label htmlFor="" className="control-label required">
+                          {I18n.time_tables.edit.period_form.begin}
+                          <abbr title="requis">*</abbr>
+                        </label>
+                      </div>
+                    </div>
+                    <div>
+                      <div className="form-group">
+                        <label htmlFor="" className="control-label required">
+                          {I18n.time_tables.edit.period_form.end}
+                          <abbr title="requis">*</abbr>
+                        </label>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="nested-fields">
+                  <div className="wrapper">
+                    <div>
+                      <div className={'form-group date ' + (modal.modalProps.error ? ' has-error' : '')}>
+                        <div className="form-inline">
+                          <select value={formatNumber(modal.modalProps.begin.day)} onChange={(e) => onUpdatePeriodForm(e, 'begin', 'day', modal.modalProps)} id="q_validity_period_begin_gteq_3i" className="date required form-control">
+                            {makeDaysOptions(modal.modalProps.begin.day)}
+                          </select>
+                          <select value={formatNumber(modal.modalProps.begin.month)} onChange={(e) => onUpdatePeriodForm(e, 'begin', 'month', modal.modalProps)} id="q_validity_period_begin_gteq_2i" className="date required form-control">
+                            {makeMonthsOptions(modal.modalProps.begin.month)}
+                          </select>
+                          <select value={modal.modalProps.begin.year} onChange={(e) => onUpdatePeriodForm(e, 'begin', 'year', modal.modalProps)} id="q_validity_period_begin_gteq_1i" className="date required form-control">
+                            {makeYearsOptions(modal.modalProps.begin.year)}
+                          </select>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div className={'form-group date ' + (modal.modalProps.error ? ' has-error' : '')}>
+                        <div className="form-inline">
+                          <select value={formatNumber(modal.modalProps.end.day)} onChange={(e) => onUpdatePeriodForm(e, 'end', 'day', modal.modalProps)} id="q_validity_period_end_gteq_3i" className="date required form-control">
+                            {makeDaysOptions(modal.modalProps.end.day)}
+                          </select>
+                          <select value={formatNumber(modal.modalProps.end.month)} onChange={(e) => onUpdatePeriodForm(e, 'end', 'month', modal.modalProps)} id="q_validity_period_end_gteq_2i" className="date required form-control">
+                            {makeMonthsOptions(modal.modalProps.end.month)}
+                          </select>
+                          <select value={modal.modalProps.end.year} onChange={(e) => onUpdatePeriodForm(e, 'end', 'year', modal.modalProps)} id="q_validity_period_end_gteq_1i" className="date required form-control">
+                            {makeYearsOptions(modal.modalProps.end.year)}
+                          </select>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className='links nested-linker'>
+                  <span className='help-block small text-danger pull-left mt-xs ml-sm'>
+                    {modal.modalProps.error}
+                  </span>
+                  <button
+                    type='button'
+                    className='btn btn-link'
+                    onClick={onClosePeriodForm}
+                  >
+                    {I18n.cancel}
+                  </button>
+                  <button
+                    type='button'
+                    className='btn btn-outline-primary mr-sm'
+                    onClick={() => onValidatePeriodForm(modal.modalProps, timetable.time_table_periods, metas, filter(timetable.time_table_dates, ['in_out', true]))}
+                  >
+                    {I18n.actions.submit}
+                  </button>
+                </div>
+              </div>
+            }
+            {!modal.modalProps.active &&
+              <div className="text-right">
+                <button
+                  type='button'
+                  className='btn btn-outline-primary'
+                  onClick={onOpenAddPeriodForm}
+                >
+                  {I18n.time_tables.actions.add_period}
+                </button>
+              </div>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  ) 
+}
+
+PeriodForm.propTypes = {
+  modal: PropTypes.object.isRequired,
+  metas: PropTypes.object.isRequired,
+  onOpenAddPeriodForm: PropTypes.func.isRequired,
+  onClosePeriodForm: PropTypes.func.isRequired,
+  onUpdatePeriodForm: PropTypes.func.isRequired,
+  onValidatePeriodForm: PropTypes.func.isRequired,
+  timetable: PropTypes.object.isRequired
+}
+
+PeriodForm.contextTypes = {
+  I18n: PropTypes.object
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodManager.js b/app/javascript/time_tables/components/PeriodManager.js
index 704e21331..9922ce2c4 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodManager.js
+++ b/app/javascript/time_tables/components/PeriodManager.js
@@ -1,8 +1,7 @@
-var React = require('react')
-var { Component, PropTypes } = require('react')
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-class PeriodManager extends Component {
+export default class PeriodManager extends Component {
   constructor(props, context) {
     super(props, context)
   }
@@ -83,6 +82,4 @@ PeriodManager.propTypes = {
 
 PeriodManager.contextTypes = {
   I18n: PropTypes.object
-}
-
-module.exports = PeriodManager
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodsInDay.js b/app/javascript/time_tables/components/PeriodsInDay.js
index f56509b99..888537579 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/PeriodsInDay.js
+++ b/app/javascript/time_tables/components/PeriodsInDay.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var PeriodManager = require('./PeriodManager')
+import React, { PropTypes, Component } from 'react'
+import PeriodManager from './PeriodManager'
 
-class PeriodsInDay extends Component {
+export default class PeriodsInDay extends Component {
   constructor(props) {
     super(props)
   }
@@ -75,5 +73,3 @@ PeriodsInDay.propTypes = {
   index: PropTypes.number.isRequired,
   onDeletePeriod: PropTypes.func.isRequired
 }
-
-module.exports = PeriodsInDay
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/SaveTimetable.js b/app/javascript/time_tables/components/SaveTimetable.js
index 779fd8e25..d5a57bd1c 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/SaveTimetable.js
+++ b/app/javascript/time_tables/components/SaveTimetable.js
@@ -1,10 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
-var _ = require('lodash')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-class SaveTimetable extends Component{
+export default class SaveTimetable extends Component{
   constructor(props){
     super(props)
   }
@@ -41,6 +38,4 @@ SaveTimetable.propTypes = {
   timetable: PropTypes.object.isRequired,
   status: PropTypes.object.isRequired,
   metas: PropTypes.object.isRequired
-}
-
-module.exports = SaveTimetable
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/TagsSelect2.js b/app/javascript/time_tables/components/TagsSelect2.js
index 46188cdd1..70a748a04 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/TagsSelect2.js
+++ b/app/javascript/time_tables/components/TagsSelect2.js
@@ -1,21 +1,22 @@
-var _ = require('lodash')
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var Select2 = require('react-select2')
+import React, { PropTypes, Component } from 'react'
+import mapKeys from 'lodash/mapKeys'
+import map from 'lodash/map'
+import filter from 'lodash/filter'
+import assign from 'lodash/assign'
+import Select2 from 'react-select2'
 
 // get JSON full path
-var origin = window.location.origin
-var path = window.location.pathname.split('/', 4).join('/')
-var _ = require('lodash')
+let origin = window.location.origin
+let path = window.location.pathname.split('/', 4).join('/')
 
-class TagsSelect2 extends React.Component{
+export default class TagsSelect2 extends Component {
   constructor(props, context) {
     super(props, context)
   }
 
   mapKeys(array){
     return array.map((item) =>
-      _.mapKeys(item, (v, k) =>
+      mapKeys(item, (v, k) =>
         ((k == 'name') ? 'text' : k)
       )
     )
@@ -24,7 +25,7 @@ class TagsSelect2 extends React.Component{
   render() {
     return (
       <Select2
-        value={(this.props.tags.length) ? _.map(this.props.tags, 'id') : undefined}
+        value={(this.props.tags.length) ? map(this.props.tags, 'id') : undefined}
         data={(this.props.initialTags.length) ? this.mapKeys(this.props.initialTags) : undefined}
         onSelect={(e) => this.props.onSelect2Tags(e)}
         onUnselect={(e) => setTimeout( () => this.props.onUnselect2Tags(e, 150))}
@@ -49,10 +50,10 @@ class TagsSelect2 extends React.Component{
               };
             },
             processResults: function(data, params) {
-              let items = _.filter(data, ({name}) => name.includes(params.term) )
+              let items = filter(data, ({name}) => name.includes(params.term) )
               return {
                 results: items.map(
-                  item => _.assign(
+                  item => assign(
                     {},
                     item,
                     {text: item.name}
@@ -76,6 +77,4 @@ const formatRepo = (props) => {
 
 TagsSelect2.contextTypes = {
   I18n: PropTypes.object
-}
-
-module.exports = TagsSelect2
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/TimeTableDay.js b/app/javascript/time_tables/components/TimeTableDay.js
index 93a0a90fe..165c7b848 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/TimeTableDay.js
+++ b/app/javascript/time_tables/components/TimeTableDay.js
@@ -1,7 +1,6 @@
-var React = require('react')
-var { Component, PropTypes } = require('react')
+import React, { PropTypes, Component } from 'react'
 
-class TimeTableDay extends Component {
+export default class TimeTableDay extends Component {
   constructor(props) {
     super(props)
   }
@@ -30,5 +29,3 @@ TimeTableDay.propTypes = {
   index: PropTypes.number.isRequired,
   dayTypeActive: PropTypes.bool.isRequired
 }
-
-module.exports = TimeTableDay
diff --git a/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js b/app/javascript/time_tables/components/Timetable.js
index 22e971c6b..df6e6016b 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/components/Timetable.js
+++ b/app/javascript/time_tables/components/Timetable.js
@@ -1,11 +1,11 @@
-var React = require('react')
-var { Component, PropTypes}  = require('react')
-var TimeTableDay = require('./TimeTableDay')
-var PeriodsInDay = require('./PeriodsInDay')
-var ExceptionsInDay = require('./ExceptionsInDay')
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
+import TimeTableDay from './TimeTableDay'
+import PeriodsInDay from './PeriodsInDay'
+import ExceptionsInDay from './ExceptionsInDay'
 
-class Timetable extends Component{
+
+export default class Timetable extends Component {
   constructor(props, context){
     super(props, context)
   }
@@ -113,5 +113,3 @@ Timetable.propTypes = {
 Timetable.contextTypes = {
   I18n: PropTypes.object
 }
-
-module.exports = Timetable
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/App.js b/app/javascript/time_tables/containers/App.js
index f12fb8a71..235dccb50 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/App.js
+++ b/app/javascript/time_tables/containers/App.js
@@ -1,16 +1,14 @@
-var React = require('react')
-var connect = require('react-redux').connect
-var { Component, PropTypes} = require('react')
-var actions = require('../actions')
-var Metas = require('./Metas')
-var Timetable = require('./Timetable')
-var Navigate = require('./Navigate')
-var PeriodForm = require('./PeriodForm')
-var SaveTimetable = require('./SaveTimetable')
-var ConfirmModal = require('./ConfirmModal')
-var ErrorModal = require('./ErrorModal')
-
-const clone = require('../../helpers/clone')
+import React, { PropTypes, Component } from 'react'
+import { connect } from'react-redux'
+import actions from '../actions'
+import Metas from './Metas'
+import Timetable from './Timetable'
+import Navigate from './Navigate'
+import PeriodForm from './PeriodForm'
+import SaveTimetable from './SaveTimetable'
+import ConfirmModal from './ConfirmModal'
+import ErrorModal from './ErrorModal'
+import clone from '../../helpers/clone'
 const I18n = clone(window, "I18n", true)
 
 class App extends Component {
@@ -54,4 +52,4 @@ App.childContextTypes = {
 
 const timeTableApp = connect(null, mapDispatchToProps)(App)
 
-module.exports = timeTableApp
+export default timeTableApp
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/ConfirmModal.js b/app/javascript/time_tables/containers/ConfirmModal.js
index 6282c1d1d..f3742b038 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/ConfirmModal.js
+++ b/app/javascript/time_tables/containers/ConfirmModal.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var ConfirmModal = require('../components/ConfirmModal')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import ConfirmModal from '../components/ConfirmModal'
 
 const mapStateToProps = (state) => {
   return {
@@ -28,4 +28,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const ConfirmModalContainer = connect(mapStateToProps, mapDispatchToProps)(ConfirmModal)
 
-module.exports = ConfirmModalContainer
+export default ConfirmModalContainer
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/ErrorModal.js b/app/javascript/time_tables/containers/ErrorModal.js
index e0b2c1240..37099073b 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/ErrorModal.js
+++ b/app/javascript/time_tables/containers/ErrorModal.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var ErrorModal = require('../components/ErrorModal')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import ErrorModal from '../components/ErrorModal'
 
 const mapStateToProps = (state) => {
   return {
@@ -19,4 +19,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const ErrorModalContainer = connect(mapStateToProps, mapDispatchToProps)(ErrorModal)
 
-module.exports = ErrorModalContainer
+export default ErrorModalContainer
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/Metas.js b/app/javascript/time_tables/containers/Metas.js
index c4ab2d5b3..ebccf556e 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/Metas.js
+++ b/app/javascript/time_tables/containers/Metas.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var MetasComponent = require('../components/Metas')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import MetasComponent from '../components/Metas'
 
 const mapStateToProps = (state) => {
   return {
@@ -35,4 +35,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const Metas = connect(mapStateToProps, mapDispatchToProps)(MetasComponent)
 
-module.exports = Metas
+export default Metas
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/Navigate.js b/app/javascript/time_tables/containers/Navigate.js
index c70583c25..8d163659c 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/Navigate.js
+++ b/app/javascript/time_tables/containers/Navigate.js
@@ -1,7 +1,7 @@
-var React = require('react')
-var connect = require('react-redux').connect
-var actions = require('../actions')
-var NavigateComponent = require('../components/Navigate')
+import React from 'react'
+import { connect } from 'react-redux'
+import actions from '../actions'
+import NavigateComponent from '../components/Navigate'
 
 const mapStateToProps = (state) => {
   return {
@@ -15,4 +15,4 @@ const mapStateToProps = (state) => {
 
 const Navigate = connect(mapStateToProps)(NavigateComponent)
 
-module.exports = Navigate
+export default Navigate
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/PeriodForm.js b/app/javascript/time_tables/containers/PeriodForm.js
index 951a09741..1bde039e2 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/PeriodForm.js
+++ b/app/javascript/time_tables/containers/PeriodForm.js
@@ -1,7 +1,9 @@
-var connect = require('react-redux').connect
-var PeriodFormComponent = require('../components/PeriodForm')
-var actions = require('../actions')
-var _ = require('lodash')
+import { connect } from 'react-redux'
+import assign from 'lodash/assign'
+import actions from '../actions'
+import PeriodFormComponent from '../components/PeriodForm'
+
+
 
 const mapStateToProps = (state) => {
   return {
@@ -21,7 +23,7 @@ const mapDispatchToProps = (dispatch) => {
     },
     onUpdatePeriodForm: (e, group, selectType, modalProps) => {
       dispatch(actions.updatePeriodForm(e.currentTarget.value, group, selectType))
-      let mProps = _.assign({}, modalProps)
+      let mProps = assign({}, modalProps)
       mProps[group][selectType] = e.currentTarget.value
       let val = window.correctDay([parseInt(mProps[group]['day']), parseInt(mProps[group]['month']), parseInt(mProps[group]['year'])])
       val = (val < 10) ? '0' + String(val) : String(val)
@@ -41,4 +43,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const PeriodForm = connect(mapStateToProps, mapDispatchToProps)(PeriodFormComponent)
 
-module.exports = PeriodForm
+export default PeriodForm
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/SaveTimetable.js b/app/javascript/time_tables/containers/SaveTimetable.js
index 6287da15b..7574dc5cc 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/SaveTimetable.js
+++ b/app/javascript/time_tables/containers/SaveTimetable.js
@@ -1,7 +1,6 @@
-var React = require('react')
-var connect = require('react-redux').connect
-var actions = require('../actions')
-var SaveTimetableComponent = require('../components/SaveTimetable')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import SaveTimetableComponent from '../components/SaveTimetable'
 
 const mapStateToProps = (state) => {
   return {
@@ -23,4 +22,4 @@ const mapDispatchToProps = (dispatch) => {
 }
 const SaveTimetable = connect(mapStateToProps, mapDispatchToProps)(SaveTimetableComponent)
 
-module.exports = SaveTimetable
+export default SaveTimetable
diff --git a/app/assets/javascripts/es6_browserified/time_tables/containers/Timetable.js b/app/javascript/time_tables/containers/Timetable.js
index a37e99982..e78e8840a 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/containers/Timetable.js
+++ b/app/javascript/time_tables/containers/Timetable.js
@@ -1,6 +1,6 @@
-var connect = require('react-redux').connect
-var TimetableComponent = require('../components/Timetable')
-var actions = require('../actions')
+import { connect } from 'react-redux'
+import actions from '../actions'
+import TimetableComponent from '../components/Timetable'
 
 const mapStateToProps = (state) => {
   return {
@@ -41,4 +41,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const Timetable = connect(mapStateToProps, mapDispatchToProps)(TimetableComponent)
 
-module.exports = Timetable
+export default Timetable
diff --git a/app/javascript/time_tables/reducers/index.js b/app/javascript/time_tables/reducers/index.js
new file mode 100644
index 000000000..aed9035b5
--- /dev/null
+++ b/app/javascript/time_tables/reducers/index.js
@@ -0,0 +1,16 @@
+import { combineReducers } from 'redux'
+import status from './status'
+import pagination from './pagination'
+import modal from './modal'
+import timetable from './timetable'
+import metas from './metas'
+
+const timeTablesApp = combineReducers({
+  timetable,
+  metas,
+  status,
+  pagination,
+  modal
+})
+
+export default timeTablesApp
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/metas.js b/app/javascript/time_tables/reducers/metas.js
index ab5ed3d91..51e1ec149 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/metas.js
+++ b/app/javascript/time_tables/reducers/metas.js
@@ -1,10 +1,11 @@
-const _ = require('lodash')
-const actions = require('../actions')
+import assign from 'lodash/assign'
+import filter from 'lodash/filter'
+import actions from '../actions'
 
-const metas = (state = {}, action) => {
+export default function metas(state = {}, action) {
   switch (action.type) {
     case 'RECEIVE_TIME_TABLES':
-      return _.assign({}, state, {
+      return assign({}, state, {
         comment: action.json.comment,
         day_types: actions.strToArrayDayTypes(action.json.day_types),
         tags: action.json.tags,
@@ -14,29 +15,27 @@ const metas = (state = {}, action) => {
       })
     case 'RECEIVE_MONTH':
       let dt = (typeof state.day_types === 'string') ? actions.strToArrayDayTypes(state.day_types) : state.day_types
-      return _.assign({}, state, {day_types: dt})
+      return assign({}, state, {day_types: dt})
     case 'ADD_INCLUDED_DATE':
     case 'REMOVE_INCLUDED_DATE':
     case 'ADD_EXCLUDED_DATE':
     case 'REMOVE_EXCLUDED_DATE':
     case 'DELETE_PERIOD':
     case 'VALIDATE_PERIOD_FORM':
-      return _.assign({}, state, {calendar: null})
+      return assign({}, state, {calendar: null})
     case 'UPDATE_DAY_TYPES':
-      return _.assign({}, state, {day_types: action.dayTypes, calendar : null})
+      return assign({}, state, {day_types: action.dayTypes, calendar : null})
     case 'UPDATE_COMMENT':
-      return _.assign({}, state, {comment: action.comment})
+      return assign({}, state, {comment: action.comment})
     case 'UPDATE_COLOR':
-      return _.assign({}, state, {color: action.color})
+      return assign({}, state, {color: action.color})
     case 'UPDATE_SELECT_TAG':
       let tags = [...state.tags]
       tags.push(action.selectedItem)
-      return _.assign({}, state, {tags: tags})
+      return assign({}, state, {tags: tags})
     case 'UPDATE_UNSELECT_TAG':
-      return _.assign({}, state, {tags: _.filter(state.tags, (t) => (t.id != action.selectedItem.id))})
+      return assign({}, state, {tags: filter(state.tags, (t) => (t.id != action.selectedItem.id))})
     default:
       return state
   }
-}
-
-module.exports = metas
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/modal.js b/app/javascript/time_tables/reducers/modal.js
index c61296f1c..5e870a6ef 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/modal.js
+++ b/app/javascript/time_tables/reducers/modal.js
@@ -1,5 +1,5 @@
-var _ = require('lodash')
-var actions = require('../actions')
+import assign from 'lodash/assign'
+import actions from '../actions'
 
 let newModalProps = {}
 let emptyDate = {
@@ -9,11 +9,11 @@ let emptyDate = {
 }
 let period_start = '', period_end = ''
 
-const modal = (state = {}, action) => {
+export default function modal(state = {}, action) {
   switch (action.type) {
     case 'OPEN_CONFIRM_MODAL':
       $('#ConfirmModal').modal('show')
-      return _.assign({}, state, {
+      return assign({}, state, {
         type: 'confirm',
         confirmModal: {
           callback: action.callback,
@@ -21,14 +21,14 @@ const modal = (state = {}, action) => {
       })
     case 'OPEN_ERROR_MODAL':
       $('#ErrorModal').modal('show')
-      newModalProps = _.assign({}, state.modalProps, {error: action.error})
-      return _.assign({}, state, {type: 'error'}, {modalProps: newModalProps})
+      newModalProps = assign({}, state.modalProps, {error: action.error})
+      return assign({}, state, {type: 'error'}, {modalProps: newModalProps})
     case 'RESET_MODAL_ERRORS':
-      newModalProps = _.assign({}, state.modalProps, {error: ''})
-      return _.assign({}, state, {type: ''}, {modalProps: newModalProps})
+      newModalProps = assign({}, state.modalProps, {error: ''})
+      return assign({}, state, {type: ''}, {modalProps: newModalProps})
     case 'CLOSE_PERIOD_FORM':
-      newModalProps = _.assign({}, state.modalProps, {active: false, error: ""})
-      return _.assign({}, state, {modalProps: newModalProps})
+      newModalProps = assign({}, state.modalProps, {active: false, error: ""})
+      return assign({}, state, {modalProps: newModalProps})
     case 'OPEN_EDIT_PERIOD_FORM':
       period_start = action.period.period_start.split('-')
       period_end = action.period.period_end.split('-')
@@ -45,22 +45,20 @@ const modal = (state = {}, action) => {
       newModalProps.active = true
       newModalProps.index = action.index
       newModalProps.error = ''
-      return _.assign({}, state, {modalProps: newModalProps})
+      return assign({}, state, {modalProps: newModalProps})
     case 'OPEN_ADD_PERIOD_FORM':
-      newModalProps = _.assign({}, state.modalProps, {active: true, begin: emptyDate, end: emptyDate, index: false, error: ''})
-      return _.assign({}, state, {modalProps: newModalProps})
+      newModalProps = assign({}, state.modalProps, {active: true, begin: emptyDate, end: emptyDate, index: false, error: ''})
+      return assign({}, state, {modalProps: newModalProps})
     case 'UPDATE_PERIOD_FORM':
       newModalProps = JSON.parse(JSON.stringify(state.modalProps))
       newModalProps[action.group][action.selectType] = action.val
-      return _.assign({}, state, {modalProps: newModalProps})
+      return assign({}, state, {modalProps: newModalProps})
     case 'VALIDATE_PERIOD_FORM':
       newModalProps = JSON.parse(JSON.stringify(state.modalProps))
       newModalProps.error = action.error
       newModalProps.active = (newModalProps.error == '') ? false : true
-      return _.assign({}, state, {modalProps: newModalProps})
+      return assign({}, state, {modalProps: newModalProps})
     default:
       return state
   }
-}
-
-module.exports = modal
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/pagination.js b/app/javascript/time_tables/reducers/pagination.js
index f38b124d9..53a753356 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/pagination.js
+++ b/app/javascript/time_tables/reducers/pagination.js
@@ -1,25 +1,25 @@
-var _ = require('lodash')
+import assign from 'lodash/assign'
 
-const pagination = (state = {}, action) => {
+export default function pagination(state = {}, action) {
   switch (action.type) {
     case 'RECEIVE_TIME_TABLES':
-      return _.assign({}, state, {
+      return assign({}, state, {
         currentPage: action.json.current_periode_range,
         periode_range: action.json.periode_range,
         stateChanged: false
       })
     case 'RECEIVE_MONTH':
     case 'RECEIVE_ERRORS':
-      return _.assign({}, state, {stateChanged: false})
+      return assign({}, state, {stateChanged: false})
     case 'GO_TO_PREVIOUS_PAGE':
     case 'GO_TO_NEXT_PAGE':
       let nextPage = action.nextPage ? 1 : -1
       let newPage = action.pagination.periode_range[action.pagination.periode_range.indexOf(action.pagination.currentPage) + nextPage]
       toggleOnConfirmModal()
-      return _.assign({}, state, {currentPage : newPage, stateChanged: false})
+      return assign({}, state, {currentPage : newPage, stateChanged: false})
     case 'CHANGE_PAGE':
       toggleOnConfirmModal()
-      return _.assign({}, state, {currentPage : action.page, stateChanged: false})
+      return assign({}, state, {currentPage : action.page, stateChanged: false})
     case 'ADD_INCLUDED_DATE':
     case 'REMOVE_INCLUDED_DATE':
     case 'ADD_EXCLUDED_DATE':
@@ -31,7 +31,7 @@ const pagination = (state = {}, action) => {
     case 'UPDATE_DAY_TYPES':
     case 'UPDATE_CURRENT_MONTH_FROM_DAYTYPES':
       toggleOnConfirmModal('modal')
-      return _.assign({}, state, {stateChanged: true})
+      return assign({}, state, {stateChanged: true})
     default:
       return state
   }
@@ -41,6 +41,4 @@ const toggleOnConfirmModal = (arg = '') =>{
   $('.confirm').each(function(){
     $(this).data('toggle','')
   })
-}
-
-module.exports = pagination
+}
\ No newline at end of file
diff --git a/app/javascript/time_tables/reducers/status.js b/app/javascript/time_tables/reducers/status.js
new file mode 100644
index 000000000..256059191
--- /dev/null
+++ b/app/javascript/time_tables/reducers/status.js
@@ -0,0 +1,15 @@
+import assign from 'lodash/assign'
+
+export default function status(state = {}, action) {
+  switch (action.type) {
+    case 'UNAVAILABLE_SERVER':
+      return assign({}, state, {fetchSuccess: false})
+    case 'FETCH_API':
+      return assign({}, state, {isFetching: true})
+    case 'RECEIVE_TIME_TABLES':
+    case 'RECEIVE_MONTH':
+      return assign({}, state, {fetchSuccess: true, isFetching: false})
+    default:
+      return state
+  }
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/time_tables/reducers/timetable.js b/app/javascript/time_tables/reducers/timetable.js
index 712808abd..21ca1efed 100644
--- a/app/assets/javascripts/es6_browserified/time_tables/reducers/timetable.js
+++ b/app/javascript/time_tables/reducers/timetable.js
@@ -1,34 +1,37 @@
-const _ = require('lodash')
-var actions = require('../actions')
+import assign from 'lodash/assign'
+import reject from 'lodash/reject'
+import sortBy from 'lodash/sortBy'
+import reduce from 'lodash/reduce'
+import actions from '../actions'
 let newState, newPeriods, newDates, newCM
 
-const timetable = (state = {}, action) => {
+export default function timetable(state = {}, action) {
   switch (action.type) {
     case 'RECEIVE_TIME_TABLES':
-      let fetchedState = _.assign({}, state, {
+      let fetchedState = assign({}, state, {
         current_month: action.json.current_month,
         current_periode_range: action.json.current_periode_range,
         periode_range: action.json.periode_range,
         time_table_periods: action.json.time_table_periods,
-        time_table_dates: _.sortBy(action.json.time_table_dates, ['date'])
+        time_table_dates: sortBy(action.json.time_table_dates, ['date'])
       })
-      return _.assign({}, fetchedState, {current_month: actions.updateSynthesis(fetchedState)})
+      return assign({}, fetchedState, {current_month: actions.updateSynthesis(fetchedState)})
     case 'RECEIVE_MONTH':
-      newState = _.assign({}, state, {
+      newState = assign({}, state, {
         current_month: action.json.days
       })
-      return _.assign({}, newState, {current_month: actions.updateSynthesis(newState)})
+      return assign({}, newState, {current_month: actions.updateSynthesis(newState)})
     case 'GO_TO_PREVIOUS_PAGE':
     case 'GO_TO_NEXT_PAGE':
       let nextPage = action.nextPage ? 1 : -1
       let newPage = action.pagination.periode_range[action.pagination.periode_range.indexOf(action.pagination.currentPage) + nextPage]
       $('#ConfirmModal').modal('hide')
       actions.fetchTimeTables(action.dispatch, newPage)
-      return _.assign({}, state, {current_periode_range: newPage})
+      return assign({}, state, {current_periode_range: newPage})
     case 'CHANGE_PAGE':
       $('#ConfirmModal').modal('hide')
       actions.fetchTimeTables(action.dispatch, action.page)
-      return _.assign({}, state, {current_periode_range: action.page})
+      return assign({}, state, {current_periode_range: action.page})
     case 'DELETE_PERIOD':
       newPeriods = state.time_table_periods.map((period, i) =>{
         if(i == action.index){
@@ -37,45 +40,45 @@ const timetable = (state = {}, action) => {
         return period
       })
       let deletedPeriod = Array.of(state.time_table_periods[action.index])
-      newDates = _.reject(state.time_table_dates, d => actions.isInPeriod(deletedPeriod, d.date) && !d.in_out)
-      newState = _.assign({}, state, {time_table_periods : newPeriods, time_table_dates: newDates})
-      return _.assign({}, newState, { current_month: actions.updateSynthesis(newState)})
+      newDates = reject(state.time_table_dates, d => actions.isInPeriod(deletedPeriod, d.date) && !d.in_out)
+      newState = assign({}, state, {time_table_periods : newPeriods, time_table_dates: newDates})
+      return assign({}, newState, { current_month: actions.updateSynthesis(newState)})
     case 'ADD_INCLUDED_DATE':
       newDates = state.time_table_dates.concat({date: action.date, in_out: true})
       newCM = state.current_month.map((d, i) => {
         if (i == action.index) d.include_date = true
         return d
       })
-      return _.assign({}, state, {current_month: newCM, time_table_dates: newDates})
+      return assign({}, state, {current_month: newCM, time_table_dates: newDates})
     case 'REMOVE_INCLUDED_DATE':
-      newDates = _.reject(state.time_table_dates, ['date', action.date])
+      newDates = reject(state.time_table_dates, ['date', action.date])
       newCM = state.current_month.map((d, i) => {
         if (i == action.index) d.include_date = false
         return d
       })
-      return _.assign({}, state, {current_month: newCM, time_table_dates: newDates})
+      return assign({}, state, {current_month: newCM, time_table_dates: newDates})
     case 'ADD_EXCLUDED_DATE':
       newDates = state.time_table_dates.concat({date: action.date, in_out: false})
       newCM = state.current_month.map((d, i) => {
         if (i == action.index) d.excluded_date = true
         return d
       })
-      return _.assign({}, state, {current_month: newCM, time_table_dates: newDates})
+      return assign({}, state, {current_month: newCM, time_table_dates: newDates})
     case 'REMOVE_EXCLUDED_DATE':
-      newDates = _.reject(state.time_table_dates, ['date', action.date])
+      newDates = reject(state.time_table_dates, ['date', action.date])
       newCM = state.current_month.map((d, i) => {
         if (i == action.index) d.excluded_date = false
         return d
       })
-      return _.assign({}, state, {current_month: newCM, time_table_dates: newDates})
+      return assign({}, state, {current_month: newCM, time_table_dates: newDates})
     case 'UPDATE_DAY_TYPES':
       // We get the week days of the activated day types to reject the out_dates that that are out of newDayTypes
-      let weekDays = _.reduce(action.dayTypes, (array, dt, i) => {
+      let weekDays = reduce(action.dayTypes, (array, dt, i) => {
         if (dt) array.push(i)
         return array
       }, [])
 
-      newDates =  _.reject(state.time_table_dates, (d) => {
+      newDates =  reject(state.time_table_dates, (d) => {
         let weekDay = new Date(d.date).getDay()
 
         if (d.in_out) {
@@ -84,9 +87,9 @@ const timetable = (state = {}, action) => {
           return !weekDays.includes(weekDay)
         }
       })
-      return _.assign({}, state, {time_table_dates: newDates})
+      return assign({}, state, {time_table_dates: newDates})
     case 'UPDATE_CURRENT_MONTH_FROM_DAYTYPES':
-      return _.assign({}, state, {current_month: actions.updateSynthesis(state)})
+      return assign({}, state, {current_month: actions.updateSynthesis(state)})
     case 'VALIDATE_PERIOD_FORM':
       if (action.error != '') return state
 
@@ -99,7 +102,7 @@ const timetable = (state = {}, action) => {
         let updatedPeriod = newPeriods[action.modalProps.index]
         updatedPeriod.period_start = period_start
         updatedPeriod.period_end = period_end
-        newDates = _.reject(state.time_table_dates, d => actions.isInPeriod(newPeriods, d.date) && !d.in_out)
+        newDates = reject(state.time_table_dates, d => actions.isInPeriod(newPeriods, d.date) && !d.in_out)
       }else{
         let newPeriod = {
           period_start: period_start,
@@ -109,11 +112,9 @@ const timetable = (state = {}, action) => {
       }
       
       newDates = newDates || state.time_table_dates
-      newState =_.assign({}, state, {time_table_periods: newPeriods, time_table_dates: newDates})
-      return _.assign({}, newState, {current_month: actions.updateSynthesis(newState)})
+      newState =assign({}, state, {time_table_periods: newPeriods, time_table_dates: newDates})
+      return assign({}, newState, {current_month: actions.updateSynthesis(newState)})
     default:
       return state
   }
-}
-
-module.exports = timetable
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js b/app/javascript/vehicle_journeys/actions/index.js
index 2e2e06514..4272c7915 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/actions/index.js
+++ b/app/javascript/vehicle_journeys/actions/index.js
@@ -1,10 +1,10 @@
-var Promise = require('promise-polyfill')
+import Promise from 'promise-polyfill'
 
 // To add to window
 if (!window.Promise) {
   window.Promise = Promise;
 }
-var batchActions = require('../batch').batchActions
+import { batchActions } from '../batch'
 
 const actions = {
   enterEditMode: () => ({
@@ -460,4 +460,4 @@ const actions = {
   },
 }
 
-module.exports = actions
+export default actions
diff --git a/app/javascript/vehicle_journeys/batch.js b/app/javascript/vehicle_journeys/batch.js
new file mode 100644
index 000000000..ea08572aa
--- /dev/null
+++ b/app/javascript/vehicle_journeys/batch.js
@@ -0,0 +1,26 @@
+// 'use strict';
+
+// Object.defineProperty(exports, "__esModule", {
+// 	value: true
+// });
+// exports.batchActions = batchActions;
+// exports.enableBatching = enableBatching;
+// var BATCH = exports.BATCH = 'BATCH';
+
+export function batchActions(actions) {
+	return {
+    type: 'BATCH',
+    payload: actions
+  };
+}
+
+export function enableBatching(reduce) {
+	return function batchingReducer(state, action) {
+		switch (action.type) {
+			case 'BATCH':
+				return action.payload.reduce(batchingReducer, state);
+			default:
+				return reduce(state, action);
+		}
+	}
+}
\ No newline at end of file
diff --git a/app/javascript/vehicle_journeys/components/App.js b/app/javascript/vehicle_journeys/components/App.js
new file mode 100644
index 000000000..8e5f7aa9d
--- /dev/null
+++ b/app/javascript/vehicle_journeys/components/App.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import VehicleJourneysList from '../containers/VehicleJourneysList'
+import Navigate from '../containers/Navigate'
+import ToggleArrivals from '../containers/ToggleArrivals'
+import Filters from '../containers/Filters'
+import SaveVehicleJourneys from '../containers/SaveVehicleJourneys'
+import ConfirmModal from '../containers/ConfirmModal'
+import Tools from '../containers/Tools'
+
+export default function App() {
+  return (
+    <div>
+
+      <div className='row'>
+        <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6'>
+          <ToggleArrivals />
+        </div>
+        <div className='col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right'>
+          <Navigate />
+        </div>
+      </div>
+
+      <Filters />
+      <VehicleJourneysList />
+
+      <div className='row'>
+        <div className='col-lg-12 text-right'>
+          <Navigate />
+        </div>
+      </div>
+
+      <SaveVehicleJourneys />
+      <Tools />
+
+      <ConfirmModal />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/app/javascript/vehicle_journeys/components/ConfirmModal.js b/app/javascript/vehicle_journeys/components/ConfirmModal.js
new file mode 100644
index 000000000..df3c96c48
--- /dev/null
+++ b/app/javascript/vehicle_journeys/components/ConfirmModal.js
@@ -0,0 +1,40 @@
+import React, { PropTypes, Component } from 'react'
+
+export default function ConfirmModal({dispatch, modal, onModalAccept, onModalCancel, vehicleJourneys}) {
+  return (
+    <div className={'modal fade ' + ((modal.type == 'confirm') ? 'in' : '')} id='ConfirmModal'>
+      <div className='modal-dialog'>
+        <div className='modal-content'>
+          <div className='modal-body'>
+            <p> Voulez-vous valider vos modifications avant de changer de page? </p>
+          </div>
+          <div className='modal-footer'>
+            <button
+              className='btn btn-default'
+              data-dismiss='modal'
+              type='button'
+              onClick={() => { onModalCancel(modal.confirmModal.callback) }}
+            >
+              Ne pas valider
+          </button>
+            <button
+              className='btn btn-danger'
+              data-dismiss='modal'
+              type='button'
+              onClick={() => { onModalAccept(modal.confirmModal.callback, vehicleJourneys) }}
+            >
+              Valider
+          </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+} 
+
+ConfirmModal.propTypes = {
+  vehicleJourneys: PropTypes.array.isRequired,
+  modal: PropTypes.object.isRequired,
+  onModalAccept: PropTypes.func.isRequired,
+  onModalCancel: PropTypes.func.isRequired
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Filters.js b/app/javascript/vehicle_journeys/components/Filters.js
index f74bfa71d..db6707520 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Filters.js
+++ b/app/javascript/vehicle_journeys/components/Filters.js
@@ -1,10 +1,9 @@
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var MissionSelect2 = require('./tools/select2s/MissionSelect2')
-var VJSelect2 = require('./tools/select2s/VJSelect2')
-var TimetableSelect2 = require('./tools/select2s/TimetableSelect2')
+import React, { PropTypes } from 'react'
+import MissionSelect2 from'./tools/select2s/MissionSelect2'
+import VJSelect2 from'./tools/select2s/VJSelect2'
+import TimetableSelect2 from'./tools/select2s/TimetableSelect2'
 
-const Filters = ({filters, pagination, onFilter, onResetFilters, onUpdateStartTimeFilter, onUpdateEndTimeFilter, onToggleWithoutSchedule, onToggleWithoutTimeTable, onSelect2Timetable, onSelect2JourneyPattern, onSelect2VehicleJourney}) => {
+export default function Filters({filters, pagination, onFilter, onResetFilters, onUpdateStartTimeFilter, onUpdateEndTimeFilter, onToggleWithoutSchedule, onToggleWithoutTimeTable, onSelect2Timetable, onSelect2JourneyPattern, onSelect2VehicleJourney}) {
   return (
     <div className='row'>
       <div className='col-lg-12'>
@@ -166,6 +165,4 @@ Filters.propTypes = {
   onSelect2Timetable: PropTypes.func.isRequired,
   onSelect2JourneyPattern: PropTypes.func.isRequired,
   onSelect2VehicleJourney: PropTypes.func.isRequired
-}
-
-module.exports = Filters
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Navigate.js b/app/javascript/vehicle_journeys/components/Navigate.js
index a62e034ae..7493b705b 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Navigate.js
+++ b/app/javascript/vehicle_journeys/components/Navigate.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from'../actions'
 
-let Navigate = ({ dispatch, vehicleJourneys, pagination, status, filters}) => {
+export default function Navigate({ dispatch, vehicleJourneys, pagination, status, filters}) {
   let firstPage = 1
   let lastPage = Math.ceil(pagination.totalCount / pagination.perPage)
   let minVJ = (pagination.page - 1) * pagination.perPage + 1
@@ -54,6 +52,4 @@ Navigate.propTypes = {
   status: PropTypes.object.isRequired,
   pagination: PropTypes.object.isRequired,
   dispatch: PropTypes.func.isRequired
-}
-
-module.exports = Navigate
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/SaveVehicleJourneys.js b/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js
index 3c45e5758..e8c27f92e 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/SaveVehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/components/SaveVehicleJourneys.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-class SaveVehicleJourneys extends Component{
+export default class SaveVehicleJourneys extends Component{
   constructor(props){
     super(props)
   }
@@ -41,6 +39,4 @@ SaveVehicleJourneys.propTypes = {
   filters: PropTypes.object.isRequired,
   onEnterEditMode: PropTypes.func.isRequired,
   onSubmitVehicleJourneys: PropTypes.func.isRequired
-}
-
-module.exports = SaveVehicleJourneys
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/ToggleArrivals.js b/app/javascript/vehicle_journeys/components/ToggleArrivals.js
index 48fee683f..e26ceec3a 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/ToggleArrivals.js
+++ b/app/javascript/vehicle_journeys/components/ToggleArrivals.js
@@ -1,7 +1,6 @@
-var React = require('react')
-var PropTypes = require('react').PropTypes
+import React, { PropTypes } from 'react'
 
-const ToggleArrivals = ({filters, onToggleArrivals}) => {
+export default function ToggleArrivals({filters, onToggleArrivals}) {
   return (
     <div className='has_switch form-group inline'>
       <label htmlFor='toggleArrivals' className='control-label'>Afficher et éditer les horaires d'arrivée</label>
@@ -25,6 +24,4 @@ const ToggleArrivals = ({filters, onToggleArrivals}) => {
 ToggleArrivals.propTypes = {
   filters : PropTypes.object.isRequired,
   onToggleArrivals: PropTypes.func.isRequired
-}
-
-module.exports = ToggleArrivals
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Tools.js b/app/javascript/vehicle_journeys/components/Tools.js
index 4948e6b1a..a717408b9 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/Tools.js
+++ b/app/javascript/vehicle_journeys/components/Tools.js
@@ -1,15 +1,14 @@
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var AddVehicleJourney = require('../containers/tools/AddVehicleJourney')
-var DeleteVehicleJourneys = require('../containers/tools/DeleteVehicleJourneys')
-var ShiftVehicleJourney = require('../containers/tools/ShiftVehicleJourney')
-var DuplicateVehicleJourney = require('../containers/tools/DuplicateVehicleJourney')
-var EditVehicleJourney = require('../containers/tools/EditVehicleJourney')
-var NotesEditVehicleJourney = require('../containers/tools/NotesEditVehicleJourney')
-var TimetablesEditVehicleJourney = require('../containers/tools/TimetablesEditVehicleJourney')
-var actions = require('../actions')
+import React, { PropTypes } from 'react'
+import actions from '../actions'
+import AddVehicleJourney from '../containers/tools/AddVehicleJourney'
+import DeleteVehicleJourneys from '../containers/tools/DeleteVehicleJourneys'
+import ShiftVehicleJourney from '../containers/tools/ShiftVehicleJourney'
+import DuplicateVehicleJourney from '../containers/tools/DuplicateVehicleJourney'
+import EditVehicleJourney from '../containers/tools/EditVehicleJourney'
+import NotesEditVehicleJourney from '../containers/tools/NotesEditVehicleJourney'
+import TimetablesEditVehicleJourney from '../containers/tools/TimetablesEditVehicleJourney'
 
-const Tools = ({vehicleJourneys, onCancelSelection, filters: {policy}, editMode}) => {
+export default function Tools({vehicleJourneys, onCancelSelection, filters: {policy}, editMode}) {
   return (
     <div>
       {
@@ -37,6 +36,4 @@ Tools.propTypes = {
   vehicleJourneys : PropTypes.array.isRequired,
   onCancelSelection: PropTypes.func.isRequired,
   filters: PropTypes.object.isRequired
-}
-
-module.exports = Tools
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js b/app/javascript/vehicle_journeys/components/VehicleJourney.js
index ca6694f61..cb5407f81 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/VehicleJourney.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../actions'
 
-class VehicleJourney extends Component {
+export default class VehicleJourney extends Component {
   constructor(props) {
     super(props)
     this.previousCity = undefined
@@ -144,6 +142,4 @@ VehicleJourney.propTypes = {
   index: PropTypes.number.isRequired,
   onUpdateTime: PropTypes.func.isRequired,
   onSelectVehicleJourney: PropTypes.func.isRequired
-}
-
-module.exports = VehicleJourney
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourneys.js b/app/javascript/vehicle_journeys/components/VehicleJourneys.js
index 8f3f91b25..6bce9766b 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/VehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/components/VehicleJourneys.js
@@ -1,10 +1,9 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var VehicleJourney = require('./VehicleJourney')
-var _ = require('lodash')
+import React, { PropTypes, Component } from 'react'
+import _ from 'lodash'
+import VehicleJourney from './VehicleJourney'
 
-class VehicleJourneys extends Component{
+
+export default class VehicleJourneys extends Component {
   constructor(props){
     super(props)
     this.previousCity = undefined
@@ -154,6 +153,4 @@ VehicleJourneys.propTypes = {
   onLoadFirstPage: PropTypes.func.isRequired,
   onUpdateTime: PropTypes.func.isRequired,
   onSelectVehicleJourney: PropTypes.func.isRequired
-}
-
-module.exports = VehicleJourneys
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js b/app/javascript/vehicle_journeys/components/tools/CreateModal.js
index 6a1e8ffb9..5b5e2f849 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/CreateModal.js
+++ b/app/javascript/vehicle_journeys/components/tools/CreateModal.js
@@ -1,11 +1,9 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../../actions')
-var MissionSelect2 = require('./select2s/MissionSelect2')
-var CompanySelect2 = require('./select2s/CompanySelect2')
+import React, { PropTypes, Component } from 'react'
+import actions from '../../actions'
+import MissionSelect2 from './select2s/MissionSelect2'
+import CompanySelect2 from './select2s/CompanySelect2'
 
-class CreateModal extends Component {
+export default class CreateModal extends Component {
   constructor(props) {
     super(props)
   }
@@ -130,6 +128,4 @@ CreateModal.propTypes = {
   onModalClose: PropTypes.func.isRequired,
   onAddVehicleJourney: PropTypes.func.isRequired,
   onSelect2JourneyPattern: PropTypes.func.isRequired
-}
-
-module.exports = CreateModal
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DeleteVehicleJourneys.js b/app/javascript/vehicle_journeys/components/tools/DeleteVehicleJourneys.js
index c98b794a8..0a1dedd3c 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DeleteVehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/components/tools/DeleteVehicleJourneys.js
@@ -1,8 +1,7 @@
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var actions = require('../../actions')
+import React, { PropTypes } from 'react'
+import actions from '../../actions'
 
-const DeleteVehicleJourneys = ({onDeleteVehicleJourneys, vehicleJourneys, filters}) => {
+export default function DeleteVehicleJourneys({onDeleteVehicleJourneys, vehicleJourneys, filters}) {
   return (
     <li className='st_action'>
       <button
@@ -24,6 +23,4 @@ DeleteVehicleJourneys.propTypes = {
   onDeleteVehicleJourneys: PropTypes.func.isRequired,
   vehicleJourneys: PropTypes.array.isRequired,
   filters: PropTypes.object.isRequired
-}
-
-module.exports = DeleteVehicleJourneys
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DuplicateVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/DuplicateVehicleJourney.js
index 9446b993a..0c1c81114 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/DuplicateVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/DuplicateVehicleJourney.js
@@ -1,10 +1,8 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../../actions')
-var _ = require('lodash')
+import React, { PropTypes, Component } from 'react'
+import actions from '../../actions'
+import _ from 'lodash'
 
-class DuplicateVehicleJourney extends Component {
+export default class DuplicateVehicleJourney extends Component {
   constructor(props) {
     super(props)
     this.state = {}
@@ -195,6 +193,4 @@ DuplicateVehicleJourney.propTypes = {
   onOpenDuplicateModal: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired,
   filters: PropTypes.object.isRequired
-}
-
-module.exports = DuplicateVehicleJourney
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/EditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
index d9f81d399..3a4a57024 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/EditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/EditVehicleJourney.js
@@ -1,10 +1,8 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../../actions')
-var CompanySelect2 = require('./select2s/CompanySelect2')
+import React, { PropTypes, Component } from 'react'
+import actions from '../../actions'
+import CompanySelect2 from './select2s/CompanySelect2'
 
-class EditVehicleJourney extends Component {
+export default class EditVehicleJourney extends Component {
   constructor(props) {
     super(props)
   }
@@ -166,6 +164,4 @@ EditVehicleJourney.propTypes = {
   onOpenEditModal: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired,
   filters: PropTypes.object.isRequired
-}
-
-module.exports = EditVehicleJourney
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/NotesEditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
index df6c311e6..1958faf5f 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
@@ -1,10 +1,8 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../../actions')
-var _ = require('lodash')
+import React, { PropTypes, Component } from 'react'
+import actions from '../../actions'
+import _ from 'lodash'
 
-class NotesEditVehicleJourney extends Component {
+export default class NotesEditVehicleJourney extends Component {
   constructor(props) {
     super(props)
   }
@@ -149,6 +147,4 @@ NotesEditVehicleJourney.propTypes = {
   onToggleFootnoteModal: PropTypes.func.isRequired,
   onNotesEditVehicleJourney: PropTypes.func.isRequired,
   filters: PropTypes.object.isRequired
-}
-
-module.exports = NotesEditVehicleJourney
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/ShiftVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/ShiftVehicleJourney.js
index dd0bade39..c1e2de779 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/ShiftVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/ShiftVehicleJourney.js
@@ -1,9 +1,7 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../../actions')
+import React, { PropTypes, Component } from 'react'
+import actions from '../../actions'
 
-class ShiftVehicleJourney extends Component {
+export default class ShiftVehicleJourney extends Component {
   constructor(props) {
     super(props)
     this.state = {
@@ -113,6 +111,4 @@ ShiftVehicleJourney.propTypes = {
   onOpenShiftModal: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired,
   filters: PropTypes.object.isRequired
-}
-
-module.exports = ShiftVehicleJourney
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js b/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js
index a26a9b805..fd2304901 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/components/tools/TimetablesEditVehicleJourney.js
@@ -1,10 +1,8 @@
-var React = require('react')
-var Component = require('react').Component
-var PropTypes = require('react').PropTypes
-var actions = require('../../actions')
-var TimetableSelect2 = require('./select2s/TimetableSelect2')
+import React, { PropTypes, Component } from 'react'
+import actions from '../../actions'
+import TimetableSelect2 from './select2s/TimetableSelect2'
 
-class TimetablesEditVehicleJourney extends Component {
+export default class TimetablesEditVehicleJourney extends Component {
   constructor(props) {
     super(props)
   }
@@ -130,6 +128,4 @@ TimetablesEditVehicleJourney.propTypes = {
   onDeleteCalendarModal: PropTypes.func.isRequired,
   onSelect2Timetable: PropTypes.func.isRequired,
   filters: PropTypes.object.isRequired
-}
-
-module.exports = TimetablesEditVehicleJourney
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/CompanySelect2.js b/app/javascript/vehicle_journeys/components/tools/select2s/CompanySelect2.js
index c1ce0e92a..9c259630d 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/CompanySelect2.js
+++ b/app/javascript/vehicle_journeys/components/tools/select2s/CompanySelect2.js
@@ -1,15 +1,14 @@
-var _ = require('lodash')
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var Select2 = require('react-select2')
+import _ from 'lodash'
+import React, { PropTypes, Component } from 'react'
+import Select2 from 'react-select2'
 
 // get JSON full path
-var origin = window.location.origin
-var path = window.location.pathname.split('/', 3).join('/')
-var line = window.location.pathname.split('/')[4]
+let origin = window.location.origin
+let path = window.location.pathname.split('/', 3).join('/')
+let line = window.location.pathname.split('/')[4]
 
 
-class BSelect4 extends React.Component{
+export default class BSelect4 extends Component {
   constructor(props) {
     super(props)
   }
@@ -62,6 +61,4 @@ class BSelect4 extends React.Component{
 
 const formatRepo = (props) => {
   if(props.text) return props.text
-}
-
-module.exports = BSelect4
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/MissionSelect2.js b/app/javascript/vehicle_journeys/components/tools/select2s/MissionSelect2.js
index 2f49e9980..e4abdd651 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/MissionSelect2.js
+++ b/app/javascript/vehicle_journeys/components/tools/select2s/MissionSelect2.js
@@ -1,20 +1,18 @@
-var _ = require('lodash')
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var Select2 = require('react-select2')
-var humanOID = require('../../../actions').humanOID
+import _ from 'lodash'
+import React, { PropTypes, Component } from 'react'
+import Select2 from 'react-select2'
+import actions from '../../../actions'
 
 // get JSON full path
-var origin = window.location.origin
-var path = window.location.pathname.split('/', 7).join('/')
+let origin = window.location.origin
+let path = window.location.pathname.split('/', 7).join('/')
 
 
-class BSelect4 extends React.Component{
+export default class BSelect4 extends Component {
   constructor(props) {
     super(props)
   }
 
-
   render() {
     return (
       <Select2
@@ -44,7 +42,7 @@ class BSelect4 extends React.Component{
                   item => _.assign(
                     {},
                     item,
-                    { text: "<strong>" + item.published_name + " - " + humanOID(item.object_id) + "</strong><br/><small>" + item.registration_number + "</small>" }
+                    { text: "<strong>" + item.published_name + " - " + actions.humanOID(item.object_id) + "</strong><br/><small>" + item.registration_number + "</small>" }
                   )
                 )
               };
@@ -62,6 +60,4 @@ class BSelect4 extends React.Component{
 
 const formatRepo = (props) => {
   if(props.text) return props.text
-}
-
-module.exports = BSelect4
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/TimetableSelect2.js b/app/javascript/vehicle_journeys/components/tools/select2s/TimetableSelect2.js
index 2248175ab..606bf8511 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/TimetableSelect2.js
+++ b/app/javascript/vehicle_journeys/components/tools/select2s/TimetableSelect2.js
@@ -1,15 +1,14 @@
-var _ = require('lodash')
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var Select2 = require('react-select2')
-var humanOID = require('../../../actions').humanOID
+import _ from 'lodash'
+import React, { PropTypes, Component } from 'react'
+import Select2 from 'react-select2'
+import actions from '../../../actions'
 
 // get JSON full path
 var origin = window.location.origin
 var path = window.location.pathname.split('/', 3).join('/')
 
 
-class BSelect4 extends React.Component{
+export default class BSelect4 extends Component {
   constructor(props) {
     super(props)
   }
@@ -48,7 +47,7 @@ class BSelect4 extends React.Component{
                   item => _.assign(
                     {},
                     item,
-                    {text: '<strong>' + "<span class='fa fa-circle' style='color:" + (item.color ? item.color : '#4B4B4B') + "'></span> " + item.comment + ' - ' + humanOID(item.objectid) + '</strong><br/><small>' + (item.day_types ? item.day_types.match(/[A-Z]?[a-z]+/g).join(', ') : "") + '</small>'}
+                    {text: '<strong>' + "<span class='fa fa-circle' style='color:" + (item.color ? item.color : '#4B4B4B') + "'></span> " + item.comment + ' - ' + actions.humanOID(item.objectid) + '</strong><br/><small>' + (item.day_types ? item.day_types.match(/[A-Z]?[a-z]+/g).join(', ') : "") + '</small>'}
                   )
                 )
               };
@@ -66,6 +65,4 @@ class BSelect4 extends React.Component{
 
 const formatRepo = (props) => {
   if(props.text) return props.text
-}
-
-module.exports = BSelect4
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/VJSelect2.js b/app/javascript/vehicle_journeys/components/tools/select2s/VJSelect2.js
index b9678ea9a..e1af8816d 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/VJSelect2.js
+++ b/app/javascript/vehicle_journeys/components/tools/select2s/VJSelect2.js
@@ -1,15 +1,14 @@
-var _ = require('lodash')
-var React = require('react')
-var PropTypes = require('react').PropTypes
-var Select2 = require('react-select2')
-var humanOID = require('../../../actions').humanOID
+import _ from 'lodash'
+import React, { PropTypes, Component } from 'react'
+import Select2 from 'react-select2'
+import actions from '../../../actions'
 
 // get JSON full path
-var origin = window.location.origin
-var path = window.location.pathname.split('/', 7).join('/')
+let origin = window.location.origin
+let path = window.location.pathname.split('/', 7).join('/')
 
 
-class BSelect4b extends React.Component{
+export default class BSelect4b extends Component {
   constructor(props) {
     super(props)
   }
@@ -43,7 +42,7 @@ class BSelect4b extends React.Component{
                   item => _.assign(
                     {},
                     item,
-                    { id: item.objectid, text: humanOID(item.objectid) }
+                    { id: item.objectid, text: actions.humanOID(item.objectid) }
                   )
                 )
               };
@@ -60,6 +59,4 @@ class BSelect4b extends React.Component{
 
 const formatRepo = (props) => {
   if(props.text) return props.text
-}
-
-module.exports = BSelect4b
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/fr.js b/app/javascript/vehicle_journeys/components/tools/select2s/fr.js
index 20154d412..20154d412 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/select2s/fr.js
+++ b/app/javascript/vehicle_journeys/components/tools/select2s/fr.js
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/ConfirmModal.js b/app/javascript/vehicle_journeys/containers/ConfirmModal.js
index e91ba6bf0..e751a70f6 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/ConfirmModal.js
+++ b/app/javascript/vehicle_journeys/containers/ConfirmModal.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var ConfirmModal = require('../components/ConfirmModal')
+import actions from '../actions'
+import { connect } from 'react-redux'
+import ConfirmModal from '../components/ConfirmModal'
 
 const mapStateToProps = (state) => {
   return {
@@ -27,4 +27,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const ConfirmModalContainer = connect(mapStateToProps, mapDispatchToProps)(ConfirmModal)
 
-module.exports = ConfirmModalContainer
+export default ConfirmModalContainer
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Filters.js b/app/javascript/vehicle_journeys/containers/Filters.js
index 831b47ca1..bec3527f4 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Filters.js
+++ b/app/javascript/vehicle_journeys/containers/Filters.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var Filters = require('../components/Filters')
+import actions from '../actions'
+import { connect } from 'react-redux'
+import Filters from '../components/Filters'
 
 const mapStateToProps = (state) => {
   return {
@@ -45,4 +45,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const FiltersList = connect(mapStateToProps, mapDispatchToProps)(Filters)
 
-module.exports = FiltersList
+export default FiltersList
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Navigate.js b/app/javascript/vehicle_journeys/containers/Navigate.js
index a3eca13c8..f6cd4e2a1 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Navigate.js
+++ b/app/javascript/vehicle_journeys/containers/Navigate.js
@@ -1,7 +1,6 @@
-var React = require('react')
-var connect = require('react-redux').connect
-var actions = require('../actions')
-var NavigateComponent = require('../components/Navigate')
+import actions from '../actions'
+import { connect } from 'react-redux'
+import NavigateComponent from '../components/Navigate'
 
 const mapStateToProps = (state) => {
   return {
@@ -15,4 +14,4 @@ const mapStateToProps = (state) => {
 
 const Navigate = connect(mapStateToProps)(NavigateComponent)
 
-module.exports = Navigate
+export default Navigate
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/SaveVehicleJourneys.js b/app/javascript/vehicle_journeys/containers/SaveVehicleJourneys.js
index c1ce90d38..18f9e994e 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/SaveVehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/containers/SaveVehicleJourneys.js
@@ -1,7 +1,6 @@
-var React = require('react')
-var connect = require('react-redux').connect
-var actions = require('../actions')
-var SaveVehicleJourneysComponent = require('../components/SaveVehicleJourneys')
+import actions from '../actions'
+import { connect } from 'react-redux'
+import SaveVehicleJourneysComponent from '../components/SaveVehicleJourneys'
 
 const mapStateToProps = (state) => {
   return {
@@ -26,4 +25,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const SaveVehicleJourneys = connect(mapStateToProps, mapDispatchToProps)(SaveVehicleJourneysComponent)
 
-module.exports = SaveVehicleJourneys
+export default SaveVehicleJourneys
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/ToggleArrivals.js b/app/javascript/vehicle_journeys/containers/ToggleArrivals.js
index 716485dbf..f6e180f80 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/ToggleArrivals.js
+++ b/app/javascript/vehicle_journeys/containers/ToggleArrivals.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var ToggleArrivals = require('../components/ToggleArrivals')
+import actions from '../actions'
+import { connect } from 'react-redux'
+import ToggleArrivals from '../components/ToggleArrivals'
 
 const mapStateToProps = (state) => {
   return {
@@ -18,4 +18,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const ToggleArrivalsList = connect(mapStateToProps, mapDispatchToProps)(ToggleArrivals)
 
-module.exports = ToggleArrivalsList
+export default ToggleArrivalsList
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Tools.js b/app/javascript/vehicle_journeys/containers/Tools.js
index a4b3056ac..b760b52d6 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/Tools.js
+++ b/app/javascript/vehicle_journeys/containers/Tools.js
@@ -1,6 +1,6 @@
-var connect = require('react-redux').connect
-var ToolsComponent = require('../components/Tools')
-var actions = require('../actions')
+import actions from '../actions'
+import { connect } from 'react-redux'
+import ToolsComponent from '../components/Tools'
 
 const mapStateToProps = (state) => {
   return {
@@ -20,4 +20,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const Tools = connect(mapStateToProps, mapDispatchToProps)(ToolsComponent)
 
-module.exports = Tools
+export default Tools
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/VehicleJourneysList.js b/app/javascript/vehicle_journeys/containers/VehicleJourneysList.js
index f834e4457..38ab9f6d3 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/VehicleJourneysList.js
+++ b/app/javascript/vehicle_journeys/containers/VehicleJourneysList.js
@@ -1,6 +1,6 @@
-var actions = require('../actions')
-var connect = require('react-redux').connect
-var VehicleJourneys = require('../components/VehicleJourneys')
+import actions from '../actions'
+import { connect } from 'react-redux'
+import VehicleJourneys from '../components/VehicleJourneys'
 
 const mapStateToProps = (state) => {
   return {
@@ -29,4 +29,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const VehicleJourneysList = connect(mapStateToProps, mapDispatchToProps)(VehicleJourneys)
 
-module.exports = VehicleJourneysList
+export default VehicleJourneysList
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/AddVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js
index ffe080cdf..b3f777448 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/AddVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/AddVehicleJourney.js
@@ -1,6 +1,6 @@
-var actions = require('../../actions')
-var connect = require('react-redux').connect
-var CreateModal = require('../../components/tools/CreateModal')
+import actions from '../../actions'
+import { connect } from 'react-redux'
+import CreateModal from '../../components/tools/CreateModal'
 
 const mapStateToProps = (state) => {
   return {
@@ -34,4 +34,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const AddVehicleJourney = connect(mapStateToProps, mapDispatchToProps)(CreateModal)
 
-module.exports = AddVehicleJourney
+export default AddVehicleJourney
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/DeleteVehicleJourneys.js b/app/javascript/vehicle_journeys/containers/tools/DeleteVehicleJourneys.js
index c012c9706..d7d315da4 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/DeleteVehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/containers/tools/DeleteVehicleJourneys.js
@@ -1,6 +1,6 @@
-var actions = require('../../actions')
-var connect = require('react-redux').connect
-var DeleteVJComponent = require('../../components/tools/DeleteVehicleJourneys')
+import actions from '../../actions'
+import { connect } from 'react-redux'
+import DeleteVJComponent from '../../components/tools/DeleteVehicleJourneys'
 
 const mapStateToProps = (state) => {
   return {
@@ -19,4 +19,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const DeleteVehicleJourneys = connect(mapStateToProps, mapDispatchToProps)(DeleteVJComponent)
 
-module.exports = DeleteVehicleJourneys
+export default DeleteVehicleJourneys
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/DuplicateVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/DuplicateVehicleJourney.js
index 70e8fde4d..e9ca88040 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/DuplicateVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/DuplicateVehicleJourney.js
@@ -1,6 +1,6 @@
-var actions = require('../../actions')
-var connect = require('react-redux').connect
-var DuplicateVJComponent = require('../../components/tools/DuplicateVehicleJourney')
+import actions from '../../actions'
+import { connect } from 'react-redux'
+import DuplicateVJComponent from '../../components/tools/DuplicateVehicleJourney'
 
 const mapStateToProps = (state) => {
   return {
@@ -27,4 +27,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const DuplicateVehicleJourney = connect(mapStateToProps, mapDispatchToProps)(DuplicateVJComponent)
 
-module.exports = DuplicateVehicleJourney
+export default DuplicateVehicleJourney
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/EditVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/EditVehicleJourney.js
index ac9772b8a..2d480aa0c 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/EditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/EditVehicleJourney.js
@@ -1,6 +1,6 @@
-var connect = require('react-redux').connect
-var EditComponent = require('../../components/tools/EditVehicleJourney')
-var actions = require('../../actions')
+import actions from '../../actions'
+import { connect } from 'react-redux'
+import EditComponent from '../../components/tools/EditVehicleJourney'
 
 const mapStateToProps = (state) => {
   return {
@@ -33,4 +33,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const EditVehicleJourney = connect(mapStateToProps, mapDispatchToProps)(EditComponent)
 
-module.exports = EditVehicleJourney
+export default EditVehicleJourney
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/NotesEditVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/NotesEditVehicleJourney.js
index 1619300d0..5a96ff273 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/NotesEditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/NotesEditVehicleJourney.js
@@ -1,6 +1,6 @@
-var connect = require('react-redux').connect
-var NotesEditComponent = require('../../components/tools/NotesEditVehicleJourney')
-var actions = require('../../actions')
+import actions from '../../actions'
+import { connect } from 'react-redux'
+import NotesEditComponent from '../../components/tools/NotesEditVehicleJourney'
 
 const mapStateToProps = (state) => {
   return {
@@ -30,4 +30,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const NotesEditVehicleJourney = connect(mapStateToProps, mapDispatchToProps)(NotesEditComponent)
 
-module.exports = NotesEditVehicleJourney
+export default NotesEditVehicleJourney
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/ShiftVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/ShiftVehicleJourney.js
index 196f6722a..a4b4fbe39 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/ShiftVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/ShiftVehicleJourney.js
@@ -1,6 +1,6 @@
-var actions = require('../../actions')
-var connect = require('react-redux').connect
-var ShiftVJComponent = require('../../components/tools/ShiftVehicleJourney')
+import actions from '../../actions'
+import { connect } from 'react-redux'
+import ShiftVJComponent from '../../components/tools/ShiftVehicleJourney'
 
 const mapStateToProps = (state) => {
   return {
@@ -27,4 +27,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const ShiftVehicleJourney = connect(mapStateToProps, mapDispatchToProps)(ShiftVJComponent)
 
-module.exports = ShiftVehicleJourney
+export default ShiftVehicleJourney
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/TimetablesEditVehicleJourney.js b/app/javascript/vehicle_journeys/containers/tools/TimetablesEditVehicleJourney.js
index 1cfff407c..62150a06e 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/containers/tools/TimetablesEditVehicleJourney.js
+++ b/app/javascript/vehicle_journeys/containers/tools/TimetablesEditVehicleJourney.js
@@ -1,6 +1,6 @@
-var connect = require('react-redux').connect
-var TimetablesEditComponent = require('../../components/tools/TimetablesEditVehicleJourney')
-var actions = require('../../actions')
+import actions from '../../actions'
+import { connect } from 'react-redux'
+import TimetablesEditComponent from '../../components/tools/TimetablesEditVehicleJourney'
 
 const mapStateToProps = (state) => {
   return {
@@ -34,4 +34,4 @@ const mapDispatchToProps = (dispatch) => {
 
 const TimetablesEditVehicleJourney = connect(mapStateToProps, mapDispatchToProps)(TimetablesEditComponent)
 
-module.exports = TimetablesEditVehicleJourney
+export default TimetablesEditVehicleJourney
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/editMode.js b/app/javascript/vehicle_journeys/reducers/editMode.js
index 2e8af1aa8..bff976804 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/editMode.js
+++ b/app/javascript/vehicle_journeys/reducers/editMode.js
@@ -1,4 +1,4 @@
-const editMode = (state = {}, action ) => {
+export default function editMode(state = {}, action ) {
   switch (action.type) {
     case "ENTER_EDIT_MODE":
       return true
@@ -7,6 +7,4 @@ const editMode = (state = {}, action ) => {
     default:
       return state
   }
-}
-
-module.exports = editMode
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/filters.js b/app/javascript/vehicle_journeys/reducers/filters.js
index b4a70ec08..76fc98cc5 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/filters.js
+++ b/app/javascript/vehicle_journeys/reducers/filters.js
@@ -1,8 +1,8 @@
-var _ = require('lodash')
-var actions = require("../actions")
+import _ from 'lodash'
+import actions from '../actions'
 let newQuery, newInterval
 
-const filters = (state = {}, action) => {
+export default function  filters(state = {}, action) {
   switch (action.type) {
     case 'RESET_FILTERS':
       let interval = {
@@ -70,6 +70,4 @@ const filters = (state = {}, action) => {
     default:
       return state
   }
-}
-
-module.exports = filters
+}
\ No newline at end of file
diff --git a/app/javascript/vehicle_journeys/reducers/index.js b/app/javascript/vehicle_journeys/reducers/index.js
new file mode 100644
index 000000000..bb24aa185
--- /dev/null
+++ b/app/javascript/vehicle_journeys/reducers/index.js
@@ -0,0 +1,20 @@
+import { combineReducers } from 'redux'
+import vehicleJourneys from './vehicleJourneys'
+import pagination from './pagination'
+import modal from './modal'
+import status from './status'
+import filters from './filters'
+import editMode from './editMode'
+import stopPointsList from './stopPointsList'
+
+const vehicleJourneysApp = combineReducers({
+  vehicleJourneys,
+  pagination,
+  modal,
+  status,
+  filters,
+  editMode,
+  stopPointsList
+})
+
+export default vehicleJourneysApp
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/modal.js b/app/javascript/vehicle_journeys/reducers/modal.js
index 1e5ff4294..57f54a144 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/modal.js
+++ b/app/javascript/vehicle_journeys/reducers/modal.js
@@ -1,6 +1,8 @@
-var _ = require('lodash')
+import _ from 'lodash'
+
 let vehicleJourneysModal, newModalProps
-const modal = (state = {}, action) => {
+
+export default function modal(state = {}, action) {
   switch (action.type) {
     case 'OPEN_CONFIRM_MODAL':
       $('#ConfirmModal').modal('show')
@@ -133,6 +135,4 @@ const modal = (state = {}, action) => {
     default:
       return state
   }
-}
-
-module.exports = modal
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/pagination.js b/app/javascript/vehicle_journeys/reducers/pagination.js
index a8189fc97..45c40c4c4 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/pagination.js
+++ b/app/javascript/vehicle_journeys/reducers/pagination.js
@@ -1,5 +1,6 @@
-var _ = require('lodash')
-const pagination = (state = {}, action) => {
+import _ from 'lodash'
+
+export default function pagination(state = {}, action) {
   switch (action.type) {
     case 'RECEIVE_JOURNEY_PATTERNS':
     case 'RECEIVE_VEHICLE_JOURNEYS':
@@ -33,6 +34,4 @@ const toggleOnConfirmModal = (arg = '') =>{
   $('.confirm').each(function(){
     $(this).data('toggle','')
   })
-}
-
-module.exports = pagination
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/status.js b/app/javascript/vehicle_journeys/reducers/status.js
index e658e164e..0bbb05124 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/status.js
+++ b/app/javascript/vehicle_journeys/reducers/status.js
@@ -1,7 +1,7 @@
-var _ = require('lodash')
-var actions = require("../actions")
+import _ from 'lodash'
+import actions from '../actions'
 
-const status = (state = {}, action) => {
+export default function status(state = {}, action) {
   switch (action.type) {
     case 'UNAVAILABLE_SERVER':
       return _.assign({}, state, {fetchSuccess: false})
@@ -14,6 +14,4 @@ const status = (state = {}, action) => {
     default:
       return state
   }
-}
-
-module.exports = status
+}
\ No newline at end of file
diff --git a/app/javascript/vehicle_journeys/reducers/stopPointsList.js b/app/javascript/vehicle_journeys/reducers/stopPointsList.js
new file mode 100644
index 000000000..9b22e08f2
--- /dev/null
+++ b/app/javascript/vehicle_journeys/reducers/stopPointsList.js
@@ -0,0 +1,6 @@
+export default function stopPointsList(state = [], action) {
+  switch (action.type) {
+    default:
+      return state
+  }
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js b/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js
index 969b2ddd8..775fefdca 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/reducers/vehicleJourneys.js
+++ b/app/javascript/vehicle_journeys/reducers/vehicleJourneys.js
@@ -1,5 +1,5 @@
-var _ = require('lodash')
-var actions = require("../actions")
+import _ from 'lodash'
+import actions from '../actions'
 
 const vehicleJourney= (state = {}, action, keep) => {
   switch (action.type) {
@@ -102,7 +102,7 @@ const vehicleJourney= (state = {}, action, keep) => {
   }
 }
 
-const vehicleJourneys = (state = [], action) => {
+export default function vehicleJourneys(state = [], action) {
   switch (action.type) {
     case 'RECEIVE_VEHICLE_JOURNEYS':
       return [...action.json]
@@ -224,6 +224,4 @@ const vehicleJourneys = (state = [], action) => {
     default:
       return state
   }
-}
-
-module.exports = vehicleJourneys
+}
\ No newline at end of file
diff --git a/app/views/calendars/index.html.slim b/app/views/calendars/index.html.slim
index 24ed15484..d3168fa3d 100644
--- a/app/views/calendars/index.html.slim
+++ b/app/views/calendars/index.html.slim
@@ -49,4 +49,4 @@
         .col-lg-12
           = replacement_msg t('calendars.search_no_results')
 
-= javascript_include_tag 'filters/calendar.js'
+= javascript_pack_tag 'date_filters'
diff --git a/app/views/compliance_check_sets/_filters.html.slim b/app/views/compliance_check_sets/_filters.html.slim
index c5c968c6a..3051bda64 100644
--- a/app/views/compliance_check_sets/_filters.html.slim
+++ b/app/views/compliance_check_sets/_filters.html.slim
@@ -20,4 +20,4 @@
 
   .actions
     = link_to t('actions.erase'), @compliance_checks_sets, class: 'btn btn-link'
-    = f.submit t('actions.filter'), class: 'btn btn-default', id: 'referential_filter_btn'
+    = f.submit t('actions.filter'), class: 'btn btn-default', id: 'compliance_check_set_filter_btn'
diff --git a/app/views/compliance_control_sets/index.html.slim b/app/views/compliance_control_sets/index.html.slim
index 22c65dabc..68173fee9 100644
--- a/app/views/compliance_control_sets/index.html.slim
+++ b/app/views/compliance_control_sets/index.html.slim
@@ -53,4 +53,4 @@
           = replacement_msg t('compliance_control_sets.search_no_results')
 
 
-= javascript_include_tag 'filters/compliance_control_set.js'
\ No newline at end of file
+= javascript_pack_tag 'date_filters'
\ No newline at end of file
diff --git a/app/views/imports/index.html.slim b/app/views/imports/index.html.slim
index a6da730f1..cd236ef36 100644
--- a/app/views/imports/index.html.slim
+++ b/app/views/imports/index.html.slim
@@ -48,4 +48,4 @@
         .col-lg-12
           = replacement_msg t('imports.search_no_results')
 
-= javascript_include_tag 'filters/import.js'
+= javascript_pack_tag 'date_filters'
diff --git a/app/views/journey_patterns_collections/show.html.slim b/app/views/journey_patterns_collections/show.html.slim
index bce4f28b5..8c0950536 100644
--- a/app/views/journey_patterns_collections/show.html.slim
+++ b/app/views/journey_patterns_collections/show.html.slim
@@ -20,4 +20,4 @@
   | window.journeyPatternsPerPage = #{@ppage};
   | window.perms = #{raw @perms}
 
-= javascript_include_tag 'es6_browserified/journey_patterns/index.js'
+= javascript_pack_tag 'journey_patterns/index.js'
diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim
index d6a22c4f8..1bc9de136 100644
--- a/app/views/layouts/application.html.slim
+++ b/app/views/layouts/application.html.slim
@@ -11,7 +11,9 @@ html lang=I18n.locale
     = stylesheet_link_tag 'base'
     = stylesheet_link_tag 'application'
 
+    = javascript_pack_tag 'application'
     = javascript_include_tag 'application'
+    
 
 
   body
diff --git a/app/views/routes/_form.html.slim b/app/views/routes/_form.html.slim
index 24c0d3c4a..29e5be3d2 100644
--- a/app/views/routes/_form.html.slim
+++ b/app/views/routes/_form.html.slim
@@ -30,4 +30,4 @@
   | window.I18n = #{(I18n.backend.send(:translations)[I18n.locale].to_json).html_safe};
 
 / StopPoints Reactux component
-= javascript_include_tag 'es6_browserified/itineraries/index.js'
+= javascript_pack_tag 'routes/edit.js'
diff --git a/app/views/routes/show.html.slim b/app/views/routes/show.html.slim
index edc2d254b..83ee62386 100644
--- a/app/views/routes/show.html.slim
+++ b/app/views/routes/show.html.slim
@@ -76,4 +76,5 @@
 
 = javascript_tag do
   | window.route = "#{URI.escape(route_json_for_edit(@route))}"
-= javascript_include_tag 'es6_browserified/itineraries/show.js'
+
+= javascript_pack_tag 'routes/show.js'
\ No newline at end of file
diff --git a/app/views/time_tables/edit.html.slim b/app/views/time_tables/edit.html.slim
index cc6f31489..bf7573c71 100644
--- a/app/views/time_tables/edit.html.slim
+++ b/app/views/time_tables/edit.html.slim
@@ -13,4 +13,4 @@
   | window.actionType = "#{raw params[:action]}";
   | window.I18n = #{(I18n.backend.send(:translations)[I18n.locale].to_json).html_safe};
 
-= javascript_include_tag 'es6_browserified/time_tables/index.js'
+= javascript_pack_tag 'time_tables/edit.js'
diff --git a/app/views/time_tables/index.html.slim b/app/views/time_tables/index.html.slim
index b984f95c8..c71a214f1 100644
--- a/app/views/time_tables/index.html.slim
+++ b/app/views/time_tables/index.html.slim
@@ -69,4 +69,4 @@
 = javascript_tag do
   | window.I18n = #{(I18n.backend.send(:translations).to_json).html_safe};
 
-= javascript_include_tag 'filters/time_table.js'
+= javascript_pack_tag 'date_filters'
diff --git a/app/views/vehicle_journeys/index.html.slim b/app/views/vehicle_journeys/index.html.slim
index 4efc34eaa..f88afc398 100644
--- a/app/views/vehicle_journeys/index.html.slim
+++ b/app/views/vehicle_journeys/index.html.slim
@@ -25,4 +25,4 @@
   | window.perms = #{raw @perms};
   | window.I18n = #{(I18n.backend.send(:translations).to_json).html_safe};
 
-= javascript_include_tag 'es6_browserified/vehicle_journeys/index.js'
+= javascript_pack_tag 'vehicle_journeys/index.js'
diff --git a/app/views/workbenches/show.html.slim b/app/views/workbenches/show.html.slim
index fd72979ea..32a933cc2 100644
--- a/app/views/workbenches/show.html.slim
+++ b/app/views/workbenches/show.html.slim
@@ -78,4 +78,4 @@
 = javascript_tag do
   | window.I18n = #{(I18n.backend.send(:translations).to_json).html_safe};
 
-= javascript_include_tag 'filters/workbench.js'
+= javascript_pack_tag 'date_filters'
\ No newline at end of file
diff --git a/config/application.rb b/config/application.rb
index 05a9752b6..169c13e10 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -28,7 +28,7 @@ module ChouetteIhm
     config.i18n.default_locale = ENV.fetch('RAILS_LOCALE', 'fr').to_sym
 
     # Configure Browserify to use babelify to compile ES6
-    config.browserify_rails.commandline_options = "-t [ babelify --presets [ react es2015 ] ]"
+    # config.browserify_rails.commandline_options = "-t [ babelify --presets [ react es2015 ] ]"
 
     config.active_record.observers = [:route_observer, :calendar_observer]
     config.active_record.raise_in_transactional_callbacks = true
@@ -40,9 +40,9 @@ module ChouetteIhm
         Rails.application.config.assets.precompile += %w(spec_helper.js)
         # Make sure Browserify is triggered when
         # asked to serve javascript spec files
-        config.browserify_rails.paths << lambda { |p|
-            p.start_with?(Rails.root.join("spec/javascripts").to_s)
-        }
+        # config.browserify_rails.paths << lambda { |p|
+        #     p.start_with?(Rails.root.join("spec/javascripts").to_s)
+        # }
     end
   end
 end
diff --git a/config/environments/production.rb b/config/environments/production.rb
index 794c8bd88..8e21f0919 100644
--- a/config/environments/production.rb
+++ b/config/environments/production.rb
@@ -144,5 +144,5 @@ Rails.application.configure do
   config.rails_host = ENV.fetch('RAILS_HOST')
 
   # Set node env for browserify-rails
-  config.browserify_rails.node_env = "production"
+  # config.browserify_rails.node_env = "production"
 end
diff --git a/config/webpack/dev.js b/config/webpack/dev.js
new file mode 100644
index 000000000..97b6a77ff
--- /dev/null
+++ b/config/webpack/dev.js
@@ -0,0 +1,12 @@
+const environment = require('./environment')
+
+environment.plugins.set(
+  'UglifyJs',
+  new webpack.optimize.UglifyJsPlugin({
+    compress: {
+      warnings: false
+    }
+  })
+)
+
+module.exports = environment.toWebpackConfig()
\ No newline at end of file
diff --git a/config/webpack/development.js b/config/webpack/development.js
new file mode 100644
index 000000000..b66885a3c
--- /dev/null
+++ b/config/webpack/development.js
@@ -0,0 +1,3 @@
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()
\ No newline at end of file
diff --git a/config/webpack/environment.js b/config/webpack/environment.js
new file mode 100644
index 000000000..ae1deb610
--- /dev/null
+++ b/config/webpack/environment.js
@@ -0,0 +1,36 @@
+const { environment } = require('@rails/webpacker')
+const webpack = require('webpack')
+const UglifyJsPlugin = require('uglify-js')
+const CleanWebpackPlugin = require('clean-webpack-plugin')
+
+let pathsToClean = [
+  'public/packs'
+];
+
+// the clean options to use
+let cleanOptions = {
+  root: __dirname + '/../../',
+  verbose: true,
+  dry: false
+};
+
+
+environment.plugins.set(
+  'CleanWebpack',
+  new CleanWebpackPlugin(pathsToClean, cleanOptions)
+)
+
+// environment.plugins.set('Provide', new webpack.ProvidePlugin({
+//     $: 'jquery',
+//     jQuery: 'jquery',
+//     jquery: 'jquery'
+//   })
+// )
+
+// const config = environment.toWebpackConfig()
+
+// config.resolve.alias = {
+//   jquery: "jquery/src/jquery",
+// }
+
+module.exports = environment
\ No newline at end of file
diff --git a/config/webpack/production.js b/config/webpack/production.js
new file mode 100644
index 000000000..97b6a77ff
--- /dev/null
+++ b/config/webpack/production.js
@@ -0,0 +1,12 @@
+const environment = require('./environment')
+
+environment.plugins.set(
+  'UglifyJs',
+  new webpack.optimize.UglifyJsPlugin({
+    compress: {
+      warnings: false
+    }
+  })
+)
+
+module.exports = environment.toWebpackConfig()
\ No newline at end of file
diff --git a/config/webpack/staging.js b/config/webpack/staging.js
new file mode 100644
index 000000000..97b6a77ff
--- /dev/null
+++ b/config/webpack/staging.js
@@ -0,0 +1,12 @@
+const environment = require('./environment')
+
+environment.plugins.set(
+  'UglifyJs',
+  new webpack.optimize.UglifyJsPlugin({
+    compress: {
+      warnings: false
+    }
+  })
+)
+
+module.exports = environment.toWebpackConfig()
\ No newline at end of file
diff --git a/config/webpack/test.js b/config/webpack/test.js
new file mode 100644
index 000000000..81269f651
--- /dev/null
+++ b/config/webpack/test.js
@@ -0,0 +1,3 @@
+const environment = require('./environment')
+
+module.exports = environment.toWebpackConfig()
diff --git a/config/webpacker.yml b/config/webpacker.yml
new file mode 100644
index 000000000..be1105bad
--- /dev/null
+++ b/config/webpacker.yml
@@ -0,0 +1,81 @@
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default
+  source_path: app/javascript
+  source_entry_path: packs
+  public_output_path: packs
+  cache_path: tmp/cache/webpacker
+
+  # Additional paths webpack should lookup modules
+  # ['app/assets', 'engine/foo/app/assets']
+  resolved_paths: []
+
+  # Reload manifest.json on all requests so we reload latest compiled packs
+  cache_manifest: false
+
+  extensions:
+    - .coffee
+    - .erb
+    - .js
+    - .jsx
+    - .ts
+    - .vue
+    - .sass
+    - .scss
+    - .css
+    - .png
+    - .svg
+    - .gif
+    - .jpeg
+    - .jpg
+
+development:
+  <<: *default
+  compile: true
+
+  # Reference: https://webpack.js.org/configuration/dev-server/
+  dev_server:
+    https: false
+    host: localhost
+    port: 3035
+    public: localhost:3035
+    hmr: false
+    # Inline should be set to true if using HMR
+    inline: true
+    overlay: true
+    disable_host_check: true
+    use_local_ip: false
+
+test:
+  <<: *default
+  compile: true
+
+  # Compile test packs to a separate directory
+  public_output_path: packs-test
+
+production:
+  <<: *default
+
+  # Production depends on precompilation of packs prior to booting for performance.
+  compile: false
+
+  # Cache manifest.json for performance
+  cache_manifest: true
+
+dev:
+  <<: *default
+
+  # Production depends on precompilation of packs prior to booting for performance.
+  compile: false
+
+  # Cache manifest.json for performance
+  cache_manifest: true
+
+staging:
+  <<: *default
+
+  # Production depends on precompilation of packs prior to booting for performance.
+  compile: false
+
+  # Cache manifest.json for performance
+  cache_manifest: true
diff --git a/lib/tasks/ci.rake b/lib/tasks/ci.rake
index 7fe289ed6..633bf82ad 100644
--- a/lib/tasks/ci.rake
+++ b/lib/tasks/ci.rake
@@ -32,11 +32,7 @@ namespace :ci do
   end
 
   task :spec do
-    sh "bundle exec rspec --profile"
-  end
-
-  task :teaspoon do
-    sh "RAILS_ENV=test bundle exec rake teaspoon"
+    sh "bundle exec rake spec"
   end
 
   desc "Deploy after CI"
@@ -55,4 +51,4 @@ namespace :ci do
 end
 
 desc "Run continuous integration tasks (spec, ...)"
-task :ci => ["ci:setup", "ci:spec", "ci:teaspoon", "cucumber", "ci:check_security", "ci:deploy", "ci:clean"]
+task :ci => ["ci:setup", "ci:spec", "cucumber", "ci:check_security", "ci:deploy", "ci:clean"]
diff --git a/package.json b/package.json
index 9a46403f3..1f6f354b9 100644
--- a/package.json
+++ b/package.json
@@ -1,31 +1,35 @@
 {
   "name": "stif-boiv",
   "dependencies": {
+    "@rails/webpacker": "3.0.2",
     "babel-polyfill": "6.16.0",
     "babel-preset-es2015": "6.18.0",
-    "babel-preset-react": "6.16.0",
+    "babel-preset-react": "6.24.1",
     "babelify": "7.3.0",
-    "browserify": "13.1.1",
-    "browserify-incremental": "3.1.1",
+    "coffeescript": "1.12.7",
+    "jquery": "3.2.1",
     "lodash": "4.17.4",
-    "promise-polyfill": "^6.0.2",
+    "promise-polyfill": "6.0.2",
     "react": "15.3.2",
     "react-dom": "15.3.2",
     "react-redux": "4.4.5",
-    "react-select2": "4.0.2",
+    "react-select2": "4.0.3",
     "redux": "3.6.0",
-    "whatwg-fetch": "2.0.3",
     "redux-logger": "2.7.4",
+    "redux-promise": "0.5.3",
     "redux-thunk": "2.1.0",
-    "redux-promise": "0.5.3"
+    "whatwg-fetch": "2.0.3"
   },
   "license": "MIT",
   "engines": {
-    "node": "5.12.0"
+    "node": "6.11.4"
   },
   "devDependencies": {
+    "clean-webpack-plugin": "0.1.17",
     "es6-object-assign": "1.0.3",
     "react-addons-test-utils": "15.3.2",
-    "sinon": "1.17.7"
+    "sinon": "1.17.7",
+    "uglify-js": "3.1.3",
+    "webpack-dev-server": "2.9.1"
   }
 }
diff --git a/spec/fixtures/target_OFFRE_TRANSDEV_20170301122517.zip b/spec/fixtures/target_OFFRE_TRANSDEV_20170301122517.zip
new file mode 100644
index 000000000..efdcff539
--- /dev/null
+++ b/spec/fixtures/target_OFFRE_TRANSDEV_20170301122517.zip
diff --git a/spec/fixtures/target_OFFRE_TRANSDEV_20170301122519.zip b/spec/fixtures/target_OFFRE_TRANSDEV_20170301122519.zip
new file mode 100644
index 000000000..5c49ab225
--- /dev/null
+++ b/spec/fixtures/target_OFFRE_TRANSDEV_20170301122519.zip
diff --git a/spec/javascripts/journey_patterns/actions_spec.js b/spec/javascript/journey_patterns/actions_spec.js
index 07f83ca1b..75f2682b1 100644
--- a/spec/javascripts/journey_patterns/actions_spec.js
+++ b/spec/javascript/journey_patterns/actions_spec.js
@@ -1,4 +1,4 @@
-var actions = require('es6_browserified/journey_patterns/actions')
+import actions from '../../app/javascript/journey_patterns/actions'
 
 const dispatch = function(){}
 const currentPage = 1
diff --git a/spec/javascripts/journey_patterns/reducers/journey_patterns_spec.js b/spec/javascript/journey_patterns/reducers/journey_patterns_spec.js
index df288e530..13a88e477 100644
--- a/spec/javascripts/journey_patterns/reducers/journey_patterns_spec.js
+++ b/spec/javascript/journey_patterns/reducers/journey_patterns_spec.js
@@ -1,4 +1,5 @@
-var jpReducer = require('es6_browserified/journey_patterns/reducers/journeyPatterns')
+import jpReducer from '../../../app/javascript/journey_patterns/reducers/journeyPatterns'
+
 let state = []
 let fakeStopPoints = [{
   area_type : "lda",
diff --git a/spec/javascripts/journey_patterns/reducers/modal_spec.js b/spec/javascript/journey_patterns/reducers/modal_spec.js
index 0bc7c9240..a5d215a9c 100644
--- a/spec/javascripts/journey_patterns/reducers/modal_spec.js
+++ b/spec/javascript/journey_patterns/reducers/modal_spec.js
@@ -1,4 +1,4 @@
-var modalReducer = require('es6_browserified/journey_patterns/reducers/modal')
+import modalReducer from '../../../app/javascript/journey_patterns/reducers/modal'
 
 let state = {}
 
diff --git a/spec/javascripts/journey_patterns/reducers/pagination_spec.js b/spec/javascript/journey_patterns/reducers/pagination_spec.js
index d0f9fef47..78a09eace 100644
--- a/spec/javascripts/journey_patterns/reducers/pagination_spec.js
+++ b/spec/javascript/journey_patterns/reducers/pagination_spec.js
@@ -1,4 +1,4 @@
-var reducer = require('es6_browserified/journey_patterns/reducers/pagination')
+import reducer from '../../../app/javascript/journey_patterns/reducers/pagination'
 
 const diff = 1
 let state = {
diff --git a/spec/javascripts/journey_patterns/reducers/status_spec.js b/spec/javascript/journey_patterns/reducers/status_spec.js
index 91cbbb0b8..bf27a3d05 100644
--- a/spec/javascripts/journey_patterns/reducers/status_spec.js
+++ b/spec/javascript/journey_patterns/reducers/status_spec.js
@@ -1,4 +1,4 @@
-var statusReducer = require('es6_browserified/journey_patterns/reducers/status')
+import statusReducer from '../../../app/javascript/journey_patterns/reducers/status'
 
 let state = {}
 
diff --git a/spec/javascripts/itineraries/actions_spec.js b/spec/javascript/routes/actions_spec.js
index 2bae59987..490b1b615 100644
--- a/spec/javascripts/itineraries/actions_spec.js
+++ b/spec/javascript/routes/actions_spec.js
@@ -1,4 +1,4 @@
-var actions = require('es6_browserified/itineraries/actions')
+import actions from '../../app/javascript/routes/actions'
 
 describe('actions', () => {
   it('should create an action to add a stop', () => {
diff --git a/spec/javascripts/itineraries/reducers/stop_points_spec.js b/spec/javascript/routes/reducers/stop_points_spec.js
index 0331a424c..c9d76a29e 100644
--- a/spec/javascripts/itineraries/reducers/stop_points_spec.js
+++ b/spec/javascript/routes/reducers/stop_points_spec.js
@@ -1,4 +1,4 @@
-var stopPointsReducer = require('es6_browserified/itineraries/reducers/stopPoints')
+import stopPointsReducer from '../../../app/javascript/routes/reducers/stopPoints'
 
 let state = []
 
diff --git a/spec/javascripts/spec_helper.coffee b/spec/javascript/spec_helper.coffee
index 9ff516885..9ff516885 100644
--- a/spec/javascripts/spec_helper.coffee
+++ b/spec/javascript/spec_helper.coffee
diff --git a/spec/javascripts/spec_helper.js b/spec/javascript/spec_helper.js
index a0285cccf..b6fcb7d8d 100644
--- a/spec/javascripts/spec_helper.js
+++ b/spec/javascript/spec_helper.js
@@ -6,7 +6,7 @@
 // require support/your-support-file
 //= require jquery
 //= require bootstrap-sass-official
-require('es6-object-assign').polyfill();
+import { polyfill } from 'es6-object-assign'
 //
 // PhantomJS (Teaspoons default driver) doesn't have support for Function.prototype.bind, which has caused confusion.
 // Use this polyfill to avoid the confusion.
diff --git a/spec/javascripts/time_table/actions_spec.js b/spec/javascript/time_table/actions_spec.js
index a7344586d..4c1d4e200 100644
--- a/spec/javascripts/time_table/actions_spec.js
+++ b/spec/javascript/time_table/actions_spec.js
@@ -1,4 +1,4 @@
-var actions = require('es6_browserified/time_tables/actions')
+import actions from '../../app/javascript/time_tables/actions'
 const dispatch = function(){}
 const dayTypes = [true, true, true, true, true, true, true]
 const day = {
diff --git a/spec/javascripts/time_table/reducers/metas_spec.js b/spec/javascript/time_table/reducers/metas_spec.js
index 5ec7a0034..8806cc1cf 100644
--- a/spec/javascripts/time_table/reducers/metas_spec.js
+++ b/spec/javascript/time_table/reducers/metas_spec.js
@@ -1,4 +1,4 @@
-var metasReducer = require('es6_browserified/time_tables/reducers/metas')
+import metasReducer from '../../../app/javascript/time_tables/reducers/metas'
 
 let state = {}
 
diff --git a/spec/javascripts/time_table/reducers/modal_spec.js b/spec/javascript/time_table/reducers/modal_spec.js
index 05d58a138..f627ca53b 100644
--- a/spec/javascripts/time_table/reducers/modal_spec.js
+++ b/spec/javascript/time_table/reducers/modal_spec.js
@@ -1,4 +1,4 @@
-var modalReducer = require('es6_browserified/time_tables/reducers/modal')
+import modalReducer from '../../../app/javascript/time_tables/reducers/modal'
 
 let state = {}
 
diff --git a/spec/javascripts/time_table/reducers/pagination_spec.js b/spec/javascript/time_table/reducers/pagination_spec.js
index 3c1edb9c5..23135d98b 100644
--- a/spec/javascripts/time_table/reducers/pagination_spec.js
+++ b/spec/javascript/time_table/reducers/pagination_spec.js
@@ -1,4 +1,4 @@
-var paginationReducer = require('es6_browserified/time_tables/reducers/pagination')
+import paginationReducer from '../../../app/javascript/time_tables/reducers/pagination'
 
 const dispatch = function(){}
 
diff --git a/spec/javascripts/time_table/reducers/status_spec.js b/spec/javascript/time_table/reducers/status_spec.js
index f000324cc..15b733703 100644
--- a/spec/javascripts/time_table/reducers/status_spec.js
+++ b/spec/javascript/time_table/reducers/status_spec.js
@@ -1,4 +1,4 @@
-var statusReducer = require('es6_browserified/time_tables/reducers/status')
+import statusReducer from '../../../app/javascript/time_tables/reducers/status'
 
 let state = {}
 
diff --git a/spec/javascripts/time_table/reducers/timetable_spec.js b/spec/javascript/time_table/reducers/timetable_spec.js
index 21f6d236d..f5e5c0a36 100644
--- a/spec/javascripts/time_table/reducers/timetable_spec.js
+++ b/spec/javascript/time_table/reducers/timetable_spec.js
@@ -1,5 +1,5 @@
 require('whatwg-fetch')
-var timetableReducer = require('es6_browserified/time_tables/reducers/timetable')
+import timetableReducer from '../../../app/javascript/time_tables/reducers/timetable'
 
 let state = {}
 const dispatch = function(){}
diff --git a/spec/javascripts/vehicle_journeys/actions_spec.js b/spec/javascript/vehicle_journeys/actions_spec.js
index 707ae22cb..b847893d2 100644
--- a/spec/javascripts/vehicle_journeys/actions_spec.js
+++ b/spec/javascript/vehicle_journeys/actions_spec.js
@@ -1,4 +1,4 @@
-var actions = require('es6_browserified/vehicle_journeys/actions')
+import actions from 'vehicle_journeys/actions/index'
 
 const dispatch = function(){}
 const currentPage = 1
diff --git a/spec/javascripts/vehicle_journeys/reducers/filters_spec.js b/spec/javascript/vehicle_journeys/reducers/filters_spec.js
index 0a6729c8b..43f03ab30 100644
--- a/spec/javascripts/vehicle_journeys/reducers/filters_spec.js
+++ b/spec/javascript/vehicle_journeys/reducers/filters_spec.js
@@ -1,4 +1,4 @@
-var statusReducer = require('es6_browserified/vehicle_journeys/reducers/filters')
+import statusReducer from '../../../app/javascript/vehicle_journeys/reducers/filters'
 
 let state = {}
 
diff --git a/spec/javascripts/vehicle_journeys/reducers/modal_spec.js b/spec/javascript/vehicle_journeys/reducers/modal_spec.js
index 4530b5ee7..210ac9e78 100644
--- a/spec/javascripts/vehicle_journeys/reducers/modal_spec.js
+++ b/spec/javascript/vehicle_journeys/reducers/modal_spec.js
@@ -1,4 +1,4 @@
-var modalReducer = require('es6_browserified/vehicle_journeys/reducers/modal')
+import modalReducer from '../../app/javascript/vehicle_journeys/reducers/modal'
 
 let state = {}
 
diff --git a/spec/javascripts/vehicle_journeys/reducers/pagination_spec.js b/spec/javascript/vehicle_journeys/reducers/pagination_spec.js
index 57417a3b9..0ec2dbea2 100644
--- a/spec/javascripts/vehicle_journeys/reducers/pagination_spec.js
+++ b/spec/javascript/vehicle_journeys/reducers/pagination_spec.js
@@ -1,4 +1,4 @@
-var reducer = require('es6_browserified/vehicle_journeys/reducers/pagination')
+import reducer from '../../../app/javascript/vehicle_journeys/reducers/pagination'
 
 const diff = 1
 let state = {
diff --git a/spec/javascripts/vehicle_journeys/reducers/status_spec.js b/spec/javascript/vehicle_journeys/reducers/status_spec.js
index d48d48f4a..7dee88c97 100644
--- a/spec/javascripts/vehicle_journeys/reducers/status_spec.js
+++ b/spec/javascript/vehicle_journeys/reducers/status_spec.js
@@ -1,4 +1,4 @@
-var statusReducer = require('es6_browserified/vehicle_journeys/reducers/status')
+import statusReducer from '../../../app/javascript/vehicle_journeys/reducers/status'
 
 let state = {}
 
diff --git a/spec/javascripts/vehicle_journeys/reducers/vehicle_journeys_spec.js b/spec/javascript/vehicle_journeys/reducers/vehicle_journeys_spec.js
index 3b2137a2a..92f75206c 100644
--- a/spec/javascripts/vehicle_journeys/reducers/vehicle_journeys_spec.js
+++ b/spec/javascript/vehicle_journeys/reducers/vehicle_journeys_spec.js
@@ -1,4 +1,4 @@
-var vjReducer = require('es6_browserified/vehicle_journeys/reducers/vehicleJourneys')
+import vjReducer from '../../../app/javascript/vehicle_journeys/reducers/vehicleJourneys'
 
 let state = []
 let stateModal = {
diff --git a/spec/teaspoon_env.rb b/spec/teaspoon_env.rb
index d9dd2cc47..da6697b28 100644
--- a/spec/teaspoon_env.rb
+++ b/spec/teaspoon_env.rb
@@ -10,11 +10,11 @@ Teaspoon.configure do |config|
 
   # Paths that will be appended to the Rails assets paths
   # Note: Relative to `config.root`.
-  config.asset_paths = ["spec/javascripts", "spec/javascripts/stylesheets"]
+  config.asset_paths = ["spec/javascript", "spec/javascript/stylesheets"]
 
   # Fixtures are rendered through a controller, which allows using HAML, RABL/JBuilder, etc. Files in these paths will
   # be rendered as fixtures.
-  config.fixture_paths = ["spec/javascripts/fixtures"]
+  config.fixture_paths = ["spec/javascript/fixtures"]
 
   # SUITES
   #
@@ -38,7 +38,7 @@ Teaspoon.configure do |config|
 
     # Specify a file matcher as a regular expression and all matching files will be loaded when the suite is run. These
     # files need to be within an asset path. You can add asset paths using the `config.asset_paths`.
-    suite.matcher = "{spec/javascripts,app/assets}/**/*_spec.{js,js.coffee,coffee}"
+    suite.matcher = "{spec/javascript,app/javascript}/**/*_spec.{js,js.coffee,coffee}"
 
     # Load additional JS files, but requiring them in your spec helper is the preferred way to do this.
     #suite.javascripts = []