Backbone.js

Backbone is a lightweight MVC framework primarily used for developing single-page web applications.  It relies only on underscore.js and jQuery, making it smaller in size than most frameworks and libraries.

Model—contains the business logic, validations, and data storage for an application.  It manages an internal table of data attributes, and triggers "change" events when any of its data is modified.

Screen Shot 2017-12-18 at 8.41.31 AM

Collection—an ordered set of models which can bind to events whenever a model in the collection is modified. Like an individual model, a collection fires events whenever a change occurs. Whenever a model is added or removed from a collection a change event is fired.

Screen Shot 2017-12-18 at 8.40.48 AMView

View—Each view manages the rendering and user interaction within its own DOM element. If you’re strict about not allowing views to reach outside of themselves, it helps keep your interface flexible — allowing views to be rendered in isolation in any place where they might be needed.

Screen Shot 2017-12-18 at 8.43.26 AM

Event—a module that can be mixed into any object, giving it the ability to bind and trigger custom named events like user clicks or mouse overs.  Events do not have to be declared before they are bound, and may take passed arguments.

Screen Shot 2017-12-18 at 8.48.18 AM

 

Resources: 

Advertisements
Backbone.js

Angular

Angular is an MVW (model-view-whatever) framework for properly architected single-page applications.   It’s opinionated, declarative, has two-way binding, and allows separation of presentation and business logic.

Angular 1 and 2 are quite different.

Modules:

Module are top-level containers for different parts of the application.

Controllers:

  • Controllers build logic for a particular view
  • Controllers configure and manage the $scope object.
  • Controllers make your components stateful.  Without controllers, your component is stateless.

Screen Shot 2017-12-15 at 10.46.47 AM

In example above, controller is not part of a component so to access the attributes, you have to use $scope.  If the controller is within a component, you have to use ‘this’ (and $ctrl in template). 

Scope: 

  • In Angular 1, you access scope using $scope.
  • In Angular 2, you access scope using this (because $scope and controllers don’t exist) and $ctrl.  (It’s similar to props in React)

Factories/Services:

  • Factories and services are objects that you can register with Angular so their data and behavior can be shared among different parts of the app. (e.g. registering an API with Angular so it can be accessed everywhere in the app)
  • The main difference between factories and services is that services are instantiated with the ‘new’ keyword so you do not need to return the object.
  • Services allow the use of ES6 classes because they are constructor functions.

Components:

Angular 1.x uses components but Angular 2 is entirely component-based.

  • In a component, there is always a template, which is used to render your view.
  • If you’re passing data from or to a component, use data binding.
    • When using binding, specify what you want the attribute to be treated as:
      • ‘@’ : strings
      • ‘<‘ :  one-way binding. Used to pass variables down.
      • ‘=’:  two-way binding.  Not very common.
      • ‘&’: methods or functions
  • Use ‘this’ keyword to access scope within controller in component.

Screen Shot 2017-12-15 at 12.14.01 PM

Screen Shot 2017-12-15 at 12.27.25 PM

data binding is used above to pass the ‘item’ variable from ‘todoList’ component to ‘entry’ subcomponent.

Directives:

Directives supercharge your HTML by giving it angular power!

There are four categories of directives:

  1. attribute (most commonly used)
  2. class name
  3. comment
  4. element (components are basically element directives)

Filters: 

Angular offers filters that make your app dynamic.  Some filters include: JSON, uppercase, lowercase, etc.

Syntax: 

  • built-in directives are prefixed with ‘ng’ in Angular 1.  (e.g. ng-click).  No ‘ng’ in Angular 2.
  • To present something to a user, use double curly braces {{ }}
  • When you want something to be invoked by Angular, use double quotes.

AngularJS Resources:

 

 

Angular