http://mnug.de/artikel/meetups/december2014
Scaffolding can be a great way to enable developers quickly in a way consistent with best practices employed by the community or your organization. Yeoman is a proven scaffolding tool for webapps that has been around since 2012 and now sports more than 6000 stars on GitHub. Even though its original focus used to be on supporting front-end development, it now features a considerable number of Node.js-related generators worth exploring. This talk will give a quick overview on the topic of scaffolding, explain what Yeoman is all about and show you how to make the best use of it.
3. 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
…
No Consensus
TL; DR
3
4. Yeoman
Overview
yeoman.io
Yeoman helps you kickstart new
projects, prescribing best practices
and tools to help you stay productive.
Weekly #downloads @ npm
4
5. Yeoman
It’s a Workflow…
Scaffolding Package Management Build System
yo Bower & npm Grunt / Gulp
5
13. Some Related Concepts
Express Generator Archetypes
Eclipse (Java)
&
new
&
generate
11
14. Popular Node Generators
express
kraken
node
Weekly #downloads @ npm
“based on the express command line tool”
builds upon Express and enables
environment-aware, dynamic configuration,
advanced middleware capabilities, security,
and app lifecycle events.
12
15. Demo
generator-node + generator-express
Let’s create a small node module with the help of generator-node…
16. Demo
generator-node + generator-express
After a number of questions, it initializes a suitable project structure
17. Demo
generator-node + generator-express
After a couple of seconds we’re ready to go.
18. 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)
19. Demo
generator-node + generator-express
This is where you would add the module functions…
21. 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
24. Demo
generator-node + generator-express
We’re good to go.
Let’s run the build script and pack the module
25. Demo
generator-node + generator-express
Let’s use this opportunity to check out generator-express as well.
I choose the most basic options…
26. Demo
generator-node + generator-express
This, again, only takes a couple of seconds and initializes a basic express
project structure for us
27. Demo
generator-node + generator-express
By default, the build script starts the server and will automatically restart it
whenever you change the code
29. Demo
generator-node + generator-express
Let’s stop the server and integrate the node module we’ve just created…
30. Demo
generator-node + generator-express
Here you see the generated project structure, as well as the app.js file.
31. 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
33. 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.
34. The MEAN Stack
Node.js + Express
REST API socket.io
Angular.js
HTML / CSS
server
client
MongoDB Wire
Mongoose ODM
32
35. The MEAN Stack
Node.js + Express
REST API socket.io
Angular.js
HTML / CSS
server
client
MongoDB Wire
Mongoose ODM
+ Testing, Authentication, Preprocessors, …
32
36. Popular MEAN Generators
angular-fullstack
meanjs
mean-seed
meanstack
Weekly #downloads @ npm
33
41. 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
42. 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).
44. 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)
45. 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)
/app (back-end)
Express components, Mongoose Schemas
/config (back-end)
Authentication Strategies, API Keys, Addresses, …
/public (front-end)
AngularJS modules, view templates, …
47. 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).
51. 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
53. Other Back-End Generators
jhipster
skinny
Total #downloads ’14 @ npm Weekly #downloads @ npm
“Skinny framework’s concept is Scala on Rails”
49
54. 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.
55. Building Generators
51
Well documented @ yeoman.io/authoring
…and there is a generator for that :)
56. Discussion
Bloat
Outdated Generators
Doesn’t fit your needs
Agility
Inspiration
Focus on issue at hand
Helping others
Not invented here