The Secrets of The FullStack Ninja - Part A - Session I

בוקר טוב

What’s on for today?

A workshop on setting up a web developer environment

What you should have already setup

● Installed:node; npm; git; ruby+sass+compass;

IDEA/Sublime.

● GitHub Account that you can push to.

The big picture

Fullstack development using standard web technologies

What’s the stack?

Liveperson stack

Just before we start

About me

storyboard

GIT

storyboard

SPA Server using Node & NPM

storyboard

Grunt

storyboard

Bower

storyboard

web developer toolings

storyboard - BONUS

requirejs and it’s optimizer rjs

Timetable

10:00 - 11:00 Some Gitting11:00 - 11:30 EXERCISE11:30 - 12:00 SPA Server12:00 - 13:00 LUNCH13:00 - 13:30 SPA Server - continued 13:30 - 14:00 EXERCISE14:00 - 14:30 Grunting

**code along

Timetable

14:30 - 15:00 BREAK15:00 - 16:30 EXERCISE16:30 - 17:00 Solution17:00 - 17:30 Bower17:30 - 18:00 Tooling

**code along

Let’s Start

Why bother Git

HAPPYit makes developers

no need for server installation just fs

Git is a decentralized vc

Git is much faster than Subversion

Branch Handling

in SVN versioning features depend on commit access

Access Control

git can reference different remote repositories all at the same time

SVN is Single Repository

Sub Repositories

full local control

SVN Model

stagingarea

remoterepository

local server

working directory

add

commit

GIT Model

stagingarea

remoterepository

local server

working directory

localrepository

add

commit

push

(untracked)

Git references

git-scmgit wiki

Git Cheat-Sheet

git files you should be familiar with

.gitignore

.git directory

Create flow

one time config

Exercise

Setup a local git repositoryconfigure itadd a README filecommitpush to GitHub

20min

Software at your aid

mac useriterm2oh-my-zsh

windows userunix tools

Node Package Manager

node & NPM

with node we’ll run thingswith npm we’ll install things

What will we use npm for?

system tools

project libraries

which themselves power many packagesand that we’ll shortly use

powers grunt and bower

export PATH=$HOME/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/local/sbin

make sure you have it set in your path

This way cli modules could be used in terminal

let’s try it

npm init

Let’s setup our SPA server

if fnf return index

skips the network

The hash#

modifies history urls

History API

But still a url path will always turn to the server

the downside

SEO and SPA

but still not 100%

Google crawlers are now doing better with SPA

Blog vs App

To SPA or not to SPA?

kudo to JavaScript on the server

cs-fw can run on the server

both server-pages and single-paged

Dualism

Organize project fs

server paged

spa

web application framework for node

Express

our first module install

npm install express --save

serving static content

distinguishing between environments

production vs development

serving the same file

$ node server.js

run server

Exercise

install expressjssetup server.jsshow both resource pathand redirect to index

20min

The JavaScript Task RunnerGRUNT

what will it be used for?

packaging a release dist

aiding development

and counting

over 3,453 plugins

npm install -g grunt-cli

you’ll need the cli

npm install grunt --save-dev

you’ll also need it in your project

we need to write it ourselves?

all we need is Gruntfile.js

grunt-init to our aid

$ grunt-init gruntfile

FileStructure

config

load

register

load-grunt-tasksmodule

can save us having to explicitlyload the npm task

but!

pkg.titleconcat.dist.dest

Datafrom

within

Module Version Management

quiz

^(major) ~(minor) 1.0.x(patch)*/latest(latest)

major.minor.patch

More

"<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0""git://github.com/flatiron/winston#master"

Version

Management

cli plugin

The Grunt Recipe

Exercise

wire as many of these grunt tasksinto a build task

*use with the comfort of the clis we’ve gone-over

extipsref

1.5h

Solution

A package manager for the web

Bower

“and peace shall come upon us”

npm install -g bower

it’s just another node package

resembles npm syntax

bower_components is to bower as

node_modules is to npm

generates bower.json

bower init

bower search <package>

search for componentsover 17,583 of them

bower install -p

Do not install project devDependencies

configure bower

.bowerrc

{"directory" : "public/bower_components"

}

let’s move cs libs to server root

What we’ll need:

Exercise

setup bower and install the mentioned libraries

ex

20min

Developers Toolbox

why not IDEA?

Sublime IDE

Good enough reasons

1. biggest plugin ecosystem (Package Control)2. multiple cursors3. shortcuts like move-lines actually work4. lightweight and fast

All this for just

1 license: USD $7010+ licenses: USD $60 / license25+ licenses: USD $55 / license50+ licenses: USD $50 / license

cheatsheet

emmet

no full page refresh on edit

livereload

taglet or browser extension

edit sass directly through devtool

css sourcemaps

gem install compass --pre

compass alpha version

gem update sass

don’t forget to update sass gem

Chrome DevTool filesystem support

browser support

diff your devtool styling session

livestyle

Exercise

use css sourcemaps along with livereload and devtool fs supportto modify in chrome devtool sass files

ex

1h

how they differ?

requirejs and r.js

grunt-requirejs or grunt-contrib-requirejs

delivered through Grunt

path, shim and all the others

require config

demo

require config exports

include vs

findNestedDependencies

link

require vs define

Exercise

configure requirecreate a single js file for release

ex

1h