Skip to content

Latest commit

 

History

History
31 lines (16 loc) · 2.64 KB

4.6.md

File metadata and controls

31 lines (16 loc) · 2.64 KB
Raw

4.6 User Interface

4.6.1 Markup and Styling : HTML & CSS

Usage of HTML and CSS is very obvious for any web app, because of the browser requirement. To be specific about the version of HTML, most of the layouts are still in XHTML1.0, we are gradually shifting them to HTML5. We all know its our responsibility to take web forward by using as much as latest tech we can use (obviously keeping browser support in mind :-))

The markup resides inside .html.erb and .vm files, as we're using Rails and Velocity frameworks for front-end, parsing and processing of .erb and .vm files into HTML will be taken care by Rails and Velocity respectively.

The existing pages are styled with CSS2.1 specification (a few with CSS3), we are also in the process of restructuring our front-end CSS files and using a CSS preprocessor instead of writing plain CSS. With this shift in progress, we are also trying to adopt CSS3 as much as we can. Also, we are gradually merging icon files into one and planning to use CSS sprites concept to leverage rendering performance.

4.6.2 DOM interaction : JavaScript(JS), jQuery and Prototype

We all know that JS, jQuery and Prototype are the ways of adding dynamism in markup. Initially, Go used Prototype (a JavaScript API library) to interact with DOM and register events. We have started using jQuery and are in the process of eliminating prototype completely, there are still a lot of pieces using Prototype.

Prototype is almost out of the JS API competition now, apparently not maintained anymore too, so no point of continuing it in future code. So, we started adopting jQuery, and currently we've jQuery version 1.7.1.

4.6.3 CSS Preprocessor : SASS

CSS is very straightforward and plain, extensions like SASS or LESS makes it really powerful, Sass is the one of the most mature, stable, and powerful professional grade CSS extension language in the world. We will not write plain CSS anymore, but will take the help of Sass. We are also rewriting our existing CSS files and moving them into SCSS files.

4.6.4 What else? Frameworks, Libraries or anything?

  • MicroContentPopup.js - Almost all the custom dropdowns in Go use Micro Content Popup(MCP). This lib is also outdated and not maintained anymore, so we are moving them to bootstrap dropdown.

  • D3.js - To render arrows with SVG for Value Stream Map(VSM), a feature to model your workflow at Pipeline level (more details link).

  • Highchart.js - To measure execution duration of particular Stage.

  • Bootstrap-dropdown.js - MCP is outdate now, we started using dropdown.js of bootstrap.

  • jQueryUI.js - To render few components like tabs and auto complete textboxes.