Sunday, 30 November 2014

Overview

React.js is used to create components in your views, it specifically renders UI and responds to events.

Instagram and Facebook have come up with a FrontEnd client library that uses a virtual DOM diff implementation for ultra-high performance. This works by comparing DOM changes in memory to calculate a patch required to update the DOM:

On every data change React re-renders the entire component in memory then uses a diff to apply a patch for what has changed in the DOM. This means within React the virtual DOM UI is immutable, on each data change it’s completely replaced.

Here is a stackoverflow comparing Angular’s dirty checking with Reacts virtual dom diffs, with the answer provided by the creator of React:

The syntax is a bit funky but quite simple once you get used to it. It optionally uses a JSX transform library which is the preferred way of coding with React. The following examples use JSX.

Concepts

React.createClass: Creates a component by the developer providing a “render” function.

React.renderComponet: Renders the component to a specified location

Props (or Properties): Container object for immutable data, for example used with labels. This example has two props: now and b. Now is set to a javascript expression of todays date and b is set to a string literal.

Here is a more complex example showing default values, provided to React by using the getDefaultProps function, which are later overwritten by the component usage.

State: Container object for mutable data for example used with input controls. You can provide React the values for the initial state using the getInitialState function. Here is an example of using state (note: state would usually be used with input controls rather than a label):

ReactLink: Used to streamline the updating of state so you don’t have to write your own onChange function to update state set.

Uncontrolled controls: Form components rendered without a value (or checked) prop. This enables React to ignore the component during the render process, allowing for better performance. onChange event can still be used to detect changes outside of React. You can also provide a defaultState value. Beware, as React will not be tracking this component this will cause divergence from Reacts virtual DOM.

Ref: Similar to the “ID” attribute in HTML, this attribute allows fast access to an item within your component instance:

getDOMNode(): Gets the underlying DOM node from an item within a React component instance.

PropType validation: By providing a propTypes property object you can validate your properties. This example states the now property must be a string and the b property must be great than 5.

Flux: Facebook have a separate optional complimentary library called Flux for single (or uni) directional data flow. They have done this by introducing a dispatcher and (data) store.

The Dispatcher acts as a “traffic controller” for all the actions.

The (data) Store is the data layer that updates whenever it receives a new action from the dispatcher.

Thursday, 27 November 2014

After creating services, we will likely inject them into a controller, call them and bind any new data that comes in. This becomes problematic of keeping controllers tidy and resolving the right data.

Thankfully, using angular-route.js (or a third party such as ui-router.js) we can use a resolve property to resolve the next view's promises before the page is served to us. This means our controllers are instantiated when all data is available, which means zero function calls.

Route changes and ajax spinners

While the routes are being resolved we want to show the user something to indicate progress. Angular will fire the $routeChangeStart event as we navigate away from the page, which we can show some form of loading and ajax spinner, which can then be removed on the $routeChangeSuccess event (see docs).

Wednesday, 12 November 2014

I’m undecided about using a valid icon or whether a lack of validation error message implies validity. Perhaps I’m swayed by years of rubbish UX on the web that I think I’m currently in favour of using an icon. And if an icon is to be used, how subtle should be it?

Wednesday, 5 November 2014

Combination of transfer and include, this simply means you want to take the HTML within the usage of your directive and include it within the template supplied by your directive definition.

The key lines are 14, 18 and 30. These tell Angular I want to transfer the contents of the HTML DOM and here is where I want to include it. Line 30 is the usage of the directive including the {{text}} which is transcluded.

The following explanations were taking from various Angular docs, Misko code examples and StackOverflow posts.

What?

Service returns an instance of the actual function

Factory returns function’s return value

Provider returns the output of the function’s $get function

How?

When?

Factory and Service are the most commonly used recipes. The only difference between them is that Service recipe works better for objects of custom type, while Factory can produce JavaScript primitives and functions.

Factories are an example of the revealing module pattern.

Providers have the advantage that they can be configured during module configuration phase.

Under the hood

Services, Factories as well as Values are all created under the hood using Providers.