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

Doing MVC with Baman.js

Zhusee
February 27, 2014

Doing MVC with Baman.js

A very brief intro to Batman.js as a Javascript MVC framework. (Chinese-English mixed)

Zhusee

February 27, 2014
Tweet

More Decks by Zhusee

Other Decks in Technology

Transcript

  1. Doing MVC with
    Batman
    Zhusee
    http://about.me/zhusee

    View Slide

  2. ༧ഹߕϪɓৎ
    ደ์.7$

    View Slide

  3. Why not Angular.js?
    㽀䄷穯⸱榿⚩䉏⚩㈘Ⰸ

    View Slide

  4. Image Curtesy: Nathan Leclaire http://goo.gl/2gdkhI

    View Slide


  5. View Slide

  6. View Slide

  7. View Slide

  8. Why Batman?
    ✓ CoffeeScript = 什麼都可以繼承

    ✓ 跟 Rails 很容易整合 (official gem)

    ✓ 語法邏輯跟 Rails 相似 (搭配上⼿手相對快)

    ✓ 很清楚什麼時候可以找 jQuery 進來搭配

    ✓ iOS-like View 的概念很好⽤用

    View Slide

  9. Batman + Rails
    Generator

    Script
    Data Autoload

    via Ajax
    Official Gem for

    Integration

    View Slide

  10. gem “batman-rails”

    $ rails g batman:app
    $ rails g batman:scaffold todos
    第一次安裝進 Rails
    快速產生 Routing + Controller + Model + View

    View Slide

  11. Routing distribution
    GET requests

    (text/html)
    Other
    requests
    json

    View Slide

  12. Similar Syntax: Routing
    GET[index, new, edit, show]
    Nested Resources

    View Slide

  13. Similar Syntax: Controller
    Model Query

    View Slide

  14. Model Relationships

    View Slide

  15. Model Methods
    Send PUT request
    via Ajax on save()

    View Slide

  16. Batman.View
    • iOS-like View Lifecycle
    • Easy to work with jQuery
    • 2-Way Data-Binding
    • Appending Subviews and DOM
    • View class Inheritance
    • Encapsulation with custom Views

    View Slide

  17. View Lifecycle (as events)!
    viewDidMoveToSuperview
    viewDidLoad
    ready
    viewWillAppear
    viewDidAppear
    Appending Subview
    viewWillRemoveFromSuperview
    viewWillDisappear
    viewDidDisappear
    Removing Subview
    8KGY䥥⑈⺚ビ側ⓛ䛟⨉䡌橃⃫
    ⛐⇆桬瘟䠉L3WGT[≧夶䛧&1/

    View Slide

  18. Data Binding & Event Binding
    Bind to innerHTML
    Event Binding

    View Slide

  19. Data Binding & Event Binding
    Keypaths

    View Slide

  20. Keypath Lookup
    TodosController
    TodosIndexView
    Subview
    Subview
    Subview
    data-bind

    View Slide

  21. Batman.View
    • Find DOM root for View with this.node
    • Provide handlers for view event binding

    View Slide

  22. Custom View and Inheritance
    Every View is a CoffeeScript class, so you can inherit views

    by simply using extends

    View Slide

  23. Using Subview: Markup
    FolderView


    View Slide

  24. Using Subview: Append
    FolderView



    Will be appended to
    superview’s node
    by default

    View Slide

  25. Encapsulation with Views
    Event Binding
    Lookup methods
    from view
    to controller

    View Slide

  26. Keypath Lookup
    TodosController
    TodosIndexView
    Subview
    MyOwnView
    Subview
    data-event-click=“playMusic”
    playMusic: ->

    View Slide

  27. Why Batman?
    ✓ CoffeeScript = 什麼都可以繼承

    ✓ 跟 Rails 很容易整合 (official gem)

    ✓ 語法邏輯跟 Rails 相似 (搭配上⼿手相對快)

    ✓ 很清楚什麼時候可以找 jQuery 進來搭配

    ✓ iOS-like View 的概念很好⽤用

    View Slide