User Tools

Site Tools


tools:taaabs:doc

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
Next revision Both sides next revision
tools:taaabs:doc [2015/09/04 17:18]
rcazenav created
tools:taaabs:doc [2015/09/04 20:02]
rcazenav
Line 1: Line 1:
-====== Doc ======+====== Taaabs Documentation ====== 
 +===== Common Prerequisites ===== 
 +Taaabs is a single page application using ''[[https://www.polymer-project.org/|Polymer]]'' and running in a browser. 
 +Taaabs is written in ''HTML'' and ''JavaScript''
 +Taaabs use ''[[https://github.com/gulpjs/gulp/tree/master/docs|gulp]]'' as Task-Runner/build tool, ''[[https://docs.npmjs.com/|npm]]'' and ''[[http://bower.io/|bower]]'' for dependency management. 
 +Theses tools needs ''[[https://nodejs.org/en/|Node.js]]'' runtime environment.
  
 +''node'' and ''npm'' should be installed with your distribution package manager (apt-get, yum, pacman...) if possible and if the version packaged for your distribution is the actual stable Node.js version. 
 +At least you need a ''node'' version >= 0.12.7 and ''npm'' version >= 2.14.1.
 +
 +You can check theses version with ''node --version'' and ''npm --version''.
 +
 +If your distribution package manager cannot, no problem, you can download and install node (since v0.12, npm is packaged inside node, so you don't need to install it separatly) [[https://nodejs.org/en/download/|Download Node.js]].
 +
 +Assuming now you have ''node'', ''npm'' properly installed.
 +
 +We use ''npm'' for installing build tools and build dependencies.
 +
 +===== Clone the project =====
 +''git clone git@github.com:liris-tweak/taaabs.git''
 +
 +''cd taaabs/''
 +
 +===== Gulp =====
 +Then, you need to install gulp, as an executable application. 
 +''[sudo] npm install -g gulp'' will install ''gulp'' for you in ''/usr/lib/node_modules/'' and the executable will be available as a link on ''/usr/bin''.
 +
 +Now you can try the command ''gulp'' in your terminal. If you see in the standard output something like "local gulp not found", you have succefully installed ''gulp''.
 +
 +If you got a message like ''gulp: command not found'', please read [[https://docs.npmjs.com/getting-started/installing-npm-packages-globally|Installing npm packages globally]] and this[[https://docs.npmjs.com/getting-started/fixing-npm-permissions|Fixing npm permissions]]
 +
 +The ''gulp'' working principle is to check the configuration file of a project and perform the tasks described there.
 +This configuration file is named by convention 'gulpfile.js'.
 +To run the task 'foo' described in the configuration, you write ''gulp foo''.
 +
 +===== Bower =====
 +Then, you can install ''bower'', as an executable application. ''[sudo] npm install -g bower'' will install ''bower'' for you in the same way as explained before.
 +
 +Now you can try the command ''bower'' in your terminal. If ''bower'' is installed correctly you can see a short manual about how to use ''bower''. A thorough reading of this message is not necessary, but might be entertaining.
 +
 +===== Installing build dependencies =====
 +Then, you must fetch the build dependencies of the project: ''npm install -d''. When you run this command, ''npm'' read the ''package.json'' file which contains developers dependencies. By default, theses dependencies are stored in the ''node_modules/'' directory at the root of the project. The ''-d'' option in ''npm'' means that you want to install the dependencies declared as ''"devDependencies"'' in the ''package.json'' file.
 +
 +===== Installing client-side dependencies =====
 +Then, you must fetch the client-side dependencies of the project: ''bower install''. ''bower'' will read the ''bower.json'' and by default theses dependencies are stored in the ''bower_components/'' directory at the root of the project. 
 +
 +====== Development Worflow ======
 +
 +===== JSHint =====
 +We use [[http://jshint.com/docs/|JSHint]] to check suspicious usage in the JavaScript code inside Taaabs. This application take JavaScript code, parse it, and do some syntaxic/semantic checking. 
 +
 +When building ''Taaabs'' (using ''gulp'' command), JSHint run a check on all files inside app/ directory. 
 +<note warning>If you ignore these warnings, the building process cannot complete.</note>
 +
 +We suggest you to 
 +I suggest that you regularly scan your code using
 +
 +
 +===== JSCS =====
 +
 +===== Project Directory Structure =====
 +''app/'': Directory containing sources of the application.
 +
 +''bower.json'': A file describing client-side dependencies of the project.
 +
 +''bower_components/'': Directory containing client-side dependencies.
 +
 +''dist/'': Contains the "production" files (this directory can be served by an HTTP server like Apache, Nginx)
 +
 +''gulpfile.js'': File describing the build process.
 +
 +''node_modules/'': Directory containing build dependencies (or server-side dependencies for Node.js based server applications). 
 +
 +''package.json'': A file describing build dependencies of the project. (usually this folder contains server-side dependencies for Node.js based server applications)
 +
 +''.bowerrc'': Configuration file for ''bower''
 +
 +''.jscsrc'': configuration file for JSCS (JSCS is a code style linter for programmatically enforcing your style guide). 
 +
 +''.jshintrc'': configuration file for JSHint (JSHint is a tools to detect suspicious usage in programs written in JavaScript).
 +
 +''wct.conf.json'': A file desbribing Unit tests
 +
 +===== Running the development web server =====
 +
 +When you are modifing sources files of ''Taaabs''
tools/taaabs/doc.txt · Last modified: 2018/12/10 13:20 by pchampin

CNRS INSA de Lyon Université Lyon 1 Université Lyon 2 École centrale de Lyon