This talk was held at BerlinJS on February 16th 2012

1. Brunch
Jan
Monschke
Student
/
Freelance
developer
@thede8one
github.com/janmonschke

2. Evolu@on
of
client-­‐side
development
Client-­‐Side
development
with
Brunch
–
BerlinJS

3. „Oh
no,
you‘re
using
JavaScript?
It‘s
evil!!“
Client-­‐Side
development
with
Brunch
–
BerlinJS

4. „Fuck
Yeah,
AJAX!“
Client-­‐Side
development
with
Brunch
–
BerlinJS

5. „JavaScript
ALL
THE
WAY“
Client-­‐Side
development
with
Brunch
–
BerlinJS

6. • Lightweight
library
to
help
structuring
your
code
• MVC-­‐ish
principles
• Works
out-­‐of-­‐the-­‐box
with
all
REST-­‐backends
*
• Backbone.js
+
CoffeeScript
=
<3
• Great
community
(support
&
plug-­‐ins)
Client-­‐Side
development
with
Brunch
–
BerlinJS

7. • Examples
are
mostly
wricen
in
single
files
-­‐>
does
NOT
work
for
complex
applica@ons
• You
need
to
setup
your
own
directory
structure
(...)
<script
src="src/models/unicorn.js"></script>
<script
src="src/models/user.js"></script>
<script
src="src/controllers/user_controller.js"></script>
<script
src="src/controllers/main_controller.js"></script>
<script
src="src/views/user.js"></script>
<script
src="src/views/user_list.js"></script>
<script
src="src/main.js"></script>
(...)
Client-­‐Side
development
with
Brunch
–
BerlinJS

8. • Templates
in
index.html,
srsly?
<script
type="text/template"
id="stats-­‐template">
<%
if
(total)
{
%>
<span
class="todo-­‐count">
<span
class="number"><%=
remaining
%></span>
<span
class="word"><%=
remaining
==
1
?
'item'
:
'items'
%></span>
le8.
</span>
<%
}
%>
<%
if
(done)
{
%>
<span
class="todo-­‐clear">
<a
href="#">
Clear
<span
class="number-­‐done"><%=
done
%></span>
completed
<span
class="word-­‐done"><%=
done
==
1
?
'item'
:
'items'
%></span>
</a>
</span>
<%
}
%>
</script>
Client-­‐Side
development
with
Brunch
–
BerlinJS

9. Brunch
Client-­‐Side
development
with
Brunch
–
BerlinJS

10. Brunch
• (pre-­‐)Compiles
all
files
(Code
+
Templates
+
Styles)
• Assembles
them
into
one
single
file
• Watches
for
file-­‐changes
• Provides
a
proven
directory
structure
• But
works
with
any
• Powerful
plug-­‐in
system
Client-­‐Side
development
with
Brunch
–
BerlinJS

11. Brunch
Backend-­‐agnos@c
Client-­‐Side
development
with
Brunch
–
BerlinJS

12. Brunch
npm
install
–g
git@github.com:brunch/brunch.git
brunch
new
<project-­‐name>
brunch
build
brunch
watch
(-­‐-­‐server)
Client-­‐Side
development
with
Brunch
–
BerlinJS

13. Brunch
Clean
directory
structure
/brunch
does
not
get
in
the
way
config.coffee
–
plugin-­‐ins,
vendor-­‐files
Client-­‐Side
development
with
Brunch
–
BerlinJS

14. Brunch
Let‘s
dive
into
some
code!
hcp://brunch-­‐colors.com
Client-­‐Side
development
with
Brunch
–
BerlinJS

15. Brunch
Who‘s
using
it?
Client-­‐Side
development
with
Brunch
–
BerlinJS

16. Brunch
hcp://blossom.io
-­‐
Lean
project
management!
Client-­‐Side
development
with
Brunch
–
BerlinJS

17. Brunch
hcp://salon.io
-­‐
Crea@ve
proqolios
Client-­‐Side
development
with
Brunch
–
BerlinJS

18. Brunch
I
probably
forgot
a
ton
of
things
;)
Find
more
info
on
hcp://brunch.io
Client-­‐Side
development
with
Brunch
–
BerlinJS

19. Brunch
Any
ques@ons?
Client-­‐Side
development
with
Brunch
–
BerlinJS