layout: sideMenu title: “Web Application” description: "" group:
When working on Submarine's WebApplication, it is recommended to run in dev mode.
For that, start Submarine server normally, then use yarn run dev
in submarine-web directory.
This will launch a Submarine WebApplication on port 9000 that will update on code changes.
Submarine WebApplication is using AngularJS as main Framework, and Grunt and Bower as helpers.
So you might want to get familiar with it. Here is a good start (There is obviously plenty more ressources to learn)
On the side menu of this page, you will find documentation about some of the best practices we want to apply in this project.
This is a great way for people to learn more about angularJS, and to keep the code clean and optimized.
Please try to follow those Good Practices Guides when making a PR or reviewing one.
But don't worry, Eslint and Jscs will make you remember it for the most part.
We try not to have JQuery except in directives, If you want to include a library, please search for its angularJS directive first.
If you still need to use it, then please use angular.element()
instead of $()
src
folder: Contains the Source code for Submarine WebApplicationdist
folder: Contains the compiled code after using yarn run buildThe src
folder is organized as such:
The code is now organized in a component type of architecture, where everything is logically grouped.
In order to understand what is contained inside the .js files without opening it, we use some name conventions:
When we talk about Component architecture, we think about grouping files together in a logical way.
A component can then be made of multiple files like .html
, .css
or any other file type mentioned above.
Related components can be grouped as sub-component as long as they are used in that component only.
Contains the application app.js
and page related components.
The only restriction being that a component in the app
folder is not used anywhere else
The components
folder is here to contains any reusable component (used more than once)
Fonts files and their css are mixed together in the fonts
folder
As we do not use yeoman to generate controllers or other type of files with this new structure, we need to do some includes manually in index.html
in order to use dev mode and compile correctly.
.js
files needs to be injected between the tag <!-- build:js({.tmp,src}) scripts/scripts.js -->
<!-- build:css(.tmp) styles/main.css -->
bower install <plugin> --save
The file index.html will automatically update with the new bower_component
Example: ./bower install angular-nvd3
You should find that line in the index.html file
<script src="bower_components/angular-nvd3/dist/angular-nvd3.js"></script>