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
|
||||
============
|
||||
|
||||
Onion is the web client for Ascribe. The idea is to have a well documented,
|
||||
easy to test, easy to hack, JavaScript application.
|
||||
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 ECMA 6.
|
||||
The code is JavaScript 2015 / ECMAScript 6.
|
||||
|
||||
|
||||
Getting started
|
||||
===============
|
||||
|
||||
Install some nice extension for Chrom(e|ium):
|
||||
|
||||
- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
|
||||
|
||||
- [Alt Developer Tools](https://github.com/goatslacker/alt-devtool)
|
||||
|
||||
```bash
|
||||
git clone git@github.com:ascribe/onion.git
|
||||
cd onion
|
||||
@ -37,17 +38,34 @@ Additionally, to work on the white labeling functionality, you need to edit your
|
||||
|
||||
JavaScript Code Conventions
|
||||
===========================
|
||||
|
||||
For this project, we're using:
|
||||
|
||||
* 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 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 don't use Javascript's `Date` object, as its interface introduced bugs previously and we're including `momentjs` for other dependencies anyways
|
||||
* 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](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
|
||||
=====================
|
||||
============
|
||||
|
||||
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.
|
||||
|
||||
|
||||
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`
|
||||
|
||||
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
|
||||
===============
|
||||
=======
|
||||
|
||||
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.
|
||||
@ -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.
|
||||
|
||||
## 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.
|
||||
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
|
||||
```
|
||||
|
||||
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.
|
||||
A: ```browserify -e js/app.js --list > webapp-dependencies.txt```
|
||||
|
||||
|
||||
Reading list
|
||||
============
|
||||
|
||||
@ -152,7 +184,6 @@ Start here
|
||||
- [alt.js](http://alt.js.org/)
|
||||
- [alt.js readme](https://github.com/goatslacker/alt)
|
||||
|
||||
|
||||
Moar stuff
|
||||
----------
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user