Javascript

Most of the time, the JavaScript of that kind of project is pretty limited. It's more something like toggling classes than developing a true SPA.

jQuery

jQuery is still in the place and we don't have to be afraid to use it for DOM manipulation in the sake of retro-compatibility. By default, it's already called with a CDN on the project index.html. If you don't need it, simply override the default template.

Webpack

By using Webpack in the toolbox-utils, it allows you to use the ES6 import instead of bundling your dependencies using the toolbox.json.

Component's script

Because a JavaScript piece of code is often related to a specific component, simply put it in the component's directory. Then, import it in the JavaScript entry point base.js and “voilà !”.

./assets/components/atoms/toggle/toggle.js

/* globals $ */

export default () => {
  $('.toggle').on('click', () => {
    $('.nav').toggleClass('open');
  });
};

./assets/components/base.js

/* globals jQuery */

import toggle from './atoms/toggle/toggle.js';

const init = () => {
  toggle();
};

// Will init the scripts outside of Toolbox
if (undefined === window.sources) {
  (($) => { $(document).ready(() => init()); })(jQuery);
}

// Will init the scripts inside of Toolbox
document.addEventListener('ToolboxReady', () => init());

Linting

As for our styles, to keep things consistent, we are using Eslint with the standard Airbnb rules set. You can also change it directly inside the package.json. Be also sure that your editor is properly set to display the warnings.

Next step

Now that we made the tour of the development workflow, you can start writing a bit of documentation.