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

ReactJS

ReactJS is a Javascript library that is built on the premise of declarative and reusable components.  It’s the view layer in MVC and can be used with other frameworks or libraries to build applications.

  • one-way data binding: example – when you type in an input field, it doesn’t directly change the state of that component.  Instead, it updates the data model, which causes the UI to be updated.
  • virtual DOM: A virtual representation of the real DOM that React uses to intelligently re-render each component.  Each time the data changes in the app, a new Virtual DOM  is created, and the differences between the new Virtual DOM and the previous Virtual DOM will be updated in the real DOM.  Read more.
  • JSX:  XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML-like text can co-exist with JavaScript/React code.  (use Babel to transpile JSX and ES6 into Javascript).  JSX expressions are shorthand for ‘React.createElement’.

Components: 

  • A React app is a tree of nested components.
  • Props and state control each component.
  • Components must implement render.
  • Use class components for stateful components.

Screen Shot 2017-12-16 at 5.05.59 PM

  • Don’t use class for stateless components.

Screen Shot 2017-12-16 at 5.07.12 PM

Events: 

  • Events are created inside components and are added to their corresponding render function.  (e.g. onListItemHover event above).

Props:

  • Props contain information set by the parent component and can be passed to the child component(s). It’s the equivalent of $scope in Angular).
  • When a component is rendered, it can access its props using this.props.
  • Props are immutable.

State:

  • State is what makes your app interactive.
  • In general, you should initialize state in the constructor, and then call setState when you want to change it.
  • State is mutable.
  • State should be held at the top-most component that needs access to it.
  • Components manage their own state.
  • Initial values can be set for state.
  • State can be passed from parent components to child components as props.
    • Example:  Component A is parent of Component B.  When component B is clicked on, it updates state on component A.  In order for this to happen:
      1. Define a function that updates state on component A.
      2. Pass the function as a prop to component B.
      3. Invoke the function when B is clicked on.

Lifecycle Methods:

React components have a lifecycle, and you’re able to access specific phases of that lifecycle to update certain parts of each component.

  • Component creation: 
    • componentWillMount: called before the render method is executed.
    • componentDidMount: called after render method is executed.
      • example: You’re creating an application that streams music from the SoundCloud API as soon as a client connects to your website.  You would use componentDidMount to make that Ajax request to SoundCloud to ensure you have the song data you need once the application renders.
  • State changes:
    • shouldComponentUpdate
    • componentWillUpdate
    • componentDidUpdate

Read more.

ReactJS