Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Kickstarting Node.js Projects with Yeoman

3,390 views

Published on

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.

Published in: Software
  • Be the first to comment

Kickstarting Node.js Projects with Yeoman

  1. 1. Kickstarting Node.js Projects with patrickbuergin.com 2014-12-04
  2. 2. xkcd.com/910 2
  3. 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. 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. 5. Yeoman It’s a Workflow… Scaffolding Package Management Build System yo Bower & npm Grunt / Gulp 5
  6. 6. Yeoman …and an Ecosystem of Generators 6
  7. 7. Yeoman …and an Ecosystem of Generators 6
  8. 8. Front-End Example Launching a Generator $ npm install -g yo $ npm install -g generator-webapp 7
  9. 9. Front-End Example Generator Output + Minification, Testing, Linting, … $ grunt serve 8
  10. 10. Front-End Example Workflow Scaffolding Package Management Build System yo Bower & npm Grunt 9
  11. 11. Yeoman Isn’t Limited to Front-End 10
  12. 12. Yeoman Isn’t Limited to Front-End 10
  13. 13. Some Related Concepts Express Generator Archetypes Eclipse (Java) & new & generate 11
  14. 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. 15. Demo generator-node + generator-express Let’s create a small node module with the help of generator-node…
  16. 16. Demo generator-node + generator-express After a number of questions, it initializes a suitable project structure
  17. 17. Demo generator-node + generator-express After a couple of seconds we’re ready to go.
  18. 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. 19. Demo generator-node + generator-express This is where you would add the module functions…
  20. 20. Demo generator-node + generator-express …and this is the corresponding test
  21. 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. 22. Demo generator-node + generator-express Let’s adapt the test accordingly…
  23. 23. Demo generator-node + generator-express …and implement a suitable generate function
  24. 24. Demo generator-node + generator-express We’re good to go. Let’s run the build script and pack the module
  25. 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. 26. Demo generator-node + generator-express This, again, only takes a couple of seconds and initializes a basic express project structure for us
  27. 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. 28. Demo generator-node + generator-express This is what the server returns by default
  29. 29. Demo generator-node + generator-express Let’s stop the server and integrate the node module we’ve just created…
  30. 30. Demo generator-node + generator-express Here you see the generated project structure, as well as the app.js file.
  31. 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. 32. Demo generator-node + generator-express That should do.
  33. 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. 34. The MEAN Stack Node.js + Express REST API socket.io Angular.js HTML / CSS server client MongoDB Wire Mongoose ODM 32
  35. 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. 36. Popular MEAN Generators angular-fullstack meanjs mean-seed meanstack Weekly #downloads @ npm 33
  37. 37. Demo generator-meanjs You know the deal…
  38. 38. Demo generator-meanjs After we answer a number of questions, the generator initializes a fairly complex project structure
  39. 39. Demo generator-meanjs Let’s start a MongoDB server so that we can check out the application…
  40. 40. Demo generator-meanjs …then run grunt to build and start it
  41. 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. 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. 43. Demo generator-meanjs After logging in, you can find some menu items to manage your profile
  44. 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. 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. 46. Demo generator-meanjs generator-meanjs also offers a number sub-generators in order to speed up your development — for example :crud-module
  47. 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. 48. Demo generator-meanjs This is what our new CRUD module looks like in the front-end
  49. 49. Demo generator-meanjs As promised, there is a list view, a detail view and views for adding/editing objects
  50. 50. Demo generator-meanjs Let’s add a new job…
  51. 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. 52. Demo generator-meanjs Here is an excerpt of the generated code — a great starting point
  53. 53. Other Back-End Generators jhipster skinny Total #downloads ’14 @ npm Weekly #downloads @ npm “Skinny framework’s concept is Scala on Rails” 49
  54. 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. 55. Building Generators 51 Well documented @ yeoman.io/authoring …and there is a generator for that :)
  56. 56. Discussion Bloat Outdated Generators Doesn’t fit your needs Agility Inspiration Focus on issue at hand Helping others Not invented here

×