mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00

Onion is the web client for ascribe

Go to file

Brett Sun 7014514654 Use UrlResolver to resolve api urls based on white labelling rather than updating ApiUrl's export Keeping an export constant is more predictable and less surprising for most people.		2016-06-14 17:58:00 +02:00
docs	Remove feature_list.md as it is super outdated	2015-11-20 15:49:41 +01:00
fonts	Move ascribe-logo.* to ascribe-font.*	2015-12-08 15:45:00 +01:00
js	Use UrlResolver to resolve api urls based on white labelling rather than updating ApiUrl's export	2016-06-14 17:58:00 +02:00
sass	Fix whitelabel styling after updates	2016-06-10 10:32:42 +02:00
test	Fix visual regression tests for react-bootstrap update	2016-06-10 10:32:42 +02:00
.babelrc	Upgrade to babel6	2016-06-02 17:14:58 +02:00
.bootstraprc	Add webpack config	2016-06-02 17:14:58 +02:00
.env_template	Inject environment variables into app	2016-06-02 17:14:58 +02:00
.eslintignore	Upgrade ESLint and use eslint-config-ascribe	2016-06-03 13:26:32 +02:00
.eslintrc.json	Upgrade ESLint and use eslint-config-ascribe	2016-06-03 13:26:32 +02:00
.gitignore	Add webpack config	2016-06-02 17:14:58 +02:00
.scss-lint.yml	nested collapsible paragraphs	2015-09-01 14:00:06 +02:00
index_template.html	Generate index.html using webpack	2016-06-02 17:14:58 +02:00
package.json	Update eslint-config-ascribe to avoid errors with long re-export lines	2016-06-14 17:57:58 +02:00
README.md	Update README for modernization	2016-06-10 16:13:52 +02:00
server.dev.js	Fix OTS font parsing errors during development	2016-06-08 13:11:52 +02:00
server.js	Map entire dist/ folder as /static in server to allow for dynamic chunking	2016-06-03 13:26:43 +02:00
webpack.config.js	Add separate extract build command and disable it by default on development	2016-06-03 18:06:51 +02:00

README.md

Introduction

Onion is the web client for Ascribe. The idea is to have a well documented, modern, easy to test, easy to hack, JavaScript application.

The code is JavaScript 2015 / ECMAScript 6.

Getting started

Install some nice extensions for Chrom(e|ium):

# Using node v5+, and if you aren't already, preferrably with nvm
git clone git@github.com:ascribe/onion.git
cd onion
cp .env_template .env
npm install
npm run start:dev

Additionally, to work on the white labeling functionality, you need to edit your /etc/hosts file and add:

127.0.0.1   localhost.com
127.0.0.1   cc.localhost.com
127.0.0.1   cyland.localhost.com
127.0.0.1   ikonotv.localhost.com
127.0.0.1   lumenus.localhost.com
127.0.0.1   23vivi.localhost.com
127.0.0.1   polline.localhost.com
127.0.0.1   artcity.localhost.com
127.0.0.1   demo.localhost.com
127.0.0.1   liquidgallery.localhost.com

JavaScript Code Conventions

For this project, we're using:

4 Spaces
ES6
We don't use ES6's class declaration for React components because it does not support Mixins as well as Autobinding (Blog post about it)
We don't use camel case for file naming but in everything else Javascript related
We use momentjs instead of Javascript's Date object, as the native Date interface previously introduced bugs and we're including momentjs for other dependencies anyway

Make sure to check out the style guide.

Linting

We use ESLint with our own custom config.

SCSS Code Conventions

Install lint-scss, check the editor integration docs to integrate the lint in your editor.

Some interesting links:

Improving Sass code quality on theguardian.com

Branch names

To allow Github and JIRA to track branches while still allowing us to switch branches quickly using a ticket's number (and keep our peace of mind), we have the following rules for naming branches:

// For issues logged in Github:
AG-<Github-issue-id>-brief-and-sane-description-of-the-ticket

// For issues logged in JIRA:
AD-<JIRA-ticket-id>-brief-and-sane-description-of-the-ticket

where brief-and-sane-description-of-the-ticket does not need to equal to the issue or ticket's title.

Example

JIRA ticket name: AD-1242 - Frontend caching for simple endpoints to measure perceived page load <more useless information>

Github branch name: AG-1242-caching-solution-for-stores

Testing

Unit Testing

We're using Facebook's jest to do testing as it integrates nicely with react.js as well.

Tests are always created per directory by creating a __tests__ folder. To test a specific file, a <file_name>_tests.js file needs to be created.

Since we're using mixed syntax, test files are not linted using ES6Lint. This is due to the fact that jest's function mocking and ES6 module syntax are fundamentally incompatible.

Therefore, to require a module in your test file, you need to use CommonJS's require syntax. Except for this, all tests can be written in ES6 syntax.

Visual Regression Testing

We're using Gemini for visual regression tests because it supports both PhantomJS2 and SauceLabs.

See the helper docs for information on installing Gemini, its dependencies, and running and writing tests.

Integration Testing

We're using Sauce Labs with WD.js for integration testing across browser grids with Selenium.

See the helper docs for information on each part of the test stack and how to run and write tests.

Workflow

TODO

Troubleshooting

Q: OMG nothing works

A: Try npm install and npm dedupe. Someone may have updated some dependencies.

Q: How can I use a local copy of SPOOL and Onion? A: You should already be set up if you copied .env_template as .env, however, if you don't want to do this, you can also start your dev server with the following command:

# Assuming your SPOOL instance is on localhost:8000, otherwise adjust accordingly
ONION_API_URL='http://localhost.com:8000/' ONION_SERVER_URL='http://localhost.com:8000' npm run start:dev

If you are using .env and your local SPOOL instance is not running on the default localhost:8000 set up, you should adjust .env accordingly.

Q: I want to know all dependencies that get bundled into the live build. A: npm run build -- --json > stats.json and upload stats.json to webpack-visualizer