kickstarting node.js projects with yeoman
TRANSCRIPT
It Can Be Hard to Get Started
‣ Naming things
‣ Searching for best practices
‣ Settling for a project structure
‣ Setting up build scripts
‣ Managing dependencies
‣ Writing boilerplate code
…TL; DR
No Consensus
3
Yeoman Overview
Yeoman helps you kickstart new projects, prescribing best practices and tools to help you stay productive.
yeoman.io
Weekly #downloads @ npm
4
Popular Node Generators
express
kraken
node
Weekly #downloads @ npm
builds upon Express and enables environment-aware, dynamic configuration, advanced middleware capabilities, security, and app lifecycle events.
“based on the express command line tool”
12
Demo generator-node + generator-express
Let’s create a small node module with the help of generator-node…
Demo generator-node + generator-express
After a number of questions, it initializes a suitable project structure
Demo generator-node + generator-express
Among other things, it created a README template, as well as a build script that runs a linter (JSHint) and tests (Mocha)
Demo generator-node + generator-express
For the sake of demonstration, let’s implement a module function that generates fancy job titles — just like this page does
Demo generator-node + generator-express
We’re good to go.Let’s run the build script and pack the module
Demo generator-node + generator-express
Let’s use this opportunity to check out generator-express as well.I choose the most basic options…
Demo generator-node + generator-express
This, again, only takes a couple of seconds and initializes a basic express project structure for us
Demo generator-node + generator-express
By default, the build script starts the server and will automatically restart it whenever you change the code
Demo generator-node + generator-express
Let’s stop the server and integrate the node module we’ve just created…
Demo generator-node + generator-express
Here you see the generated project structure, as well as the app.js file.
Demo generator-node + generator-express
Let’s edit the index page, so that it returns a list of fancy job titles.The corresponding files are just where you would expect them
Demo generator-node + generator-express
And here’s the result. This example was kinda far from practice, but I guess you got the idea of what Yeoman generators can do for you.
The MEAN Stack
Node.js + Express
Angular.js
HTML / CSS
REST API socket.io
server
client
MongoDB Wire
Mongoose ODM
32
The MEAN Stack
Node.js + Express
Angular.js
HTML / CSS
REST API socket.io
server
client
MongoDB Wire
Mongoose ODM
+ Testing, Authentication, Preprocessors, …
32
Demo generator-meanjs
After we answer a number of questions, the generator initializes a fairly complex project structure
Demo generator-meanjs
This is the default page. As you can see on the upper right, the scaffold already includes some basic user management functionality
Demo generator-meanjs
Let’s register a new user. In order to use an external identity provider, we would have to add API keys and host the server on the internet (callbacks).
Demo generator-meanjs
The generated code is structured in a comprehensible manner. In the foreground, you see a part of the default schema for users (Mongoose)
Demo generator-meanjs
The generated code is structured in a comprehensible manner. In the foreground, you see a part of the default schema for users (Mongoose)
/config (back-end) Authentication Strategies, API Keys, Addresses, …
/app (back-end) Express components, Mongoose Schemas
/public (front-end) AngularJS modules, view templates, …
Demo generator-meanjs
generator-meanjs also offers a number sub-generators in order to speed up your development — for example :crud-module
Demo generator-meanjs
It creates both AngularJS and Express files, supporting full CRUD (create, read, update, delete) functionality, as well as basic test generation (Karma & Mocha).
Demo generator-meanjs
As promised, there is a list view, a detail view and views for adding/editing objects
Demo generator-meanjs
There it is — it has also been written to our database by means of a POST request to the corresponding API endpoint provided by Express
Other Back-End Generators
jhipster
skinny
Weekly #downloads @ npmTotal #downloads ’14 @ npm
“Skinny framework’s concept is Scala on Rails”49
Using Yeoman to Help Others Get Started
50
As we looked for a way to help the community build and deploy production level MEAN applications, we decided to go with a Yeoman generator. […] provides a powerful, easy to maintain, and open solution for scaffolding applications.
Building Generators
51
Well documented @ yeoman.io/authoring
…and there is a generator for that :)