Monthly Archives: March 2014

PolyFill, Shim and Web Components

Pollyfill and Shim

  • In web development, a polyfill (or polyfiller) is downloadable code which provides facilities that are not built into a web browser. It implements technology that a developer expects the browser to provide natively providing a more uniform API landscape.
  • A polyfill is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively.
  • A shim is a library that brings a new API to an older environment.
  • So a polyfill is a shim for a browser API. You typically check if a browser supports an API and load a polyfill if it doesn’t
  • The ultimate goal of any polyfill is to become obsolete over time. As more and more browsers start to implement the missing feature, and the number of browsers needing to be polyfilled shrinks to zero, the polyfill will gradually stop being downloaded or used altogether. This happens automatically without you having to change your site’s code later on.
  • Polyfilling is a term coined by Remy Sharp to describe an approach for backfilling missing functionality in a way that duplicates the missing API. Using this technique allows you to write application-specific code without worrying about whether or not each user’s browser implements it natively

Web Components

Web Components is a set of cutting edge standards that:

  • Make it possible to build widgets
  • Can be reused reliably

Web Components is comprised of

  1. Template Element decorators (which apply templates to CSS),
  2. Custom elements (which allow developers to create their own elements)
  3. Shadow DOM (It defines how all of the other pieces play together and shield the other three pieces from the regular DOM if necessary).

Essentially, Web Components give developers an easier way to create web sites and recyclable widgets on these sites with the help of the HTML, CSS and JavaScript they already know. Web Components help developer encapsulate they HTML, CSS and JavaScript so it doesn’t interfere with the rest of the page and the page doesn’t interfere with it.

Web Components also allow developers to more easily separate content from presentation and the Shadow DOM ensures that the styles you create for the rest of your site don’t interfere with the widgets you build using Web Components

Angularified – My Sumary of AngularJS

AngularJS is a powerful Java script MVC framework created by Google to build Modular, Maintainable Java script applications. It helps to properly organize web application. Application can be defined with modules that can depend from one to the others. It enhances HTML by attaching directives to your pages with new attributes or tags and expressions in order to define very powerful templates directly in your HTML. It also encapsulates the behavior of your application in controllers which are instantiated via dependency injection. Due to DI it helps you structure and test your Java script code very easily. Reusable code can be factorized into services that can be injected in your controllers. Following are the features it provides

  • Expressions : <div>5+5={5+5}</div> This will render 5+5=10
  • Directives: It is most powerful feature it provides. It allows you to extend HTML. Itcomes with several directives which let you build your basic application, you can write your own directives in order to adapt your views to your needs and it gives very good extensibility for building your own templates. If you need to have Javascript code in order to manipulate the DOM, it should not be located in a controller but in your own custom directive.
  • Data Binding: You can achieve bidirectionnal binding using ngModdirective in your view.
  • Filters:  Filters can applied applied on the data which needs to be displayed.
  • Partial Views – For SPA AngularJS is perfect receipe. In SPA you define a index.html which acts as a container for your web application. In this page, you can bind part of your application to a specific AngularJS module with the directive “ngApp”, you can bind the whole page to a single AngularJS module if you want and post that you can use the directive “ngView” in order to load partial views.
  • Modules: In Angular world application is broken down via modules. A module can contain controllers, services, directives and filters
  • Dependency Injection : You can inject object in function as paramters.
  • Routes:  Using $routeProvider you can define the routes which includes defining the url, then which view needs to be loaded for that url using templateUrl and controller associated.
  • Controllers: This is where the behavior of your application is located. Controllers are used to populate the scope with all the necessary data for the view. Using proper separation of concerns, controllers should never contain anything related to the DOM. Controllers communicate with the view using a specific service named “$scope”. This service let the controller give objects and functions to the views that can later be manipulated with expressions and directives. In order to be easily tested, controllers are defined using dependency injection.
  • Scope: It is used to link the controllers and the views. A controller can add data and function in its scope and then they will be accessible in the view.
  • Services: Controllers contains the behavior of the application which is available to the view, we may have some code that you want to re-use or that you want to abstract from the controller which communicates directly with the view. For this, Angular let you define services that can be injected in your controllers or in other services to build your application.
  • REST communication: It provides 2 services $http and $resource $http is a small layer on top of XmlHttpRequest $resource let you communicate with a server using custom actions instead of relying on the default get, post, delete,