Client Side Development with Brunch
•
3 likes•1,015 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.
More Related Content
Viewers also liked
Viewers also liked (12)
Similar to Client Side Development with Brunch
Similar to Client Side Development with Brunch (20)
Recently uploaded
Recently uploaded (20)
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