Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Superior service-based web apps with Brunch and Chaplin

paulmillr
November 18, 2012

Superior service-based web apps with Brunch and Chaplin

A tale on building cool web services with http://brunch.io and http://chaplinjs.org

paulmillr

November 18, 2012
Tweet

More Decks by paulmillr

Other Decks in Programming

Transcript

  1. Superior
    service-based
    web apps with
    Brunch and Chaplin

    View full-size slide

  2. It’s 2012, after all
    Service-based web apps
    Why?

    View full-size slide

  3. Maintability
    Service-based web apps
    Can develop both of them in
    parallel
    Frontend decoupled from backend

    View full-size slide

  4. Speed & costs
    Service-based web apps
    Server costs decreased
    by a factor of 10+
    Super fast & responsive feel

    View full-size slide

  5. Dogfooding!
    Both parts become easier to
    maintain
    Service-based web apps

    View full-size slide

  6. Open-source
    Can open-source front freely
    (in some types of apps)
    Service-based web apps

    View full-size slide

  7. Open-source
    Increases company reputation
    Good API usage exampleCloud.
    app
    itHub
    Service-based web apps

    View full-size slide

  8. Problems
    Service-based web apps
    Live reload
    Compiling LESS / Stylus / SASS

    View full-size slide

  9. Problems
    Service-based web apps
    Modules
    Compiling Coffee / Type / Live
    scripts

    View full-size slide

  10. Problems
    Service-based web apps
    Linting
    Templates
    Scaffolding
    Testing

    View full-size slide

  11. Solutions
    Service-based web apps
    Some DOM lib a-la jQuery?
    Some DOM lib a-la jQuery?
    Nope! Too unmaintainable.

    View full-size slide

  12. We need
    Service-based web apps
    Generator
    Builder
    Tester
    Scaffolder

    View full-size slide

  13. Brunch
    brunch.io

    View full-size slide

  14. Brunch
    6 commands
    new build watch
    generate destroy test

    View full-size slide

  15. Structure
    (app)

    View full-size slide

  16. Deployal
    Optimization with
    simple flag
    brunch build --minify

    View full-size slide

  17. Brunch 1.5
    component(1) support
    source maps

    View full-size slide

  18. Brunch
    Alternatives
    CodeKit
    LiveReload
    Yeoman (grunt)

    View full-size slide

  19. Chaplin
    chaplinjs.org

    View full-size slide

  20. Chaplin
    Why backbone?
    Super lightweight & simple
    The most popular
    Well-tested

    View full-size slide

  21. Chaplin
    Backbone.js has problems
    Unusable as an app architecture

    View full-size slide

  22. Chaplin
    Chaplin solutions
    Memory management Forced modularity
    Rails routes
    Mediator
    (global events management)
    Collection
    View
    Layout
    Controllers
    (MVP “presenters”)

    View full-size slide

  23. Chaplin
    Alternatives
    Aura: sort of different
    Marionette: sort of similar

    View full-size slide

  24. Chaplin
    v1.0
    coming soon

    View full-size slide

  25. Paul Miller
    paulmillr.com
    @paulmillr

    View full-size slide