merkle-open / generator-nitro

Your frontend? Fuel it with Nitro! Develop your frontend with a proven but flexible Node.js app, even in a large team.

Nitro

Nitro is a Node.js application for simple and complex frontend development with a tiny footprint. It provides a proven but flexible structure to develop your frontend code, even in a large team.

The codebase is split up in different packages, organized in this monorepo. Besides the main functionality including a yeoman generator, this repo includes also example projects.

• packages/generator-nitro (yeoman generator)
• packages/nitro-app (main serverside app)
• packages/nitro-exporter (nitro exporter package)
• packages/nitro-gulp (nitro gulp task runner)
• packages/nitro-webpack (nitro webpack config)
• packages/project-new (folder to test the generator)
• packages/project-nitro (example project with handlebars rendering engine)
• packages/project-nitro-twig (example project with twig rendering engine)
• packages/project-nitro-typescript (example project with typescript)
• packages/project-prod (example of minimum version for production use)

Getting started

Generate or update a project

Have a look at the usage section of the package 'generator-nitro' on how to create or update a project.

Sample project

Have a look at the sample project which contains the examples of a generated project and was statified with the default configuration of the 'nitro-exporter'.

Working with this repo

Have a look at the usage documentation to see how to work with this repository.

Changelog

Recent changes can be viewed on Github on the Releases Page

generator-nitro's Issues

Add possibility to use different component template

e.g.

{{ component name='Example' data='example' }}

Needed by some integrations

Simplify LESS/SCSS component patterns by using parent selector

Currently the boilerplate LESS/SCSS files repeat .m-example for every element, this could be simplified by using the & parent selector and thus leading developers towards an imho better pattern for structuring the code.

Current SCSS

.m-example {
    padding: 1em 2em;
    background: darken($gray, 15%);
}
.m-example__headline {
    font-size: 1.6em;
    color: white;
}
.m-example__link {
    color: white;
}

Optimised SCSS

.m-example {
    padding: 1em 2em;
    background: darken($gray, 15%);

    &__headline {
        font-size: 1.6em;
        color: white;
    }

    &__link {
        color: white;
    }
}

Add Grunt as alternative Task-Runner

It would be great if the generator support Grunt as a alternative to Gulp

make *.handlebars, *.hbs or *.mustache as default file extension instead of .html

if we use the correct file extensions it can be better recognized by IDE's for syntax highlightning and other features (helpers i.e).

i.e for the jetbrain products: https://github.com/dmarcotte/idea-handlebars

at least make it configurable via config.

Nitro crashes if "spec" folder is deleted

Nitro crashes with following error message:

…/node_modules/gulp-watch/node_modules/glob/node_modules/minimatch/minimatch.js:108
    throw new TypeError('glob pattern string required')
          ^
TypeError: glob pattern string required
…

Environment Config

Discuss the need and scope of environment configs as files. ( /config/environment.json )
This could make things more transparent as the configs for the staging or production environment could also be part of the repository.

• configuration of ports ( #11 )
• error handling
• ...

publish package to www.npmjs.com

Typescript compiler is "one version behind"

When you use typescript, the gulp task is always "one version behind".

The gulp runner compiles typescript to javascript and writes it onto the disk. the next step should be to write the whole javascript into the asset.js file.

Problem is, that the compiled javascript is one version behind (the last compiled file is taken)

maybe thats a timing issue with the async file methods.

Better handlebars error handling

... to prevent stuff like that (which ruins BrowserSync's autoreloading):

Error: example.html: Parse error on line 9:
...omponent 'header'    </div>  </div>  <di
----------------------^
Expecting 'CLOSE_RAW_BLOCK', 'CLOSE', 'CLOSE_UNESCAPED', 'OPEN_SEXPR', 'CLOSE_SEXPR', 'ID', 'OPEN_BLOCK_PARAMS', 'STRING', 'NUMBER', 'BOOLEAN', 'DATA', got 'INVALID'
   at Object.parseError ([...]/handlebars/compiler/parser.js:150:11)
   at Object.parse ([...]/handlebars/compiler/parser.js:202:22)
   at HandlebarsEnvironment.parse ([...]/handlebars/compiler/base.js:25:30)
   at compileInput ([...]/handlebars/compiler/compiler.js:451:19)
   at ret ([...]/handlebars/compiler/compiler.js:460:18)
   at [...]/hbs/lib/hbs.js:63:19
   at fs.js:334:14
   at FSReqWrap.oncomplete (fs.js:95:15)

Create pages/views with yeoman

Restructure Gulp Tasks

Make the naming of the gulp tasks and their dependencies more convenient.

better error handling for server start

Improve error message when server fails to start.
currently:

    ... Uhoh. Got error listen EADDRINUSE ...
Error: listen EADDRINUSE
    at exports._errnoException (util.js:746:11)
    at Server._listen2 (net.js:1156:14)
    ...

or even better use something like https://www.npmjs.com/package/portscanner to detect and use only free ports

Improve component test setup

• support for component helper and data jsons
• better test stubs with real markup

Make view file extension configurable

The default file extension for templates is currently .html, it would be great if you could easily switch this to .hbs on project setup, just for better syntax highlighting.

Replace gulp-express with gulp-live-server

gulp-express issues a warning upon installation:

please use gulp-live-server instead, it's a new version of gulp-express with a better name and new features. -- github.com/gimm/gulp-express

I haven't checked whether it's a drop-in replacement or needs adjustments.

Sourcemaps support

Add sourcemaps for css and js assets.

yo nitro:component ignores "-" in created filenames

try

$ yo nitro:component

$ What's the name of your component? nav-main

the hyphen is correctly used for the directory name but not for the file names of views, js and less files.
resulting filenames: navmain.ext instead of nav-main.ext

Enhance data handling

Data handling should be extended by:

• Additional data in component helper
• Label helper
• Data for views

Add js template precompiling solution including naming convention

compile-css & compile-js tasks should be synchronous

Generating a minified asset does not work properly because the minification starts before the compilation ends.

mybe the promise pattern could help

Idea Pool

Ideas how to further develop Nitro which are not simple to implement. Concepts and ideas need to be developed further..

• Break nitro into packages (app, gulp, generator)
• Nitro app should be installable via npm install but still extendable
• More Ideas

Clean Up (dev)-dependencies

We should have another look at the dependencies and devDependencies to clean up and categorize.

Add placeholder handlebars helper

Shared configuration between preprocessor and javascript

It would be great if you could simply place one JSON file with settings, which will then be available as variables in less or scss and can easily be required in Javascript. This would be especially useful for things such as viewport breakpoint settings or asset paths.

This gulp plugin can do the job for preprocessors: https://www.npmjs.com/package/gulp-json-css

Data interface for components helper

Would it make sense to allow passing data to a component via the component helper. For exmple to share data used in multiple components (like user information or labels).

I could imagine that this happens by referencing one or more data resources or the ugly way by providing serialized JSON strings (not really reusable it not done by an additional helper).

This question might be important for integrations in Spring to simulate the model provided to the view.

js-tasks breaks gulp chain on error

JavaScript Errors on minifying or compiling JavaScript assets could break the gulp-chain and require a task restart.

Add optional typescript support

If typescript should be supportet (as a buildstep in gulp), the dependencies and some example files should be included

Possible support for TerrificJS as TypeScript.

Handlebars partials recompilation

At the moment changes in partials are not taken into account immediately.

How can I have two instances of nitro run simultaneously?

... or, where to configure the process.env variables?
'PORT=8000 PROXY=8001 gulp develop' deos not seem to be working (on Windows)

Split `skins` into `modifier` and `decorator`

Add helpers.less|scss to default setup

Add more options to nitro:component Generator

Add more options to the yo nitro:component generator.

I've seen a many modules with only boilerplate JS code. That's just pollution of our T.Module namespace and adds weight to app.js.

create a nitro icon

and use as default favicon, apple-touch, ... icon
place favicon & apple-touch icon also in root

404 page with view listing

To make the 404 page more useful, it would be nice if all views are listed.

Our proposal is:

• Create handlebars helper for listing all pages
• Create a default 404.html in /views/
• Make use of the listing helpers in 404.html

This makes the 404 page customizable for each project, but it comes with a wise default.

Performance Tweaks

Things that (I think) are too slow:

• gulp develop
• yo nitro (npm? bower?)
• imageoptimizer optimizes every time, needs to be run once only (per image)
• ...

At one point we could maybe have a look at one or two of these points..

Tidy up Readme's

At the moment there are 2 Readme's:

• /README.md
• /app/templates/README.md

All of the application relevant stuff should be moved to /app/templates/README.md. The global README should only contain generator stuff.

improve asset handling

make asset handling more logical by adding all assets to the /assets folder instead of splitting them up in 2 directories (/assets & /public/).

getSourceFiles returns first asset only

getSourceFiles returns the first matched asset only. There is currently no possibility to define multiple CSS or JS assets inside config.json: only the first defined is compiled.

Consider returning an array of asset-objects and iterate over it in the compile-css and compile-js tasks.

Gzip compression

Enable gzip compression for all resources.

gulp task 'minify-img' does not copy svg's

I assume that the gulp task 'minify-img' should also copy svg-files from assets/img to public/assets/img provided through the svgo plugin. Unfortunately it doesn't.

Gulp initially copies the folder (with containing svg's) but leaves it empty in public/assets/img and gulp breaks. If you run the task a second time, gulp breaks. If you manually copy the svg's to this folder, all gulp tasks pass through.

`yo nitro` should save the desired configuration

In order to be able to perform an clean update, the app configuration should be saved somewhere. (.yo-rc.json could be a good place)

Allow wildcard dependencies for compilation

If mixins or colors (in less, scss or similar) are splitted in multiple files it would be nice to address them in the config.json with the wildcard sign.
Example:

"app.css": [
            "+assets/css/variables.scss",
            "+assets/css/mixins.scss",
            "+assets/css/variables/*.scss",
            "+assets/css/mixins/*.scss",
            "assets/css/reset.css",
            "assets/css/basic.scss",
            "components/**/css/*.scss",
            "components/**/css/skins/*.scss"
        ],

instead of

"app.css": [
            "+assets/css/variables.scss",
            "+assets/css/mixins.scss",
            "+assets/css/variables/_baukasten.scss",
            "+assets/css/variables/_colors.scss",
            "+assets/css/variables/_constants.scss",
            "+assets/css/variables/_utils.scss",
            "+assets/css/mixins/_arrows.scss",
            "+assets/css/mixins/_border-dotted.scss",
            "assets/css/reset.css",
            "assets/css/basic.scss",
            "components/**/css/*.scss",
            "components/**/css/skins/*.scss"
        ],

View Service

Introduce a ViewService which knows about Nitro's views.
This can be some sort of a flat list (or a tree, see #19) which then can be used in the view_list helper (here) and the router (here).

Performance-wise it might be a tad slower than the current implementation but a lot more readable. See here.

Ideally the list doesn't need to be recalculated on every request but can be cached. This might introduce new issues when creating/deleting/renaming views, but should be solvable.

Maybe this can be somehow integrated with express/hbs?

Rename splendid to nitro

Node-Gyp compilation fails on windows

If the os is windows and the user has not installed Visual Studio 2010, a specific version is required

! npm install command with --msvs_version=<%number%> (e.g. 2013)

Automate bower dependencies

Scenario:
Dev A adds bower dependency, pushes code. Dev B pulls code, runs nitro and gets a broken Frontend > due to missing dependencies.

We should probably find a way how to solve that.
This ticket is more of a reminder than a bug report.

Use autoprefixer instead of mixins

https://www.npmjs.com/package/gulp-autoprefixer

EditorConfig is not enforced

Add some optional example components

• to show the usage of terrific-js
• to show some best practices

Install Bower and NPM packages from gulp

Premise: Do no check in dependencies (neither Bower nor NPM).

Try to automate this step with https://www.npmjs.com/package/gulp-install . Make sure that the install is only initiated when there are changes in package.json or bower.json.