WebDev 2014 - Recap – by @Moszeed – cmder



WebDev 2014 - Recap – by @Moszeed – cmder

0 0


windowsWebDev2014

Windows Web Developer 2014

On Github moszeed / windowsWebDev2014

Windows

WebDev 2014 - Recap

by @Moszeed

what to talk about ?

  • knowledge ressources
  • windows tools: cmder & chocolatey
  • grunt plugins
  • browserify

best knowledge ressources

for Javascript (ECMA and Nodejs), UI/UX Design and "IT" related

Windows Tools

cmder

http://bliker.github.io/cmder/

Features

  • ConEmu Mod (*yeah* quake style console)
  • msysgit included (UNIX commands on windows)
  • portable
  • Monokai Theme
  • a paket manager for windows (like "apt-get" for linux)
  • CLI tool (GUI: choclateygui)
  • install with cmd command:
    @powershell -NoProfile -ExecutionPolicy unrestricted
    -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))"
    && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
  • package search with:
    choco search [package name]
  • package install with:
    choco install [package name] || cinst [package name]
  • list all local installed packages
    choco list -lo

my commands after windows reinstall

cinst Cmder
cinst dropbox
cinst SublimeText3
cinst nodist -Pre
cinst avirafreeantivirus

too complicated ? heres a GUI!

cinst chocolateygui

Web Development

  • modular applications
  • usable in Browser

plain module syntax

(function() {

    var ClassName = {};

        ClassName.vMain = Backbone.View.extend({
            initialize : function() {

            }
        });

        window.ClassName = ClassName;
})();
  • global dependencies
  • export with window object
  • global exports

Browserify module syntax

(function() {

    var $           = require('jquery');
    var Backbone    = require('backbone');
        Backbone.$  = $;

    var ClassName   = module.exports;

        ClassName.vMain = Backbone.View.extend({
            initialize : function() {

            }
        });
})();
  • explicitly dependency loading
  • export with module.exports
  • usable in other modules with require
  • real modules

how to use it ?

Install

npm install -g browserify

CLI

browserify ./client/js/app.js -o ./dist/js/app.js

Grunt Plugin

npm install grunt-browserify --save-dev
example
libarys : {
  src     : [],
  dest    : './dist/js/libarys.js',
  options : {
    require     : [
      'backbone',
      'underscore',
      'jquery',
      './client/scripts/libs/backbone-template.js:backbone-template',
      './client/scripts/libs/helper-functions.js:helper'
    ]
  }
}

learning ressources

Grunt.js

Plugins

grunt-concurrent

https://github.com/sindresorhus/grunt-concurrent

'grunt-concurrent' example

load-grunt-config

https://github.com/firstandthird/load-grunt-config

Gruntfile.js with "load-grunt-config"

module.exports = function(grunt) {
    require('load-grunt-config')(grunt);
};

project folders with "load-grunt-config"

THX