Kickstarting Node.js Projects with Yeoman
•
7 likes•4,094 views
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.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Kickstarting Node.js Projects with Yeoman
Similar to Kickstarting Node.js Projects with Yeoman (20)
Recently uploaded
Recently uploaded (20)
Kickstarting Node.js Projects with Yeoman
- 1. Kickstarting Node.js Projects with patrickbuergin.com 2014-12-04
- 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
- 6. Yeoman …and an Ecosystem of Generators 6
- 7. Yeoman …and an Ecosystem of Generators 6
- 8. Front-End Example Launching a Generator $ npm install -g yo $ npm install -g generator-webapp 7
- 9. Front-End Example Generator Output + Minification, Testing, Linting, … $ grunt serve 8
- 10. Front-End Example Workflow Scaffolding Package Management Build System yo Bower & npm Grunt 9
- 11. Yeoman Isn’t Limited to Front-End 10
- 12. Yeoman Isn’t Limited to Front-End 10
- 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…
- 20. Demo generator-node + generator-express …and this is the corresponding test
- 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
- 22. Demo generator-node + generator-express Let’s adapt the test accordingly…
- 23. Demo generator-node + generator-express …and implement a suitable generate function
- 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
- 28. Demo generator-node + generator-express This is what the server returns by default
- 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
- 32. Demo generator-node + generator-express That should do.
- 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
- 37. Demo generator-meanjs You know the deal…
- 38. Demo generator-meanjs After we answer a number of questions, the generator initializes a fairly complex project structure
- 39. Demo generator-meanjs Let’s start a MongoDB server so that we can check out the application…
- 40. Demo generator-meanjs …then run grunt to build and start it
- 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).
- 43. Demo generator-meanjs After logging in, you can find some menu items to manage your profile
- 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, …
- 46. Demo generator-meanjs generator-meanjs also offers a number sub-generators in order to speed up your development — for example :crud-module
- 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).
- 48. Demo generator-meanjs This is what our new CRUD module looks like in the front-end
- 49. Demo generator-meanjs As promised, there is a list view, a detail view and views for adding/editing objects
- 50. Demo generator-meanjs Let’s add a new job…
- 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
- 52. Demo generator-meanjs Here is an excerpt of the generated code — a great starting point
- 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