Pond5 Frontend

Gulp

• Processes static assets

CSS

• Written in LESS
• Run through Autoprefixer

JS

• Written in ES6/7
• Run through Babel

Images

• CSS sprites generated for icons

Gulp #2

PHP

• MVC framework gets concatenated

JS, CSS, images

• Get hashed - "hello.js" -> "hello-ab4c6ef3.js"

CSS

• BEM methodology (SUIT flavor)
• Written in LESS

JavaScript

• ES 6/7
• Everything is an ES 6 module
• Modules are loaded via System.js
• Mustache.js templates 
• Better async handling via CSP (js-csp or core.async)

JavaScript #2

• A concept of a "Process" - simple module
• Process can be started or killed
• Should clean after itself after being killed
• Useful for handling UI components (header, search input, responsiveness, ...)

JavaScript #3

import {go} from "libs/csp.js";
import {createProcess} from "./utils/csp.js";

const process = createProcess(processFactory);

function processFactory({killChan, data: {
  someProp // Data passed when started
}}) {
  // when started
  
  return go(function*() {
    yield killChan;
    
    // When killed
  });
}

export default process;

JavaScript Testing

• Unit tests run via Karma, written in Mocha
• E2E tests coming soon

CSS documentation: p5-php/txt/css/README.md

JS documentation: p5-php/txt/js/README.md