Amazon Silk Browser

19-02-2015 23-03-21

Willing to know what it is and how its differ??

Its all-new web browser powered by Amazon Web Services (AWS) and available exclusively on the just announced Kindle Fire for now.

Amazon Silk deploys a split-architecture.  All of the browser subsystems are present on your Kindle Fire as well as on the AWS cloud computing platform.  Each time you load a web page, Silk makes a dynamic decision about which of these subsystems will run locally and which will execute remotely.  In short, Amazon Silk extends the boundaries of the browser, coupling the capabilities and interactivity of your local device with the massive computing power, memory, and network connectivity of our cloud.

 

HTTP/2

What is HTTP/2??

Before we dig into HTTP/2..You should know about SPDY protocol..

SPDY:

SPDY (pronounced “SPeeDY”) is a networking protocol whose goal is to speed up the web. SPDY augments HTTP with several speed-related features that can dramatically reduce page load time:

  • SPDY allows client and server to compress request and response headers, which cuts down on bandwidth usage when the similar headers (e.g. cookies) are sent over and over for multiple requests.
  • SPDY allows multiple, simultaneously multiplexed requests over a single connection, saving on round trips between client and server, and preventing low-priority resources from blocking higher-priority requests.
  • SPDY allows the server to actively push resources to the client that it knows the client will need (e.g. JavaScript and CSS files) without waiting for the client to request them, allowing the server to make efficient use of unutilized bandwidth.

The goal of SPDY is to reduce web page load time. This is achieved by prioritizing and multiplexing the transfer of web page subresources so that only one connection per client is required.

HTTP/2:

HTTP/2 is a replacement for how HTTP is expressed “on the wire.” It is not a ground-up rewrite of the protocol; HTTP methods, status codes and semantics are the same, and it should be possible to use the same APIs as HTTP/1.x (possibly with some small additions) to represent the protocol.

The focus of the protocol is on performance; specifically, end-user perceived latency, network and server resource usage. One major goal is to allow the use of a single connection from browsers to a Web site.

HTTP/2 is nearly done standardization; it has been approved by the IESG(The Internet Engineering Steering Group (IESG) is responsible for technical management of IETF( Internet Engineering Task Force) activities and the Internet standards process.), and should soon enter the RFC(Request For Comment) Editor’s publication queue.

You can see RFC for HTTP 1.1 here

HTTP/2 is comprised of two specifications:

Links to refer:

http://en.wikipedia.org/wiki/HTTP/2

https://http2.github.io/

http://http2.github.io/faq/

http://blog.teamtreehouse.com/making-the-web-faster-with-spdy

Understanding Karma

Initially i thought karma helps to write unit-test cases..no its wrong..its only a test case runner where we can see some results/reports of unit test cases… 🙂

Simply,

KARMA: THE SPECTACULAR TEST RUNNER

Everything else need for writing unit-test case is jasmine alone.

Anyways as we are trying to understand karma..lets go to the point…

npm install --save-dev karma //allows you to install karma in your local project

If we’re using the yeoman generator with our apps, this is already set up for us. Just you have to run

karma init

To kick it off, we’ll use the karma init command which will generate the initial template that we’ll use to build our tests:

$ karma init karma.conf.js

It will ask us a series of questions and when it’s done, it will create a configuration file.

When it’s done, it will create a file in the same directory where we ran the generator that looks similar to the following:

// Karma configuration
module.exports = function(config) {
  config.set({
    // base path, that will be used to resolve files and exclude
    basePath: '',

    // testing framework to use (jasmine/mocha/qunit/...)
    frameworks: ['jasmine'],

    // list of files / patterns to load in the browser
    files: [
      'app/components/angular/angular.js',
       'app/scripts/**/*.js',
      'test/spec/**/*.js'
    ],

    // list of files / patterns to exclude
    exclude: [],

    // web server port
    port: 8080,

    // level of logging
    // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: false,

    // Start these browsers, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera
    // - Safari (only Mac)
    // - PhantomJS
    // - IE (only Windows)
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, it capture browsers, run tests and exit
    singleRun: false
    
//plugins required to generate report
plugins: [
 'karma-coverage', //this we used to generate report
 'karma-chrome-launcher',
 //'karma-firefox-launcher',
 //'karma-safari-launcher',
 //'karma-opera-launcher',
 //'karma-ie-launcher',
 'karma-jasmine',
 'karma-junit-reporter',
 'karma-phantomjs-launcher'
 ],

//this is the directory where you can check the results/reports
coverageReporter: {
 type: 'html',
 dir: 'coverage/'
 },

 junitReporter: {
 outputFile: 'test-results.xml',
 suite: ''
 },


 preprocessors: {
 // source files, that you wanna generate coverage for
 // do not include tests or libraries
 // (these files will be instrumented by Istanbul)
 // 'src/*.js': ['coverage']
 'app/**/!(_test).js': ['coverage']
 },

// test results reporter to use
reporters: ['progress', 'junit', 'coverage']  ,
// enable / disable colors in the output (reporters and logs)
    colors: true,
// level of logging
    logLevel: config.LOG_INFO,


});
 };

Now that we have our karma.conf.js file generated, we can kick off karma by issuing the following command:

$ karma start karma.conf.js

With this you can see files that are generated in coverage folder in your project directory. Run index.html in coverage folder to see the report. Thats it 🙂
Links to refer:

http://www.ng-newsletter.com/advent2013/#!/day/19

http://andyshora.com/unit-testing-best-practices-angularjs.html

http://www.smashingmagazine.com/2014/10/07/introduction-to-unit-testing-in-angularjs/

http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-karma.html#testing-resources

What are promises in angularjs?

My Sincere thanks to Andy Shora for explaining what are promises in a general way in the following link

http://andyshora.com/promises-angularjs-explained-as-cartoon.html

I request you to go through it for better understanding of promises.

Best guide: https://thinkster.io/egghead/promises

https://thinkster.io/egghead/

What is Restangular in angularjs

Restangular is an AngularJS service that simplifies common GET, POST, DELETE, and UPDATE requests with a minimum of client code. It’s a perfect fit for any WebApp that consumes data from a RESTful API.

Its very simple, just if you are calling any services like ‘application/userdetails’. By calling this service we can retrieve user details like name,age,contact,address etc which is present in json format.

you may get a question like why i cant i call up a service using $http and read json and through controller i can pass it to view…

You can easily do that..but this Restangular is a perfect option for complex operations on the client side. It lets you easily attach custom behaviors and interact with your data in much the same way as other model paradigms you’ve used in the past. It’s promise-based, clean, and feature-rich. However, it might be overkill if your needs are basic, and it carries along with it any extra implications that come with bringing in additional third-party dependencies.

Only disadvantage is, its a third party library(external dependancy) which you have to include and work on it..where as $http is in-built in angular. But this rectangular can takes a simple operations with complex json files…

How to implement this ??

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/restangular/1.3.1/restangular.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/restangular/1.3.1/restangular.min.js"></script>

Configuration:
// Add Restangular as a dependency to your app
angular.module('your-app', ['restangular']);

// Inject Restangular into your controller
angular.module('your-app').controller('MainCtrl', function($scope, Restangular) {
  // ...
});

Using Restangular:

// Only stating main route
Restangular.all('accounts')

// Stating main object
Restangular.one('accounts', 1234)

// Gets a list of all of those accounts
Restangular.several('accounts', 1234, 123, 12345);

Complete Guide: https://github.com/mgonto/restangular

Angular route Vs Angular UI Router

As everyone confused..myself confused with route & ui-router..

ngRoute (angular-route.js) and ui-router (angular-ui-router.js)

In many articles when ngRoute is used, route is configured with $routeProvider. However, when used with ui-router, route is configured with $stateProvider and $urlRouterProvider.

Here are some common reason ui-router is chosen over ngRoute:

  • ui-router allows for nested views and multiple named views. This is very useful with larger app where you may have pages that inherit from other sections.
  • ui-router allows for you to have strong-type linking between states based on state names. Change the url in one place will update every link to that state when you build your links with ui-sref. Very useful for larger projects where URLs might change.
  • There is also the concept of the decorator which could be used to allow your routes to be dynamically created based on the URL that is trying to be accessed. This could mean that you will not need to specify all of your routes before hand.
  • states allow you to map and access different information about different states and you can easily pass information between states via $stateParams.
  • You can easily determine if you are in a state or parent of a state to adjust UI element (highlighting the navigation of the current state) within your templates via $state provided by ui-router which you can expose via setting it in $rootScope on run.

In essence, ui-router is ngRouter with more features, under the sheets it is quite different. These additional features are very useful for larger applications.

Example: http://angular-ui.github.io/ui-router/sample/#/

Docs: http://angular-ui.github.io/ui-router/site/#/api, https://github.com/angular-ui/ui-router/wiki

$state.go()

If you want to pass non-URL state, then you must not use url when setting up your state. I foundthe answer on a PR and did some monkeying around to better understand.

$stateProvider.state('toState', {
  templateUrl:'wokka.html',
  controller:'stateController',
  params: ['referer', 'param2', 'etc']
});

Then you can navigate to it like so:

$state.go('toState', { 'referer':'jimbob', 'param2':37, 'etc':'bluebell' });

Or:

var result = { referer:'jimbob', param2:37, etc:'bluebell' };
$state.go('toState', result);

And in HTML thusly:

<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>

This use case is completely uncovered in the documentation, but I think it’s a powerful means on transitioning state without using URLs.

If with URL??

All you had to do was add a parameter to the url state definition like so

url: '/toState?referer'

Working with yoeman

npm install -g generator-webapp

Goto your workspace. Here it is E:/Learning Workspace

$ mkdir my-yo-project
$ cd my-yo-project

and then run:

yo webapp

Sorry i tried to explain, but their explanation is too good and simple..i can only suggestone thing...

first go thru this link 
http://yeoman.io/learning/index.html
and then this..
http://yeoman.io/codelab.html