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

 

http://github.com/dtauer/hdc2014-nodejs

Automate Everything

Automation

  • Eliminates repetitive work
  • Eliminates repetitive work
  • Eliminates repetitive work
  • Reduces human air
  • Reduces human air error
  • 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

 

http://github.com/dtauer/hdc2014-nodejs

AIM | HDC 2014 - Front-end Developer Workflows

By Dustin Tauer

AIM | HDC 2014 - Front-end Developer Workflows

  • 1,367