Skip to content
let4be edited this page Mar 10, 2015 · 12 revisions

1. Technologies

This project is built using angular.js, less, jade and a lot of good open source libraries such as

https://github.com/angular-ui/ui-select

https://github.com/fraywing/textAngular

and many others

2. How we build the project

We build the project using http://gulpjs.com/ and http://browserify.org/

our gulpfile has 4 targets:

develop - build the project for development and quit, can be used in CI environment

production - build the project for production and quit, can be used in CI environment this includes:

serve - start local webserver with https://github.com/intesso/connect-livereload support

default - compile project for development, watch for file changes and serve files

3. Generic structure

The web consists from 4 parts

  • Login Application - this is what user sees when enters Lavaboom the first time, responsible for the whole sign in/sign up process

source code: src/js/apps/AppLavaboomLogin

  • Main Application - the heart of Lavaboom

source code: src/js/apps/AppLavaboom

  • Utils - shared code that is being used by AppLavaboomLogin and AppLavaboom

source code: src/js/apps/Utils

  • Loader - small piece of code in plain-js that loads the appropriate application dynamically

source code: src/js/loader.js

As we use browserify we register all angular.js things dynamically and basically file name is controller/service/etc name

we use https://github.com/substack/bulkify transform for this

The project itself is built using ES6 - the upcoming version of ECMA script (see https://github.com/lukehoban/es6features)

We heavily use ES6 through the whole project and it helped us a lot, special thanks to https://babeljs.io/ that made this possible

4. i18n support

we use https://github.com/angular-translate/angular-translate

with all translations in: src/translations/[lang-code].toml, summary list: in src/translations/index.toml

5. How we manage dependencies

We use both bower and npm for dependencies management. Mostly bower is being used for web dependencies and npm for our gulpfile. We serve dependencies and our own code in different files to help browsers cache scripts. We use gulp to concatenate dependencies and select minificated/normal version of them.

The list of all dependencies:

src/js/apps/appLavaboom.toml - dependencies of Main application

src/js/apps/utils.toml - generic dependencies for both Login and Main applications