Client Side Development with Brunch

1,665 views

Published on

This talk was held at BerlinJS on February 16th 2012

Published in: Technology
  • Be the first to comment

Client Side Development with Brunch

  1. 1. Brunch  Jan  Monschke  Student  /  Freelance  developer  @thede8one  github.com/janmonschke  
  2. 2. Evolu@on  of  client-­‐side   development  Client-­‐Side  development  with  Brunch  –  BerlinJS  
  3. 3. „Oh  no,  you‘re  using   JavaScript?  It‘s  evil!!“  Client-­‐Side  development  with  Brunch  –  BerlinJS  
  4. 4. „Fuck  Yeah,  AJAX!“  Client-­‐Side  development  with  Brunch  –  BerlinJS  
  5. 5. „JavaScript  ALL  THE  WAY“  Client-­‐Side  development  with  Brunch  –  BerlinJS  
  6. 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. 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. 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. 9. BrunchClient-­‐Side  development  with  Brunch  –  BerlinJS  
  10. 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. 11. Brunch Backend-­‐agnos@c  Client-­‐Side  development  with  Brunch  –  BerlinJS  
  12. 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. 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. 14. Brunch Let‘s  dive  into  some  code!   hcp://brunch-­‐colors.com  Client-­‐Side  development  with  Brunch  –  BerlinJS  
  15. 15. Brunch Who‘s  using  it?  Client-­‐Side  development  with  Brunch  –  BerlinJS  
  16. 16. Brunch hcp://blossom.io  -­‐  Lean  project  management!  Client-­‐Side  development  with  Brunch  –  BerlinJS  
  17. 17. Brunch hcp://salon.io  -­‐  Crea@ve  proqolios    Client-­‐Side  development  with  Brunch  –  BerlinJS  
  18. 18. Brunch I  probably  forgot  a  ton  of  things  ;)       Find  more  info  on  hcp://brunch.io    Client-­‐Side  development  with  Brunch  –  BerlinJS  
  19. 19. Brunch Any  ques@ons?  Client-­‐Side  development  with  Brunch  –  BerlinJS  

×