Frontend Developer Workflows
Dustin Tauer, Easel Solutions
http://github.com/dtauer/hdc2014-nodejs
Dustin@easelsolutions.com
@dtauer
Dustin Tauer, Easel Solutions
Dustin@easelsolutions.com
@dtauer
Automate Everything
Automation
- Eliminates repetitive work
 - Eliminates repetitive work
 - Eliminates repetitive work
 - Reduces human air
 - Reduces human 
airerror - Eliminates repetitive work
 
Automation you may know
- Make
 - Rake
 - Ant
 - Maven
 
Automation you may not know

But before we automate, let's talk about Node.js

Node.js
"Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices."
- nodejs.org
Node.js
- Server-side JavaScript Engine
 - Single-threaded
 - Runs on all major Operating Systems
 - Download it at nodejs.org
 
Node.js is great for...
- Data-intensive applications
 - Asynchronous I/O
 - REST API
 - Real-time applications
 - Streaming
 - WebRTC
 - TCP Servers
 - Web Sockets
 - Chat Application
 
Node is not great for
- CPU Intensive Processing
 
Quick Node.js Demo
nodejs.org
But Dustin, I'm a web developer.
I make web pages not web servers!
Node Packaged Modules
Install Node Package Modules (NPM) to do all kinds of lovely things. Think Ruby Gems.
- Watch
 - Sass / Less / CoffeeScript / Jade
 - Live Reload
 - JSHint / Lint
 - Concat files
 - Optimize Images
 - Minify (JS, CSS, HTML)
 - Gzip
 - Upload to S3 / FTP
 - Deploy to AWS
 - Jasmine / Mocha / Selenium
 - Page Speed insights
 
Node Packaged Modules
package.json - information of the application, repo, author, dependency, development dependency
#Installing module  
npm install -g http-server 
# Options:
# -g global (It might need administrator access)
# --save saves module  dependency directly to package.json
# --save-dev saves module under dev dependency
# All third party modules will be located  node_modules/npmjs.org
+92K Modules
Automation with Gulp.js**

- Easy to configure
 - Allows for automatic compilation of assets (JS, CSS, Images)
 - Support for unit testing, browser testing and pretty much all forms of front-end testing.
 
**Grunt.js is another great option
Angular App: Before
- 12 Requests
 - 823KB Transfered
 - 67ms
 
Angular App: After
- 5 Requests
 - 134 KB Transfered
 - 25ms
 
Automation!
Resources
- 
	
Nodejs.org
 - 
	
npmjs.org
 - 
	
nodeschool.io
 - 
	
hmphry.com/gulp/
 
Level Up
- 
	
Yeoman for scaffolding applications
- 
		
http://yeoman.io/
 
 - 
		
 - 
	
Bower for managing packages
- 
		
http://bower.io/
 
 - 
		
 
Thanks!
Dustin Tauer, Easel Solutions
Dustin@easelsolutions.com
@dtauer
AIM | HDC 2014 - Front-end Developer Workflows
By Dustin Tauer
AIM | HDC 2014 - Front-end Developer Workflows
- 1,388