• SOFEA
• REST
• Backbone
• HTML5
• blogMV*
• Show me the code bitch!!!

• Divisão de responsabilidades no desenvolvimento;
• Baixo acoplamento das camadas;
• Comunicação client/server através de verbos HTTP;
• O client requisita o que e quando;

“Software architectural style consisting of a
coordinated set of architectural constraints applied
components, conectors and data elements, within
a distributed hypermedia system.”

Roy Thomas Fielding

• Client-Server
• Stateless
• Cache
• HTTP verbs: GET, POST, PUT, DELETE...
• Status code
• Content negociation (Accept: json, xml, html)

“Gives structure to web applications by providing
models, collections and views to consume API over
a RESTful JSON interface.”

backbonejs.org

"Te permite ter o poder de uma arquitetura MV*
além do controle sobre a mesma, para consumir API
através de uma interface RESTful."

Eu mesmo

• Poderosa LIB JavaScript
• Adaptável, baseada no padrão MV*
• Moderninha, largamente usada em SPA
• Magrinha, apenas 6.5Kb

• Memory leak
• One template per view
• No way data-binding
• Comunidade pequena no Brasil

• Putz, Backbone é complicado;
• Que nada é super simples, ele implementa diversos conceitos de O.O.
• Ah! é muito verboso;
• Uéh, qual o problema disso? A gente é mágico ou programador?
• Piá, arquiteturas MV* são coisas do capeta;
• Tá louco, é a coisa mais incrível e organizada que existe!
• Hey, MVC é muito engessado;
• No Backbone não, no MV* é tudo bem desacoplado :-)

• Iniciativa open source brasileira que visa ensinar a criação de SPA através de libs ou frameworks sobre um esqueleto comum.
  • Backbone.js
  • Angular.js
  • React.js
  • Ember.js
  • Knockout.js
  • Just Vanilla baby

• Queremos contribuir com o crescimento profissional da comunidade e aumentar o engajamento e envolvimento da mesma em:
  
  
  • Debates
  • Projetos
  • Encontros
  • Colaborações

Estamos em um estágio inicial e por isso codamos apenas soluções com BackboneJS, mas incentivamos você a colaborar para o projeto com a sua própria implementação.

• blogmv.github.io
• github.com/blogmv
• Backbone + Require
• Backbone + Browserify

            GET
            /articles

            GET
            /articles/{article_id}

            PUT
            /articles/{article_id}

            DELETE
            /articles/{article_id}
    

      var ArticleCollection = Backbone.Collection.extend({
          url:   'http://blogmv-api.appspot.com/api/articles',
          model: ArticleModel
      });

      return ArticleCollection;
      

        [
           {
              "content":"Lorem ipsum dolor sit amet, consectetur adipisicing...",
              "id":5639445604728832,
              "title":"Hello World"
           },
           {
              "content":"Iraqi PM Nouri Maliki steps aside, ending political...",
              "id":5707702298738688,
              "title":"Bye World"
           }
        ]
    

        var ArticleModel = Backbone.Model.extend({
            getTitle: function() {
                return this.get('title');
            },

            getContent: function() {
                return this.get('content');
            }
        });

        return ArticleModel;
      

        var AppView = Backbone.View.extend({
            initialize: function() {
                this.setup();
            },

            setup: function() {
                this.collection = new ArticleCollection();
                this.collection.fetch();
                this.listenTo(this.collection, 'sync', this.render);
            }
        });
      

Here is where the magic doesn't happen!

Mágica? Fala para eles, Isabelle

        var AppView = Backbone.View.extend({
            render: function() {
                this.$el('.list-group').html(this.template({
                    'collection' : this.collection
                }));
            }
        });
      

        var AppView = Backbone.View.extend({
            template: _.template( $('#tmp-article-list').html() ),

            el: '.main'
        });
      

      <div class="main">
          <h2>JS News</h2>

          <ul class="list-group">
              <script type="text/html" id="tmp-article-list">
                  <% collection.each(function(model){ %>
                      <li>
                          <a href="#article/<%= model.id %>" class="list-group-item">
                              <%= model.getTitle() %>
                          </a>
                      </li>
                  <% }); %>
              </script>
          </ul>
      </div>
      

• Cada camada deveria tratar das suas responsabilidades.
  • Collection deveria retornar apenas a coleção de models;
  • Model deveria retornar apenas dados íntegros do model;
  • View deveria retornar dados repassados pelo model;
    • Quando o dado precisar de tratamento visual para o html

        var AppView = Backbone.View.extend({
            events: {
                'click .list-group-item' : 'setModel'
            },

            setModel: function() {
                this.model.set({ change: true, this.model });
            }
        });
      

        var ContentView = Backbone.View.extend({
            initialize: function(model) {
                this.setup(model);
            },

            setup: function(model) {
                this.activeModel = model;
                this.listenTo(this.activeModel, 'change', this.render);
            }
        });
      

        var ContentView = Backbone.View.extend({
            render: function() {
                this.$el('article').html(this.template({
                    'activeModel' : this.activeModel
                }));
            }
        });
      

      template: _.template( $('#tmp-article-content').html() ),

      el: '.main'
      

      <section class="main">
          <article>
              <script type="text/html" id="tmp-article-content">
                  <h2><%= activeModel.getTitle() %></h2>
                  <p><%= activeModel.getContent() %></p>
              </script>
          </article>
      </section>