SlideShare a Scribd company logo
1 of 56
Download to read offline
Kickstarting Node.js Projects with 
patrickbuergin.com 
2014-12-04
xkcd.com/910 
2
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
Yeoman 
Overview 
yeoman.io 
Yeoman helps you kickstart new 
projects, prescribing best practices 
and tools to help you stay productive. 
Weekly #downloads @ npm 
4
Yeoman 
It’s a Workflow… 
Scaffolding Package Management Build System 
yo Bower & npm Grunt / Gulp 
5
Yeoman 
…and an Ecosystem of Generators 
6
Yeoman 
…and an Ecosystem of Generators 
6
Front-End Example 
Launching a Generator 
$ npm install -g yo 
$ npm install -g generator-webapp 
7
Front-End Example 
Generator Output 
+ Minification, Testing, Linting, … 
$ grunt serve 
8
Front-End Example 
Workflow 
Scaffolding Package Management Build System 
yo Bower & npm Grunt 
9
Yeoman Isn’t Limited to Front-End 
10
Yeoman Isn’t Limited to Front-End 
10
Some Related Concepts 
Express Generator Archetypes 
Eclipse (Java) 
& 
new 
& 
generate 
11
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
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 
After a couple of seconds we’re ready to go.
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 
This is where you would add the module functions…
Demo 
generator-node + generator-express 
…and this is the corresponding test
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 
Let’s adapt the test accordingly…
Demo 
generator-node + generator-express 
…and implement a suitable generate function
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 
This is what the server returns by default
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 
That should do.
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 
REST API socket.io 
Angular.js 
HTML / CSS 
server 
client 
MongoDB Wire 
Mongoose ODM 
32
The MEAN Stack 
Node.js + Express 
REST API socket.io 
Angular.js 
HTML / CSS 
server 
client 
MongoDB Wire 
Mongoose ODM 
+ Testing, Authentication, Preprocessors, … 
32
Popular MEAN Generators 
angular-fullstack 
meanjs 
mean-seed 
meanstack 
Weekly #downloads @ npm 
33
Demo 
generator-meanjs 
You know the deal…
Demo 
generator-meanjs 
After we answer a number of questions, the generator initializes a fairly 
complex project structure
Demo 
generator-meanjs 
Let’s start a MongoDB server so that we can check out the application…
Demo 
generator-meanjs 
…then run grunt to build and start it
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 
After logging in, you can find some menu items to manage your profile
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) 
/app (back-end) 
Express components, Mongoose Schemas 
/config (back-end) 
Authentication Strategies, API Keys, Addresses, … 
/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 
This is what our new CRUD module looks like in the front-end
Demo 
generator-meanjs 
As promised, there is a list view, a detail view and views for adding/editing objects
Demo 
generator-meanjs 
Let’s add a new job…
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
Demo 
generator-meanjs 
Here is an excerpt of the generated code — a great starting point
Other Back-End Generators 
jhipster 
skinny 
Total #downloads ’14 @ npm Weekly #downloads @ 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 :)
Discussion 
Bloat 
Outdated Generators 
Doesn’t fit your needs 
Agility 
Inspiration 
Focus on issue at hand 
Helping others 
Not invented here

More Related Content

What's hot

You know what iMEAN? Using MEAN stack for application dev on Informix
You know what iMEAN? Using MEAN stack for application dev on InformixYou know what iMEAN? Using MEAN stack for application dev on Informix
You know what iMEAN? Using MEAN stack for application dev on InformixKeshav Murthy
 
The Complementarity of React and Web Components
The Complementarity of React and Web ComponentsThe Complementarity of React and Web Components
The Complementarity of React and Web ComponentsAndrew Rota
 
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?MarkupBox
 
Introduction to VueJS & Vuex
Introduction to VueJS & VuexIntroduction to VueJS & Vuex
Introduction to VueJS & VuexBernd Alter
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS IntrodructionDavid Ličen
 
Mean Stack - An Overview
Mean Stack - An OverviewMean Stack - An Overview
Mean Stack - An OverviewNaveen Pete
 
Introduction to the MEAN stack
Introduction to the MEAN stackIntroduction to the MEAN stack
Introduction to the MEAN stackYoann Gotthilf
 
NodeSummit - MEAN Stack
NodeSummit - MEAN StackNodeSummit - MEAN Stack
NodeSummit - MEAN StackValeri Karpov
 
Vue.js
Vue.jsVue.js
Vue.jsBADR
 
Introduction to mean stack
Introduction to mean stackIntroduction to mean stack
Introduction to mean stackPraveen Gubbala
 
Combining Angular and React Together
Combining Angular and React TogetherCombining Angular and React Together
Combining Angular and React TogetherSebastian Pederiva
 
Beginning MEAN Stack
Beginning MEAN StackBeginning MEAN Stack
Beginning MEAN StackRob Davarnia
 
Starting from Scratch with the MEAN Stack
Starting from Scratch with the MEAN StackStarting from Scratch with the MEAN Stack
Starting from Scratch with the MEAN StackMongoDB
 
Beyond the MEAN Stack: Thinking Small with Node.js for the Enterprise
Beyond the MEAN Stack: Thinking Small with Node.js for the EnterpriseBeyond the MEAN Stack: Thinking Small with Node.js for the Enterprise
Beyond the MEAN Stack: Thinking Small with Node.js for the EnterpriseForrest Norvell
 

What's hot (20)

You know what iMEAN? Using MEAN stack for application dev on Informix
You know what iMEAN? Using MEAN stack for application dev on InformixYou know what iMEAN? Using MEAN stack for application dev on Informix
You know what iMEAN? Using MEAN stack for application dev on Informix
 
Mean PPT
Mean PPTMean PPT
Mean PPT
 
An Overview on Nuxt.js
An Overview on Nuxt.jsAn Overview on Nuxt.js
An Overview on Nuxt.js
 
Angular js introduction
Angular js introductionAngular js introduction
Angular js introduction
 
MEAN stack
MEAN stackMEAN stack
MEAN stack
 
The Complementarity of React and Web Components
The Complementarity of React and Web ComponentsThe Complementarity of React and Web Components
The Complementarity of React and Web Components
 
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
AngularJS vs React JS vs Node JS: Which is Best For Web Development ?
 
Introduction to VueJS & Vuex
Introduction to VueJS & VuexIntroduction to VueJS & Vuex
Introduction to VueJS & Vuex
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction
 
Mean Stack - An Overview
Mean Stack - An OverviewMean Stack - An Overview
Mean Stack - An Overview
 
Introduction to the MEAN stack
Introduction to the MEAN stackIntroduction to the MEAN stack
Introduction to the MEAN stack
 
NodeSummit - MEAN Stack
NodeSummit - MEAN StackNodeSummit - MEAN Stack
NodeSummit - MEAN Stack
 
Vue.js
Vue.jsVue.js
Vue.js
 
Introduction to mean stack
Introduction to mean stackIntroduction to mean stack
Introduction to mean stack
 
Combining Angular and React Together
Combining Angular and React TogetherCombining Angular and React Together
Combining Angular and React Together
 
Mern stack developement
Mern stack developementMern stack developement
Mern stack developement
 
React Vs AnagularJS
React Vs AnagularJSReact Vs AnagularJS
React Vs AnagularJS
 
Beginning MEAN Stack
Beginning MEAN StackBeginning MEAN Stack
Beginning MEAN Stack
 
Starting from Scratch with the MEAN Stack
Starting from Scratch with the MEAN StackStarting from Scratch with the MEAN Stack
Starting from Scratch with the MEAN Stack
 
Beyond the MEAN Stack: Thinking Small with Node.js for the Enterprise
Beyond the MEAN Stack: Thinking Small with Node.js for the EnterpriseBeyond the MEAN Stack: Thinking Small with Node.js for the Enterprise
Beyond the MEAN Stack: Thinking Small with Node.js for the Enterprise
 

Viewers also liked

Rest api webinar(3)
Rest api webinar(3)Rest api webinar(3)
Rest api webinar(3)WSO2
 
Continuous Delivery with NetflixOSS
Continuous Delivery with NetflixOSSContinuous Delivery with NetflixOSS
Continuous Delivery with NetflixOSSDaniel Woods
 
Front end workflow with yeoman
Front end workflow with yeomanFront end workflow with yeoman
Front end workflow with yeomanhassan hafez
 
Create a RESTful API with NodeJS, Express and MongoDB
Create a RESTful API with NodeJS, Express and MongoDBCreate a RESTful API with NodeJS, Express and MongoDB
Create a RESTful API with NodeJS, Express and MongoDBHengki Sihombing
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsclimboid
 

Viewers also liked (6)

Rest api webinar(3)
Rest api webinar(3)Rest api webinar(3)
Rest api webinar(3)
 
Continuous Delivery with NetflixOSS
Continuous Delivery with NetflixOSSContinuous Delivery with NetflixOSS
Continuous Delivery with NetflixOSS
 
Front end workflow with yeoman
Front end workflow with yeomanFront end workflow with yeoman
Front end workflow with yeoman
 
Create a RESTful API with NodeJS, Express and MongoDB
Create a RESTful API with NodeJS, Express and MongoDBCreate a RESTful API with NodeJS, Express and MongoDB
Create a RESTful API with NodeJS, Express and MongoDB
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web apps
 
Yeoman generator
Yeoman generatorYeoman generator
Yeoman generator
 

Similar to Kickstarting Node.js Projects with Yeoman

Node.js meetup 17.05.2017 ember.js - escape the javascript fatigue
Node.js meetup 17.05.2017   ember.js - escape the javascript fatigueNode.js meetup 17.05.2017   ember.js - escape the javascript fatigue
Node.js meetup 17.05.2017 ember.js - escape the javascript fatigueTobias Braner
 
Node JS Express : Steps to Create Restful Web App
Node JS Express : Steps to Create Restful Web AppNode JS Express : Steps to Create Restful Web App
Node JS Express : Steps to Create Restful Web AppEdureka!
 
Beginning AngularJS
Beginning AngularJSBeginning AngularJS
Beginning AngularJSTroy Miles
 
JavaScript Modules Done Right
JavaScript Modules Done RightJavaScript Modules Done Right
JavaScript Modules Done RightMariusz Nowak
 
Workshop: Functional testing made easy with PHPUnit & Selenium (phpCE Poland,...
Workshop: Functional testing made easy with PHPUnit & Selenium (phpCE Poland,...Workshop: Functional testing made easy with PHPUnit & Selenium (phpCE Poland,...
Workshop: Functional testing made easy with PHPUnit & Selenium (phpCE Poland,...Ondřej Machulda
 
Mini Curso Django Ii Congresso Academico Ces
Mini Curso Django Ii Congresso Academico CesMini Curso Django Ii Congresso Academico Ces
Mini Curso Django Ii Congresso Academico CesLeonardo Fernandes
 
Node JS Express: Steps to Create Restful Web App
Node JS Express: Steps to Create Restful Web AppNode JS Express: Steps to Create Restful Web App
Node JS Express: Steps to Create Restful Web AppEdureka!
 
Intro To Django
Intro To DjangoIntro To Django
Intro To DjangoUdi Bauman
 
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...JSFestUA
 
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationDavid Amend
 
JSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontendJSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontendVlad Fedosov
 
Profiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / WebgrindProfiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / WebgrindSam Keen
 
2019 StartIT - Boosting your performance with Blackfire
2019 StartIT - Boosting your performance with Blackfire2019 StartIT - Boosting your performance with Blackfire
2019 StartIT - Boosting your performance with BlackfireMarko Mitranić
 
Serverless in production, an experience report (Going Serverless)
Serverless in production, an experience report (Going Serverless)Serverless in production, an experience report (Going Serverless)
Serverless in production, an experience report (Going Serverless)Yan Cui
 
Serverless in production, an experience report (linuxing in london)
Serverless in production, an experience report (linuxing in london)Serverless in production, an experience report (linuxing in london)
Serverless in production, an experience report (linuxing in london)Yan Cui
 
Intro to SpringBatch NoSQL 2021
Intro to SpringBatch NoSQL 2021Intro to SpringBatch NoSQL 2021
Intro to SpringBatch NoSQL 2021Slobodan Lohja
 
Java script unit testing
Java script unit testingJava script unit testing
Java script unit testingMats Bryntse
 

Similar to Kickstarting Node.js Projects with Yeoman (20)

SMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdfSMX_DevTools_Monaco_2.pdf
SMX_DevTools_Monaco_2.pdf
 
Node.js meetup 17.05.2017 ember.js - escape the javascript fatigue
Node.js meetup 17.05.2017   ember.js - escape the javascript fatigueNode.js meetup 17.05.2017   ember.js - escape the javascript fatigue
Node.js meetup 17.05.2017 ember.js - escape the javascript fatigue
 
Node JS Express : Steps to Create Restful Web App
Node JS Express : Steps to Create Restful Web AppNode JS Express : Steps to Create Restful Web App
Node JS Express : Steps to Create Restful Web App
 
Beginning AngularJS
Beginning AngularJSBeginning AngularJS
Beginning AngularJS
 
JavaScript Modules Done Right
JavaScript Modules Done RightJavaScript Modules Done Right
JavaScript Modules Done Right
 
Workshop: Functional testing made easy with PHPUnit & Selenium (phpCE Poland,...
Workshop: Functional testing made easy with PHPUnit & Selenium (phpCE Poland,...Workshop: Functional testing made easy with PHPUnit & Selenium (phpCE Poland,...
Workshop: Functional testing made easy with PHPUnit & Selenium (phpCE Poland,...
 
Kraken.js Lab Primer
Kraken.js Lab PrimerKraken.js Lab Primer
Kraken.js Lab Primer
 
Mini Curso Django Ii Congresso Academico Ces
Mini Curso Django Ii Congresso Academico CesMini Curso Django Ii Congresso Academico Ces
Mini Curso Django Ii Congresso Academico Ces
 
Getting Started with MEAN Stack
Getting Started with MEAN StackGetting Started with MEAN Stack
Getting Started with MEAN Stack
 
Node JS Express: Steps to Create Restful Web App
Node JS Express: Steps to Create Restful Web AppNode JS Express: Steps to Create Restful Web App
Node JS Express: Steps to Create Restful Web App
 
Intro To Django
Intro To DjangoIntro To Django
Intro To Django
 
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
 
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous Integration
 
JSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontendJSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontend
 
Profiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / WebgrindProfiling PHP with Xdebug / Webgrind
Profiling PHP with Xdebug / Webgrind
 
2019 StartIT - Boosting your performance with Blackfire
2019 StartIT - Boosting your performance with Blackfire2019 StartIT - Boosting your performance with Blackfire
2019 StartIT - Boosting your performance with Blackfire
 
Serverless in production, an experience report (Going Serverless)
Serverless in production, an experience report (Going Serverless)Serverless in production, an experience report (Going Serverless)
Serverless in production, an experience report (Going Serverless)
 
Serverless in production, an experience report (linuxing in london)
Serverless in production, an experience report (linuxing in london)Serverless in production, an experience report (linuxing in london)
Serverless in production, an experience report (linuxing in london)
 
Intro to SpringBatch NoSQL 2021
Intro to SpringBatch NoSQL 2021Intro to SpringBatch NoSQL 2021
Intro to SpringBatch NoSQL 2021
 
Java script unit testing
Java script unit testingJava script unit testing
Java script unit testing
 

Recently uploaded

Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company OdishaBalasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odishasmiwainfosol
 
Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...
Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...
Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...Matt Ray
 
Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Rob Geurden
 
Odoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 EnterpriseOdoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 Enterprisepreethippts
 
英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作qr0udbr0
 
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Natan Silnitsky
 
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full RecordingOpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full RecordingShane Coughlan
 
Salesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZSalesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZABSYZ Inc
 
What is Advanced Excel and what are some best practices for designing and cre...
What is Advanced Excel and what are some best practices for designing and cre...What is Advanced Excel and what are some best practices for designing and cre...
What is Advanced Excel and what are some best practices for designing and cre...Technogeeks
 
Unveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New FeaturesUnveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New FeaturesŁukasz Chruściel
 
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...confluent
 
Sending Calendar Invites on SES and Calendarsnack.pdf
Sending Calendar Invites on SES and Calendarsnack.pdfSending Calendar Invites on SES and Calendarsnack.pdf
Sending Calendar Invites on SES and Calendarsnack.pdf31events.com
 
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsSensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsChristian Birchler
 
Ronisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited CatalogueRonisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited Catalogueitservices996
 
Patterns for automating API delivery. API conference
Patterns for automating API delivery. API conferencePatterns for automating API delivery. API conference
Patterns for automating API delivery. API conferencessuser9e7c64
 
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...Cizo Technology Services
 
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...OnePlan Solutions
 
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...Angel Borroy López
 
How to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion ApplicationHow to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion ApplicationBradBedford3
 
Powering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data StreamsPowering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data StreamsSafe Software
 

Recently uploaded (20)

Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company OdishaBalasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
Balasore Best It Company|| Top 10 IT Company || Balasore Software company Odisha
 
Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...
Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...
Open Source Summit NA 2024: Open Source Cloud Costs - OpenCost's Impact on En...
 
Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...Simplifying Microservices & Apps - The art of effortless development - Meetup...
Simplifying Microservices & Apps - The art of effortless development - Meetup...
 
Odoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 EnterpriseOdoo 14 - eLearning Module In Odoo 14 Enterprise
Odoo 14 - eLearning Module In Odoo 14 Enterprise
 
英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作英国UN学位证,北安普顿大学毕业证书1:1制作
英国UN学位证,北安普顿大学毕业证书1:1制作
 
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
Taming Distributed Systems: Key Insights from Wix's Large-Scale Experience - ...
 
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full RecordingOpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
OpenChain AI Study Group - Europe and Asia Recap - 2024-04-11 - Full Recording
 
Salesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZSalesforce Implementation Services PPT By ABSYZ
Salesforce Implementation Services PPT By ABSYZ
 
What is Advanced Excel and what are some best practices for designing and cre...
What is Advanced Excel and what are some best practices for designing and cre...What is Advanced Excel and what are some best practices for designing and cre...
What is Advanced Excel and what are some best practices for designing and cre...
 
Unveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New FeaturesUnveiling the Future: Sylius 2.0 New Features
Unveiling the Future: Sylius 2.0 New Features
 
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
Catch the Wave: SAP Event-Driven and Data Streaming for the Intelligence Ente...
 
Sending Calendar Invites on SES and Calendarsnack.pdf
Sending Calendar Invites on SES and Calendarsnack.pdfSending Calendar Invites on SES and Calendarsnack.pdf
Sending Calendar Invites on SES and Calendarsnack.pdf
 
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving CarsSensoDat: Simulation-based Sensor Dataset of Self-driving Cars
SensoDat: Simulation-based Sensor Dataset of Self-driving Cars
 
Ronisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited CatalogueRonisha Informatics Private Limited Catalogue
Ronisha Informatics Private Limited Catalogue
 
Patterns for automating API delivery. API conference
Patterns for automating API delivery. API conferencePatterns for automating API delivery. API conference
Patterns for automating API delivery. API conference
 
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
Global Identity Enrolment and Verification Pro Solution - Cizo Technology Ser...
 
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
Maximizing Efficiency and Profitability with OnePlan’s Professional Service A...
 
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
Alfresco TTL#157 - Troubleshooting Made Easy: Deciphering Alfresco mTLS Confi...
 
How to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion ApplicationHow to submit a standout Adobe Champion Application
How to submit a standout Adobe Champion Application
 
Powering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data StreamsPowering Real-Time Decisions with Continuous Data Streams
Powering Real-Time Decisions with Continuous Data Streams
 

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