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
- Code the scaffolding for the rest of context (Universal, Ionic 3, Electron and NativeScript)
- Solve the problem of two bootstrap
- Solve the problem of including images and fonts in the bundle
- Solve the problem of the size of the bundles
- Upgrade to Angular 4
- Include Angular-cli in the architecture
- 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
BEERS!!!!
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
See you in the community
