JLUE - JavaScript Glue

My defaults for project structure, package management, build and test tools, UI framework and other libraries for responsive browser development.

Some goals

Have a single place to manage dependencies and build system across projects
A canonical reference for my technology choices
A way to potentially build up a simple, focused framework
Best practice for Semantic HTML5, JS, CSS

Features

Stylus files are all imported from styles/main.scss
node_modules are not included in source control
Let editors handle lint watching (still provide build step). npm handles watching CSS and JS compression
Watching contains debug info and source-maps
Builds are production-ready

Problems

The tasks in package.json are not designed to run in Windows. Since that's not a platform I use for development. However a simple solution is to install GitBash from Git for Windows. Having the bash commandline available in Windows is very useful.

Summary of libraries used

Browserify for getting NodeJS/require in the browser
Material Design Lite for sane design principles
Material Design Icons MDL icons
i18n-js i18n translations in JS
tape for testing
ESLint for sanity
Nock HTTP mocking library
Nodemon for watching stuff
Stylus for stylesheets
Slm Nobody should write HTML
PostgreSQL for database
request for simple HTTP
Polyfills ES6 goodness without the hastle
es6-templates string interpolation kinda
UglifyJS and Clean CSS used for minifying (to be tested)

Summary of libraries NOT used

Bootstrap, Element UI, etc - Material Design is where it's at
CoffeeScript - I believe JS can be beautiful enough
Grunt, gulp, etc - for simple tasks npm does a fine job
JQuery - It's less important these days, speed gains using native, build my own, specific library
Express - may use this depending on requirements
Component, Duo, etc - Browserify is enough for now

Usage

Create or update a project

jlue <folder>
cd <folder>
npm install

Update an existing project

cd <folder>
npm run update-all # this could star all the libs in package.json to allow
              # them to be updated to the latest versions.

Once in your created project

You'll want to choose and download your Material Design theme.

There's a default theme in lib/material.min.css. Replace it with your downloaded theme.

Watches in debug mode (folder, source-maps, debugging, etc)

npm run watch

Builds in production mode (compresses, no source-maps, no debugging)

npm install

Start a server on port 8080

npm start

Rationale for some of the library choices

Stylus - Stylesheets

Sass requires Ruby and Node-sass requires Visual Studio. So I looked elsewhere and found Stylus. Clean syntax, feature-rich, decent support.

JS - Wut?!

Unlike HTML and CSS I don't believe a sensible intermediate language exists yet for JavaScript. It's a programming language not a scripting language (anymore).

Likewise, JQuery got us through the dark ages of front-end development but legacy support requirements have all but gone (unless you're in one of those companies). Frameworks come and go (and boy they sure do) but JavaScript and the DOM remains.

Nodemon

Why does every library need to implement a watcher? Keep it light and consistent and use nodemon.

Material Design Lite

A lot of thought has gone into the Material Design spec and I like the common sense rules. On top of that MDL uses standard HTML, CSS and JS without requiring heavy frameworks.

Inspired by

TODO

Prod test with no dev modules installed

PhilT/jlue