---
title: JS Architcture
section-title: JS Documentation
docs: true

navgroup: documentation
navsub: docs-js
navactive: js-architecture

wip: true
---

{{#markdown}}

<a name="philosophy"></a>
## JavaScript Philosophy

We are currently transitioning between a legacy JavaScript structure, to a more modular dependency managed approach.

This approach uses a tool called [Browserify](http://browserify.org/), which handles the module bundling by defining your dependencies in each of your JavaScript files.

We also use [Babel](https://babeljs.io/) to allow us to use the latest JavaScript syntax (ES6) while still providing support for older browsers.

All of our JavaScript workflow tasks are handled by Gulp.

<hr class="sectionSplitter">

<a name="structure"></a>
## JavaScript Structure

All of our new-style JavaScript should go into the `js/modules` folder.

JavaScript should be structured so that there is a clear `export` at the base of the file, so that it is clear what is being exported from the module.

You should **always** provide a comment at the top of the module explaining what it is, how it relates to the site and examples of places it is used.


<hr class="sectionSplitter">

<a name="polyfills"></a>
## Polyfills

To support older browsers, we use a service called [Polyfill.io](https://cdn.polyfill.io/v2/docs/).

In short, Polyfill.io reads the User-Agent header of each request and returns polyfills that are suitable for the requesting browser.

As any downtime for our site could potentially cost us a lot of revenue, we also need to ensure that should polyfill.io not be available – for whatever reason – we have provided a fallback for their service.  To do this, we use a small script that attempts to load the service via their CDN, and should that fail to load, we instead load in a local script of polyfills we maintain on our server.

Once the polyfills have loaded, we then run the rest of our bundled JavaScript and load in the JUST EAT legacy script files (these are files that we will convert over to our new module syntax as we get chance).


<hr class="sectionSplitter">

<a name="libs"></a>
## Libraries

If you need to add any 3rd party library code, it should be placed in the [assets/src/js/libs/](https://github.com/trykickoff/kickoff/tree/master/assets/src/js/libs) folder.

Our aim is to keep our JavaScript as lightweight as possible.  Therefore, before adding a library, think about the value it is giving the project and weigh it up against it’s filesize footprint.

Currently, we use the following libraries:

---

<a name="js-modernizr"></a>
### Modernizr

We use a custom build of Modernizr configured to detect some commonly used CSS features.

You may wish to extend this [custom Modernizr build](http://www.modernizr.com/download/) and replace the current version.  To do this, ensure you copy the url in the current [modernizr.min.js](https://github.je-labs.com/I18N-Production-ROTW/ConsumerWeb/blob/master/src/ConsumerWeb/Assets/src/js/libs/modernizr.min.js) so that the current tests are preserved in your new custom build.

Modernizr is included in the `HEAD` of layout templates to ensure it runs before any CSS rules that it may influence are loaded.

For full information on using Modernizr, see [their documentation](http://modernizr.com).

---

<a name="js-qwery"></a>
### Qwery

We use Qwery to provide developers a simple DOM selection utlility.  It is extremely lightweight and all it does is select DOM elements by providing selection criteria (similar to other selector libraries such as jQuery’s Sizzle).



{{/markdown}}