sibin – redpanthers.co

Flux example Application with React JS

sibin — Mon, 29 Feb 2016 00:07:05 +0000

Flux has three main parts.

Action
Dispatcher
Store

As their name indicates, Action is the result of some events, like JavaScript events, or callbacks for Ajax calls. Dispatcher, is a connector or link between Action and Store. The dispatcher is a central hub, from where everything passes through and we only need one dispatcher per application. Dispatcher handles all Actions and Stores. Store is very important in Flux architecture, we can write our business logics or Ajax calls to fetch data’s. I usually use it to store to get some initial data’s or to send or receive data via Ajax calls. The store uses event emitter similar to nodejs’s event emitter. We can define events in Store, and these events are connected to Store, whenever a change occurs in store, all components which listenes to this store will get an invoke and we can perform our logics. My example application will give you more idea, you can clone it from my GitHub account. In this application I have an input box where you can enter the number and a button to ‘Add Cart’, we can start from this button, this button has an on Click event, I have attached a Flux action on it, whenever a change occurs it passes input box data to an action.

Component

import React from 'react';
import checkoutActions from "../actions/checkout-action";
import checkoutStore from "../store/checkout-store";
class CartElements extends React.Component{
  constructor(){
    super()
    this.state = {
      currentCart : checkoutStore.getCart()
    }
  }
  componentDidMount(){
    checkoutStore.addListener(this.updateCartNumber)
  };
  updateCartNumber = () => {
    this.setState({
      currentCart: checkoutStore.getCart()
    })
  };
  updateCart = () => {
    checkoutActions.addCart(parseInt(this.refs.cartNumber.value))
  };
  gotoCheckout = () => {
    window.location.href +="?products=[1,2,3]"
  };
  render(){
    var checkoutButton = "";
    if(this.state.currentCart > 0){
      checkoutButton = CheckOut;
    }
    return(
      
        
            
        
        
        {checkoutButton}
      
    )
  }
}
export default CartElements

Action File

import dispatcher from "../dispatcher";
import constants from "../const/store-const";
var checkoutActions  = {
  addCart: function(data){
    dispatcher.dispatch({
      actionType: constants.ADD_CART,
      data: data
    })
  }
}
export default checkoutActions;

In this Action, I have an addCart method which dispatches item quantity along with a constant called ‘ADD_CART’ which is used to distinguish it on Store. Dispatcher is a simple file which uses Facebook dispatcher Object Assign is a NPM module where you can combine two objects and return source object, For example var birds = {bird:”Pigeon”} var animals = {animal:”Dog”} assign(birds, animals) => {bird:”Pigeon”, animal:”Dog”} We have a Store called checkStore, for which we have 5 methods. First 2 of them are custom methods, addCart and getCart. When we call Addcart, it increases the quantity and getCart to retrieve the latest value. Besides we have 3 required methods

emitChange
addListener
removeListener

import dispatcher from '../dispatcher.js';
import EventEmitter from 'events';
import assign from 'object-assign';
var CHANGE_EVENT = 'change';
var EventEmitterEvent  = EventEmitter.EventEmitter
var _number  = 0;
var checkoutStore = assign({}, EventEmitterEvent.prototype, {
  addCart: function(number){
    return _number = _number + number;
  },
  getCart: function(){
    return _number;
  },
  emitChange: function(){
    this.emit(CHANGE_EVENT)
  },
  addListener: function(callback){
    this.on(CHANGE_EVENT, callback)
  },
  removeListner: function(callback){
    this.removeListner(CHANGE_EVENT, callback)
  }
});
dispatcher.register((action)=>{
  switch (action.actionType){
    case 'ADD_CART':
      console.log("hello")
      checkoutStore.addCart(action.data)
      checkoutStore.emitChange()
      break;
  }
})
export default checkoutStore;

AddListener adds EventListner. We can use this to bind events to components. RemoveListener is used to remove listeners when we unmounts some components. EmitChange is used to update or invoke store after some actions. The store also has a dispatcher, where we register dispatcher, and in action, we dispatch data to stores. All data which passes from action is available in action argument, the switch uses check actionType, we already pass a constant from action to distinguish various types, like CREATE, EDIT, DELETE, and here we have ADD_CART, so only particular block works. In this case, we have only one condition inside switch block and condition with ADD_CART will work. Inside this condition we call add_cart store method and pass quantity after which we can emitchange. So, this store will invoke and all components which are connected will notify. Now we can move to a header component. There is a component called CartIconOnTopBar, in componentDidMount.I have attached a Store listener, ‘checkOutStore.addListener(callback)’ with a callback function, in this callback function, I again called stores getCart function to get latest items quantity.

class CartIconOnTopBar extends React.Component{
  constructor(){
    super()
    this.state = {
      cartItemCount: checkoutStore.getCart()
    }
  }
  componentDidMount(){
   checkoutStore.addListener(this.updateCart)
  };
  updateCart = () => {
    this.setState({
      cartItemCount: checkoutStore.getCart()
    })
  };
  openClassModal = () => {
  };
  render(){
    return(
        
          
            
             {this.state.cartItemCount} 
          
        
    )
  }
}

When we click on button, it passes data to action and through dispatcher it reaches store and it invokes store and all components which connected to this store will notify and it run callback functions and then we can update our data’s. In this application for a demonstration you can add as many actions and store. This is only a basics of flux, there are more in flux, also, flux has some alternatives like redux.]]>

React Example Application

sibin — Fri, 29 Jan 2016 05:20:03 +0000

React series, On the first article we went through react basics and some react syntax, now i want to demonstrate a sample application with es6 syntax. ES6 is the future of javascript, so we use ES6 in our projects. Complete code is available on github, you can use below links.

Example Application

React – Rails Store Example Application

[caption id="attachment_182" align="aligncenter" width="800"] React Rails Store Application[/caption] Before we start, we must familiarize with gulp and some gulp tasks. Gulp is a frontend tool to automate our tasks like sass/scss to css, coffeescript to javascript, minimization etc.. In this project we use babelify, it help us to write code in ES6, In ES6 mode, we can use import statement, classes in javascript, and double arrow functions.

var gulp = require('gulp')
var fs = require("fs")
var browserify = require("browserify")
var babelify = require("babelify")
var gutil = require('gulp-util');
var source = require('vinyl-source-stream');
var livereload = require('gulp-livereload');
gulp.task("react",function(){
  return browserify({
    entries:'./app/assets/javascripts/react/main.js',
    debug: true
  })
  .transform("babelify",{presets:["react","es2015","stage-0"],plugins:["transform-es2015-arrow-functions"]})
  .bundle()
  .pipe(source("bundle.js"))
  .pipe(gulp.dest("./app/assets/javascripts"))
  .pipe(livereload())
})
gulp.task("watch",["react"],function(){
  livereload.listen({basePath:'public'})
  gulp.watch("./app/assets/javascripts/react/*/*.js",["react"])
})
gulp.task("default",["watch"])

We use ES6, so we can use `class`, `import` and `=>`

Now we can start our code, It is actually a ruby on rails project. Our files are inside javascript/react folder, we use main.js file where we import all other javascript modules, which again convert to bundle.js then we included it on application.js file. Our main file is main.js , You can find code which use to inject our React components to actual DOM, ReactDOM.render method used to put react component ( first argument) to a DOM element ( Second argument, which is a selector)

import React from 'react';
import ReactDom from "react-dom";
import Sidebar from "./components/sidebar";
import TopSearch from "./components/top-header";
import ProductGallery from "./components/product/product-gallery";
import Pagination from "./components/pagination";
ReactDom.render( , document.getElementById('sidebar-elements'))
ReactDom.render(, document.getElementById('top-search-bar'))
/**
 * Some section are specific to some pages, so first check that those section are
 * available to current page , equalent to jquery `element.length`
 *
 */
var productSectionElement = document.querySelectorAll('#product-section');
if(productSectionElement.length > 0){
  ReactDom.render(, document.getElementById('product-section'))
}
var paginationElement = document.querySelectorAll('#pagination');
if(paginationElement.length > 0){
  ReactDom.render(, document.getElementById('pagination'))
}

With ES6 we can import modules

ReactDom.render function used to push components to inside DOM elements, In this , Sidebar component pushed to an element with id ‘sidebar-element’. You can refer sidebar.html.erb ( which is a partial called in layout.erb and reside inside common folder under view)

This sidebar component defined in component folder under react ( ‘react-with-rails/app/assets/javascripts/react’)

import React from "react";
import ATag from './html_components'
class Sidebar extends React.Component{
  constructor(){
    super()
    this.state = {
      active: false
    }
  }
  render(){
    return(
      
        
          
          
          
          
          
        
      
    )
  }
}
class SidebarLinks extends React.Component{
  constructor(){
    super()
  }
  render(){
    return(
      
        
      
    )
  }
}
export default Sidebar;

Above code is used to make Sidebar component, We can see that one Component called another Component ( ) which also called another one ( ). This is Parent – Child components, One Parent can call as many child elements. This is one advantage, We can make re usable components. State and Props are two properties used to control a component, State is its own property, and Props is a property coming from its Parent Component. You can see Sidebar and Sidebar Links, also ATags, This Sidebar is parent and SidebarLinks are children, SidebarLinks also call a ATag which is another child element. You can see ‘name’ in Sidebar Component, and this name variable can access using in child child components.

this.props.variable_name

In addition to this we have Refs, Lets talk about Refs

import React from "react";
import ReactDom,{Server} from "react-dom";
class TopSearch extends React.Component{
 constructor(){
 console.log("Initial")
 super()
 let myKeyword;
 this.state= {
 disabled: false,
 searchText: "Search"
 }
 }
 searchInputChange = (e) => {
 this.myKeyword = this.refs.keyword.value;
 };
 searchButtonClick = (e) => {
 this.setState({disabled: true,searchText:"Searching..."})
 this.startSearch(this.myKeyword)
 };
 enterKeyPress = (e) => {
 if(e.which == 13){
 this.startSearch(this.myKeyword)
 }
 };
 startSearch =(value) => {
 setTimeout(()=>{
 this.setState({disabled: false,searchText:"Search"})
 this.unMountIt()
 },5000)
 };
 unMountIt = () => {
 setTimeout(()=>{
 ReactDom.unmountComponentAtNode(document.getElementById('top-search-bar'))
 },3000)
 };
 render(){
 return(
 
 
 
 
 
 )
 }
}
class CartIconOnTopBar extends React.Component{
 constructor(){
 super()
 this.state = {
 cartItemCount: 0
 }
 }
 openClassModal = () => {
 };
 render(){
 return(
 
 
 
  {this.state.cartItemCount} 
 
 
 )
 }
}
export default TopSearch;

Lets assume if we have a search input box, we want to access it’s value, what should we do? We can use refs to solve this problem. Above code has a search field

You can see ref attributes, also you can see this.refs.keyword in searchInputChange function,

this.refs.keyword.value

can used to get values form form elements, input, textarea etc. State are its own properties, all state properties are used inside component, we can pass state values to its child elements using props. State can be initially set on constructor function

this.state = {stateName: value, stateName2: value2}

We can change state values using

this.setState({stateName: valueChanged})

It can be called in all custom functions and most of the react component life cycle functions ( You can’t set states in componentWillUpdate method. For every changes react will re render component. Now we can moved to Life Cycle method, React have many life cycles

constructor(){
// First to load
console.log("Initialization")
}
componentWillMount(){
// Second to load
console.log("Component Will Mount")
}
componentDidMount(){
// Third to load
console.log("Component Did Mount")
}
componentWillReceiveProps(){
// When props change
console.log("Component Will Receive Props")
}
shouldComponentUpdate(){
 // After props change, return true to re render and false to no change
}
componentWillUpdate(){
// When state or props change
console.log("Component Will Updpate")
}
componentDidUpdate(){
// After state and props change, and re render happen
console.log("Component Did Update")
}
componentWillUnmount(){
//Last state, it invoke after removal
console.log("Component Will Unmount")
}

constructor – Initial life cycle method, which invoke when an component called, we can set states in this method componentWillMount : called before it render componentDidMount: called just after react element put all elements to real DOM, we can use this function to set some states, which cause re render componentWillRecieveProps: It can when props changed in parent components, it have an argumenet, nextProps shouldComponentUpdate: We can use return true to update element or false to prevent re-render, this has two argument oldProps, and newProps, we can check both and decide whether we want re-render or not componentWillUpdate, componentDidUpdate : Similar to WillMount and DidMount, but this won’t call during initial rendering, it call when state or props change. componentWillUnmount: It can when we remove element

ReactDom.unmountComponentAtNode(document.getElementById(‘top-search-bar‘))

We can use above code to remove any react elements from Virtual DOM. I hope this will give a brief introduction to React JS, We will add more features as soon as possible, In our Next tutorial we will feature Flux architecture]]>

3 Most useful Jquery Slider/Carousel plugins

sibin — Wed, 30 Dec 2015 00:22:32 +0000

1) Slick Slider Most popular and free jQuery slider with lots of functions and callbacks. This will be the first choice for all frontend developers when they need some slider functions. [caption id="attachment_74" align="aligncenter" width="640"] Slick Carousel – most used jquery slider plugin[/caption] There are many new features to make slick as first choice for developers, slick support both vertical and horizontal sliders, it is very useful for some image gallery websites. If you want a slider which add new images in some particular period, using ajax or any other api calls, slick can handle it. I have work with a fashion website where new images are added from some live source. Slick have function to add new images, so it is a better option if you need some live updates. Slick has another feature called ‘filter‘, we can filter out images based on some criteria, for example one of our client has a fashion website, after live show, they filter out there images to winners, runner up, best shots etc… so in each categories there will be many images, for example there will be more that one winner or there will more photos for winners, slick can filter our and show only images from this category, we can click other tabs/buttons to show other categories or we can show all images. Responsiveness is very important for websites, Responsiveness it should be adapt all devises and work with mobile and tablets. Slick solve these issues because slick support responsiveness, it has some build in option for responsive layout, we an choose breakpoints, and how many slides should visible in each breakpoints/ resolution

How to use Slick in our website

Download slick minified version from slick.com Include plugin

//CSS


// Javascript

Create a list of images

Initialize slick

Responsiveness in slick

$('#my-image-slide').slick({
  responsive: [
    { //
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      /**
      *  2 slides below 600 pixel
      *
      **/
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    { /**
      * below 480 pixel it shows only 1 image, and when we click left or right
      * arrows it will slide only one
      **/
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

2) Owl Carousel Owl carousel have 2 versions, v1 and v2, v2 is in beta state but we can download it, they may add new features in final version or they may remove any features in final version. Try to update code when they release final version . Owl Carousel second in my list, it has some unique features those are not in Slick carousel, We can easily create progress bars in owl carousel using their callback functions. We can show a bar loading from 0 to 100%, after than new image will display. This can achieve easily. Another feature is it support animation.css, we can use all animations, instead of slide and fade. [caption id="attachment_75" align="aligncenter" width="640"] Owl Carousel[/caption] Like slick, owl carousel also support responsiveness, we can use break points to specify different screen resolutions.Owl carousel has some unique features, one is url hash navigation, URLhashListener option is listening for url hash change and is looking for slide with the same data name. Some time it is very useful. owl carousel website.

$('#my-image-slider').owlCarousel({
 responsive : {
    // breakpoint from 0 up
    0 : {
        option1 : value,
        option2 : value,
        ...
    },
    // breakpoint from 480 up
    480 : {
        option1 : value,
        option2 : value,
        ...
    },
    // breakpoint from 768 up
    768 : {
        option1 : value,
        option2 : value,
        ...
    }
  }
})

3) bxSlider bxSlider is another slider we use offenly. It is a simple slider with less features compare to slick and owl carousel. We can create synscronize sliders with bxSlider functions and events. Same logic can also use in Owl carousel. bxSlider also support vertical slider but it has some issues when number of images is below some specific point under some condition. So ensure number of slides before we use bxSlider. For Examle, consider If we have only 2-3 images in some pages and more than 10 images in another pages. And we make a vertical container that can hold more than 5 images, We have 2-3 images on some pages and more images in another pages, so first case we will have free spaces and if we enabled looping it will show some unexpected behaviour, but if we have more images that our visible part, it won’t create any problem. Features

Vertical and Horizontal thumbnails
Pager and navigation icons
Responsive
Adaptive height and Adpative height speed
Callback events and methods
Ticker
Captions can include along with images
CSS transitions
Many inbuilt transition effect for sliders

$(document).ready(function(){
  $('#my-image-slider').bxSlider({
   // options
  });
});

Website : bxSlider ]]>

React JS for modern web applications

sibin — Wed, 22 Jul 2015 04:20:03 +0000

Why React JS Before answering this question, I want to tell its history, this will give slight idea ‘Why React”, React JS is created by Facebook, it is an open source project maintained by Facebook and 100+ other contributors. React JS is used in Facebook and popular photo sharing website Instagram. React JS is a User Interface library. React use Virtual DOM instead of Real DOM, This help us to create more Fast and Scalable web applications. One of the main attractions is, React JS is reusable components, HTML elements are reusable components in React, and we can use same for other places. Another features are high speed Virtual DOM, Browser independent etc. Latest React JS is 0.014 beta which does not require separate JSX file, we can directly write JSX in scripts, but it will be good if we convert this to real JS in production environment (We can reduce browser load) React JS supports different states, we can easily bind our vanila JS events to React, like onClick, Hover, etc. We can download React JS file from Github, it is free and open source Download Link React : http://facebook.github.io/react/index.html Example React JS It is better to look on some examples React use render method to get input and it return what to display Example

var HelloWorld = React.createClass({
render : function(){
return  Hello World 
}
})

This has one drawback, it only return one node, if we want to multiple item we need to wrap it by another element, for example

var HelloWorldReturnmany = React.createClass({
render: function(){
return 




}
})

In this example we return 3 sections which has an outer div element. We use React.render() method to display it on web page, which require two parameter( We can pass third parameter but it is optional), first one is react component which created by React.createClass, then where to display Example I have a HTML page



 React JS : Example

I want to display my Hello world output inside div with id home React.render(,document.getElementById(‘home’)), if we want to display it on body, we need replace ‘document.getElementById(‘home’)’ by ‘document.body’. React JS also support states, every instant have states. We can set state using setState method. so we can handle states changes and we can perform different actions, some of the default states are getInitialState = It is the first state when we load a website, we can see contents in this function when we load a page, like default values at the begining. getDefaultProps is another state. There are many states available in React. Mixins : Array of object used to extend functionality. Life Cycle : Life cycle is another important and usable feature on react js. We can run specific javascript functions during these life cycles. componentWillMount: which invoke before component mount/ display on page componentDidMount: which invoke just after it display/mount on page componentWillUnmount: which invoke when we delete one component or similar actions. ShouldComponentUpdate: return value determine whether component should update. You can refer this page for more stated and lifecycles http://facebook.github.io/react/docs/component-specs.html Props: It is one of the term we used to use in react applications. Simply it is use to deal with attributes. Let’s look on an example; here is my react js component I have one attribute called name, year or anything, then it become , in jquery we can use $(‘elementSelector’).attr(‘name’) same we use props in react js We can use this.props.name to get name and this.props.year to get year, this will be very useful when we deals with real time applications. Bottom line: React JS is a beautiful JavaScript framework which focus on User interface as reusable components, It can also use to make iOS, Android and Windows phone applications. It is not a full MVC framework like Angular or bootstrap. It just likes partials in PHP, Ruby on Rails etc. It is more close to UI/UX, Frontend development. 0.14 beta is the latest ReactJS version, It is not yet reach to version 1, It will add more features in future. It is a good to learn JavaScript language. Unidirectional Data flow React support unidirectional dataflow, it happening via state and props. We can use parent’s attributes in children’s also. We can pass values to child elements.

render: function(){
return (




);

List is a child element, and we pass items to child element, we can render it on child element also we can control child element state from parent. React’s site provides all the information you need to setup a project and begin coding. Bottom line : React JS is a beautiful javascript framework which focus on User inteface as reusble components, It can also use to make iOS, Android and Windows phone applicatiions. It is not a full MVC framework like Angular or bootstrap. It just like partials in PHP, Ruby On Rails etc.We can use other popular javascript frameworks with React. It is more close to UI/UX, Frontend development. 0.14 beta is the latest ReactJS version, It is not yet reach to version 1, It will add more features in future. It is a good to learn Javascript Framework. We will update this post with more example.]]>