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

Time to show the code

This is ngPuzzle

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 ngLabs

What is ngLabs?

Three levels

Rookie

Advance

Innovation

Rookie

Super heroes wiki

Open Software Madrid

To code a wiki of Marvel Superheroes using its public API

To code a web to search the most interesting projects of Open Software being made in Madrid

Advance

Bus tourist

ngChat

App to create tourist routes using the bus lines of the city

Chat coded in Angular for mobile, desktop and web. The main condition of this project is that, in a 80%, the code for all the different version has to be the same

Innovation

ngPuzzle

ngModulator

To code a library in angular to make web sound

People who help me

People who help me

People who help me

People who help me

Be part of the community !!!!

Guest Stars

Javier Velez

Doctor en informática por la UNED desde el año 2009, Javier conjuga sus labores como profesor e investigador con la consultoría y la formación técnica para empresa. Su línea de trabajo actual se centra en la innovación y desarrollo de tecnologías para la Web. Además realiza actividades de evangelización y divulgación en diversas comunidades IT y es coordinador de varios grupos de ámbito local.

Twitter: @javiervelezreye

Guest Stars

Felix Zapata

Desarrollador senior frontend en SyncRTC y consultor de accesibilidad web.

• Coorganizador de los grupos meetups: WordPress Madrid, AngularMadrid, Madrid Polymer Group y Accesibilidad Spain.
• Aerotranstornado: piloto virtual y controlador aéreo virtual en la red VATSIM