SlideShare a Scribd company logo
1 of 39
Download to read offline
JavaScript
                  framework and
                     Backbone

                         Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
JavaScript is Important



                         Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
Start from jQuery



                              Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
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
Building a web
                         application with
                             jQuery

                              Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
JQuery can give us this:
                                   Browser

                         Dom Manipulation


                                          Ajax

                                      Server


                         Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
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
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
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
How to fill in the gaps?


                         Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
Extended the
                  JavaScript language
                         itself


                         Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
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
Provide rich library
                    and toolkits


                         Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
• 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
Spend more time on
                       project, less on
                        architecture!


                           Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
Application Framework



                         Copyright 2010, Intridea Inc. All Rights Reserved.

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


                               Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
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 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
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
MVC Frameworks
                    • JavaScriptMVC
                    • Backbone.js & Underscore.js
                    • Spine.js
                    • SproutCore
                    • Sammy.js
                    • etc...
                                 Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
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
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
                          • Underscore
                          • Docco
                          • Github
                          • Twitter
                                 Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
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
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
Backbone? Spine?



                              Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
Dive into Backbone
                     A demo about Backbone scaffolding application
                                 with Rails back-end




                                    Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
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
Backboneʼs MVC




                             Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
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
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
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
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
More about Backbone
                         • Backboneʼs Event
                         • Backboneʼs History
                         • Backboneʼs Sync
                         • More ...

                                  Copyright 2010, Intridea Inc. All Rights Reserved.

Tuesday, June 28, 2011
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

More Related Content

What's hot

The Art of AngularJS in 2015 - Angular Summit 2015
The Art of AngularJS in 2015 - Angular Summit 2015The Art of AngularJS in 2015 - Angular Summit 2015
The Art of AngularJS in 2015 - Angular Summit 2015Matt Raible
 
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)Joseph Chiang
 
Backbone/Marionette introduction
Backbone/Marionette introductionBackbone/Marionette introduction
Backbone/Marionette introductionmatt-briggs
 
Backbonejs for beginners
Backbonejs for beginnersBackbonejs for beginners
Backbonejs for beginnersDivakar Gu
 
Vue.js is boring - and that's a good thing
Vue.js is boring - and that's a good thingVue.js is boring - and that's a good thing
Vue.js is boring - and that's a good thingJoonas Lehtonen
 
Angularjs architecture
Angularjs architectureAngularjs architecture
Angularjs architectureMichael He
 
Patterns Are Good For Managers
Patterns Are Good For ManagersPatterns Are Good For Managers
Patterns Are Good For ManagersAgileThought
 
Developing large scale JavaScript applications
Developing large scale JavaScript applicationsDeveloping large scale JavaScript applications
Developing large scale JavaScript applicationsMilan Korsos
 
Marionette structure with modules
Marionette structure with modulesMarionette structure with modules
Marionette structure with modulesmatt-briggs
 
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave TaylorAtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave TaylorAtlassian
 
Marionette: the Backbone framework
Marionette: the Backbone frameworkMarionette: the Backbone framework
Marionette: the Backbone frameworkfrontendne
 
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложенияCodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложенияCodeFest
 
Managing JavaScript Dependencies With RequireJS
Managing JavaScript Dependencies With RequireJSManaging JavaScript Dependencies With RequireJS
Managing JavaScript Dependencies With RequireJSDen Odell
 
AngularJS best-practices
AngularJS best-practicesAngularJS best-practices
AngularJS best-practicesHenry Tao
 
Get things done with Yii - quickly build webapplications
Get things done with Yii - quickly build webapplicationsGet things done with Yii - quickly build webapplications
Get things done with Yii - quickly build webapplicationsGiuliano Iacobelli
 

What's hot (20)

The Art of AngularJS in 2015 - Angular Summit 2015
The Art of AngularJS in 2015 - Angular Summit 2015The Art of AngularJS in 2015 - Angular Summit 2015
The Art of AngularJS in 2015 - Angular Summit 2015
 
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)
 
Backbone/Marionette introduction
Backbone/Marionette introductionBackbone/Marionette introduction
Backbone/Marionette introduction
 
Why Vue.js?
Why Vue.js?Why Vue.js?
Why Vue.js?
 
Backbonejs for beginners
Backbonejs for beginnersBackbonejs for beginners
Backbonejs for beginners
 
Requirejs
RequirejsRequirejs
Requirejs
 
Vue.js is boring - and that's a good thing
Vue.js is boring - and that's a good thingVue.js is boring - and that's a good thing
Vue.js is boring - and that's a good thing
 
Angularjs architecture
Angularjs architectureAngularjs architecture
Angularjs architecture
 
Getting started with angular js
Getting started with angular jsGetting started with angular js
Getting started with angular js
 
Patterns Are Good For Managers
Patterns Are Good For ManagersPatterns Are Good For Managers
Patterns Are Good For Managers
 
Backbone js
Backbone jsBackbone js
Backbone js
 
Developing large scale JavaScript applications
Developing large scale JavaScript applicationsDeveloping large scale JavaScript applications
Developing large scale JavaScript applications
 
Marionette structure with modules
Marionette structure with modulesMarionette structure with modules
Marionette structure with modules
 
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave TaylorAtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor
 
Marionette: the Backbone framework
Marionette: the Backbone frameworkMarionette: the Backbone framework
Marionette: the Backbone framework
 
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложенияCodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
 
Managing JavaScript Dependencies With RequireJS
Managing JavaScript Dependencies With RequireJSManaging JavaScript Dependencies With RequireJS
Managing JavaScript Dependencies With RequireJS
 
AngularJS best-practices
AngularJS best-practicesAngularJS best-practices
AngularJS best-practices
 
Get things done with Yii - quickly build webapplications
Get things done with Yii - quickly build webapplicationsGet things done with Yii - quickly build webapplications
Get things done with Yii - quickly build webapplications
 
AngularJS
AngularJSAngularJS
AngularJS
 

Similar to Javascript framework and backbone

Smalltalk in Enterprise Applications
Smalltalk in Enterprise ApplicationsSmalltalk in Enterprise Applications
Smalltalk in Enterprise ApplicationsESUG
 
Application Quality with Visual Studio 2010
Application Quality with Visual Studio 2010Application Quality with Visual Studio 2010
Application Quality with Visual Studio 2010Anna Russo
 
Tools For jQuery Application Architecture (Extended Slides)
Tools For jQuery Application Architecture (Extended Slides)Tools For jQuery Application Architecture (Extended Slides)
Tools For jQuery Application Architecture (Extended Slides)Addy Osmani
 
Developing Micronaut Applications With IntelliJ IDEA
Developing Micronaut Applications With IntelliJ IDEADeveloping Micronaut Applications With IntelliJ IDEA
Developing Micronaut Applications With IntelliJ IDEAIván López Martín
 
Pulkit Arora's Resume
Pulkit Arora's ResumePulkit Arora's Resume
Pulkit Arora's ResumePulkit Arora
 
jQuery Comes to XPages
jQuery Comes to XPagesjQuery Comes to XPages
jQuery Comes to XPagesTeamstudio
 
Tw Technology Radar Qtb Sep11
Tw Technology Radar Qtb Sep11Tw Technology Radar Qtb Sep11
Tw Technology Radar Qtb Sep11Adrian Treacy
 
Infusion for the birds
Infusion for the birdsInfusion for the birds
Infusion for the birdscolinbdclark
 
VA Smalltalk Update
VA Smalltalk UpdateVA Smalltalk Update
VA Smalltalk UpdateESUG
 
JavaOne 2011 - Going Mobile With Java Based Technologies Today
JavaOne 2011 - Going Mobile With Java Based Technologies TodayJavaOne 2011 - Going Mobile With Java Based Technologies Today
JavaOne 2011 - Going Mobile With Java Based Technologies TodayWesley Hales
 
jQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesjQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesTeamstudio
 
soft-shake.ch - Vaadin - Rich Web Applications in Server-side Java without Pl...
soft-shake.ch - Vaadin - Rich Web Applications in Server-side Java without Pl...soft-shake.ch - Vaadin - Rich Web Applications in Server-side Java without Pl...
soft-shake.ch - Vaadin - Rich Web Applications in Server-side Java without Pl...soft-shake.ch
 
Flowdock's full-text search with MongoDB
Flowdock's full-text search with MongoDBFlowdock's full-text search with MongoDB
Flowdock's full-text search with MongoDBFlowdock
 
The State of Front End Web Development 2011
The State of Front End Web Development 2011The State of Front End Web Development 2011
The State of Front End Web Development 2011Pascal Rettig
 
State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portlanddmethvin
 
jQuery Conference 2012 keynote
jQuery Conference 2012 keynotejQuery Conference 2012 keynote
jQuery Conference 2012 keynotedmethvin
 

Similar to Javascript framework and backbone (20)

Smalltalk in Enterprise Applications
Smalltalk in Enterprise ApplicationsSmalltalk in Enterprise Applications
Smalltalk in Enterprise Applications
 
Application Quality with Visual Studio 2010
Application Quality with Visual Studio 2010Application Quality with Visual Studio 2010
Application Quality with Visual Studio 2010
 
Tools For jQuery Application Architecture (Extended Slides)
Tools For jQuery Application Architecture (Extended Slides)Tools For jQuery Application Architecture (Extended Slides)
Tools For jQuery Application Architecture (Extended Slides)
 
Developing Micronaut Applications With IntelliJ IDEA
Developing Micronaut Applications With IntelliJ IDEADeveloping Micronaut Applications With IntelliJ IDEA
Developing Micronaut Applications With IntelliJ IDEA
 
Pulkit Arora's Resume
Pulkit Arora's ResumePulkit Arora's Resume
Pulkit Arora's Resume
 
jQuery Comes to XPages
jQuery Comes to XPagesjQuery Comes to XPages
jQuery Comes to XPages
 
Tw Technology Radar Qtb Sep11
Tw Technology Radar Qtb Sep11Tw Technology Radar Qtb Sep11
Tw Technology Radar Qtb Sep11
 
1_mockito
1_mockito1_mockito
1_mockito
 
Anarchist guide to titanium ui
Anarchist guide to titanium uiAnarchist guide to titanium ui
Anarchist guide to titanium ui
 
Infusion for the birds
Infusion for the birdsInfusion for the birds
Infusion for the birds
 
VA Smalltalk Update
VA Smalltalk UpdateVA Smalltalk Update
VA Smalltalk Update
 
J2EE Introduction
J2EE IntroductionJ2EE Introduction
J2EE Introduction
 
Reef - ESUG 2010
Reef - ESUG 2010Reef - ESUG 2010
Reef - ESUG 2010
 
JavaOne 2011 - Going Mobile With Java Based Technologies Today
JavaOne 2011 - Going Mobile With Java Based Technologies TodayJavaOne 2011 - Going Mobile With Java Based Technologies Today
JavaOne 2011 - Going Mobile With Java Based Technologies Today
 
jQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPagesjQuery: The World's Most Popular JavaScript Library Comes to XPages
jQuery: The World's Most Popular JavaScript Library Comes to XPages
 
soft-shake.ch - Vaadin - Rich Web Applications in Server-side Java without Pl...
soft-shake.ch - Vaadin - Rich Web Applications in Server-side Java without Pl...soft-shake.ch - Vaadin - Rich Web Applications in Server-side Java without Pl...
soft-shake.ch - Vaadin - Rich Web Applications in Server-side Java without Pl...
 
Flowdock's full-text search with MongoDB
Flowdock's full-text search with MongoDBFlowdock's full-text search with MongoDB
Flowdock's full-text search with MongoDB
 
The State of Front End Web Development 2011
The State of Front End Web Development 2011The State of Front End Web Development 2011
The State of Front End Web Development 2011
 
State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portland
 
jQuery Conference 2012 keynote
jQuery Conference 2012 keynotejQuery Conference 2012 keynote
jQuery Conference 2012 keynote
 

More from Daniel Lv

Intridea & open source
Intridea & open sourceIntridea & open source
Intridea & open sourceDaniel Lv
 
Getting start with titanium
Getting start with titaniumGetting start with titanium
Getting start with titaniumDaniel Lv
 
Better framework, better life
Better framework, better lifeBetter framework, better life
Better framework, better lifeDaniel Lv
 
上海的Rails社区
上海的Rails社区上海的Rails社区
上海的Rails社区Daniel Lv
 
Kungfurails2009
Kungfurails2009Kungfurails2009
Kungfurails2009Daniel Lv
 
Contributing To Rails By Plugin Gem
Contributing To Rails By Plugin GemContributing To Rails By Plugin Gem
Contributing To Rails By Plugin GemDaniel Lv
 
J Ruby Kungfu Rails
J Ruby   Kungfu RailsJ Ruby   Kungfu Rails
J Ruby Kungfu RailsDaniel Lv
 
Active Direct
Active DirectActive Direct
Active DirectDaniel Lv
 
岛根县政府的挑战
岛根县政府的挑战岛根县政府的挑战
岛根县政府的挑战Daniel Lv
 

More from Daniel Lv (11)

Intridea & open source
Intridea & open sourceIntridea & open source
Intridea & open source
 
Getting start with titanium
Getting start with titaniumGetting start with titanium
Getting start with titanium
 
Better framework, better life
Better framework, better lifeBetter framework, better life
Better framework, better life
 
上海的Rails社区
上海的Rails社区上海的Rails社区
上海的Rails社区
 
Kungfurails2009
Kungfurails2009Kungfurails2009
Kungfurails2009
 
Sinatra
SinatraSinatra
Sinatra
 
Contributing To Rails By Plugin Gem
Contributing To Rails By Plugin GemContributing To Rails By Plugin Gem
Contributing To Rails By Plugin Gem
 
J Ruby Kungfu Rails
J Ruby   Kungfu RailsJ Ruby   Kungfu Rails
J Ruby Kungfu Rails
 
Active Direct
Active DirectActive Direct
Active Direct
 
岛根县政府的挑战
岛根县政府的挑战岛根县政府的挑战
岛根县政府的挑战
 
Why Ruby
Why RubyWhy Ruby
Why Ruby
 

Recently uploaded

UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 

Recently uploaded (20)

UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 

Javascript framework and backbone

  • 1. JavaScript framework and Backbone Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • 2. JavaScript is Important Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • 3. Start from jQuery Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • 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. Building a web application with jQuery Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • 6. JQuery can give us this: Browser Dom Manipulation Ajax Server Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • 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. 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. 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. How to fill in the gaps? Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • 11. Extended the JavaScript language itself Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • 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. Provide rich library and toolkits Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • 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. Spend more time on project, less on architecture! Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • 16. Application Framework Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • 17. Think about is Rails in front-end Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • 18. YES! A MVC Pattern Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • 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. 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. 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. 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. Who use it? Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • 24. Basecamp Mobile Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • 25. Flow Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • 26. CloudApp Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • 27. Jeremy Ashkenas • DocumentCloud • Coffee-Script • Underscore • Docco • Github • Twitter Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • 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. 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. Backbone? Spine? Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • 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. 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. Backboneʼs MVC Copyright 2010, Intridea Inc. All Rights Reserved. Tuesday, June 28, 2011
  • 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. 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. 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. 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. 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. 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