Skip to content
Front-end implementation of an IoT commercial project.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
client
public
server
.eslintignore
.gitignore
Procfile
bower.json
gruntfile.js
package-lock.json
package.json
readme.md

readme.md

Overview

Commercial project with a purely modular approach and CMS like editing capabilities. A conceptual selling point of a project is a solution. Project owner should be able to create landing pages based on shared modules and at the same time deeply customize them in case of need.

Components

Server

  • Node.js - As an easiest and fastest way to simulate server activity.
  • Express

Package Managers

  • npm
  • Bower - Separates front-end dependencies.

Automation Tools

  • Grunt - JavaScript task runner.
  • ESLint - Linting utility for JavaScript with ES6 support.
  • Babel - Compiler for JavaScript that allows to adapt ES6 features for older browsers.
  • PostCSS - CSS postprocessor.

JavaScript

  • Handlebars.js - Main templating engine.
  • jQuery - Dependency removed. Reason: the only two methods from jQuery that project relies on are readyState and scrollAnimation. Both have been replaced with native ES6 implementations.
  • Polyfill - Polyfill service that adapts to browser version at runtime.

CSS

Code follows BEM methodology.

  • Compass - Dependency removed. Reason: Compass is a Ruby-based CSS compiler with a bunch of predefined mixins. During project development, it became clear, that Compass was only used for its autoprefixers. So Compass was replaced with C++ alternative LibSass. This decreased compilation time and removed Ruby dependency. Browser compatibility is being ensured using Autoprefixer from the PostCSS bundle.
  • LibSass - C++ port of Sass engine.
  • Autoprefixer - Adds vendor prefixes to CSS rules.

Installation

The only external requirement is an up to date Node.js installation. Please follow the official guidelines to install or update it on your system.

Use the following commands to launch the project:

  • $ npm install - Installs all project dependencies. bower install is launched automatically using npm postinstall method.
  • $ npm start - Launches JS and CSS automations. Starts the project on default port - localhost:5000.

Additional scripts:

  • $ npm run js - Concats all JS files, compiles them using Babel and Uglifies the output.
  • $ npm run sass - Compiles CSS using LibSass and launches PostCSS processes.
  • $ npm run watch - Runs watch tasks for both JS and SCSS.

Javascript Linter

The project uses ESLint as the main JavaScript linter. ESLint is configured using eslint-config-google and follows Google JavaScript Guidelines as closely as possible. A Git hook is used to reject commits that haven't passed guideline requirements.

Browser Support

The last two versions of the following browsers are officially supported:

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera
  • Internet Explorer 10+

The project can still be used in older browser versions, but comprehensive testing will be performed only in versions mentioned above.

License

Copyright 2016 Sensor Focus Inc

You can’t perform that action at this time.