ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00
Code Issues Releases Wiki Activity
Onion is the web client for ascribe
2,630 Commits 115 Branches 0 Tags 13 MiB
JavaScript 83.7%
CSS 16.2%
HTML 0.1%
0f57137c52
Go to file
Brett Sun 0f57137c52 Remove route from context and use setRouteLeaveHooks in top level route components
2016-06-08 15:10:58 +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 Remove route from context and use setRouteLeaveHooks in top level route components 2016-06-08 15:10:58 +02:00
sass Add webpack config 2016-06-02 17:14:58 +02:00
test Update gemini and docs for visual regression testing 2016-06-03 16:02:31 +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 Fix all occurrences of react/addons usage 2016-06-06 16:07:16 +02:00
README.md Add webpack config 2016-06-02 17:14:58 +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 extension for Chrom(e|ium):

git clone git@github.com:ascribe/onion.git
cd onion
npm install
sudo npm install -g gulp
gulp serve

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 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 ruleset.

SCSS Code Conventions

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

Some interesting links:

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: AD-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

Generally, when you're runing gulp serve, all tests are being run. If you want to test exclusively (without having the obnoxious ES6Linter warnings), you can just run gulp jest:watch.

Troubleshooting

Q: OMG nothing works

A: try npm install. Someone may have updated some dependencies

Q: ZOMG, I'm getting this error:

[09:58:56] 'sass:watch' errored after 6.68 ms
[09:58:56] Error: watch ENOSPC
    at errnoException (fs.js:1031:11)
    at FSWatcher.start (fs.js:1063:11)
    at Object.fs.watch (fs.js:1088:11)
    at Gaze._watchDir (/home/tim/ascribe/onion/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:289:30)
    at /home/tim/ascribe/onion/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:358:10
    at iterate (/home/tim/ascribe/onion/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/helper.js:52:5)
    at Object.forEachSeries (/home/tim/ascribe/onion/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/helper.js:66:3)
    at Gaze._initWatched (/home/tim/ascribe/onion/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:354:10)
    at Gaze.add (/home/tim/ascribe/onion/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:177:8)
    at new Gaze (/home/tim/ascribe/onion/node_modules/gulp/node_modules/vinyl-fs/node_modules/glob-watcher/node_modules/gaze/lib/gaze.js:74:10)

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: watch ENOSPC
    at errnoException (fs.js:1031:11)
    at FSWatcher.start (fs.js:1063:11)
    at Object.fs.watch (fs.js:1088:11)
    at createFsWatchInstance (/home/tim/ascribe/onion/node_modules/browser-sync/node_modules/chokidar/lib/nodefs-handler.js:37:15)
    at setFsWatchListener (/home/tim/ascribe/onion/node_modules/browser-sync/node_modules/chokidar/lib/nodefs-handler.js:80:15)
    at EventEmitter.NodeFsHandler._watchWithNodeFs (/home/tim/ascribe/onion/node_modules/browser-sync/node_modules/chokidar/lib/nodefs-handler.js:228:14)
    at EventEmitter.NodeFsHandler._handleDir (/home/tim/ascribe/onion/node_modules/browser-sync/node_modules/chokidar/lib/nodefs-handler.js:403:23)
    at EventEmitter.<anonymous> (/home/tim/ascribe/onion/node_modules/browser-sync/node_modules/chokidar/lib/nodefs-handler.js:450:19)
    at EventEmitter.<anonymous> (/home/tim/ascribe/onion/node_modules/browser-sync/node_modules/chokidar/lib/nodefs-handler.js:455:16)
    at Object.oncomplete (fs.js:108:15)

A: Use npm dedupe to remove duplicates in npm. This might fix that you're not running out of watchers in your system (read the comments).

Q: How can I use a local copy of SPOOL and Onion? A: Easily by starting the your gulp process with the following command:

ONION_SERVER_URL='http://localhost.com:8000/' gulp serve

Or, by adding the local server url to your environment variables:

ONION_SERVER_URL='http://localhost.com:8000/'

Q: I want to know all dependencies that get bundled into the live build. A: browserify -e js/app.js --list > webapp-dependencies.txt

Reading list

Start here

Moar stuff