FE Courses

Summary

• Requirements
• Getting Started
• Commands Available
• Component Structure
• Enviroments Constants
• Unit Testing
• E2E Testing
• Development
• Production
• Javascript Guidelines
• Documentation
• Polyfills
• Browsers Support
• Docs

Requirements

To launch the application you need to install the followings applications:

• NodeJS LTS version
• Yarn

    npm install -g yarn

Getting Started

Launch the following command to start the application:

    yarn start

Commands Available:

Component Structure

.
 config                      # Define constants to use across the application
     config.dev.js
     config.jest.js
     config.local.js
     config.prod.js
 Demo                        # Demo template
     index.pug
 scripts                     # Webpack setup for differents enviroments
     webpack.analyse.js
     webpack.common.js
     webpack.dev.js
     webpack.local.js
     webpack.prod.js
 src
     assets                  # Images, fonts and others media
     polyfills               # Polyfills configuration
     component.js            # Component code
     component.spec          # Component unit testing
     component.e2e           # Component end to end testing
     component.scss          # Component styles
     component.pug           # Component template
     index.js                # Bootstrap of the applicaton
 babel.config.js             # Babel setup
 .eslintignore               # Specifies files to ignore for Eslint
 .eslintrc                   # Eslint setup
 .gitignore                  # Specifies files to ignore for Git
 cypress.json                # Cypress setup
 package.json
 README.md

Enviroments Constants

You can set up constants to use in base the enviroment. There is a directory called config where you can find 4 files one for every enviroment available. Below you can see an example:

    //File: config/config.local.js
    module.exports = {
        message: 'This message arrive from config/local.config.js'
    };

    //File: src/component.js
    import config from 'config';

    export default class Component {
        constructor(selector) {
            this.myEl = document.querySelector(selector);
            this.message = config.message;
        }
    }

Unit Testing

For Unit Testing we use Jest because is easy to integrate and you have many features out the box like (assertions, async functions, ecc).

Launch unit testing

    yarn test

Launch Code Coverage Test

    yarn test:coverage

E2E Testing

For E2E testing we use Cypress. Enable E2E testing:

    yarn e2e

Development

In development enviroment we generate an unminified version of css and javascript. To generate a build for develpment you have to launch the following command:

    yarn dev

Production

In production we generate a minified version of css and javascript. To generate a build for production you have to launch the following command:

    yarn prod

Documentation

We support documentation a tool that use the JSDoc format. Launch the following command to generate the documentation for this application.

    yarn docs

Polyfills

Features supported:

• Generics

  • Symbol
  • fetch
  • Promise
  • IntersectionObserver
  • CustomEvents
  • Async / Await

• Arrays

  • entries
  • from
  • find
  • findIndex
  • includes
  • keys
  • values

• Objects

  • assign
  • entries
  • values

• Strings

  • endsWith
  • includes
  • startsWith

Browsers support

✅ Chrome ✅ Firefox ✅ Safari ✅ Edge ✅ IE11

Docs