Doing MVC with Baman.js

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

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