Achieve Best Performance with PHP7 + NGINX

I don’t know much about hhvm..but i can help you with apache,nginx and php7.

I have used php7 + nginx combination and achieved around 1Million request per second in our stress and mixed load testing.

I have also tested same thing with apache2, Apache faces what is called the C10K problem – strictly speaking, difficulty supporting more than 10,000 connections at a time. (Apache falls well short of this goal.) Apache allocates memory to every additional connection, so it tends to start swapping to disk as concurrent connections increase. This sends site performance into a downward spiral and can lead the entire server to crash or freeze.

In opposite to that,NGINX runs an ongoing event loop that handles requests as they occur, without allocating resources to the requestors.

Nginx also has strong caching mechanism. It can be used for caching static as well as dynamic files. CloudFlare, a widely used CDN, uses NGINX as its operating system.

PHP 7 is said to be twice as fast as previous versions of PHP, and to use considerably less memory. It’s uses Abstract Syntax Tree mechanism for compilation which boost performance.It also has internal opcode caching feature.You can also use generator(yield) feature to perform co-operative parallel processing.

In order to get best performance.you have to fine tune your database,code and logic.keeping database connection persistent always help to increase throughout.

Memcache or redis Always plays important role in caching your results ,which will boost your performance.

At last most important key factor is infrastructure.You will need high end cpu in order to achieve best performance.

PHP 7 Performance with NGINX: Web Serving & Caching

Should I use AngularJS or React?

Initially released in 2009, the Google-backed AngularJS has since risen to become the incumbent JavaScript framework of choice for building dynamic single page applications (SPAs) on the web. On the other hand, React was developed and released by Facebook in 2013 and is the relative “new kid on the block.” It brings some revolutionary new innovations to the “view” component of the Model View Controller (MVC) architecture.

While there is indeed some overlap in function, the two technologies are as different as Google and Facebook themselves. AngularJS is a framework, while React is a library. Read on to explore some of the key differences between the two technologies and learn how you can use one or both for your next web project.

AngularJS vs react
AngularJS vs react

WHAT IS ANGULARJS?

AngularJS is a comprehensive JavaScript framework that contains everything you need to set up the client-side of a website. Like all frameworks, it provides a programming pattern or structure (in this case MVC) that helps streamline and standardize the web development workflow.

Some of the key advantages that have helped AngularJS rise in popularity are listed below:

  • Angular directives (extension to HTML)
  • Dependency injection
  • Two-way data binding
  • A solid templating engine
  • On-board form validation

Since AngularJS is a full-sized framework packed with features, let’s focus on how it handles the “V” portion of MVC so that we can make a more appropriate comparison with React.

AngularJS manipulates the DOM (Document Object Model) by extending HTML with directives. Thanks to two-way data binding, any changes to the view are also reflected in the data and vice versa. This has the advantage of reducing much of the programming overhead involved with syncing up the view with the model, which speeds up development time.

While two-way data binding works great for many applications, there are times when it can really start to slow things down—particularly when it has to manipulate or render large blocks of data-heavy content, like a photo gallery or lists containing hundreds of items. For applications like these, you might want to take advantage of Angular’s modularity and swap out the “V” for a more formidable rendering engine like React.

WHAT IS REACT?

React (also known as React.js or ReactJS) is an open-source JavaScript library for rendering views. While full frameworks like AngularJS provide the model, view, and controller, React is a library that caters only to the view. It uses one-way data binding, but with a unique twist that helps it gain a huge performance advantage over competing technologies.

Let’s take a look at some of the key tech differentiators that make React stand out from the rest:

THE VIRTUAL DOM

This is the key piece of tech responsible for the magic behind React’s amazing rendering performance. Instead of manipulating the DOM directly (which can be error prone), React stores two copies of a Virtual DOM, the original and an updated version that reflects changes fed in from the view. The two versions are run through a React function that singles out the differences and outputs a stream of DOM operations that only alter the parts of the view that actually changed. As a result, time and resources are saved, as only the parts that are actually changing are affected by changes in the view.

JSX FILES

JSX files go against the modern tendency to want to keep HTML and JavaScript code separate. This isn’t a bad thing with React’s sleek and simple syntax, however—you end up with a single self-contained component that tells you exactly how it will render in the view. It also helps that it’s optional, so those who are more accustomed to traditional programming paradigms don’t have to use it if they don’t want to.

SERVER-SIDE RENDERING

Server-side rendering also goes against a relatively recent trend of rendering everything on the client-side. React can be rendered on both the client and server, giving greater coding flexibility and giving the Virtual DOM the breathing room it needs to really spread its wings.

REACT NATIVE

Normally when you try to build an app for mobile devices using JavaScript, you have to rely on a cross-platform framework like Cordova or Ionic. While these frameworks can greatly speed up development time, they’ll never be as sleek and smooth as a native app. Enter React Native, a framework that enables you to build components for native UI widgets the same way you build them for HTML. React treats the view layer as a pure output of state, so switching its purpose from the web to mobile is as simple as swapping your tags for tags via thev React Native framework. It also means your mobile app benefits from the same principles that make React so blazingly fast for web applications. JavaScript code will never be as fast as the native code for a device, but for most tasks, React Native is more than capable of delivering a smooth user experience.

WHEN SHOULD YOU USE REACT?

React shines when you have lots of dynamic content changing within the view. Most client-side solutions on the web today struggle with rendering large lists of items within a single view. This “struggle” may be on the order of milliseconds, but in this increasingly digital world, a half a second delay is all it takes to kill your user experience. It’s why sites that have a lot of dynamic, constantly changing, data-intensive content like Instagram or Facebook choose to power their applications with React.

As a library, you can also use React as the view component of AngularJS or other frameworks, because it does not tie you to a specific technology stack. That said, there’s a quickly growing community and a number of existing libraries and add-ons that can help you build an app from scratch. Consider Flux, the application architecture Facebook uses to create an application powered by React. React is also perfect for those familiar with ClojureScript and its immutable data structures—the Om project is the rising star for those looking to build dynamic applications using these technologies.

YOU SHOULD USE ANGULARJS IF…

Development time is at a premium, and you need a full, comprehensive framework that will get you running quickly out of the box. As we mentioned earlier, comparing a library to a framework isn’t really a valid question, as you can always use one with the other.

The real question to ask is when shouldn’t you use React? React is not backwards compatible with browsers older than IE8. Also, the community is young, so it’s possible you’ll have to do a lot of “reinventing of the wheel” in order to get the specific features you’re looking for. It’s also up for debate whether or not installing React is worth the trouble if your project is either a simple webpage or if AngularJS is already more than capable of rendering your view.

With the recent release of Angular 2.0 on May 2, 2016, Angular devotees have another reason to stick with their framework of choice. Angular 2.0 shipped with a huge performance boost, including support for server-side rendering and a similar approach to using one-way data binding to only manipulate the parts of the DOM that need to be changed. However, Angular 2.0 also involved a major rewrite of the framework, so whether you choose to install React or upgrade to the next generation of Angular, there’s still going to be a learning curve to overcome.

Angular Material Autocomplete Example with Ajax Request

Hello Friends,

Today I am going to show you how to make a search page with Auto complete component of Angular Material JS.

So problem statement will be, I need to created an Single Page App where i can search for Movie Poster on basis of Movie Name.

Solution:

Inorder to create a Single Page App, I have used AngularJS, Angular Material JS, Angular Animate for Animation , Angular Aria and Angular Message.

For CSS i have used default css of Angular Material

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
      <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>

Firstly I have created a template using Default template Code of Angular Material Autocomplete

<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
  <md-content class="md-padding">
    <form ng-submit="$event.preventDefault()">
      <p>Use <code>md-autocomplete</code> to search for matches from local or remote data sources.</p>
      <md-autocomplete
          ng-disabled="ctrl.isDisabled"
          md-no-cache="ctrl.noCache"
          md-selected-item="ctrl.selectedItem"
          md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
          md-search-text="ctrl.searchText"
          md-selected-item-change="ctrl.selectedItemChange(item)"
          md-items="item in ctrl.querySearch(ctrl.searchText)"
          md-item-text="item.display"
          md-min-length="0"
          placeholder="What is your favorite US state?">
        <md-item-template>
          <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
        </md-item-template>
        <md-not-found>
          No states matching "{{ctrl.searchText}}" were found.
          <a ng-click="ctrl.newState(ctrl.searchText)">Create a new one!</a>
        </md-not-found>
      </md-autocomplete>
      <br/>
      <md-checkbox ng-model="ctrl.simulateQuery">Simulate query for results?</md-checkbox>
      <md-checkbox ng-model="ctrl.noCache">Disable caching of queries?</md-checkbox>
      <md-checkbox ng-model="ctrl.isDisabled">Disable the input?</md-checkbox>
      <p>By default, <code>md-autocomplete</code> will cache results when performing a query.  After the initial call is performed, it will use the cached results to eliminate unnecessary server requests or lookup logic. This can be disabled above.</p>
    </form>
  </md-content>
</div>

for JavaScript

(function () {
  'use strict';
  angular
      .module('autocompleteDemo', ['ngMaterial'])
      .controller('DemoCtrl', DemoCtrl);
  function DemoCtrl ($timeout, $q, $log) {
    var self = this;
    self.simulateQuery = false;
    self.isDisabled    = false;
    // list of `state` value/display objects
    self.states        = loadAll();
    self.querySearch   = querySearch;
    self.selectedItemChange = selectedItemChange;
    self.searchTextChange   = searchTextChange;
    self.newState = newState;
    function newState(state) {
      alert("Sorry! You'll need to create a Constituion for " + state + " first!");
    }
    // ******************************
    // Internal methods
    // ******************************
    /**
     * Search for states... use $timeout to simulate
     * remote dataservice call.
     */
    function querySearch (query) {
      var results = query ? self.states.filter( createFilterFor(query) ) : self.states,
          deferred;
      if (self.simulateQuery) {
        deferred = $q.defer();
        $timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
        return deferred.promise;
      } else {
        return results;
      }
    }
    function searchTextChange(text) {
      $log.info('Text changed to ' + text);
    }
    function selectedItemChange(item) {
      $log.info('Item changed to ' + JSON.stringify(item));
    }
    /**
     * Build `states` list of key/value pairs
     */
    function loadAll() {
      var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
              Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
              Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
              Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
              North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
              South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
              Wisconsin, Wyoming';
      return allStates.split(/, +/g).map( function (state) {
        return {
          value: state.toLowerCase(),
          display: state
        };
      });
    }
    /**
     * Create filter function for a query string
     */
    function createFilterFor(query) {
      var lowercaseQuery = angular.lowercase(query);
      return function filterFn(state) {
        return (state.value.indexOf(lowercaseQuery) === 0);
      };
    }
  }
})();

Now in above javascript code snippet, there is function “loadAll” which loads all the hard coded state value from variable “allStates” in the array objects.

Now we don’t require hard code value, we need something dynamic like an AJAX request which will request an api for the values.

So, let us modify “loadAll” function, according to our need

I am using OMDB Api for getting Movie Name and Movie Poster.

http://www.omdbapi.com/?s={keyword}

Creating an http Service,

app.factory('AutocompleteSearchService', ['$http', function($http){
    return {
        get: function(text) {
            return $http.get("autocomplete.php?keyword=" + text);
      }
   };
}]);

Using that service in loadAll Function and modify it

  function loadAll(query) {
    AutocompleteSearchService.get(query).success(function(data) {
      var loadItems = [];
      loadItems = data.result.data.map(function(obj){
        return {
          value: obj.title.toLowerCase(),
          display: obj.title
        };
      });
      self.states = loadItems;
    });
  }

Update the self.state variable to empty array object.

before : self.states        = loadAll();

after  : self.states = [];

Call “loadAll” function in “querySearch” function and pass query object to “loadAll” function,

function querySearch (query) {
        loadAll(query);
        //console.log(self.states);
        var results = query ? self.states.filter( createFilterFor(query) ) : self.states,
          deferred;
      if (self.simulateQuery) {
        deferred = $q.defer();
        $timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
         return deferred.promise;
      } else {
        return results;
      }
  }

Now hit, CTRL+f5 and check whether Autocomplete is working or not.I hope it will work. if not you can refer example  link .

Now Autocomplete is done, displaying result on selecting the Autcomplete value is remaining, let us finish that also.

update <Body> html below html snippet

<md-card  ng-if="ctrl.displayResult">
 <img ng-src="{{ ctrl.result.image }}" class="md-card-image" alt="{{ctrl.result.display}}" >
 <md-card-content>
   <h2>{{ctrl.result.display}}</h2>
   <p>Card content</p>
 </md-card-content>
 <md-card-footer>
   Card footer
 </md-card-footer>
</md-card>

Update md Autocomplete Template,

<md-autocomplete
          ng-disabled="ctrl.isDisabled"
          md-no-cache="ctrl.noCache"
          md-selected-item="ctrl.selectedItem"
          md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
          md-search-text="ctrl.searchText"
          md-selected-item-change="ctrl.displaySearchedResult(item)"
          md-items="item in ctrl.querySearch(ctrl.searchText)"
          md-item-text="item.display"
          md-min-length="0"
          placeholder="Search">
        <md-item-template>
          <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
        </md-item-template>
      </md-autocomplete>

if you check mdAutoComplete snippet, you will find a small change which is,

md-selected-item-change=”ctrl.displaySearchedResult(item)

displaySearchedResult(item)” is a function need to be create in a controller, by default “mdAutoComplete” directive will pass the selected item in “displaySearchedResult” function.

function displaySearchedResult(selectedItem) {
       self.displayResult = true;
       self.result = selectedItem;
  }

Now hit CTRL+F5 and you are done.

So we have completed our problem statement successfully.In case you are not able to achieve it. I am providing a link of an example.

Thank for Reading.

 

ReactJS Fundamentals – 100% free Online Course

ReactJS

This course is for front-end developers who want to get a head-start in ReactJS by learning the fundamentals as quickly as possible.

Students who take this course will learn to use React components, JSX and React’s top-down design methodology to build interactive interfaces while cutting down on code complexity.

The course is presented in a series of videos, quizzes and coding exercises. Students can choose to code along with the lectures, or download sample code provided with each lecture.

The course dives straight into a simple demonstration application to provide an overview of React concepts, all of which are explored later in the course in detail as students build the second, larger example application.

If you want to get up to speed in ReactJS as quickly as possible, this is the course for you!

What are the requirements?

  • You should have a basic understanding of Javascript.
  • You should be understand how HTML, Javascript and CSS work together.
  • You should be comfortable typing code in a plain text-editor and running it in a browser.

What am I going to get from this course?

  • Create web interfaces using React components and JSX
  • Understand the advantage of using React
  • Understand how JSX becomes HTML and Javascript
  • Create reusable components using JSX
  • Reduce code complexity using React’s event model
  • Understand how pages render using React’s virtual DOM

What is the target audience?

  • Developers who understand Javascript
  • Front-end developers who have worked with other JS frameworks in the past (e.g. Angular)
  • It is NOT for developers who wish to use React with server-side Javascript
  • It is NOT for developers who with to learn a workflow using broserify/gulp/grunt etc and ReactJS

Take it now!