Client Side Development with Brunch
3 likes1,018 views
Brunch is a lightweight tool that helps structure client-side code. It pre-compiles files like code, templates, and styles into a single file. Brunch also watches for file changes and provides a clean directory structure and powerful plugin system. It is backend-agnostic and works out of the box with common tools like Node, CoffeeScript, and Backbone.js. Many companies use Brunch for their client-side development needs.
Client Side Development with Brunch
- 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