mirror of
https://github.com/ascribe/onion.git
synced 2024-12-22 09:23:13 +01:00
Rebase remerge
This commit is contained in:
parent
76a413cee1
commit
95bbe410de
69
README.md
69
README.md
@ -1,18 +1,19 @@
|
|||||||
Introduction
|
Introduction
|
||||||
============
|
============
|
||||||
|
|
||||||
Onion is the web client for Ascribe. The idea is to have a well documented,
|
Onion is the web client for Ascribe. The idea is to have a well documented, modern, easy to test, easy to hack, JavaScript application.
|
||||||
easy to test, easy to hack, JavaScript application.
|
|
||||||
|
|
||||||
The code is JavaScript ECMA 6.
|
The code is JavaScript 2015 / ECMAScript 6.
|
||||||
|
|
||||||
|
|
||||||
Getting started
|
Getting started
|
||||||
===============
|
===============
|
||||||
|
|
||||||
Install some nice extension for Chrom(e|ium):
|
Install some nice extension for Chrom(e|ium):
|
||||||
|
|
||||||
- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
|
- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
|
||||||
|
- [Alt Developer Tools](https://github.com/goatslacker/alt-devtool)
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
git clone git@github.com:ascribe/onion.git
|
git clone git@github.com:ascribe/onion.git
|
||||||
cd onion
|
cd onion
|
||||||
@ -37,17 +38,34 @@ Additionally, to work on the white labeling functionality, you need to edit your
|
|||||||
|
|
||||||
JavaScript Code Conventions
|
JavaScript Code Conventions
|
||||||
===========================
|
===========================
|
||||||
|
|
||||||
For this project, we're using:
|
For this project, we're using:
|
||||||
|
|
||||||
* 4 Spaces
|
* 4 Spaces
|
||||||
* We use ES6
|
* 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](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding))
|
* 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](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding))
|
||||||
* We don't use camel case for file naming but in everything Javascript related
|
* We don't use camel case for file naming but in everything Javascript related
|
||||||
* We use `let` instead of `var`: [SA Post](http://stackoverflow.com/questions/762011/javascript-let-keyword-vs-var-keyword)
|
* 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
|
||||||
* We don't use Javascript's `Date` object, as its interface introduced bugs previously and we're including `momentjs` for other dependencies anyways
|
|
||||||
|
Make sure to check out the [style guide](https://github.com/ascribe/javascript).
|
||||||
|
|
||||||
|
Linting
|
||||||
|
-------
|
||||||
|
|
||||||
|
We use [ESLint](https://github.com/eslint/eslint) with our own [custom ruleset](.eslintrc).
|
||||||
|
|
||||||
|
|
||||||
|
SCSS Code Conventions
|
||||||
|
=====================
|
||||||
|
|
||||||
|
Install [lint-scss](https://github.com/brigade/scss-lint), check the [editor integration docs](https://github.com/brigade/scss-lint#editor-integration) to integrate the lint in your editor.
|
||||||
|
|
||||||
|
Some interesting links:
|
||||||
|
* [Improving Sass code quality on theguardian.com](https://www.theguardian.com/info/developer-blog/2014/may/13/improving-sass-code-quality-on-theguardiancom)
|
||||||
|
|
||||||
|
|
||||||
Branch names
|
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:
|
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:
|
||||||
|
|
||||||
@ -61,22 +79,21 @@ 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.
|
where `brief-and-sane-description-of-the-ticket` does not need to equal to the issue or ticket's title.
|
||||||
|
|
||||||
|
|
||||||
Example
|
Example
|
||||||
-------------
|
-------
|
||||||
|
|
||||||
**JIRA ticket name:** `AD-1242 - Frontend caching for simple endpoints to measure perceived page load <more useless information>`
|
**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`
|
**Github branch name:** `AD-1242-caching-solution-for-stores`
|
||||||
|
|
||||||
SCSS Code Conventions
|
|
||||||
=====================
|
|
||||||
Install [lint-scss](https://github.com/brigade/scss-lint), check the [editor integration docs](https://github.com/brigade/scss-lint#editor-integration) to integrate the lint in your editor.
|
|
||||||
|
|
||||||
Some interesting links:
|
|
||||||
* [Improving Sass code quality on theguardian.com](https://www.theguardian.com/info/developer-blog/2014/may/13/improving-sass-code-quality-on-theguardiancom)
|
|
||||||
|
|
||||||
|
|
||||||
Testing
|
Testing
|
||||||
===============
|
=======
|
||||||
|
|
||||||
|
Unit Testing
|
||||||
|
------------
|
||||||
|
|
||||||
We're using Facebook's jest to do testing as it integrates nicely with react.js as well.
|
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.
|
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.
|
||||||
@ -86,7 +103,15 @@ This is due to the fact that jest's function mocking and ES6 module syntax are [
|
|||||||
|
|
||||||
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.
|
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.
|
||||||
|
|
||||||
## Workflow
|
Visual Regression Testing
|
||||||
|
-------------------------
|
||||||
|
|
||||||
|
We're using [Gemini](https://github.com/gemini-testing/gemini) for visual regression tests because it supports PhantomJS and SauceLabs.
|
||||||
|
|
||||||
|
|
||||||
|
Workflow
|
||||||
|
========
|
||||||
|
|
||||||
Generally, when you're runing `gulp serve`, all tests are being run.
|
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`.
|
If you want to test exclusively (without having the obnoxious ES6Linter warnings), you can just run `gulp jest:watch`.
|
||||||
|
|
||||||
@ -137,9 +162,16 @@ A: Easily by starting the your gulp process with the following command:
|
|||||||
ONION_BASE_URL='/' ONION_SERVER_URL='http://localhost.com:8000/' gulp serve
|
ONION_BASE_URL='/' ONION_SERVER_URL='http://localhost.com:8000/' gulp serve
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Or, by adding these two your environment variables:
|
||||||
|
```
|
||||||
|
ONION_BASE_URL='/'
|
||||||
|
ONION_SERVER_URL='http://localhost.com:8000/'
|
||||||
|
```
|
||||||
|
|
||||||
Q: I want to know all dependencies that get bundled into the live build.
|
Q: I want to know all dependencies that get bundled into the live build.
|
||||||
A: ```browserify -e js/app.js --list > webapp-dependencies.txt```
|
A: ```browserify -e js/app.js --list > webapp-dependencies.txt```
|
||||||
|
|
||||||
|
|
||||||
Reading list
|
Reading list
|
||||||
============
|
============
|
||||||
|
|
||||||
@ -152,7 +184,6 @@ Start here
|
|||||||
- [alt.js](http://alt.js.org/)
|
- [alt.js](http://alt.js.org/)
|
||||||
- [alt.js readme](https://github.com/goatslacker/alt)
|
- [alt.js readme](https://github.com/goatslacker/alt)
|
||||||
|
|
||||||
|
|
||||||
Moar stuff
|
Moar stuff
|
||||||
----------
|
----------
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user