tiennv90 / adslot-ui

Core component library. By Adslot

Adslot UI

See the docs at https://adslot.github.io/adslot-ui/

Core component library. By Adslot

A library of core components used to develop our Adslot and Symphony products. This includes Alexandria and third-party restyled components, e.g. Bootstrap.

Technology:

• React
• ES201x (using Babel)
• Webpack
• SCSS
• ESLint
• Autoprefixer

Development

• Take a look at our Contributing guidelines

• Clone the repo: git clone [e-mail]:Adslot/adslot-ui.git

• Install NPM dependencies: npm i

Commands

# Start for development

npm start

# Start the dev-server without automatic refresh

npm run start:cold

# Just build the dist version and copy static files

npm run dist

# Lint all files in src (also automatically run after tests)

npm run lint

# Run tests and posttest linting

npm run test [-- --no-coverage]

# Run tests and rebuild on file changes.

npm run test:watch [--file=<path>] [--coverage]

Generating New Components

Adslot UI:

As simple as running the scaffold command which will create your new Adslot UI component from /component-template.

npm run scaffold MyComponentName

You'll get an index.jsx, index.spec.jsx and styles.scss created under src/components/adslot-ui/MyComponentName.

Alexandria:

We don't have a command for generating Alexandria components. Create a directory for the component, and put all related files in there. You can copy /component-template to help.

Build Profiling

To generate a profile: npm run profile

Upload the new stats.json file to Webpack Analyse Tool.

Optimizing Performance of Stateless Components

Add the following to /docs/Layout/index.jsx:

import Perf from 'react-addons-perf';

window.Perf = Perf;

• In the browser, run Perf.start() to start recording.
• Interact the component in the way that feels slow.
• Run Perf.stop() to stop recording.
• Run Perf.printWasted() to see the nodes that are re–rendering but do not change the DOM.
• Use fastStatelessWrapper to wrap this component, passing in the properties to check.
• Re-test to make sure you're improving performance.