More Related Content


Recently uploaded(20)

Kickstarting Node.js Projects with Yeoman

  1. Kickstarting Node.js Projects with 2014-12-04
  2. 2
  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 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 Angular.js HTML / CSS server client MongoDB Wire Mongoose ODM 32
  35. The MEAN Stack Node.js + Express REST API 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 @ …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