the secrets of the fullstack ninja - part a - session i
Post on 25-Jun-2015
165 Views
Preview:
DESCRIPTION
TRANSCRIPT
בוקר טוב
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 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
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 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
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
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
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
{"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
no full page refresh on edit
livereload
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
top related