Javiani

# Npm Install

npm install --save babel-core babel-loader babel-preset-es2015 css-loader extract-text-webpack-plugin glob stylus stylus-loader webpack

# Directories tree

/source
	- apps
	- home 
	    - index.js

Javiani

## UI Theme
- Atom Material
- Primary color : 0, 128, 192

##Syntax Theme 
- Nord Atom

## Font 
- Inconsolata

Javiani

<section data-component="avatar">
    <template>
        <ul soda-if="id" class="collection">
            <li class="collection-item avatar">
                <img soda-src="{{avatar_url}}" alt="{{name}}" class="circle" />
                <h2 class="title">{{name}}</h2>
                <p>Followers :{{followers}}</p>
            </li>
        </ul>
    </template>

Javiani

export default ( {init, reactor} ) => {
    
    init(()=>[
        fetch
    ])
    
    const fetch = () => 
        $.get('//api.github.com/users/javiani')
            .then( response => reactor( response ) )
}

Javiani

Maybe(1)
  .then(  
      value => console.log('Hey it has a value!!!', value),
      error => console.log('You got a null value!!!', error)
  )

// Hey it has a value!!! 1

Javiani

export const Maybe = (data) => {
 let value
 if (data.constructor === Function) {
  try { value = data() }
  catch (error) { return Promise.reject(error) }
 } else {
  value = data
 }
  return value !== undefined && value !== null
   ? Promise.resolve(value) 

Javiani

Maybe(null)
  .then(  _ => console.log('Hey it has a value!!!') )
  .catch( _ => console.log('You got a null value!!!') )
// You got a null value!!!

Javiani

Maybe(() => data.personsFirstName[0].value)

Javiani

Maybe(() => data.personsFirstName[0].value)
  .then( 
    value => console.log(value),
    error => console.error(error)
  )

Javiani

const data = {
 personsFirstName :[
  { value : 'Marcus' }
 ],
 personsMiddleName :[
  { value : 'Geoffrey' }
 ],
 personsLastName:[
  { value : 'Johnson' }
 ]