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,367