Giter VIP home page Giter VIP logo

infer-marionette's Introduction

Infer

After you understand something by Intuiting it, it's time to leave your stamp on the world by Infering that thing in your speech and other actions.

Installation

To install the app, do the following:

git clone [email protected]:bengrunfeld/infer.git
cd infer
npm install
bower install
grunt

Usage

To run the app,

  1. Open dist/index.html in a browser
  2. Open the Console in Chrome Dev Tools or FF/IE/Safari equivalent

How it works

We use NPM to install Grunt, Bower, and all of Grunt's plugins, listed below.

We will then use Bower to install and maintain the app's Front End dependencies, which in this case are:

  • Twitter Bootstrap
  • jQuery
  • Underscore
  • Backbone
  • Marionette

Then we use Grunt to perform the following tasks:

  • Uglify and minify our HTML, CSS and JS
  • Copy custom HTML, CSS & JS minified files to a dist folder
  • Copy files our app is dependant on to the dist folder (e.g. bootstrap CSS & JS)
  • Update the paths in our HTML to redirect to the minified files

To perform these tasks, we use the following Grunt plugins:

But.... why??

Using the workflow listed in Installation and Usage at the top of this doc, you install bootstrap, install all of the dependencies your app will use, then lint, uglify and minify your HTML, CSS and Javascript. All the paths inside link and script tags are updated to the new minified files automatically, without the developer having to worry about them.

The most compact possible copy of the app files are then placed in a distribution directory called dist. The dist directory gets completely deleted before Grunt executes, and then gets freshly created during the Grunt process, ensuring that old junky files don't hang around inside it from previous compiles.

All that happens using three commands, which usually take less than 20 seconds to complete.

What that means is that the only thing the developer has to worry about is, well, developing.

All they ever have to focus on is writing the HTML, CSS, and Javascript that eventually becomes their Web App. All other installation, linting and compilation tasks are handled by automated tools. Woot!

Why are dist and tmp not being pushed to the repo?

In regular production applications, dist and tmp are never pushed to the main repo, because they are usually large in size and don't provide development benefit to anyone reading them (minified, optimized, compressed code). Also, it gives no benefit to another developer, since using the simple grunt command will give you all these things anyway from the dev version of hte code.

infer-marionette's People

Contributors

bengrunfeld avatar

Watchers

James Cloos avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.