reshma – redpanthers.co

Gulp

reshma — Fri, 29 Sep 2017 09:36:51 +0000

Installation Make sure that you’ve installed Node and npm before attempting to install gulp. Install the gulp command

npm install --global gulp-cli

Make sure that you have your package.json created by manually creating it or typing npm init. Run this command in your project directory:

npm install --save-dev gulp

Create a gulpfile

In your project directory, create a file named gulpfile.js in your project root with these contents:

var gulp = require('gulp');
gulp.task('task-name', function() {
  // place code for your default task here
});

The first step to using Gulp is to require it in the gulpfile. Then you can begin to write a gulp task with this gulp variable. task-name refers to the name of the task, which would be used whenever you want to run a task in Gulp. You can also run the same task in the command line by writing gulp task-name. Run the gulp command in your project directory:

gulp

To run multiple tasks, you can use gulp Gulp tasks are usually a bit more complex than this. It usually contains two additional Gulp methods, plus a variety of Gulp plugins.

gulp.task('task-name', function () {
  return gulp.src('source-files') // Get source files with gulp.src
  .pipe(aGulpPlugin()) // Sends it through a gulp plugin
  .pipe(gulp.dest('destination')) // Outputs the file in the destination folder
})

gulp.src tells the Gulp task what files to use for the task, while gulp.desttells Gulp where to output the files once the task is completed. Now, let’s run a task to compile the Sass. In terminal

$ npm install gulp-sass --save-dev

In Gulpfile.js, we’ll write:

var sass = require('gulp-sass');
/**
 * Compile Sass.
 */
gulp.task('sass', function() {
    return gulp.src('./sass/*.scss') // Create a stream in the directory where our Sass files are located.
    .pipe(sass())                    // Compile Sass into style.css.
    .pipe(gulp.dest('./'));          // Write style.css to the project's root directory.
});

A simple task which can be used to compile Sass and create style.css! To execute [‘sass’], simply type the following command into your terminal:

gulp sass

Gulp can automatically compile Sass each time we save a Sass file

/**
 * Watch the Sass directory for changes.
 */
gulp.task('watch', function() {
  gulp.watch('./sass/*.scss', ['sass']);  // If a file changes, re-run 'sass'
});

In your terminal, simply type

gulp watch

Now, anytime you make changes and save any file with a .scss extension, it will trigger this [‘watch’] task which executes [‘sass’]. Gulp is a task runner that uses Node.js as a platform. Gulp purely uses the JavaScript code and helps to run front-end tasks and large-scale web applications. It builds system automated tasks like CSS and HTML minification, concatenating library files, and compiling the SASS files. These tasks can be run using Shell or Bash scripts on the command line.

Reference

]]>

Getting started with Angular 4

reshma — Tue, 19 Sep 2017 11:42:19 +0000

Angular is a most popular platform for building applications with the web. Angular empowers developers to build applications that live on the web, mobile, or the desktop. The AngularCLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. As compared to the older versions of Angular, there are many new things added to the list. Not only new features but also some twists are there that enhance old features. Forget Angular 3, Google jumps straight to Angular 4 after Angular 2. Angular4 applications are much faster and less space consuming. Angular4 is compatible with TypeScript’s newer versions 2.1 and 2.2. Components are the basic building blocks of your application. Every component has an associated template, style sheet, and a class with logic.

Prerequisites

1. NodeJS ( 6.x.x or greater ) 2. npm (3.x.x or greater )

Installation

1. You have to install AngularCLI globally.

npm install -g @angular/cli

2. Create a new project.

ng new my-app

3. To serve the application, get into the project repo and run :

cd my-app
ng serve --open

For launching our server and for rebuilding our app when there are any changes we are using “ng serve”. When using “–open” or “–o”, it will open in “http://localhost:4200/” automatically.

And that’s it!

Your basic app is ready!

What’s New In Angular 4

Router ParamMap

In the previous versions, we were using a simple key-value object for storing route parameters. But in Angular4, it is possible to query a so-called ParamMap in the router, that is a request for the route- and query parameter assigned to a route.

class MyComponent {
 sessionId: Observable;
 constructor(private route: ActivatedRoute) {}
 ngOnInit() {
   this.sessionId = this.route
     .queryParams
     .map(params => params['session_id'] || 'None');
 }
}

Now, we can run them as simple method calls (parameterMap.get(‘parameter-name’)).

class MyComponent {
 sessionId: Observable;
 constructor(private route: ActivatedRoute) {}
 ngOnInit() {
   this.sessionId = this.route
     .queryParamMap
     .map(paramMap => paramMap.get('session_id') || 'None');
 }
}

The parameters are also available as a map. This brings advantage in terms of type security. The old key-value structure is unsafe since it can take all possible values. In the map, the parameter value is either string or array of strings depending upon the method used. Hence it is safe.

Animation Package

All the functions of animation were provided in @angular/core module. So it was always there with our application even if we didn’t use it and many unnecessary bundles were created. To avoid this, these functions have been put into its own packages. So that this extra code will not end up in your production bundles if you didn’t use that. We can add animations ourselves in the main NgModule by importing BrowserAnimationsModule from @angular/platform-browser/animations.

Improved ngIf and ngFor

It’s now also possible to use an else syntax in your templates. In the else-case, a separately referenced template is used in place of the element marked with *ngIf.

Races
No races.

Another addition to the template syntax is the as keyword, to simplify the let syntax. We can store the result in a variable of the template so that we can use it in the element.


  {{i+1}}/{{total.length}}: {{pony.name}}

TypeScript 2.1 & 2.2 compatibility

Version 4 is compatible with these new versions of TypeScript. This will improve the speed of ngc and give better type checking in your application.

Universal

With Angular Universal, we can do the server side rendering. It was maintained by the community until now, but after this release, it’s now an official Angular project.

Conclusion

The new release brings some good features and a really great improvement of the generated code size, for the price of very few breaking changes that should not impact you a lot and also makes the migration quite smooth. So Angular 4 is here and it’s time to learn one of the most popular and powerful javascript frameworks.

References

https://angular.io/ https://jaxenter.com/angular-4-top-features-133165.html https://coursetro.com/courses/12/Learn-Angular-4-from-Scratch Happy Coding!!]]>

Event Listeners in VueJS

reshma — Wed, 13 Sep 2017 08:20:06 +0000

v-on directive to bind event listeners to DOM events.


  
  The button above has been clicked {{ counter }} times.

var example1 = new Vue({
  el: '#example',
  data: {
    counter: 0
  },
  methods : {
    clickMe : function(){
     this.counter += 1;
    }
  }
})

We are binding a click event listener to a method named clickMe. Here’s how to define that method in our Vue instance. Here we have a counter variable initialized to zero. Inside the method, we are incrementing the value of the counter. So for each click on the button, the method is invoked. You will get the code here.


  
  
  Count: {{ counter }}

var example2 = new Vue({
  el: '#example2',
  data: {
    counter: 0
  },
  methods : {
   countUp : function(){
    this.counter += 1;
   },
   countDown : function(){
    this.counter -= 1;
   }
  }
})

Here in this example, we are using two button and methods. One for incrementing the count and other for decrementing. You can see code here. Note :-

Instead of using "v-on:click", we have a shortcut. We can use "@click".

For example,


  
  
  Count: {{ counter }}

This will give same result as before. We can see another example. Here we have an input field where we type the url which is bound to the Js using v-model. We have a button with click event listener which is bound to the method humanizeUrl. We have two urls, url and cleanUrl. url is what we type in the input field and cleanUrl is getting by replacing the url using regular expression. Regular expression is not a Vue.js thing. Its a universal programming format. We are saving the domain name of url in the cleanUrl. Thus we will get the value on cleanUrl in the view. You will get the code here.


  Visit : {{cleanUrl}}

var example1 = new Vue({
  el: '#example',
  data: {
    url: "",
    cleanUrl: ""
  },
  methods : {
    humanizeUrl: function(){
      this.cleanUrl = this.url.replace(/^https?:\/\//, '').replace(/\/$/, '')
    }
  }
})

But here you won’t redirect to the url when we click on it. That is we have to get the url. So we need to bind the href. You can use v-bind directive for this.


  Visit : {{cleanUrl}}

Here is the Demo. So the url will redirect to the correct page. You can try out these examples to get an idea about event listeners in Vue.js.

Reference

https://vuejs.org/v2/guide/events.html https://www.youtube.com/watch?v=4PXXQzME5no]]>

Two way binding in Vue.js

reshma — Fri, 08 Sep 2017 13:06:37 +0000

Vue.js is a JavaScript framework getting popular considering its simplicity praised a lot these days. There are a lot of JavaScript frameworks among which React and Angular are popular among web developers. Vue.js is much flexible and less opinionated framework than Angular. It’s similar to React but much simpler. Vue.js supports Two-way binding. That is it keeps your data in sync with your DOM without you having to do anything. Two-way binding in Vue.js is MVVM pattern. That is Model View View Model. Like MVC, Model is the data object and view is what is displayed up. The Model can tie to the View and the View can tie back to Model. In one way binding, JS variable is bound to the DOM.


  The message is: {{message}}

new Vue({
 el: '#app',
 data: {
   message: 'vue js one way binding'
 }
});

Here when you change the data in JS, it will also update in the DOM. So you will get the updated message on the page. You can get the basic code here. But in two way binding, Js variable can be bound to the DOM and data is also bound from the DOM back to JS.


  {{message}}

new Vue({
  el: '#app',
  data: {
    message: 'vue js two way binding'
  }
});

Now, if you type anything into your input, your JS variable is updated with the change, which in turn updates your span. You can get the code here.

Directive

The attribute used with input v-modelis a vue directive. We have to assign data model with the directive. A directive’s job is to reactively apply special behavior to the DOM when the value of its expression changes. In the case of v-model, it binds the element to one of the data properties that Vue is watching. Vue has many directives. Another one is v-on which binds an element to an event. For example, v-on: click is to bind element when clicking on it. Working with html forms is a breeze in Vue. This is where two-way binding shines. It does not bring any issues even in complex cases, though watchers may remind of Angular 1 at first glance. One-way flow with callback passing is always at your service when you do your components splitting.

Two way binding with JQuery

You can also do two-way binding in jquery or plain JS. But you have to use some event listeners when there occurs any change in the input. You have to make your own logic to update DOM when there are any changes in the elements. You can see the example here. You can achieve reactive data binding in jQuery, but it’s just a sideshow. In Vue, it’s the main event. Hope you will try it. Happy Coding!

Reference

https://vuejs.org/ https://vuejs.org/v2/guide/forms.html https://www.youtube.com/watch?v=nEdsu6heW9o]]>

Getting Started with Vue.js

reshma — Mon, 28 Aug 2017 12:54:43 +0000

What is Vue.js?

Vue.js is yet another JavaScript framework getting popular considering its simplicity praised a lot these days. There are a lot of JavaScript frameworks among which React and Angular are popular among web developers. Vue.js pronounced as “view.js” is a much flexible and less opinionated framework than Angular. It’s similar to React but much simpler. Vue.js gives you more freedom in designing your app, unlike Angular. So that you are not forced to do everything in their way. It can be adapted very easily to your existing application. You don’t need to know JSX, unlike React. All you have to do is to drop the link into your HTML page header and you are up and ready.

Overview

This is the basic folder structure.

– index.html

This is the main HTML template for your application. You can link your static assets inside the head tag while your processed assets will be auto injected in the body.

– src/router/index.js

This is the file which initiates vue-router with the given components.

import Vue from 'vue';
import VueRouter from 'vue-router';
import Hello from '@/components/Hello';
Vue.use(VueRouter);
const routes = [
  { path: '/', name: 'Hello', component: Hello },
];
/* eslint-disable no-new */
export default new VueRouter({
  routes,
  mode: 'history',
});

– src/App.vue

This is the application’s main Vue.js component which is basically just a wrapper for vue-router.

– src/main.js

This is the application entry file where you initiate your Vue.js application with a router, store and the main App.vue component.

import Vue from 'vue';
import router from '@/router';
import store from '@/store';
import App from '@/App';
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
});

– src/components/Hello.vue

This file represents a sample Vue.js component which will be used by the vue-router. Please note that Hello module’s state is being used in here.

Getting Started

The simplest way is to include this in your file.

You can also download the Vue file and add it in a script tag, or else install it with NPM. It also provides an official CLI called the Vue-cli. You can find more details in the Vue.js Installation Guide. Let’s compare simple JavaScript with a VueJS instance.

function printText () {
  return 'Hello World!'
}
// Set some text in jQuery
$('.element').text(printText())

This is what we do when we want to manipulate the text for some element. For the last couple of years, I was writing code like this for a living. But what if the ‘.element’ get renamed. Your whole JS will break. The binding is broken. We can overcome this in Vue.


  
    {{ msg }}

new Vue({
  el: '.app',
  data: {
    msg: 'Hello World!'
  }
})

The Vue instance referenced to an element ‘.app’. This is the entry point. Even if the class of the span object is changed it won’t affect the message being displayed.Vue.js also supports Loops, Two-way binding, Components, Event Listeners like React. If you want to learnVue.js there’s no better document than the Vue.js Guide. You can see a demo Here.

Why Vue.js?

Let’s talk about why we can use Vue.js. Both React and Vue.js use Virtual DOM and the use of components. But in React if a component’s state is changed. It re-renders the entire component sub-tree. In Vue.js, the component’s dependencies are automatically tracked during render, so the system knows which component needs to be changed when the state is changed. Unlike React you don’t need to write everything in JavaScript. Vue.js supports the use of both JSX and Template rendering. If the HTML is valid, then it is a valid Vue template. We can give access to CSS within a single-file-component by adding a ‘scoped’ attribute to the style tag which scopes CSS only for that particular component. Comparing Vue with AngularJS, both have similar syntax. But Vue is much simpler in terms of API and design. There are many opinions to structure an Angular application but Vue is a more flexible, modular solution by setting up web pack template. In Vue, we use one-way data-flow between components that make the flow of data easier but in angular, it’s two-way binding between scopes. There are a lot of confusions between directives and components in Angular but in Vue, components are self-contained units with own view and data logic and directives are used for DOM manipulations only. Vue doesn’t use dirty checking so it’s much easier to optimize and has better performance. Since there are a lot of watchers in Angular, when anything in scope changes, all the watchers should re-evaluate again. So Angular becomes slow. Vue.js performs better than EmberJs since it automatically batches updates but in Ember, we need to manually manage run loops. For computed properties in Ember, we have to declare it manually and need to wrap everything in Ember Objects. But in Vue, it’s in Javascript Objects and fully automatic.

Advantages

1. Simplicity

Vue has a good combination of structure and simplicity. Adding Vue.js to your web project can be very simple. It needs external libraries, but tend to use it with or without jQuery.


  {{ message }}

The code is easily understandable about the working of Vue code.

2. Reactivity

The variables in Vue.js are reactive. At each point, when the variables change, it will automatically inform their peers.

var app = new Vue({
  el: '#app',
  data: {
    message: "Hello World"
  }
});
setTimeout(function() {
  app.message = "Goodbye World";
}, 2000)


  
  
  {{ message }}

Data properties, like message in this example, are reactive, that is they will trigger a re-render if changed. The v-html attribute will render HTML templates. You can see the demo here.

3. Focus

Vue.js is mainly used for building user interfaces and this is achieved by a library that does not have any influence from the frameworks out there already. Supporting libraries are integrated with Vue.

4. Flexibility

Vue.js comes with perfect balance to write quickly and run straight from the browser. With that said, it is extremely good if you would like to create any practical app using with ES6, separate component files, JSX, building, routing etc. For example, if you have a preferred method for writing your templates, Vue lets you do it in any of these ways:

Write your template in an HTML file
Write your template in a string in a Javascript file
Use JSX in a Javascript file
Make your template in pure Javascript using virtual nodes

This flexibility makes it easy to switch to Vue.

5. Components

Actually, this is where Vue’s flexibility system is built, so that components can be small and are reusable parts of UI. This isn’t any special because the of JavaScript frameworks are built with this concept.

// register
Vue.component('my-component', {
  template: 'A custom component!'
})
// create a root instance
new Vue({
  el: '#example'
})

Which will render,


  A custom component!

So, the components can be used in templates as elements.

6. Copying competitors

Vue has been able to copy what works in other frameworks and avoid what doesn’t. Vue’s state management library Vuex has inspiration from Elm. Along with this, Vue’s components get the similarities with Polymer’s customer elements. Vue is now rocking a virtual DOM like React.

Conclusion

Vue.js is a progressively-adoptable Javascript framework which is focussed on view layer. It is easy to integrate with other applications. The main feature of Vue is Components. Vue uses HTML based templates which can compile into Virtual DOM render functions. In Vue, we can also directly write render functions using JSX.Vue.js is much simpler, flexible and has better performance than other frameworks.

References

https://vuejs.org/ https://github.com/vuejs/vue https://medium.com/@brett.marshall/vue-js-the-real-angular-2-0-62744490cb99]]>

ReactJS for Beginners | A Step by Step Approach

reshma — Mon, 27 Feb 2017 15:06:33 +0000

There are many problems while building large applications with data that changes over time. To solve this ,I suggest checking out ReactJS. React lets you express how your app should look at any given point, and can automatically manage all UI updates when your underlying data changes.

React is one of the most popular JavaScript front end libraries which is developed by Facebook. It’s used for handling view layer for web and mobile apps. The main feature of ReactJS is that it allows us to create reusable UI components. The syntax used in React is JSX which allows you to mix HTML with JavaScript. This is not a requirement – you can still write in plain JavaScript. But this is suggested because this makes writing your components a breeze.

Installation

To install React with Yarn, run:

yarn init
yarn add react react-dom

To install React with npm, run:

npm init
npm install --save react react-dom

The bundlers like webpack or Browserify is recommended. So you can write modular code and bundle it together into small packages to optimize load time. Use React with Babel to let you use ES6 and JSX in your JavaScript code. ES6 is a set of modern JavaScript features that make development easier. JSX is an extension to the JavaScript language that works nicely with ReactJS.

React is efficient

ReactJS creates its own virtual DOM where your components actually live. It calculates what changes need to be made in the DOM beforehand and updates the DOM tree accordingly. So it is flexible and gives amazing gains in performance. It can be used on client and server side. This way, React avoids costly DOM operations and makes updates in a very efficient manner. The smallest ReactJS example looks like this:

ReactDOM.render(
Hello, world!,
document.getElementById('root') );

It renders a header saying “Hello, World!” on the page. You can see the demo here.

React Features

Components are the heart and soul of ReactJS. You need to think of everything as a component. This is why it is helpful to maintain the code when working on larger scale projects. The one way data flow in react makes it easy to reason about your app. “Flux” is a pattern that helps keeping your data unidirectional. Components accept arbitrary inputs called “props” and return React elements describing what should appear on the screen.

// Create a component named MessageComponent
class MessageComponent extends React.Component{
  render() {
    return (
      {this.props.message}
    );
  }
}
// Render an instance of MessageComponent into document.getElementById
ReactDOM.render(
  ,
  document.getElementById('root')
);

Create a new component class using component class approach. Components have one requirement, they must implement render function that tells the component what to render. You can see the demo here.

States in React

State is the place where the data comes from. You should always try to make your state as simple as possible and minimize number of stateful components.

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         header: "Header from state...",
         "content": "Content from state..."
      }
   }
   render() {
      return (
         
            {this.state.header}
            {this.state.content}
         
      );
   }
}

Now this will render the function. You can see the demo here. The key difference between props and state is that state is internal and controlled by the component itself while props are external and controlled by whatever renders the component. To access a component’s state, use “this.state” , just like how we use “this.props” . To update a component’s state, call “this.setState” with an object map of keys to updated values.

Component lifecycle

Lifecycle methods are special methods that automatically get called as our component goes about its business. Each component has several “lifecycle methods” that you can override to run code at particular times in the process.

getInitialState()

This method is invoked once, right before the mounting phase. The return value of this method will be used as initial value of this.state and should be an object.

getInitialState: function(){
    return { /* something here */};
}

getDefaultProps()

This can be used to define any default props which can be accessed via this.props.

getDefaultProps: function(){
    return { /* something here */};
}

componentWillMount()

This is the last method that gets called before your component gets rendered to the DOM. If you were to call “setState” inside this method, your component will not re-render.

getInitialState: function() {...},
componentWillMount: function() {
    console.log('componentWillMount');
}

componentDidMount()

This function is called as the render method has been executed. This method is the best place for initializing other Javascript libraries that need access to the DOM and for data fetching operations.

componentDidMount: function() {
}

shouldComponentUpdate()

This method allows you to control the updating behavior. If you use this method and return a true value, the component will update. If this method returns a false value, this component will skip updating.

shouldComponentUpdate: function(nextProps, nextState){
    // return a boolean value
    return true;
}

componentWillReceiveProps()

This is only called when the props have changed and we can use this method as an opportunity to react to a prop transition before the render() method is called.

componentWillReceiveProps: function(nextProps) {
  this.setState({
    // set something
  });
}

componentWillUpdate()

This gets called just before your component is about to update.

componentWillUpdate: function(nextProps, nextState) {
    console.log('componentWillUpdate', nextProps, nextState);
}

componentDidUpdate()

Finally this is called after the render method. This method can be used to perform DOM operations after the data has been updated.

componentDidUpdate: function(prevProps, prevState){
    //
}

React is a Javascript library which allows developers to create fast user interfaces. React views are typically rendered using components that contain additional components specified as custom HTML tags. One of the unique features of ReactJS is not only it can perform on the client side, but it can also be rendered on the server side, and they can work together. It also uses the concept called Virtual DOM, creates an in-memory data structure cache, enumerates the resulting differences, and then updates the browser’s displayed DOM efficiently. That is the react libraries only renders the sub-components that have been modified. So this make it faster and efficient.

References

https://facebook.github.io/react/ https://www.tutorialspoint.com/reactjs/ http://buildwithreact.com/tutorial Let me know if you have any doubts. Happy coding!]]>

reshma – redpanthers.co

Gulp

Create a gulpfile

Reference

Getting started with Angular 4

Prerequisites

Installation

And that’s it!

What’s New In Angular 4

Router ParamMap

Animation Package

Improved *ngIf and *ngFor

Races

No races.

TypeScript 2.1 & 2.2 compatibility

Universal

Conclusion

References

Event Listeners in VueJS

Count: {{ counter }}

Count: {{ counter }}

Reference

Two way binding in Vue.js

Directive

Two way binding with JQuery

Reference

Getting Started with Vue.js

What is Vue.js?

Overview

– index.html

– src/router/index.js

– src/App.vue

– src/main.js

– src/components/Hello.vue

{{ message }}

Getting Started

Why Vue.js?

Advantages

1. Simplicity

2. Reactivity

Hello World

3. Focus

4. Flexibility

5. Components

6. Copying competitors

Conclusion

References

ReactJS for Beginners | A Step by Step Approach

Installation

React is efficient

Hello, world!

React Features

States in React

{this.state.header}

{this.state.content}

Component lifecycle

getInitialState()

getDefaultProps()

componentWillMount()

componentDidMount()

shouldComponentUpdate()

componentWillReceiveProps()

componentWillUpdate()

componentDidUpdate()

References

Improved ngIf and ngFor