Introduction

Our last article was about 8 Brilliant Tools That Empower Web Developers To Work With A Flair

Every since JavaScript development gained traction, the war of front-end JavaScript frameworks hasn't ceased to exist. As a JavaScript developer, I've tried hands on numerous JavaScript frameworks that have some of the finest features, helping in improving the overall productivity. Two of the best JavaScript frameworks that have proved utmost useful in building stunning web apps are BackboneJS and AngularJS. Today, in my post, I'd be taking up a simple and crisp comparison between these two JavaScript frameworks that have been embraced by JavaScript developers, both amateurs and experts.

BackboneJS vs AngularJS – Background

While BackboneJS is a 2010 product, AngularJS was released in the year 2009. Serving as a quick alternative to heavy frameworks, Backbone.js is a light weighted JavaScript framework that loads faster due to use of the Underscrore.js dependency framework. On the contrary, AngularJS is an open source framework that allows an easy extension of HTML in addition to two-way data binding via simple code testing. That means, with the two-way binding, you can use HTML for declaring the template, eliminating the need for writing any code.

BackboneJS vs AngularJS- Website Categories

While Backbone.js serves as an excellent choice for building eye-catchy websites for real estate, shopping, business & industry, arts & entertainment etc; AngularJS has been designed keeping in mind the need for building websites related to Career & Education, Internet & Telecom, Software, Computer & Electronics and many more.

BackboneJS vs AngularJS- Architecture

While the Backbone.js framework uses MVP(Model View Presenter) architecture, AngularJS uses the traditional MVC(Model View Controller) architecture. The main differences arising out of this variation in architecture include the following:

• DOM -

  Unlike AngularJS which rebuilds the DOM in accordance to the specified rules, BackboneJS manipulates direct DOM for representing the changes made to the data.

• Data Binding -

  Unlike AngularJS which comes with a two-way binding feature that allows it to run the applications, track and trigger data changes; BackboneJS lacks a data binding feature forcing the developer to create a custom binding mechanism or opt for a third-party data binding service.

BackboneJS vs AngularJS- Templating

Talking about templating, well it is in effective technique of reducing the amount of code that needs to be written for getting the single-page applications off the ground. While on one hand, we have BackboneJS which builds off the Underscore templates i.e. you're expected to write certain custom JavaScript for ensuring smooth functioning of the templates, on the other hand there is AngularJS which offers templating via dynamic HTML attributes that have already been incorporated into the document, ensuring the representation is concise and easy-to-grasp.

You may also like to read: AngularJS Is A Superior Javascript Framework

BackboneJS vs AngularJS- Validation

BackboneJS doesn't comprise of a function that can execute the validations part. That means, you're either supposed to write the logic by yourself or choose one from Backbone validations(9.5 unminified) or Backbone.validation(8.2HB minified) or Backbone.validator(8.2 non-minified) etc. In contrast to this, there is AngularJS which includes validation by default. That means, you can see some of the validations like min-length, max-length, email etc. implemented by default. Moreover, if you're interested in having a custom validation(s), then you can choose to create one.

BackboneJS vs AngularJS- Non-Restful Backend

While BackboneJS is purely meant for Restful backends, AngularJS comes with $http which allows you to go beyond the boundaries of a Restful backend. Well, when it's about Backbone.JS, for each end-point within the backend, there's a need for creating an associated model on the front-end. That means, if you aren't using a Restful backend, then there will be a need for performing a lot of tweaks that may lead to multiple overrides to Backbone.sync. On the contrary, AngularJS makes the concept of having a Restful backend easier. It comes with ngResource- an extra file that's required for adding 16KB min. Hence, you're free to either use this file or $http directly.

Building A Simple Product Management App Using Angular JS + Cygnite PHP + Bootstrap

BackboneJS vs AngularJS- Overall Performance

In simple words, BackboneJS is a lot more faster and better performing as compared to AngularJS. The basic reason for this is that as the page grows, AngularJS's two-way data binding feature tends to introduce negative performance effects into the framework. Unlike this, BackboneJS lacks a data binding feature, expecting you to write lengthy code. This allows you to focus on improving the performance, removing the need for hacking the framework from scratch. All in all, it is the compact data representation which makes AngularJS a low-performing JavaScript framework.

Final Thoughts

While each of the two JavaScript frameworks viz: BackboneJS and AgularJS have their own set of pros and cons, it is better to opt for the one which suits your project requirements fully. Remember, a framework that's been chosen after a lot of planning and analysis will fetch you the desired results instantly.

Author Bio:

My name is Andrey. I am a web developer in CMS Website Development Company. I am partial to discovering basic answers for complex issues. In the event that you cherished the theme, do share and remark. Additionally, you can tail me on Twitter for additional updates.

Introduction

Last article was about the Unerring Tips for High Performing WordPress Themes you may like to read out.

One of the probable reasons why JavaScript is extolled across the globe is the availability of prolific frameworks that support JavaScript development. However, it has been observed that most of the frameworks only wraps a slew of existing tools, and do nothing much in addition to it.

Fortunately, AngularJS is a brilliant framework that has an edge over its competitors. It embraces a set of resourceful tools that have been incorporated after ensuring their smooth and flawless performance. Although one needs to have proper insights into the framework and get the requisite expertise to reap its benefits, there are several outstanding advantages that make it a much sought after choice.

Read: Building A Simple Product Management App Using Angular JS + Cygnite PHP + Bootstrap

This post will unleash a few worthy benefits of AngularJS.

1. Has an ideal framework size that helps develop a variety of apps

The most common cause that add to the bounce rate of a product is its loading time. If your application consumes a lot of time to load, most of your users will certainly prefer abandoning your app. Thus, it is better to scour the impact of a framework on the loading time. This can be proficiently analyzed by taking the framework size and time taken by the framework for bootstrapping into account. AngularJS consumes ~50 KB, and allows professionals to develop beautiful, feature rich applications with a flair.

2. Helps generate an intuitive UI

You can create dynamic interfaces for your web apps, as AngularJS allows one to extend the definition of HTML. This certainly makes it easy to tweak the UI design in a suitable manner and create a desired look and feel. The framework offers a list of various UI elements and ensure that all of them work seamlessly when integrated in a design. This adds to the agile app development, and delivers fabulous apps with an impressive UI design that are sure to enhance the UX.

3. Delivers precise results while catering to your client's needs

Programming for AJAX and DOM is not a child's play, but it definitely an arduous task. However, while working with AngularJS, the code becomes much organized and uncluttered that helps you efficiently manage the development of CRUD apps. The framework offers a better conceptualization to deal with it in a precise way while creating applications.

4. Augments parallel development

AngularJS brilliantly manages dependencies, though the dependencies are not completely eradicated. The integrated massive grid facilitates one to streamline multitasking and testing while keeping the risk to crashing at bay.

5. Minimal coding is required

Loaded with a whopping number of useful functions, AngularJS offers valuable features without demanding lengthy codes. Here are a few of its incredible functions.

It completely handles the MVC pipeline.

You can support a required data model by writing only a few code chunks.

You can implement HTML to create a desired view.

By the virtue of filters, you can easily tweak the data in a desired fashion without affecting the controller.

You won't need to tinker the code in order to manage the directives, as they can be handled in another way.

All these blissful features of the framework make it absolutely convenient for one to generate a high end application with just a simple and precise code.

Read: Building a Simple Form Using Angular JS and Cygnite PHP Framework

6. Makes single page app development easier

Although developing a single page application (SPA) is a daunting task, it has incessantly garnered a great popularity. By implementing the AngularJS framework for the same, you can proficiently create a high quality single page application, while ensuring a responsive design. This further facilitates an app with smooth and consistent performance that amazingly adds to a better UX.

Moreover, as these kind of apps are rendered on the client side, it dramatically reduces the network traffic and further improves the loading time. The framework is jam­packed with resourceful templates, routing, and more features that facilitate one to develop highly functional apps.

7. Aids application testing

The significance of testing cannot be overseen. One must test his application before launching it in the market. This helps one to ensure its flawless performance and deliver an impressive app that can compete with the fierce competition out there. AngularJS framework has been developed while keeping the testing into account. Understanding the proliferation of mobiles and the fact that app testing requires a lot of precision, the framework is powered with powerful services to deliver an astonishing product.

Conclusion

AngularJS is an invaluable JavaScript framework that is consistently going through reinventions. This is certainly further enhancing the framework and making it a better companion for developing stunning, intuitive and highly engaging applications. The above are just a few of its utile features, you will get a lot more under its hood.

Author Biography:

I am Savy Nacion, working as a technology specialist in Markupcloud, HTML to Wordpress Service company, based in Rochester, New York. With more than 10 years of involvement with the innovation area, I target carrying new and creative innovation answers for the organization to assist it with continuing flourishing in the business.

Introduction:

Hey Guys! Last article was about "How to Install Ubuntu 15.04 Along With Windows 8 (Dual Boot)".

Unlike a conventional desktop oriented website, the one which has been created for the mobile screens is a lot more in demand. It is a responsive website which automatically adjusts itself to fit the screen of device that the site is being viewed on. All the content, whether it is the text, images or video get moderated to ensure best display on the screen under focus. Whether you're a publisher, a designer or a developer, taking care of your site's mobile responsive design is something that can render flawless experience to the targeted users. In this post, I'll be walking you through the vital steps that must be followed for building a fine quality mobile responsive design.

What kind of mobile responsive design are we going to create in this tutorial?

Here, I'll be creating a simple e-commerce product detail page for a t-shirt firm. So, while ensuring that the customers are able to make the purchases conveniently, we'll also be making the product review easy-to-access, followed by utilizing customer's location for enhancing the overall mobile shopping experience.

A look at the basic structure

It is essential to author a semantic HTML5 markup that will allow you to ensure completely manageable and fully accessible adaptive experiences. The reason for this being that semantic markup is fully portable and can be easily accessed on a variety of mobile devices, desktop browsers, tablets etc.

Coming to the individual steps for creating mobile responsive design

Step 1- Set the Viewport

While for a majority of non-mobile-optimized websites, most of the contemporary browsers set up a larger browser viewport, in case of designing a website using mobile responsive design, we'll be using viewport meta tag for setting the screen width to the device width as shown below:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Step 2- Adding the flexibility to load the website content conditionally

Here, we'll be creating two new HTML documents for the auxiliary content viz: reviews.html and related.html. Unlike the default way in which the content is accessible via links available on the page, we can use a little bit of javascript for loading the content as and when user requests for the same or when the screen's resolution reaches a specific breakpoint.

Step 3- Use HTML special characters

As an attempt to decrease the need for background images, it is recommended to use HTML special characters. In this tutorial, I've used $#9733 for creating a solid star (★) and ☆ for creating empty stars (☆) for the product ratings.

Step 4- Include a clickable link within footer

Here, we'll use the tel URI scheme for including a clickable link to customer service number, within the footer. Here's a look at the tel URI scheme:

<a href="tel:1234567891">123 456 7891</a>

Step 5- Add style enhancements

With a strong semantic markup in place, it's time to add some style enhancements as explained below:

Create separate style sheet for screens with larger displays

Here, we'll be creating two CSS files viz: style.css and enhanced.css for delivering basic styles for screens with dimension less than 967px. We'll be using media queries for serving the new styles for screens with dimension greater than 967px as shown below:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style-967.css" type="text/css" media="screen  and (min-width: 967px)" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" href="ie9.css" type="text/css" />
<![endif]-->

Adding Mobile-first styles

Next, we can start off with adding shared styles and advanced layout rules as shown below:

/* Avoid this style */
.customer-list img {
  width: 30%;
  float: left;
}
@media screen and (max-width: 967px) {
  .customer-list img{
    width: auto;
    float: none;
  }
}

The mobile-first approach will now look like this:

@media screen and (min-width: 967px) {
.customer-list img {
    width: 30%;
    float: left;
  }
}

Next, we'll be applying media queries as shown in the below code snippet:

/*Display 2 per row for medium displays*/
@media screen and (min-width: 480px) {
  . customer-list li {
    width: 50%;
    float: left;
  }
}
/*Display 3 to a row for large displays*/
@media screen and min-width: 768px) {
  . customer-list li {
    width: 33.33%;
    float: left;
  }
}

Step 6- Use CSS for reducing HTTP requests

Have a look at the below CSS which will play a vital role in saving HTTP requests so as to improve the overall performance of your website. For instance, CSS gradients can replace background images for decreasing the count of image requests and rendering a greater control over the original design.

/*Using CSS gradients rather than background images*/
header {
  background: #333; 
  background: +linear-gradient (top, # 333 0%, #555 100%);
}

Step 7- Add Javascript enhancements

To start off, we'll be adding functionality to the site's navigation. In the HTML5 Markup, we'll using a list #top-menu for toggling the visibility of navigation as well as the search bar on all small screens. Have a look at this:

<ul  id="top-menu" class="top-menu">
  <li><a href="#">Menu</a></li>
  <li><a href="#">Search</a></li>
</ul>
<nav id="main-menu" class=" main-menu">
  <ul role="main-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>

Additionally, we will include a resize listener which will find whether there's any possibility of displaying the search bar and navigation. Have a look at this:

var swidth, sheight ;
$(window).resize(function(){
  swidth = document.documentElement.clientWidth;
  sheight = document.documentElement.clientHeight;
  setElements();
});
  
//Set elements according to differ screen size
function setElements() {
  device = (swidth < breakpoint) ? true : false;
  if (!device) { 
    $('#top-menu').show(); 
  } else {
      $('#top-menu').hide();
  }
}

Adding functionality to the Image Gallery

To start off, we'll be adding functionality to the site's navigation. In the HTML5 Markup, we'll using a list #top-menu for toggling the visibility of navigation as well as the search bar on all small screens. Have a look at this:

Have a look at the below code snippet which will allow us to build an image carousel using the available thumbnail images:

function intslide() {
  container.html('<div id="img-slider"><ul /></div>');
  imgSlider = $('#img-slider');
  $('nav a:first-child').addClass('active');
  
  $('nav a').each(function() {
    var href = $(this).attr('href');
    imglist += '<li data-src="'+href+'"></li>';
  });
  
  imgSlider.find('ul').append(imglist);
      
  $('nav a').on('click', function(e) {
    var slidepos = $(this).parent().index();
    e.preventDefault();
    loadImg(slidepos);
    if(swipeEnabled) {
      mySwipe.slide(index, 500);
    }
    updateNav(slidepos);
  });
}

Adding functionality for Related Content

A code snippet will allow us to pull in related content in case any one of the below two conditions are met:

 When a mobile user clicks on related t-shirts or the product reviews links

 When screen has enough space for loading the auxiliary content

The code snippet that I'm referring to is shown below:

function setElements() {
    device = (swidth < breakpoint) ? true : false;
  
  if (!device) {
    loadContent(); 
  }
}

//Set up content
function loadContent() {
  var $content = $('.content');
  $content.each(function(index) {
    var $this = $(this);
    var contentLink = $this.find('a');
    var contentFragment = contentLink.attr('href');
    var realContent = $this.find('.demo');
    if (realContent .size()===0 && $this.hasClass('loaded')===false) {
      getContent(contentFragment,$this);
    }
  });
}

function getContent(src,container) {
  container.addClass('showcontent');
  $('<div class=”demo” />').load(src +' #content > div',function() {
    $(this).appendTo(container);
  });
}

As an approach to keep the web pages lightweight, I recommend using Closure Compiler for chopping off all the unused bits of the jQuery library. Other impressive alternatives include popular micro-frameworks like Zepto.js etc. Finally, don't forget to pay special attention to ensuring seamless off line access to your website. This will serve as a brilliant surprise to mobile users who aren't connected to the Internet at times.

We're done!

Conclusion:

With that it's a wrap on this post which made you familiar with the basic steps of creating a mobile responsive design. Hope by having a responsive design, it will become convenient for you to adapt to all the future mobile devices and browsers quite conveniently and instantly.

Author Biography:

Samuel Dawson is a comprehensive expert in Designs2HTML Ltd involved in the process of to convert HTML to Wordpress in a top manner.

Introduction:

The last article was about “Reading and importing CSV file into database using PHP” . Today I have interesting thing for you guys. Are you looking for social script as facebook comment posting with MVC architecture? Which contains share thoughts on wall, comment posting, delete using jquery, load more, ajax, you want to share Facebook like video. You may get many script from different sites but mostly paid and not modular MVC architecture and you will end up restructuring into MVC. So I thought to share with you the application where you will find all these features and many more on coming days. Also you can find the script hosted on GITHUB.

Step 1:

Download and extract (wallscript-master.zip) the code from GITHUB. Rename wallscript-master to wallscript.

Step 2:

Configure your database name into /wallscript/apps/configs/database.php. I have configured database: “tutorials” localhost with empty password, you can change if you have different.

Step 3:

Find the demo sql script inside /wallscript/apps/database/wallscript.sql. Run the sql file into your database using phpmyadmin or Mysql Workbench.

Step 4:

That's all. You are done. Now go to your browser and type url : http://localhost/wallscript/ You can see the screen as below.

Extract video from url:

 

Conclusion:

Hope this small application is useful. You may alter the script to build much more features like Facebook or any other social network. 

If you are finding this tutorial helpful, please don't forget to share with friends, also leave your comments below. Have a nice day. Keep visiting for interesting articles.

Hello Friends!

Did you read my last blog “How to auto resize textarea based on the user input?”

If you have noticed that the Facebook/Twitter social networking sites repetitively search for new comments/tweets to display to the end user. It is pretty simple concept, which we can achieve using a simple script. It is approx. 10 lines of code. 

I thought this may be helpful for newbie and here I am going to write about "How to auto reload partial page and display number of tweets" with very few steps.

Step 1:

Create a index.php file and paste below code into it. Don't forget to include Jquery and Ajax framework in your page.

  
  
  $(document).ready(function(){ 
   var auto= $('#tweets'), refreshed_content;	
       refreshed_content = setInterval(function(){
        auto.fadeOut('slow')
            .load("result.php?id=123").fadeIn("slow");
            }, 3000); 										
    console.log(refreshed_content);										 
    return false; 
  });
  

Above script will call result.php page on every 3 seconds and fetch the number of tweet count. Replace id=123 with logged in user id. Next we are going to place a div where tweets count will get displayed. 

<div class=”container”>
<div id="tweets"> </div> 
</div>

Now let us create result.php to perform twitter live search and return the tweet count to the user. Copy  below piece of code and paste it into result.php to perform live database search. Here user_id is referred to the logged in user id to search against the database.

$userid = (string) (isset($_GET['id'])) ? $_GET['id'] : '';

$link = mysql_connect("localhost", "root", "");
mysql_select_db("twitter", $link);
$sql = "Select * FROM user_tweets where user_id = '$userId' ";
$result = mysql_query($sql, $link);
$num_rows = mysql_num_rows($result);

echo "Total $num_rows new Tweets ";exit;

That’s it. We are done. 

This small script will automatically fetch the number of tweets on regular interval and display to end user. You may modified this script accordingly to create a live notification system. 

Hope it will be helpful. Please do not forget to leave your comment below & share with friends.