Client-Side Development with Brunch

This talk was held at BerlinJS on February 16th 2012.

Transcript

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. Client-­‐Side  development  with  Brunch  –  BerlinJS   •  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)  
7. Client-­‐Side  development  with  Brunch  –  BerlinJS   •  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>   (...)   (...)  
8. Client-­‐Side  development  with  Brunch  –  BerlinJS   •  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>  
9. Brunch Client-­‐Side  development  with  Brunch  –  BerlinJS  
10. Brunch Client-­‐Side  development  with  Brunch  –  BerlinJS   •  (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  
11. Backend-­‐agnos@c   Client-­‐Side  development  with  Brunch  –  BerlinJS   Brunch
12. npm  install  –g  git@github.com:brunch/brunch.git     brunch  new  <project-­‐name>     brunch  build     brunch  watch  (-­‐-­‐server)   Client-­‐Side  development  with  Brunch  –  BerlinJS   Brunch
13. Client-­‐Side  development  with  Brunch  –  BerlinJS   Brunch Clean  directory  structure     /brunch  does  not  get  in  the  way     config.coffee  –  plugin-­‐ins,  vendor-­‐files    
14. Client-­‐Side  development  with  Brunch  –  BerlinJS   Brunch Let‘s  dive  into  some  code!   hcp://brunch-­‐colors.com  
15. Client-­‐Side  development  with  Brunch  –  BerlinJS   Brunch Who‘s  using  it?  
16. Client-­‐Side  development  with  Brunch  –  BerlinJS   Brunch hcp://blossom.io  -­‐  Lean  project  management!  
17. Client-­‐Side  development  with  Brunch  –  BerlinJS   Brunch hcp://salon.io  -­‐  Crea@ve  porqolios    
18. Client-­‐Side  development  with  Brunch  –  BerlinJS   Brunch I  probably  forgot  a  ton  of  things  ;)       Find  more  info  on  hcp://brunch.io    
19. Client-­‐Side  development  with  Brunch  –  BerlinJS   Brunch Any  ques@ons?