npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mvvm

v0.1.8

Published

Model View ViewModel Scaffolding tool

Downloads

222

Readme

mvvm UNDER Development

##HackReactor Students Checkout the mvvm new command

The documentation was thrown together with little time. I will be updating, and fixing spelling errors soon.

Build Status NPM version

Model View ViewModel Scaffolding tool # in development

Includes

A bunch of predefined boilerplates for AngularJS Fullstack Applications.

There a several from John Papa's ng-demos

John Papa has been the biggest help with the teams I have been working with at HackReactor. Thanks.

What is mvvm?

mvvm is an all purpose command line tool that does several things. It is primarily build for Angular applications. However, it can be used with anything.

Initially I had build an angular fullstack generator called slush-y

mvvm now does everything and more that slush-y.

##What does mvvm do?

mvvm contains a local store, which allows you to save you current working directory. This of course allows you to re install it somewhere else.

Why not use git? Well git is great... but I need something to generate template code quick, and creating a new repo, or pulling peices from a repo was too tediouse.

mvvm is also a command line generator. It uses Gulp, just like slush does, however, you get to create and save the templates.

There is currently not a great deal of flexibility when saving templates. I will be providing updates soon.

Here are some of the featured within mvvm

##Features

- AngularJS Component Generator
- Demo AngularJS Application Generator
- Local Package Storage

Lets get started, and I'll go a little more in depth on these feature below.

Getting Started

Install the module with:

$ npm install -g mvvm

Documentation

###Generator

mvvm new

Run the following command to get started with a fresh simple application template.

HACK REACTOR This is the quick fullstack example we went over in my long three hour talk.

$ mvvm new

mvvm will build a sample module ready application in your current working directory.

Make sure you run npm install && bower install

After npm and bower install, You can run the application by simply running the following command.

$ gulp

gulp has a few tasks.

  • styles
  • bower
  • inject
  • server
  • watch

gulp will simply compile your styles, Then it will find and inject all bower_components into your index.html Then it will find and inject all css, and js into your index.html Then it will simply require the ./server, to run the express server. Finally it will watch you css & js for changes, and livereload.

NOW TIME TO BUILD

Usually you would run the following command

$ mvvm init

mvvm init will ask you a few questions about your file structure. However, if you open the mvvm.json file in your root directory, you will see that these paths are already set for you.

I Do not reccomend changing them. These paths are optimized for consistent Architectural patterns.

Since we dont have to run mvvm init, lets try the following command

$ mvvm --help

You will see a large coloreful list of commands with options.

Lets take a look at mvvm make

###mvvm make [compnent] [name]

mvvm make is a series of generators that will generate template code for you.

Each of these commands will install code into either your ./client/app/core directory or ./client/app/modules/** directory

mvvm will read the modulesDir set in you ./mvvm.json and display each module as an option.

Once an option is chosen, it will then generate the code within that module.

To create a new blank module, you can run the following command.

$ mvvm make module [name]

You can specify a name... or else it will prompt you for the name!

Once you have a new module, You are ready to start generating components within this module.

Check out the --help for available generators.

mvvm demo

Provides a list of demo applications. Several of which come from John Papa's ng-demos.

Here is a list of the current demos

mvvm init

This initializes your CWD (Current working directory with a mvvm.json file)

mvvm.json is an important file, and must be in your directory to run most of the commands.

The init command will prompt you for several directory paths.

-clientDir : your client side directory
-serverDir : your server side directory
-appDir    : The application directory within your client
-modulesDir: The directory where you store your separate  AngularJS Modules
-coreDir   : The directory where you store you core AngularJS Module
mvvm init

Now that we have initialize our directory. you can run the mvvm demo command.

##DEMOS

####BASE

Provides you with a completely empty apllication folder structure. However, There NodeJS server is filled out with something quite interesting.

I have found that it is difficult for new developers to understand how everything in NodeJS is connected. So the server is simply an object called app that is past around to the furthest depths of the server. Each file adds itself, and it's sibling files to this object. By the time the computer reads the server/index.js the entire node application has added some information to the app object.

The app object is finally console.logged at the end of the file. Now you can simply preview what all has been added to the object.

The client side is only a bunch of empty, well architected folders.

Provides a simple example of using each components in angular. See READEME.md for more info.

You can find the docs on the other demos in their README's.

Contributing

See the CONTRIBUTING Guidelines

Support

If you have any problem or suggestion please open an issue here.

License

The MIT License

Copyright (c) 2014, JoelCox

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.