Jamal Soueidan

I’ve developed simple small dropdown react component, check it out! 

LIVE: http://codepen.io/jamalsoueidan/full/RKqEPN/

Preloading, or bootstrapping your application is done in Angular 2 using CanActivate decorators.

@CanActivate((next, prev) => boolean | Promise<boolean>)

CanActivate can be used to implement authorization in your application, to check if user is logged-in on specific component, or to load any necessarily data before rendering component.

Consider this application with these different routes:

@RouteConfig([  {path:'/cities', name: 'CityList', component: CityListComponent, useAsDefault: true},  {path:'/city/:id', name: 'CityDetail', component: CityDetailComponent} ])

We would like to render CityDetail: /city/:id But the model by id is not loaded in CityDetail, but in the CityList, so here we can use CanActivate to load all necessarily data before rendering the component, and share same CanActivate on nested  component if necessarily.

How to:

First we create a function that have reference to the application injector, so we can have reference to the different service in the bootstrap.

bootstrap(ApplicationComponent, [  CityService,  provide(LocationStrategy, {useClass: HashLocationStrategy}) ]).then((appRef: ComponentRef) => {  appInjector(appRef.injector); });

let appInjectorRef: Injector; export const appInjector = (injector?: Injector):Injector => { if (injector) { appInjectorRef = injector; } return appInjectorRef; };

Next, we add CanActivate to the CityDetail component.

@CanActivate(() => cityActivate()) export class CityDetailComponent implements OnInit

and the cityActivate is implemented like this:

export const cityActivate = () => { let injector: Injector = appInjector(); // get the stored reference to the injector let cityService: CityService = injector.get(CityService); let router: Router = injector.get(Router); // return a boolean or a promise that resolves a boolean return new Promise((resolve) => { cityService.load().subscribe((result) => { if (result.length > 0) { resolve(true); } else { router.navigate(['CityList']); resolve(false); } }); }); };

Here we use the CityService to load the models and then resolves to true when the data is ready.

More links:

CanActivate Decorator

Todo Features:

Add todo to the list.

Toggle todo completed or not!

Remove todo from the list.

Description

I’ve built a simple Todo app using Angular 2, the application component act as smart component, and rest components is dump components.

This way we can easily change to any other data mangement in our app.

It’s fundamental that application state stays at one place only inside the whole application and follows an unidirectional data flow.

It’s completely clear who provides and modifies data and who (and how) triggers data changes.

Github:

Checkout this repo, install dependencies, then start the dev server with the following:

As you already know Angular2 introduced RxJs Library in the new version of Angular, and I will show you how you can use it on HTTP service.

Angular1 uses Promises to manage async data, Observable are similar, but the difference is that Observables emit multiple values over time, cancel-able and can use Array#extras like operations (LINQ), whereas Promise once called will always return one value or one error. 

Lets look at an example:

First we create our data:

lounges.json

{"data": [ {"id": 1, "name": "Cafe Come", "city_id":1}, {"id": 2, "name": "Cafe Beirut", "city_id":2}, {"id": 3, "name": "Cafe Twister", "city_id":3}, {"id": 4, "name": "Cafe Volano", "city_id":4}, {"id": 5, "name": "Cafe Casual", "city_id":2} ]}

Next, we create a new Service class, and initialize a new Subject in the constructor, so our components can subscribe to it, and we create an interface for our data type ILounge.

export interface ILounge { id: number; name: String; city_id: number; } @Injectable() export class LoungeService {  public subject$: Subject<ILounge[]>;  private lounges:ILounge[];    constructor(private http:Http){    this.subject$ = new Subject();  } }

In our lounge service we have a private data store, this is where we store our list of lounges in memory. You also notice the dollar-sign on our subject object, this is common practice to indicate this is Observable.

Let’s define getLoungesByCity method to load our json document and return only the specific lounges for the component.

filterLoungesByCity(city:ICity) { return this.lounges.filter((lounge) => lounge.city_id === city.id); } getLoungesByCity(city:ICity) { if (this.lounges !== undefined) { this.subject$.next(this.filterLoungesByCity(city)); } else { this.http.get(“lounges.json”).map(res => res.json().data).subscribe({next: (data) => { this.lounges = data; this.subject$.next(this.filterLoungesByCity(city)); }, error: (error) => console.log(error)}); } }

Instead of getLoungesByCity method returning new values of our lounges list, they update our internal data store, and then use Subject to push new values down our data stream, this is done using next() method on the subject.

this.subject$.next(this.filterLoungesByCity(city));

Our filterLoungesByCity will filter only the specific data the component is only interested in.

Last we will have another method getLoungeByCity which will push only one lounge to our component, in case we only interested in a specific lounge.

getLoungeByCity(city:ICity) { this.subject$.next(this.filterLoungesByCity(city)); }

Let’s take a look at how we would use the new LoungeService we just created to display a list of lounges based on the City we are visiting:

While learning Angular 2, I discovered that Angular Team introduces Reactive Programming based on observables for asynchronous processing. This means you have to learn RxJS before jumping into Angular 2.

Let’s start explaining RxJS! 

What is RxJS

RxJS is a library for composing async and event-based programs using observable sequence, and you can query them using Array#extras such as filter, map, find etc. 

RxJs is represent by the Observable pattern of Observable / Observer. The Observable will notify all the observers automatically of any state of changes as push-based.

RxJs does not aim at replacing existing async models such as promises and callbacks. However Observable provide key features like laziness and the ability to cancel subscription and compose events. RxJs will provide you with tools that can’t be found in those models, and assist you better in async programming.

I will describe the different key types in RxJs.

Stream

Steam is a sequence of values in time, data is a stream of 4 sequence.

const data = [{"id": 1, "name": “GrapeQL”}, {"id": 2, "name": “Relay”}, {"id": 3, "name": “Bacon.js”}, {"id": 4, "name": “d3.js”}];

Sequence

Sequence can be understood as events that are triggered when the user interacts with the page, or data arriving from the server, like our data array.

Observables

Observable represent data source that can be observed, meaning it can send data to anyone who is interested in the data source. The way you do it, is by using subscribe method of the Observable to hand it an Observer object.

Hot (active) and cold (passive).

There is two types of Observable, hot and cold. The difference is that when you have default/cold Observable it doesn’t emit new values - only if you subscribe to it using “subscribe” method! Whereas hot Observable start emitting new values even if there is no subscriber.

Create Cold Observable:

var observable = Rx.Observable.interval(1000) observable.subscribe({next: i => console.log('a: ' + i)}); setTimeout(function () { observable.subscribe({next: i => console.log(' b: ' + i)}); }, 4500);

Create Hot Observable:

var observable = Rx.Observable.interval(1000).publish(); observable.subscribe({next: i => console.log('a: ' + i)}); setTimeout(function () {  observable.subscribe({next: i => console.log('   b: ' + i)}); }, 4500); observable.connect(); //start live streaming

Observer

Observer is the object that register an interest through subscription by using the subscribe method of Observable. Then the items are subsequently handed to the observer from the Observable.

Create Observer object and subscribe:

const observer = {  next: x => console.log('Observer got a next value: ' + x),  error: err => console.error('Observer got an error: ' + err),  complete: () => console.log('Observer got a complete notification'), }; const subscription = observable.subscribe(observer);

Subject

Subject acts like a Observable and Observer, you can subscribe to it like Observable, and you can use it as a Observer to listen on a Observable.

var subject = new Subject(); subject.subscribe({  next: (v) => console.log('observer: ' + v) }); subject.next("Hello world");

Subscription

Subscription can be used to unsubscribe from the Observable.

subscribe method will return an Subscription object whenever a subscription is made, and you can use that object to remove the current observer from listning to the Observable by calling unsubscribe method.

const subscription = observable.subscribe(observer); subscription.unsubscribe();

Read more:

Angular 2 — Introduction to new HTTP module

Reactive Programming in JavaScript With RxJS

Introduction to Rx

Used same old simple project, but connected React with Redux.

You can look at both application to see how Redux is implemented compared to the old project where we only used React to fetch from Youtube Search API.

Type the following:

Redux is just about maintaining application state, inspired by Flux implementation. It’s useful for React but not dependent on it, so it can also be used with Angular or handle the state for what ever you might need.

For many developers Redux will look very confusing, but the best way to understand Redux is to watch someone build application using it, and then try to write your own app afterwards!

Here is a diagram how Redux work, starting from the VIEWS when visitor dispatch a action.

(1) Actions

They are the starting point of a change in the state. We dispatch actions to our reducer functions to update state of the application.

export function selectBook(book) { return { type: "BOOK_SELECTED", payload: book }; }

(2) Middleware

Middleware are function that are automatically called by Redux in the middle of control flow.

Action > Middlewares > Reducer

You can attach one or more middlewares to Redux, and they are called one-by-one until all of them are called and then the “action” object is sent to the Reducers!

Middleware allows to modify action object, resolve ajax calls, or do other things like logging.

const noop = middlewareAPI => next => action => next(action);

(3) Reducers

To apply changes we have to write a reducer function which will return new state, combining the current state and the data provided by the action.

const BookReducer = (state = null, action) => { switch (action.type) { case 'BOOK_SELECTED': return action.payload; break; default: return state; } }

(4) Store

We have a single store with all the state of the application which is immutable.

I developed simple application using only React to fetch data from Youtube.

The app is written in ES6 and uses webpack. Webpack is used to load Babel, which allows us to use ES6 (and beyond) features today.

Type the following:

What is React?

React is a “Interface Library”, is the View in MVC.  and nothing else, and is extremely fast, because it uses virtual DOM, if performance is your concern, then React is a very good choice. 

React uses one-way data binding; most other frameworks provide two-way data binding like Angular.

Virtual DOM

An in-memory representation of the DOM. React manipulates this in order to quickly check for differences in the current state of the UI.

For more information click here.

One way data binding

Data binding is a great way to keep your View consistent. React uses one-way data binding, and is very easy to follow. The basic idea is whenever we have nested components – for example, Chat, which has a list of Messages – the parent component updates each child.

Most other frameworks provide two-way data binding like Angular, and finding what caused a change in data is sometime really tricky. Not with React - since data always pass from the parent! 

Components

React is build around the concept of components, this make it possible to swap parts of your application very easily, and each component will be in separat file to enhance modularity, decoupling and increased cohesion.

Here is a simple stateless component using ES6: 

const HelloMessage = (props) => <div>Hello {props.name}</div>;

Component: State and Properties

Every component can maintain internal state data. This can be thought as similar to data-binding (Angular and Ember), when a component’s state data changes, the rendered markup will be updated.

State is only seen on the inside of the component definition, they affects the rendering of the component, and should be considered private data for the component. Properties on the other hand is defined when components are created, they are used for component initialisation.

Every-time the component change it’s internal state, it will re-render itself and the children of the component, lets take a look!

We define a state with “inc”, that have the value of 0, and is incremented every time the button is clicked.

class Application extends React.Component { constructor(props) { super(props); this.state = {inc: 0}; } updateState(e) { const inc = this.state.inc + 1; this.setState({inc}); } render() { return <button onClick={this.updateState.bind(this)}>{this.state.inc}</button> } }

Here we define property “name” with the value “jamal”.

const Application = (props) => { return ( <HelloMessage name="Jamal" />  ) }

Native

Introduction

It’s very important to understand what scope is and how it’s implemented in the language of your choice, so that can you be sure about the value a variable has at any given place in your code.

What is scope?

Scoping is the ruleset used to lookup variable values.

Which scope exist in Javascript?

Function Scope

Lexical Scope

Block Scope (ES6)

Function Scope

Function scope is pretty simple, any variable which is defined within a function is visible within the entire function.

function process() { var i = 0; for(var i=0; i<10; i++) {}; console.log(i) // print 10; }

Lexical Scope (aka, tokenizing, also known as Static Scope)

Lexical scope defines how variable names are resolved in nested functions. You must understand that the scope of a variable are the location where its accessible.

Consider the following example:

function out() { var y = "out"; function in() { var x = "in"; } }

Here, the scope of x is the function in().

function out() { var x = "out"; function in() { var x = "in"; } }

If we declare the same variable like in the parent scope, then the access to the parent variable is blocked, so we can only access the variable in the same scope. Changes to the inner variable does not effect the outer variable.

So whenever you see a function nested within another function, the inner function have access to the scope of the outer function, this is called Lexical Scope.

Block Scope (ES6)

let and const is the only statement that declares a block scope in Javascript, only exist in ES6.

block means everything inside curly brackets

Those statements works very much like var, but those statements have their own block scope in which they are defined, var statement only declare a variable in the scope they are defined.

Hoist means to raise or lift something, in Javascript hoist means to invisibly move function declaration or variable declaration to the top of their containing scope, this is done by the interpreter.

Variable Declaration

Function Declaration

Class Declaration (ES6)

Variable Declaration

Let’s write some variable declaration examples to understand this:

function hello() { //any code var i = 10; return; x = 20; }

This will be interpreted like this:

function hello() { var i, x; //any code i = 10; return; x = 20; }

It doesn’t matter if the declaration will ever be executed, as with x = 20, both variables is hoisted to the top of their containing scope by the interpreter.

Function Declaration

There are two normal ways to declare a function, consider this:

function hello() { x(); y(); var y = function() { console.log(‘y’); //TypeError: y is not a function } function x() { console.log(‘x’); //print out x } }

In this case, only the function declaration has it’s body hoisted to the top. The y variable declaration is also hoisted but not it’s body.

function hello() { var y; function x() { console.log(‘x’); //print out x } x(); y(); y = function() { console.log(‘y’); //TypeError: y is not a function } }

Class Declaration (ES6)

Class declaration is NOT hosited, and therefor you can't invoke a new class before it's declared.

new Y(); // ReferenceError class Y {}

As we mentioned before you can use a function before it's declaration because of hoisting, but this change in ES6, if your functions invoke any class, then it will throw an error if you tried to call the function, consider this:

Dependency inversion is a software design principle.

With dependency injection, your dependencies are given to your object instead of your object creating them.

var Controller = function(Api) { Api.send('anything'); };

Here we specify Api object as a dependency for Controller, but before Api object will get injected, we need to register the Api object into the Injector, which will handle everything for os.

var Injector = { dependencies: {}, register: function(name, dependency) { this.dependencies[name] = dependency; }, }; Injector.register(‘Api’, HapiJs);

Now our injector knows about the Api object.

The best part in Javascript, is when we use toString on our Controller it returns the function as String, we don’t explicitly need to execute the function, this will help us figure out which dependencies to inject.

Here we borrow code from Angular Framework #66. https://github.com/angular/angular.js/blob/master/src/auto/injector.js#L66

var FN_ARGS = /^[^\(]*\(\s*([^\)]*)\)/m; var dependencies = AnyObject.toString().match(FN_ARGS)[1]; console.log(dependencies); // Api

Wonderful, right? We have now parsed out Controller dependency list.

The end is just straight forward, we process the list from our injector register, and call the target function passing the requested dependencies.

There are 2 types of relationships in an object model: inheritance and composition.

Most of us know what the traditional concept of inheritance is: “a child class/object extends a parent class/object”. Composition is: “instances of one object have instances of other objects as properties.”

Inheritance => is-a relationship Composition => has-a relationship

Here are some reasons why composition is a good pattern:

There are no limits in combining functionality (multiple inheritance).

Objects are not tied together, meaning decoupled from each other.

Anonymous functions in Javascript can be written like this:

(function(){ //Code goes here })

Whats really interessing in Anonymous Functions, is when you add () in the end of the code, this cause everything contained in the preceding parentheses to be executed immediately.

(function(){ //Code goes here })()

High-order functions are a function that accept other function as a argument or return functions as values.

A function that does either of those is called a higher order function. . 

Examples:

function sum(y) { return function(x) { return x + y; } } console.log(sum(5)(10)); //print out 15