## Node JS as a Development Tool --- The fulcrum for as assemblage of javascript ideas... ![fulcrum](./img/fulcrum.png) ![assemblage](./img/assemblage.png)
## Node JS [![nodejs](./img/nodejs.png)](http://nodejs.org/)
## What is 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.
## Example This simple web server written in Node responds with "Hello World" for every request. var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n'); }).listen(1337, '127.0.0.1'); console.log('Server running at http://127.0.0.1:1337/'); To run the server, put the code into a file example.js and execute it with the node program from the command line: ```bash % node example.js Server running at http://127.0.0.1:1337/ ```
## Details [nodejs.org](http://nodejs.org/) - download and install on... - Windows, Linux, Apple Mac - Desktop, Server - use as custom server - use as command line tool - large community - includes c compiler, for performant components - very good at idling - useful for rich UI web apps with frequent connections to server
## Node Package Manager (NPM) [![npm](./img/npm.png)](https://npmjs.org/)
## What is NPM? [npmjs.org](https://npmjs.org/) - Package manager for Node JS - Dependency management for projects - Any package can be installed by using `npm install`. - Add your programs to this index by using `npm publish`. - Total Packages: 45,833 - 5,635,627 downloads in the last day
## Yeoman [![yeoman](./img/yeoman.png)](http://yeoman.io/)
## What is Yeoman Yeoman 1.0 is more than just a tool. It's a workflow; a collection of tools and best practices working in harmony to make developing for the web even better. Yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks that you might need for your build. ```bash % npm install -g yo % npm install -g generator-webapp % yo webapp # scaffold out a skeleton web app project ``` Yeoman is a project developed by Paul Irish, Addy Osmani ([talks about it here](https://www.youtube.com/watch?feature=player_embedded&v=Hl1sp9axHEY))... and more top JS devs.
## Bower [![bower](./img/bower.png)](http://bower.io/)
## What is NPM? [bower.io](http://bower.io/) Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.
## Usage First install bower... npm install -g bower and then... ```bash # Using a local or remote package bower install <package> # Using a specific version of a package bower install <package>#<version> # Using a different name and a specific version of a package bower install <name>=<package>#<version> ```
## Project dependencies ```json { "name": "my-project", "version": "1.0.0", "main": "path/to/main.css", "ignore": [ ".jshintrc", "**/*.txt" ], "dependencies": { "": "", "": "", "": "" }, "devDependencies": { "": "" } } ``` and then... # Using the dependencies listed in the current directory's bower.json bower install
## Grunt [![grunt](./img/grunt.png)](https://http://gruntjs.com//)
## Why use a task runner? [gruntjs.com](http://gruntjs.com/) --- ### In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it, a task runner can do most of that mundane work for you—and your team—with basically zero effort.
## How to use Grunt npm install -g grunt-cli --- # contents of Gruntfile.js module.exports = function(grunt) { grunt.initConfig({ // Project configuration. pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); // Load uglify plugin grunt.registerTask('default', ['uglify']); // Default task(s). }; --- grunt <taskname>
## Karma [![karma](./img/karma.png)](http://karma-runner.github.io/)
## What is Karma? [karma-runner.github.io](http://karma-runner.github.io/) --- The main goal for Karma is to bring a productive testing environment to developers. The environment being one where they don't have to set up loads of configurations, but rather a place where developers can just write the code and get instant feedback from their tests. Because getting quick feedback is what makes you productive and creative.
## Features - Test on Real Devices - Remote Control - Testing Framework Agnostic - Easy Debugging - Continuous Integration
## How to use npm install -g karma and then... karma start or integrate with grunt, and... grunt test
## Jasmine [![jasmine](./img/jasmine.png)](http://pivotal.github.io/jasmine/)
## What is Jasmine? [pivotal.github.io/jasmine](http://pivotal.github.io/jasmine/) --- Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.
## Example describe("A suite is just a function", function() { var a; it("and so is a spec", function() { a = true; expect(a).toBe(true); }); });
## Jade [![jade](./img/jade.png)](http://jade-lang.com/)
## What is Jade? [jade-lang.com](http://jade-lang.com/) --- Jade is designed primarily for server side templating in node.js, however it can be used in many other environments. It is intended to produce XML like documents - HTML, RSS etc... --- ### usage... npm install -g jade jade template.jade
## Example doctype 5 html(lang="en") head title= pageTitle body h1 Jade - node template engine #container.col p this is a paragraph --- <!DOCTYPE html> <html lang="en"> <head> <title>Jade</title> </head> <body> <h1>Jade - node template engine</h1> <div id="container" class="col"> <p>this is a paragraph</p> </div> </body> </html>
## Less [![less](./img/less.png)](http://lesscss.org/)
## What is Jade? [lesscss.org](http://lesscss.org/) --- The dynamic stylesheet language. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only) ### Usage npm install -g less lessc styles.less styles.css
### Less ```less .rounded-corners (@radius: 5px) { -webkit-border-radius: @radius; border-radius: @radius; } @secondary: green; #myWidget { .rounded-corners(10px); a { color: red; &:hover { color: @secondary; } } } ``` ### Compiles to CSS ```css #myWidget { -webkit-border-radius: 10px; border-radius: 10px; } #myWidget a{ color: red; } #myWidget a:hover{ color: green; } ```
## Bootstrap [![bootstrap](./img/bootstrap.png)](http://getbootstrap.com/)
## How to use [getbootstrap.com](http://getbootstrap.com/) bower install bootstrap --- ### Compiling Bootstrap's LESS files If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. This allows you to set variables, including default colours, spacings, font sizes, and border styles etc...
## What's included... ```bash bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff ``` --- - style reset, and basic default styling - ui components, forms/buttons etc... - ui enhancements, popover/carousel etc... - responsive grid
# Business Benefits - Rapid prototyping - code the prototypes, and test them on users - Separate front and back end - clear division of labour, leverage specialised skills - paralelise development - focus on creating re-usable API driven services - standards based application structure (REST) - easily handle alternative UI interfaces (localised/accessible/platform-specific) - Richer UI experience - front end becomes a dynamic view of the current state - AJAX to update data at any time
# The End --- [back to start](#/0/0)