/mercado-demo

This is a code example for MercadoLibre Front-End position

Primary LanguageJavaScriptMIT LicenseMIT

demo-mercadolibre

This is a code example for MercadoLibre Front-End position and uses a modified version of the NG6-Starter seed project. https://github.com/thematho/NG6-starter/tree/without_classes

Dependencies

Run the application

  • On the command prompt and run npm install. This command will not only install the dependencies locally but also generate the build on the postinstall phase.
  • Run npm start to run local server on url: localhost:8080.

Live Demo

You can access the Demo on the following address: https://mercado-demo.herokuapp.com Every push on github generates an automatic build & deploy on Heroku

TODO:

  • Run npm test to execute Unit Testing.
  • Run npm e2e to execute Unit Testing.

Seed Original Readme and commands:

ng6-starter

NG6 Join Slack Join the chat at https://gitter.im/angularclass/NG6-starter

The de facto starter repo for building scalable apps with Angular, ES6, and Webpack

This repo serves as a minimal starter for those looking to get up-and-running with Angular and ES6, using Gulp and Webpack for the build process. This seed is not a Yeoman generator. It's a minimal starter with tasks for building the boilerplate. These are its features:

  • The best practice in directory/file organization for Angular (allowing for infinite horizontal app scaling)
  • A ready-to-go build system for working with ES6
  • Tasks for generating additional boilerplate:
    • Angular components
    • Angular services & factories
    • Angular directives
    • Angular filters
  • A full testing system in place
  • SASS support via node-sass

Check out the JSPM version--an alternative to Webpack as an ES6 build system.

If you're looking for a preliminary Angular 2 build, please use the angular2-webpack-starter.


Table of Contents

Walkthrough

Build System

NG6 uses NPM scripts, Gulp, and Webpack together for its build system. Yes, you don't need Gulp if you're using Webpack. This is true if your build system is only responsible for file manipulation. However, ours is not.

Webpack handles all file-related concerns:

  • Transpiling from ES6 to ES5 with Babel
  • Loading HTML files as modules
  • Transpiling stylesheets and appending them to the DOM
  • Refreshing the browser and rebuilding on file changes
  • Hot module replacement for transpiled stylesheets
  • Bundling the app
  • Loading all modules
  • Doing all of the above for *.spec.js files as well

Gulp is the orchestrator:

  • Starting and calling Webpack
  • Starting a development server (yes, Webpack can do this too)
  • Generating boilerplate for the Angular app

Check out the JSPM version--an alternative to Webpack as an ES6 build system.

File Structure

We use a componentized approach with NG6. This will be the eventual standard (and particularly helpful, if using Angular's new router) as well as a great way to ensure a tasteful transition to Angular 2, when the time is ripe. Everything--or mostly everything, as we'll explore (below)--is a component. A component is a self-contained concern--may it be a feature or strictly-defined, ever-present element of the UI (such as a header, sidebar, or footer). Also characteristic of a component is that it harnesses its own stylesheets, templates, controllers, routes, services, and specs. This encapsulation allows us the comfort of isolation and structural locality. Here's how it looks:

client
⋅⋅app/
⋅⋅⋅⋅app.js              * app entry file
⋅⋅⋅⋅app.html            * app template
⋅⋅⋅⋅common/             * functionality pertinent to several components propagate into this directory
⋅⋅⋅⋅⋅⋅directives/           * where directives live
⋅⋅⋅⋅⋅⋅⋅⋅directives.js           * directives entry file
⋅⋅⋅⋅⋅⋅filters/              * where filters live
⋅⋅⋅⋅⋅⋅⋅⋅filters.js              * filters entry file
⋅⋅⋅⋅components/        * where components live
⋅⋅⋅⋅⋅⋅components.js     * components entry file
⋅⋅⋅⋅⋅⋅home/             * home component
⋅⋅⋅⋅⋅⋅⋅⋅home.js              * home entry file (routes, configurations, and declarations occur here)
⋅⋅⋅⋅⋅⋅⋅⋅home.component.js    * home "directive"
⋅⋅⋅⋅⋅⋅⋅⋅home.controller.js   * home controller
⋅⋅⋅⋅⋅⋅⋅⋅home.scss            * home styles
⋅⋅⋅⋅⋅⋅⋅⋅home.html            * home template
⋅⋅⋅⋅⋅⋅⋅⋅home.spec.js         * home specs (for entry, component, and controller)
⋅⋅⋅⋅factories/         * where factories live
⋅⋅⋅⋅⋅⋅factories.js          * factories entry file
⋅⋅⋅⋅services/          * where services live
⋅⋅⋅⋅⋅⋅services.js           * services entry file

Testing Setup

All tests are also written in ES6. We use Webpack to take care of the logistics of getting those files to run in the various browsers, just like with our client files. This is our testing stack:

  • Karma
  • Webpack + Babel
  • Mocha
  • Chai
  • Sinon

To run tests, type npm test in the terminal. Read more about testing below.

Getting Started

Dependencies

Tools needed to run this app:

  • node and npm

Installing

  • fork this repo
  • clone your fork
  • npm install to install dependencies

Running the App

NG6 uses Gulp to build and launch the development environment. After you have installed all dependencies, you may run the app. Running npm start will bundle the app with webpack, launch a development server, and watch all files. The port will be displayed in the terminal.

Tasks

Here's a list of available tasks:

  • npm run build
    • runs Webpack, which will transpile, concatenate, and compress (collectively, "bundle") all assets and modules into dist/bundle.js. It also prepares index.html to be used as application entry point, links assets and created dist version of our application.
  • npm run serve
    • starts a dev server via webpack-dev-server, serving the client folder.
  • npm run watch
    • alias of serve
  • npm start (which is the default task that runs when typing gulp without providing an argument)
    • runs serve.
  • npm run component
    • scaffolds a new Angular component. Read below for usage details.
  • npm run service
    • scaffolds a new Angular service. Read below for usage details.
  • npm run factory
    • scaffolds a new Angular factory. Read below for usage details.
  • npm run directive
    • scaffolds a new Angular directive. Read below for usage details.
  • npm run filter
    • scaffolds a new Angular filter. Read below for usage details.

Testing

To run the tests, run npm test.

Karma combined with Webpack runs all files matching *.spec.js inside the app folder. This allows us to keep test files local to the component--which keeps us in good faith with continuing to build our app modularly. The file spec.bundle.js is the bundle file for all our spec files that Karma will run.

Be sure to define your *.spec.js files within their corresponding component directory. You must name the spec file like so, [name].spec.js. If you don't want to use the .spec.js suffix, you must change the regex in spec.bundle.js to look for whatever file(s) you want. Mocha is the testing suite, Chai is the assertion library and Sinon is a library that provides spies, stubs and mocks. If you would like to change this, see karma.conf.js.

Debug Test

To debug a test you need to modify the karma.conf.js file setting singleRun: false . Then Karma will be open in a new browser window with the url: [http://localhost:9876. Press the debug button, and if you open the developer tools on this new url http://localhost:9876/debug.html you can see all the Javascript files and Spec files and set break points to debug your test. The test results will be printed on the browser's console instead of your command prompt.

Examples

It's always easier to learn something if you have an examples. Here is a list of repos which based on this starter:

Generators

We choose a consistent directory structure between components offers us the certainty of predictability. We can take advantage of this certainty by creating a plop template to automate the "instantiation" of our components. The component boilerplate task generates this: Each element (Component/Factory/Service/Directive/Filter) has it's own command, file structure and default folder.

You may, of course, create these files manually, every time a new module is needed, but that gets quickly tedious. To generate a component, run npm run [Angular Element]. Then plop will provide you simple wizard to generate Angular Element.

You should provide name of this element. This name will be converted to proper case, recommended by angular styleguide.

The element will be created, by default, inside client/app/[element's default path]. But in case if you wish to place it in different location, wizard will ask you about that. If you answered yes, then plop will allow you to choose directory.

Command: `npm run [Angular Element]`
Default path: `client/app/[default-path-for-angular-element]`
⋅⋅⋅⋅⋅⋅file-structure/
⋅⋅⋅⋅⋅⋅⋅⋅some-file

Generating Components

Command: npm run service

Default path: client/app/services

File structure:

⋅⋅⋅⋅⋅⋅component-name/
⋅⋅⋅⋅⋅⋅⋅⋅component-name.js // entry file where all its dependencies load
⋅⋅⋅⋅⋅⋅⋅⋅component-name.component.js
⋅⋅⋅⋅⋅⋅⋅⋅component-name.controller.js
⋅⋅⋅⋅⋅⋅⋅⋅component-name.html // component's template
⋅⋅⋅⋅⋅⋅⋅⋅component-name.scss // scoped to affect only its own template
⋅⋅⋅⋅⋅⋅⋅⋅component-name.spec.js // contains passing demonstration tests

Generating Services

Command: npm run service

Default path: client/app/services

File structure:

⋅⋅⋅⋅⋅⋅service-name/
⋅⋅⋅⋅⋅⋅⋅⋅service-name.js // entry file where all its dependencies load
⋅⋅⋅⋅⋅⋅⋅⋅service-name.service.js // service
⋅⋅⋅⋅⋅⋅⋅⋅service-name.spec.js // contains passing demonstration tests

Generating Factories

Command: npm run factory

Default path: client/app/factories

File structure:

⋅⋅⋅⋅⋅⋅factory-name/
⋅⋅⋅⋅⋅⋅⋅⋅factory-name.js // entry file where all its dependencies load
⋅⋅⋅⋅⋅⋅⋅⋅factory-name.factory.js // file with factory logic
⋅⋅⋅⋅⋅⋅⋅⋅factory-name.spec.js // contains passing demonstration tests

Generating Directives

Command: npm run directive

Default path: client/app/common/directives

The [name].directive.js file will contain only the link function and the directive's attribute restrict is set as A (Attribute) and without template by default because we should only use directives for DOM manipulations and use component for creating 'web elements' from now on.

File structure:

⋅⋅⋅⋅⋅⋅directive-name/
⋅⋅⋅⋅⋅⋅⋅⋅directive-name.js // entry file where all its dependencies load
⋅⋅⋅⋅⋅⋅⋅⋅directive-name.directive.js // file with link function
⋅⋅⋅⋅⋅⋅⋅⋅directive-name.spec.js // contains passing demonstration tests

Generating Filters

Command: npm run service

Default path: client/app/services

Filters entry file is client/app/common/filters/filter.js, all filters are declared here, and we only add the file for the link function.

File structure:

⋅⋅⋅⋅filters/
⋅⋅⋅⋅⋅⋅filter-name.js // file with the filter function
⋅⋅⋅⋅⋅⋅filter-name.spec.js // contains passing demonstration tests

Starter Kit Support and Questions

Contact us, anytime, regarding anything about this project.


enjoy — AngularClass



AngularClass ##AngularClass

Learn AngularJS, Angular 2, and Modern Web Development from the best. Looking for corporate Angular training, want to host us, or Angular consulting? hello@angularclass.com