Does Angular have Components ?

Component software definition

A software component is a unit of composition with contractually specified interfaces and explicit context dependencies only.

Do you know the meaning of these images?

Have their meaning changed?

Let's  back to the first question; Does Angular have components?

Example of code; Hello world multi languages

Why cannot Angular components be reused?

Who am I ?

Adrian Ferreres Esteller

github: ardiadrianadri

twitter: @ardiadrianadri

Tech speaker

GFT Employee and member of the app verse team

What is the minimum and independent part of an Angular app?  

A) The component

B) The module

C) The app

Definition of app context:

The app context is the minimum set of code that we need to bootstrap the app

How many context do we have in Angular?

Example of visual component

@Component({
    selector: 'my-member',
    templateUrl: './memeber.component.html',
    styleUrls: ['./memeber.component.css']
})
export class MemberComponent {
    @Input()
    public member: Member = {
        id: '',
        title: '',
        acceptButton: {
            buttonClass: '',
            buttonTitle: ''
        },
        rejectButton: {
            buttonClass: '',
            buttonTitle: ''
        }
    };
    @Output()
    public acceptEvent: EventEmitter<Member> = new EventEmitter<Member>();
    @Output()
    public rejectEvent: EventEmitter<Member> = new EventEmitter<Member>();
    pressAccept() {
        this.acceptEvent.emit(this.member);
    }
    pressReject() {
        this.rejectEvent.emit(this.member);
    }
}

Characteristics of the visual components

• Don't modify the DOM directly
• Don't use features directed related with the context (window object, document object, web storage, etc..)
• Don't use state. ( state less component )
• Think only in the component

Develop in Angular is not develop only for web!!!

Business Logic 

• Cannot be tied to the visual component
• Cannot be global
• Cannot create a context

Redux is the solution

Redux architecture

Redux architecture in Angular:

http://blog.ng-book.com/introduction-to-redux-with-typescript-and-angular-2/

One Redux storage by visual component

On change event

Traditional way to code

Angular services

Angular pipe

Angular component

Back

Rest communication

Vertical

The new way

Horizontal way

The example

@Injectable()
export class HeroesLikeService implements Reducer<Hero[]> {
    private _addListHero (
        state: Hero[], 
        action: ActionHeroLike
    ): Hero[] {
        return state.concat(action.payload);
    }
    private _removeHero (
        state: Hero[],
        action: ActionHeroLike
    ): Hero[] {
        return state.filter((element: Hero) => 
            element.id !== action.payload[0].id);
    }
    reduce (state: Hero[], action: ActionHeroLike ): Hero[] {
        let result: Hero [];
        switch (action.type) {
            case ActionsListLike.ADD_LIST:
                result = this._addListHero(state,action);
                break;
            case ActionsListLike.ADD_HERO:
                result = this._addListHero(state,action);
                break;
            case ActionsListLike.REMOVE_HERO:
                result = this._removeHero(state, action);
                break;
        }

        return result;
    }
}

Redux Service:

@Injectable()
export class HeroesLikeStore extends Store<Hero[]> {

    constructor(
        protected _reducer: HeroesLikeService, 
        @Inject(INITAL_STATE) private  _initialState: Hero[],
        private _errorManager: ErrorHeroesLike
    ){
        super (_reducer, _initialState, _errorManager);
    }
}

Store:

The relationship between your visuals and your logic is n to n

The data components

• Independents of the logic
• Independents of the view
• Only gets the data

A visual component can be shared but it never can be tied

Example

@Injectable()
export class FilmService {
    constructor(
        @Inject(CONFIGURATION_FILMS) private _config: ConfigurationFilm,
        private _http: Http
    ){}
    private _mapResponseFilm(response:any): Film[]{
        let data: any[] = response.json().results;

        return data.map((element: any) => {
            let film: Film = {
                id: element.id,
                title: element.title,
                description: element.overview
            }

            return film;
        });
    }
    getFilms(name: string): Observable<Film[]> {
        let url=`${this._config.url}`;
        return this._http.get(url)
        .map(this._mapResponseFilm)
        
    }
}

A view can represent a lot of different data

The context component

• Initialize the visual components
• Initialize the logical components
• Initialize the data components
• Starts the reaction

What is a reaction?

The context is tied to the channel

Example

The bundle from the compilation of the context module is our component

Road map

1. Code the scaffolding for the rest of context (Universal, Ionic 3, Electron and NativeScript)
2. Solve the problem of two bootstrap
3. Solve the problem of including images and fonts in the bundle
4. Solve the problem of the size of the bundles
5. Upgrade to Angular 4
6. Include Angular-cli in the architecture
7. Code the context in more reactive way

I'll do in my meetup

Angular & ROR

See you in the community