javascript - AngularJs - components

angular components

I - guides

angular official component devguide

Refactoring Angular Apps to Component Style : teropa.info

Lifecycle hooks in Angular 1.5 : toddmotto.com

Jun 3, 2016

  • $onInit
    • Using $onInit
    • $onInit + “require”
    • Real world $onInit + “require”
  • $postLink
    • Using $postLink
    • Real world $postLink
    • What $postLink is not
  • $onChanges
    • What calls $onChanges?
    • Using $onChanges
    • Cloning “change” hashes for “immutable” bindings
    • One-way dataflow + events
    • Is two-way binding through “=” syntax dead?
    • Using isFirstChange()
  • $onDestroy
    • Using $onDestroy

One-way data-binding in Angular 1.5 : toddmotto.com

With a parent / child relation ship between component where the parent pass data to the child, it is the practice of binding uni-directionnal instead of bi-directionnal.

bi-directionnal (two way) is bindings: { obj: '=' } uni-directionnal (one way) is bindings: { obj: '<' }

Using one way binding break the link with the parent scope. So the child cannot mutate the parent state.

/!\ If an object reference is bound to the child from the parent, if the child mutate a property it will work like two way binding.

Another way to exprime difference between two-way and one-way bindings is :

  • One way binding is binding the data from the model to the view.
  • Two way binding is binding the data from the model to the view and the view to the model. (Also called MVVM)

II - best practices

A - Todd Motto best practices

Todd Motto best practices

  • one-way data flow

    • data goes from the top level component to the lower levels.
    • child components modifications on bindings doesn't reflect on parents components.
    • callback function are used to handle events, they are used to update the parents components data modified by children.
  • stateful components

    • referred to as smart/container components
    • how things work
    • fetches state (through API, so no bindings)
    • does not directly mutate state
    • renders child components that mutate state
    • the classic case is a view component for example an entity list
  • stateless components

    • referred to as dumb/presentational components
    • how things look
    • has defined inputs and outputs using bindings: {}
    • data enters the component through attribute bindings (inputs)
    • data leaves the component through events (outputs)
    • mutates state, passes data back up on-demand (such as a click or submit event)
    • doesn't care where data comes from - it's stateless
    • are highly reusable components

So TLDR is :

  • the webapp is a tree of components
  • theses components are stateful or stateless
  • views are stateful
  • stateful components fetches and store data (it is the state)
  • stateful components are an aggregation of stateless components
  • stateless components renders data only, so they are reusables

See section component design section in inter-component communication part for this design flaws.

B - Components types

The 3 component categories in Angular

Presentational and Container Components : Dan Abramov (ReactJS team, Redux author)

  • View Components (or Routing components) (or Stateful components for Todd Motto)
  • Container Components (or Smart components) (or Stateful components for Todd Motto)
  • Dumb Components (or Stateless components for Todd Motto)

Responsabilities table

Responsabilities per component View Comp. Container Comp. Dumb Comp.
Read route parameters YES NO NO
Uses stores and data services NO YES NO
Display and styling NO NO YES

III - feedback

A - NG 1.5 from the trenches at velesin.io

IV - inter-component communication

A - angular 2 parent & child communication via service

Parent and children communicate via a service : angular.io

B - practices overview

src Angular 1.5. Components communication. Best practice : stackoverflow.com

I'm using Angular 1.5.9.

Right now I have two components which need to communicate. If I change something in the first one (for example choose item in the list) => second one needs to be changed (item that was chosen needs to be displayed) and vice versa (changing in the second one => change in the first one) I have read about a lot of approaches, so I can manage this in few ways:

  1. Communication via shareable Service
  2. Using two way data binding ("=" option in component bindings). Example: https://jsfiddle.net/peter_drinnan/t4q4nrfp/27/
  3. Using one way data binding with input/output approach. Example: http://stackoverflow.com/questions/36033940/how-to-pass-data-between-child-components-in-angular-1-5-not-using-scope
  4. Using "require" (some parent component to share data). Example: http://stackoverflow.com/questions/36645065/component-communication-in-angular-1-5

Maybe I miss something? What is the best practice?

Thank you.

C - component design

1 - avoid event bubbling & extraneous props

Angular Component Design: How to Avoid Custom Event Bubbling And Extraneous Properties in the Local Component Tree

2 big flaws :

  • Custom Event Bubbling
  • Extraneous Properties (input are props so if tree is deeper then 2 comps, there is lots of props passing through for nothing)

2 - cross component communication design comparison

AngularJS: Cross Component Communication

  • Communicating with inherited scopes
  • Communicating with events
  • Communicating with services

3 - event based design is cancer

Events are no more then GOTO in an asynchronous context. (<- assert by me)

Worse then goto :

  • async
  • many place in source code to register an event

GOTO still considered harmful? : stackoverflow.com

Add Angular1 Event Patterns/Best Practices

D - articles

Front-end Application Libraries and Component Architectures

Parent component trigger function in child component

component communication and triggers

Component Interaction in Angular : kfarst.github.io 20170329

Angular components communication : dfsq.info

results for ""

    No results matching ""