- 浏览: 9700 次
- 性别:
- 来自: 南京
最新评论
-
since1027:
Backbone系列教程的最后一章了,希望对Backbone入 ...
Part 8: Understanding Backbone.js Events
It was a long time ago (almost a decade back) when most software applications were getting built as standalone applications. These applications were targeted at a single user and ran on their operating systems. Then came the need to share data across multiple users and a need to store data at a central location. This need gave birth to distributed applications and web applications. Distributed applications ran as standalone applications on the user’s machine giving him a rich user interface (desktop like experience) to work with, and behind the scenes, these applications sent data to a server. Web applications, on the contrary, were sandboxed in a web browser and HTML and HTTP were used to let the user perform operations on the data which is stored on the remote server.
Link to complete series:
The major differentiating factor for these two applications was that the distributed applications provided an interactive user experience whereas web applications provided very limited features (due to technology limitations). The downside of distributed applications was that it was very difficult to roll-out and ensure the application updated across all users. Web applications had no such problems because once the application is updated on the server, all users got the updated applications.
Both these approaches had pros and cons and something needed to be done to get the best of both worlds. This is where browser plugin based applications like Flash applications and Silverlight applications came into picture. These technologies filled in the gap for all the functionality not possible with HTML. They provided the possibility of creating rich internet applications that ran in the browser. The only downside of this was that the user needed to install the browser plug-in to get these applications to work.
Then came the time when browsers became more capable and HTML became more mature. Creating a rich internet application became possible only using browser based client side technologies. This led developers to write client side code using HTML and JavaScript to create rich internet applications. No need for plugins like Flash and Silverlight. But since HTML and JavaScript were never meant to be used for writing full fledged web applications, these applications had all the HTML and JavaScript code intermingled. This led to spaghetti code and these client side HTML/JavaScript applications (Single Page Applications or SPAs) became a maintenance nightmare.
So why should we write single page apps when they lead to bad code? The main reason for wanting to create a single page application is that they allow us to create a more native-like/desktop-like/device-like application experience to the user. So the need was to create SPAs in a structured manner and this created a need for JavaScript frameworks and libraries that provided some structure to single page applications.
Currently there are quite a few Open Source JavaScript frameworks available that help us solve the problem of spaghetti code. These frameworks let us design our applications in a structured manner.
Separation of Concerns and MVC
One of the best things about a good application architecture is the Separation of Concerns (SoC). The best part of the Backbone Marionette framework is the ability to provide this separation of concerns using the MVC pattern. The Model will represent the business objects needed to implement the solution. The view is the part that is visible to the user. The user can simply consume the data using views or act upon the data, i.e., CRUD operations. The controller is the one that provides the mechanism for interaction between models and views. The controller’s responsibility is to react on the user’s input and orchestrate the application by updating the models and views. The Models and Views remain loosely coupled, i.e., the Models don’t know anything about the View and the View has a Model object (association) to extract information and display it to the user.
What is BackBone.js
Backbone.js is a lightweight framework that lets us create single page applications in a structured manner. It is based on the Model-View-Controller (MV*) pattern. It is best suited for creating single page applications using a RESTful service for persisting data.
Now one might wonder what is this MV*. we have talked about the MVC architecture at length and then we are saying that backbone is a MV* framework. Well the reason for this is that backbone does not want to enforce the use of controllers. Applications can choose to hook their own code to be used as controllers, use some plugin that can provide a controller or perhaps use MVVVM pattern instead of MVC pattern.
What will Backbone Provide
Model: Every application need some way of organizing their data structures. Backbone will provide us with the possibility of creating Models to manage all our entities. Backbone models by default provide the ways to persist themselves. The persistence can be on a localStorage or even on a server via a restful API. These models also provide ways to validate the data in the model before persisting it.
Collections: Collections are simply a group of models together. Backbone also provide the possibility of creating the ordered set of models i.e. collections.
Views: The major problem in JavaScript applications is to handle the UI elements on views. listening to their events and changing their values based on the data received. Backbone ease up this problem by providing an abstraction over the HTML elements i.e. views. Backbone view are like observers on some HTML. We can define the HTML and associate with a view. The view will then take care of handing the events of these HTML elements and populating and rendering these views based on data. The HTML is totally separate from the view object. It can be associated with the view object either directly or via some templating engine(hang on tight, we will get to see all these in action in due course of time).
Routers: Even though we want to create a single page web application, requirements might dictate the need of copying, bookmarking the URLs. So for a single page application, if we want the URL to determine the view/views to be rendered, routers are very helpful. routers will look at the requested URL and then execute code based on the requested URL and then render the view to the user.
Why this Article series
So the idea behind writing this tutorial series is to understand backbone.js framework in a step by step manner by looking at small chunks of features. This article is mainly to get the user acquainted with the backbone.js framework features. from next article, we will dig deeper start looking at the backbone framework in detail. Later we will create a complete application to understand all these concepts.
In the very later stages we will look at Marionette.js plugin. This plugin makes it much more easier to create backbone applications. Also from the architectural perspective backbone.js + Marionette.js application are even better structured than backbone.js applications. We will then create a complete application to see the backbone marionette in action.
So just sit tight and start enjoying this backbone journey with me.
原文链接:http://rahulrajatsingh.com/2014/07/backbone-tutorial-part-1-introduction-to-backbone-js/
Link to complete series:
- Part 1: Introduction to Backbone.Js
- Part 2: Understanding the basics of Backbone Models
- Part 3: More about Backbone Models
- Part 4: CRUD Operations on BackboneJs Models using HTTP REST Service
- Part 5: Understanding Backbone.js Collections
- Part 6: Understanding Backbone.js Views
- Part 7: Understanding Backbone.js Routes and History
- Part 8: Understanding Backbone.js Events
The major differentiating factor for these two applications was that the distributed applications provided an interactive user experience whereas web applications provided very limited features (due to technology limitations). The downside of distributed applications was that it was very difficult to roll-out and ensure the application updated across all users. Web applications had no such problems because once the application is updated on the server, all users got the updated applications.
Both these approaches had pros and cons and something needed to be done to get the best of both worlds. This is where browser plugin based applications like Flash applications and Silverlight applications came into picture. These technologies filled in the gap for all the functionality not possible with HTML. They provided the possibility of creating rich internet applications that ran in the browser. The only downside of this was that the user needed to install the browser plug-in to get these applications to work.
Then came the time when browsers became more capable and HTML became more mature. Creating a rich internet application became possible only using browser based client side technologies. This led developers to write client side code using HTML and JavaScript to create rich internet applications. No need for plugins like Flash and Silverlight. But since HTML and JavaScript were never meant to be used for writing full fledged web applications, these applications had all the HTML and JavaScript code intermingled. This led to spaghetti code and these client side HTML/JavaScript applications (Single Page Applications or SPAs) became a maintenance nightmare.
So why should we write single page apps when they lead to bad code? The main reason for wanting to create a single page application is that they allow us to create a more native-like/desktop-like/device-like application experience to the user. So the need was to create SPAs in a structured manner and this created a need for JavaScript frameworks and libraries that provided some structure to single page applications.
Currently there are quite a few Open Source JavaScript frameworks available that help us solve the problem of spaghetti code. These frameworks let us design our applications in a structured manner.
Separation of Concerns and MVC
One of the best things about a good application architecture is the Separation of Concerns (SoC). The best part of the Backbone Marionette framework is the ability to provide this separation of concerns using the MVC pattern. The Model will represent the business objects needed to implement the solution. The view is the part that is visible to the user. The user can simply consume the data using views or act upon the data, i.e., CRUD operations. The controller is the one that provides the mechanism for interaction between models and views. The controller’s responsibility is to react on the user’s input and orchestrate the application by updating the models and views. The Models and Views remain loosely coupled, i.e., the Models don’t know anything about the View and the View has a Model object (association) to extract information and display it to the user.
What is BackBone.js
Backbone.js is a lightweight framework that lets us create single page applications in a structured manner. It is based on the Model-View-Controller (MV*) pattern. It is best suited for creating single page applications using a RESTful service for persisting data.
Now one might wonder what is this MV*. we have talked about the MVC architecture at length and then we are saying that backbone is a MV* framework. Well the reason for this is that backbone does not want to enforce the use of controllers. Applications can choose to hook their own code to be used as controllers, use some plugin that can provide a controller or perhaps use MVVVM pattern instead of MVC pattern.
What will Backbone Provide
Model: Every application need some way of organizing their data structures. Backbone will provide us with the possibility of creating Models to manage all our entities. Backbone models by default provide the ways to persist themselves. The persistence can be on a localStorage or even on a server via a restful API. These models also provide ways to validate the data in the model before persisting it.
Collections: Collections are simply a group of models together. Backbone also provide the possibility of creating the ordered set of models i.e. collections.
Views: The major problem in JavaScript applications is to handle the UI elements on views. listening to their events and changing their values based on the data received. Backbone ease up this problem by providing an abstraction over the HTML elements i.e. views. Backbone view are like observers on some HTML. We can define the HTML and associate with a view. The view will then take care of handing the events of these HTML elements and populating and rendering these views based on data. The HTML is totally separate from the view object. It can be associated with the view object either directly or via some templating engine(hang on tight, we will get to see all these in action in due course of time).
Routers: Even though we want to create a single page web application, requirements might dictate the need of copying, bookmarking the URLs. So for a single page application, if we want the URL to determine the view/views to be rendered, routers are very helpful. routers will look at the requested URL and then execute code based on the requested URL and then render the view to the user.
Why this Article series
So the idea behind writing this tutorial series is to understand backbone.js framework in a step by step manner by looking at small chunks of features. This article is mainly to get the user acquainted with the backbone.js framework features. from next article, we will dig deeper start looking at the backbone framework in detail. Later we will create a complete application to understand all these concepts.
In the very later stages we will look at Marionette.js plugin. This plugin makes it much more easier to create backbone applications. Also from the architectural perspective backbone.js + Marionette.js application are even better structured than backbone.js applications. We will then create a complete application to see the backbone marionette in action.
So just sit tight and start enjoying this backbone journey with me.
原文链接:http://rahulrajatsingh.com/2014/07/backbone-tutorial-part-1-introduction-to-backbone-js/
发表评论
-
Part 8: Understanding Backbone.js Events
2016-06-22 10:34 829In this article, we will look a ... -
Part 7: Understanding Backbone.js Routes and History
2016-06-22 09:52 576In this article, we will try to ... -
Part 6: Understanding Backbone.js Views
2016-06-22 09:50 745In this article, we will try to ... -
Part 5: Understanding Backbone.js Collections
2016-06-21 14:39 656In this article we will discuss ... -
Part 4: CRUD Operations on BackboneJs Models using HTTP REST Service
2016-06-21 14:21 939In this article we will discuss ... -
Part 3: More about Backbone Models
2016-06-21 14:08 790In this article we will look at ... -
Part 2: Understanding the basics of Backbone Models
2016-06-21 12:55 690When we talk about any MV* patt ...
相关推荐
Backbone.js是一款轻量级的JavaScript库,专为构建丰富的Web应用程序而设计。它通过提供模型(Models)、视图(Views)、集合(Collections)和路由器(Routers)等核心概念,帮助开发者组织代码并实现MVC(Model-...
backbone.js提供了一套web开发的框架,为复杂javascript应用程序提供一个mvc结构。, 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,...
Backbone.js 是一个轻量级的JavaScript库,主要用于构建可维护性和结构化的Web应用。它提供了一套模型-视图-控制器(MVC)架构,帮助开发者组织代码,使得前端开发更加有序。在深入探讨Backbone.js的开发秘笈源码...
backbone.js提供了一套web开发的框架,为复杂javascript应用程序提供一个mvc结构。 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,...
Backbone.js 是一款轻量级的 JavaScript 框架,它为 Web 开发提供了 MVC(Model-View-Controller)架构的基础组件。该框架的目标是简化客户端应用的开发流程,通过提供 Models、Collections 和 Views 的抽象层次结构...
Backbone.js是一款轻量级的JavaScript库,专为构建可维护性和结构化的Web应用而设计。它主要关注数据模型的管理、视图的渲染以及URL路由,为前端开发提供了强大的框架支持。本资源是关于"Backbone.js实战"的电子书,...
Backbone.js 和 Underscore.js 是两个在JavaScript开发中广泛使用的库,它们为构建复杂的Web应用程序提供了强大的工具。这两个库都是基于jQuery库,其中jQuery-1.10.2.js是jQuery的一个版本,它为DOM操作、事件处理...
backbone.js提供了一套web开发的框架,为复杂javascript应用程序提供一个mvc结构。, 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,...
Backbone.js提供了一套Web开发的框架,为复杂的JavaScript应用程序提供了一个MVC结构。 《Backbone.js应用程序开发》详细介绍了如何使用Backbone.js完成Web应用开发。全书从了解MVC、SPA和Backbone.js的基本知识...
Backbone.js 是一个轻量级的JavaScript库,它为Web应用提供了模型-视图-控制器(MVC)架构模式。在"TODO-APP: 使用Backbone.js开发ud989的项目"中,我们将深入探讨如何利用Backbone.js构建一个待办事项应用。 **一...
Backbone.js is a popular library to build single page applications used by many start-ups around the world because of its flexibility, robustness and simplicity. It allows you to bring your own tools ...
Backbone.js是一个轻量级的JavaScript库,它为创建结构化的前端应用提供了模型-视图-控制器(MVC)架构。这个主题旨在帮助开发者深入理解和有效地运用Backbone.js来开发复杂而有组织的Web应用。 **Backbone.js核心...
Backbone.js是一款轻量级的JavaScript库,专为构建复杂的Web应用而设计。它通过提供模型、视图、集合和路由器等概念,帮助开发者更好地组织和管理代码,实现MVC(Model-View-Controller)模式在前端的落地。陶国荣的...
Backbone.js是一个轻量级的JavaScript库,专为构建可维护和模块化的Web应用而设计。它基于MVC(Model-View-Controller)模式,帮助开发者组织和管理前端代码结构,使得复杂的应用程序更容易理解和扩展。在“Backbone...
1. **Backbone.js**:Backbone.js是一个轻量级的JavaScript库,为Web应用提供模型-视图-控制器(MVC)架构。它帮助组织代码,使得前端开发更有序,提供了事件处理、模型管理、路由等功能。 2. **Epoxy**:Epoxy是...
Backbone.js作为一款轻量级的JavaScript库,为开发者提供了构建结构化Web应用的基础框架。 #### 描述解析:“全栈Web开发与Backbone.js” 描述部分简短地重复了标题,未提供更多细节。但从上下文可以推测出,本书...