Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
JavaScript
                  framework and
                     Backbone

                         Copyright 2010, Intride...
JavaScript is Important



                         Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, ...
Start from jQuery



                              Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2...
jQuery is Great
            • It does give us easy access to DOM
                   manipulation, ajax, animation, events ...
Building a web
                         application with
                             jQuery

                            ...
JQuery can give us this:
                                   Browser

                         Dom Manipulation


         ...
But ...what we need?
                    • Easy to modify / maintain...
                    • Separate application concern...
Itʼs all easy to create
                    JavaScript applications
                     that end up as tangle
           ...
And weʼre missing something
              •          Client-side Template

              •          Modular / Structure or...
How to fill in the gaps?


                         Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2...
Extended the
                  JavaScript language
                         itself


                         Copyright 20...
Dynamic run-time & OO
                    • Prototype
                    • Narcissus
                    • Super-Class
  ...
Provide rich library
                    and toolkits


                         Copyright 2010, Intridea Inc. All Rights ...
• jQuery and jQueryUI
                    • YUI
                    • ExtJS
                    • Underscore.js
          ...
Spend more time on
                       project, less on
                        architecture!


                       ...
Application Framework



                         Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 20...
Think about is
                         Rails in front-end


                               Copyright 2010, Intridea Inc. ...
YES! A MVC Pattern



                          Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
The MVC Pattern


             • Separates objects into three main concerns
             • Traditionally heavily used on t...
Models, Views &
                              Controllers
                • Models represent status and behaviors,
       ...
MVC Frameworks
                    • JavaScriptMVC
                    • Backbone.js & Underscore.js
                    •...
Backbone.js
              • Provides the ʻbackboneʼ you need to
                     organize your code using the MVC patt...
Who use it?



                           Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
Basecamp Mobile




                             Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
Flow




                         Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
CloudApp




                          Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
Jeremy Ashkenas
                          • DocumentCloud
                          • Coffee-Script
                      ...
Spine.js
              • A lightweight MVC framework with a focus
                     on providing an inheritance model t...
Alex MaxCaw

              • London, United Kingdom
              • Author of <<JavaScript Web Applications>>
            ...
Backbone? Spine?



                              Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 20...
Dive into Backbone
                     A demo about Backbone scaffolding application
                                 wit...
Backboneʼs MVC
              • Models: represent data that can be created/
                         validated, destroyed &...
Backboneʼs MVC




                             Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
Backboneʼs Model
                                                            Models are the heart of any
                 ...
Backboneʼs Collection


                                            Collections are ordered sets of
                      ...
Backboneʼs Controller



                                                                              Controller provides...
Backboneʼs View

                                                 Backbone views are used
                                ...
More about Backbone
                         • Backboneʼs Event
                         • Backboneʼs History
            ...
Resources
          •       Backbone.js Document - http://documentcloud.github.com/backbone/

          •       Backbone T...
Próximo SlideShare
Cargando en…5
×

de

Javascript framework and backbone Slide 1 Javascript framework and backbone Slide 2 Javascript framework and backbone Slide 3 Javascript framework and backbone Slide 4 Javascript framework and backbone Slide 5 Javascript framework and backbone Slide 6 Javascript framework and backbone Slide 7 Javascript framework and backbone Slide 8 Javascript framework and backbone Slide 9 Javascript framework and backbone Slide 10 Javascript framework and backbone Slide 11 Javascript framework and backbone Slide 12 Javascript framework and backbone Slide 13 Javascript framework and backbone Slide 14 Javascript framework and backbone Slide 15 Javascript framework and backbone Slide 16 Javascript framework and backbone Slide 17 Javascript framework and backbone Slide 18 Javascript framework and backbone Slide 19 Javascript framework and backbone Slide 20 Javascript framework and backbone Slide 21 Javascript framework and backbone Slide 22 Javascript framework and backbone Slide 23 Javascript framework and backbone Slide 24 Javascript framework and backbone Slide 25 Javascript framework and backbone Slide 26 Javascript framework and backbone Slide 27 Javascript framework and backbone Slide 28 Javascript framework and backbone Slide 29 Javascript framework and backbone Slide 30 Javascript framework and backbone Slide 31 Javascript framework and backbone Slide 32 Javascript framework and backbone Slide 33 Javascript framework and backbone Slide 34 Javascript framework and backbone Slide 35 Javascript framework and backbone Slide 36 Javascript framework and backbone Slide 37 Javascript framework and backbone Slide 38 Javascript framework and backbone Slide 39
Próximo SlideShare
Backbone.js
Siguiente
Descargar para leer sin conexión y ver en pantalla completa.

7 recomendaciones

Compartir

Descargar para leer sin conexión

Javascript framework and backbone

Descargar para leer sin conexión

Libros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo

Audiolibros relacionados

Gratis con una prueba de 30 días de Scribd

Ver todo

Javascript framework and backbone

  1. 1. JavaScript framework and Backbone Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  2. 2. JavaScript is Important Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  3. 3. Start from jQuery Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  4. 4. jQuery is Great • It does give us easy access to DOM manipulation, ajax, animation, events etc. • It doesnʼt provide all the tools needed to build serious JavaScript web application • But how do we fill in the gaps for everything else? Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  5. 5. Building a web application with jQuery Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  6. 6. JQuery can give us this: Browser Dom Manipulation Ajax Server Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  7. 7. But ...what we need? • Easy to modify / maintain... • Separate application concerns & keep the code decoupled • Could be a single-page application (SPA) with multiple views of the data, but require no hard page refresh? • Good performances / experiences Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  8. 8. Itʼs all easy to create JavaScript applications that end up as tangle piles of jQuery selectors and callbacks. Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  9. 9. And weʼre missing something • Client-side Template • Modular / Structure organization • Browser State Management (location.hash) • Manageable routing to your application • Dependency management • Remote / Local Persistent layer • Architecture patterns (like MVC, Delegation) • Support Testing Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  10. 10. How to fill in the gaps? Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  11. 11. Extended the JavaScript language itself Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  12. 12. Dynamic run-time & OO • Prototype • Narcissus • Super-Class • JS2Lang • CoffeeScript • Hacking construct method and Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  13. 13. Provide rich library and toolkits Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  14. 14. • jQuery and jQueryUI • YUI • ExtJS • Underscore.js • MooToos • Dojokits • To many third part library and plugins ... Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  15. 15. Spend more time on project, less on architecture! Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  16. 16. Application Framework Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  17. 17. Think about is Rails in front-end Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  18. 18. YES! A MVC Pattern Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  19. 19. The MVC Pattern • Separates objects into three main concerns • Traditionally heavily used on the server side • Excellent for code-organization in general • Implementations can vary quite significantly Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  20. 20. Models, Views & Controllers • Models represent status and behaviors, Interact with data... • Views can be considered the UI. link events to methods and generate dynamic HTML. • Controller sits between Models and Views. Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  21. 21. MVC Frameworks • JavaScriptMVC • Backbone.js & Underscore.js • Spine.js • SproutCore • Sammy.js • etc... Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  22. 22. Backbone.js • Provides the ʻbackboneʼ you need to organize your code using the MVC pattern • Excellent for a lightweight solution where you select the additional components you feel work best for your project. • Works best for SPAs (single-page apps) Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  23. 23. Who use it? Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  24. 24. Basecamp Mobile Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  25. 25. Flow Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  26. 26. CloudApp Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  27. 27. Jeremy Ashkenas • DocumentCloud • Coffee-Script • Underscore • Docco • Github • Twitter Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  28. 28. Spine.js • A lightweight MVC framework with a focus on providing an inheritance model through classes and extension. • Based on Backboneʼs API so developers may find getting started a little easier than expected • Spine doesnʼt require underscore.js Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  29. 29. Alex MaxCaw • London, United Kingdom • Author of <<JavaScript Web Applications>> • http://alexmaccaw.co.uk • https://github.com/maccman • https://twitter.com/maccman Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  30. 30. Backbone? Spine? Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  31. 31. Dive into Backbone A demo about Backbone scaffolding application with Rails back-end Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  32. 32. Backboneʼs MVC • Models: represent data that can be created/ validated, destroyed & listened to for changes. Collections are sets of models. • Views: display the modelʼs data / provide the user interface layer • Controller: methods for routing client-side URL fragments Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  33. 33. Backboneʼs MVC Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  34. 34. Backboneʼs Model Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. You extend Backbone.Model with your domain-specific methods, and Model provides a basic set of functionality for managing changes. Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  35. 35. Backboneʼs Collection Collections are ordered sets of models. Collections may also listen for changes to specific attributes in their models Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  36. 36. Backboneʼs Controller Controller provides methods for routing client- side URL fragments, and connecting them to actions and events. Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  37. 37. Backboneʼs View Backbone views are used to reflect what your applications’ data models look like. They are also used to listen to events and react accordingly. Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  38. 38. More about Backbone • Backboneʼs Event • Backboneʼs History • Backboneʼs Sync • More ... Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  39. 39. Resources • Backbone.js Document - http://documentcloud.github.com/backbone/ • Backbone Tutorials • Building a single page app with Backbone.js, underscore.js and jQuery • What are some good resources for Backbone.js • Backbone.js with Node.js and Socket.is to build real-time apps • Creating LocalTodos.com -- A Short Story. • Backbone.js and Sinatra on Heroku • Cinco - 37Single framework based on Backbone.js, open source soon. Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • hyh961

    Feb. 18, 2017
  • ldgoooo

    Jul. 8, 2012
  • rcardam

    Apr. 23, 2012
  • WeiZhu

    Apr. 1, 2012
  • lanqy

    Jul. 22, 2011
  • czhang

    Jul. 14, 2011
  • miclle

    Jun. 28, 2011

Vistas

Total de vistas

10.162

En Slideshare

0

De embebidos

0

Número de embebidos

4.395

Acciones

Descargas

159

Compartidos

0

Comentarios

0

Me gusta

7

×