A workshop slideshow on client side devop methodology

1. בוקר טוב

2. What’s on for today?
A workshop on setting up a web developer
environment

3. What you should have already setup
● Installed:
node; npm; git; ruby+sass+compass;
IDEA/Sublime.
● GitHub Account that you can push to.

4. The big picture
Fullstack development using standard web
technologies

6. What’s the stack?
Liveperson stack

7. Just before we start
About me

8. storyboard
GIT

9. storyboard
SPA Server using
Node & NPM

10. storyboard
Grunt

11. storyboard
Bower

12. storyboard
web developer toolings

13. storyboard - BONUS
requirejs and it’s optimizer rjs

14. Timetable
10:00 - 11:00 Some Gitting
11:00 - 11:30 EXERCISE
11:30 - 12:00 SPA Server
12:00 - 13:00 LUNCH
13:00 - 13:30 SPA Server - continued
13:30 - 14:00 EXERCISE
14:00 - 14:30 Grunting
**code along

15. Timetable
14:30 - 15:00 BREAK
15:00 - 16:30 EXERCISE
16:30 - 17:00 Solution
17:00 - 17:30 Bower
17:30 - 18:00 Tooling
**code along

16. Let’s Start

17. Why bother Git

18. it makes developers
HAPPY

19. Git is a decentralized vc
no need for server installation just fs

20. Git is much faster than
Subversion

21. Branch Handling

22. Access Control
in SVN versioning features depend on
commit access

23. SVN is Single Repository
git can reference different remote
repositories all at the same time

24. Sub Repositories

25. full local control

26. SVN Model
staging
area
remote
repository
local server
working
directory
add
commit

27. GIT Model
staging
area
local server
remote
repository
working
directory
local
repository
add
commit
push
(untracked)

28. Git references
git-scm
git wiki

29. Git Cheat-Sheet

31. git files you should be
familiar with

32. .gitignore

33. .git directory

34. Create flow

35. one time config

38. Exercise
Setup a local git repository
configure it
add a README file
commit
push to GitHub
20min

39. Software at your aid
mac user
iterm2
oh-my-zsh
windows user
unix tools

40. node & NPM
Node Package Manager

41. with node we’ll run things
with npm we’ll install things

42. What will we use npm for?

43. system tools

44. project libraries

45. powers grunt and bower
which themselves power many packages
and that we’ll shortly use

46. make sure you have it set
in your path
export PATH=$HOME/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/usr/local/sbin
This way cli modules
could be used in terminal

47. npm init
let’s try it

48. Let’s setup our SPA
server

49. if fnf return index

50. The hash#
skips the network

51. History API
modifies history urls

52. But still a url path will
always turn to the server

53. SEO and SPA
the downside

54. Google crawlers are now
doing better with SPA
but still not 100%

55. To SPA or not to SPA?
Blog vs App

56. kudo to JavaScript on the
server
cs-fw can run on the server

57. Dualism
both server-pages and single-paged

58. Organize project fs
server paged
spa

59. Express
web application framework for node

60. npm install express --save
our first module install

61. serving static content

62. production vs development
distinguishing between environments

63. serving the same file

65. run server
$ node server.js

67. Exercise
install expressjs
setup server.js
show both resource path
and redirect to index
20min

68. GRUNT
The JavaScript Task Runner

69. what will it be used for?

70. packaging a release dist

72. aiding development

74. over 3,453 plugins
and counting

75. you’ll need the cli
npm install -g grunt-cli

76. you’ll also need it in your project
npm install grunt --save-dev

77. all we need is Gruntfile.js
we need to write it ourselves?

78. grunt-init to our aid

79. $ grunt-init gruntfile

80. config
File
Structure
load
register

81. but!
load-grunt-tasks
module
can save us
having to explicitly
load the npm task

82. Data
from
within
pkg.title
concat.dist.dest

83. Module Version
Management
quiz

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

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

86. Version
Management
cli plugin

89. The Grunt Recipe

90. Exercise
wire as many of these grunt tasks
into a build task
*use with the comfort of the
clis we’ve gone-over
ex
tips
ref
1.5h

91. Solution

92. Bower
A package manager for the web
“and peace shall come upon us”

93. it’s just another node
package
npm install -g bower

94. resembles npm syntax

95. bower_components is to bower
as
node_modules is to npm

96. bower init
generates bower.json

97. search for components
over 17,583 of them
bower search <package>

98. Do not install project
devDependencies
bower install -p

99. .bowerrc
configure bower

100. let’s move cs libs to
server root
{
"directory" : "public/bower_components"
}

101. What we’ll need:

102. Exercise
setup bower and install the
mentioned libraries
ex
20min

103. Developers Toolbox

104. Sublime IDE
why not IDEA?

105. Good enough reasons
1. biggest plugin ecosystem (Package Control)
2. multiple cursors
3. shortcuts like move-lines actually work
4. lightweight and fast

106. All this for just
1 license: USD $70
10+ licenses: USD $60 / license
25+ licenses: USD $55 / license
50+ licenses: USD $50 / license

107. emmet
cheatsheet

108. livereload
no full page refresh on edit

109. taglet or browser extension

110. css sourcemaps
edit sass directly through devtool

111. compass alpha version
gem install compass --pre

112. don’t forget to update sass gem
gem update sass

113. browser support
Chrome DevTool filesystem support

114. livestyle
diff your devtool styling session

115. Exercise
use css sourcemaps along
with livereload and devtool
fs support
to modify in chrome
devtool sass files
ex
1h

116. requirejs and r.js
how they differ?

117. delivered through Grunt
grunt-requirejs or grunt-contrib-requirejs

118. require config
path, shim and all the others

119. require config exports
demo

120. include
vs
findNestedDependencies

121. require vs define
link

122. Exercise
configure require
create a single js file for release
ex
1h