The Bad and The Worse – JavaScript Scoping Issues

Hope you all gone through how amazing JavaScript worker is. Today, we learn something core to JavaScript. Every language has its bad sides or “How not to use/write code” like that. Lately, I wrote JavaScript more than 3 years now and felt I using it well. But, every time looks back and read see my code a couple of months back, it looked awful. Over the times, I kept on learning and improving thanks to my mentor and colleagues. I started using Linters and learned what are the ways to write and ways not. So this about the bad side of JavaScript and especially Javascript scoping issues, which is the pillar in understanding this language for proper use.

JavaScript Scoping Issues

To know the JavaScript scope issues, first, we have to understand about global variables how it works and what is the scope.

Understanding Global Variables

Global variables or variables belonging to window are the great aid to newbies, Just assign a value in a global it can be used anywhere. Its pretty helpful, but, you don’t how bad it is until you are code starts getting bigger and bigger till you end up not knowing where the variables it declared.

Take this simple code,

As you can see thisIsGlobal is declared outside the function which automatically becomes a global level variable, it can be used anywhere. Can anyone see the problem here?

In the function foo I’m just directly using a thisIsGlobal. If the function foo becomes big, you will have no idea where this variable come from.

 

This example shows the badest way to use a variable. The variable ‘poem’ becomes global, function getPoem becomes global. Based on the order of usage in index.html, they are overwritten.

Solving This:
Never use a variable outside the function or put a function directly in a file. Better way to do this wrapping it like this,

The Scope & JavaScript Scoping Issues

What is scope? It is nothing but,

A block of statements wrapped in a curly braces. The one we seen previously is called ‘Global Scope’. And there is, Local/Functional Scope and Block scope (Recent JavaScript version)

Okay, the bad stuff here, when compared to other languages like PHP, is, if you forgot to var inside the function getPoem, it will automatically become a global variable.

Solving This

Always use var keyword inside a function in the very first line it starts.
Avoid global usage even intentionally

And Block Scope
The let is something new, its only supported in few browsers which support block level scope

Hope it makes it clearer about how scoping works in JavaScript and how it won’t show any errors or warning. Understanding how scope works and its usage and flaws are must for any developers.

 

Understanding Web Workers

Before getting to Web Workers, let us understanding the purpose for its need and how JavaScript works.

everything is single“,

  1. JavaScript will execute everything in a single thread.
  2. Each statement is added to a stack and will execute one-by-one.

The good thing is, our code will execute in a synchronous way. But the bad side is, rest of the statement in the stack has to wait if the current process takes a lot of time.

Performing heavy ‘client to server side’ task or huge data processing like JSON or complex calculations which going to taking a lot of time.

Eventually when we run this code, either it might freeze and become unresponsive or ends by blocking rest of the process (or both).

unresponsive

To solve this problem, we are going to use something called ‘Web Workers‘, which runs independently of any user interface. All the statements/code mentioned in ‘Web workers‘ will run in the background. Well, let’s get started.

  1. Need for Web Worker!
  2. What is Web Worker
  3. How it works
    • Creating a Worker
    • Web Worker Communication
    • Importing External Files
  4. Web Workers Example
  5. Stopping a Web Workers
  6. Handling Errors
  7. Security Concerns
  8. How to use & When to use
  9. Browser Compatibility

Consider the following example,

Not only it will take a lot of time to print the statement ‘end’… our browser freeze and hangs and you might end up killing the process.
Let’s see how the above code runs in Web Worker. To create a worker

and

Now, if you run this you won’t see any freezes at all! That’s the magic of the Web Worker.

So, What is Web Worker?

Web Worker provides a way to run the task in the background and independently of any user interface. We can put any long running tasks in workers which will not interrupt keyboard or mouse click events.

  • It enables to offload expensive operations
  • It includes separate message queue, event loop, and memory.

How it works

Creating Worker

Web Worker are created using the object Worker()

The new Worker('javascript_file.js') will look for a file named ‘javascript_file.js’ which will run independent thread from our actual code.

Web Worker Communication

To communicate to and fro from our worker we’ll use window.postMessage to pass messages.

Import External Files

Using importScripts you can import JavaScript files inside workers.

Let’s see an example, to understand all this stuff.

Web Workers example – Creating a simple Web Worker to poll for contents.

In this example, we will randomly fetch contents from Wikipedia periodically from workers in a nonblocking way.

First, let’s build the worker part and then create our index.html to link the worker. See the code below for explanation

Stopping Web Workers

Once our Web Worker is created, it will continue to listen for any changes using the event listeners, when it’s time to stop use the terminate command.

Handling Errors

The onerror event listeners we will attach the Web Workers for capturing any errors.

or simply

Security Concerns

Since Web workers use postMessage for communication, the origin needs to be checked on receiving the message.

https://security.stackexchange.com/questions/20022/how-to-use-postmessage-securely

Web Workers Limitations

Though awesome it seems there are some limitations with Web Workers.

  • You cannot access the DOM from web workers (I.e, No document, getElementById)
  • Cannot access global objects or functions on the main page
  • Workers have high start-up performance cost and high per-instance memory cost. So it’s best to use minimal amount of Web Workers
  • Communication to our application only be carried our using postMessage

Overall Web Worker is must use any high processing tasks, from web polling high data processing, it does’em all. But, know when to use Web worker and when not to. You don’t need to use it all the time. And finally, there are other types of Workers which will see it soon.

codelikeapoem_caniuse_web_worker

Reference

  1. https://gist.github.com/sk8terboi87/32699d5a3a9bcbdd10d7b94316f54ccd
  2. https://html.spec.whatwg.org/multipage/workers.html
  3. https://www.tutorialspoint.com/html5/html5_web_workers.html
  4. https://www.html5rocks.com/en/tutorials/workers/basics/
  5. http://ejohn.org/blog/web-workers/

Keeping Promises using JavaScript – Part 1

Promises using JavaScript is not something new, it has been introduced years back, but we are not using because of not all the browsers didn’t support Promises at the time.

Before using Promises one should have clear idea about why need to use promises, as there any alternate apporaches to it etc. I seen lot of blog just giving a example to get started on promises before even explaning about basic asynchronous concept or even callbacks, which are related to JavaScript Promises. Below we are going to cover almost all concept involving around promises.

Life in Synchronous & Asynchronous Way!

Synchronous are things which are aligned over time, i.e one has response to the other and so on. For example, conversation is synchronous, dancing like that.

JavaScript, by default holds to things and do it one by one which we id this a “synchronous” (Except for few things like AJAX calls). Because JavaScript is single threaded and code will run one after an another.

Eventhough the working of ‘Synchronous’ can be useful for debugging; but it limits the thought of doing things multiple.

The problem with handling multiple things at the same time is “how to handle” the response? However, there are lot of other options to try.

Living with Callbacks!

Callbacks are nice way to acheive “asynchronous” way! Just a create a function, wrap the environment and pass it on, so it can be triggered somewhere else.

Example: simple callback

This is just a simple example, we can create even more complex callbacks. But there comes a problem with callbacks which are difficult to solve.

Example: Deep nesting A.K.A callback hell

{ function OnSuccess() { function DoThat() { …. } } function OnFailure() { function CallThis() { } } }

– Deep nesting
– Inconsistent callback behaviour
– Handling Errors
– Chaining

you read more about issues on callback from [https://medium.com/@ayasin/solving-common-node-io-js-callback-problems-d3d1f6049259]

What about Events?

Similary like callback, events are great way to attach multiple times on a same object. Managing success and failure is still tricky!

Writing as Human Brain’s – Promises!

Promises – an asynchronous operation which provides great way to handle simulationous requests with precesion. They provide callbacks like functionality for each indiviual requests with more control both success and error data.

Promises exist to represent something that will be available in the future

Promises are very Promising because…

  • Code looks clean and more readable
  • Catching errors
  • Chaining
  • Multiple API calls &checking it simultaneously.

Solving the callback hell using Promises!

even better, chaining,

also, simultaneously run!

With JavaScript Promises, you can acheive the asynchorous way with ease and have more control over the data. In the part 2, we will some examples in action and also we need to know when to use Promises and when not to use it. Thats it for today! Enjoy!

Promises ain’t Callbacks; Its better!

References
  1. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise
  2. http://robotlolita.me/2015/11/15/how-do-promises-work.html#introduction
  3. http://www.bloggerever.com/2015/09/all-you-need-to-know-about-javascript.html (for the image)

Geolocation API — How to get current user location

Before using Geolocation API, lets understand why need to use it.

If you are building a web application, there will come a time where your need to know the current location of the users. Why I need to know the location of the users? Because you might need to show contents relevant to the location of the user or even change your locale based on it or even you can allow use to track location using app ex. fitness apps.

Geolocation API

JavaScript has an API which can be used to retrieve the user location, only if user allows permission. Below is a script simple script to do that!

Breakup of above Geolocation API

1) Getting Geolocation object

We check for whether geolocation api is currently supported in our browser.

2) Getting Current Position

Now if the thing is supported, we can easily pull the latitude and longitude of the current user location.

Make sure to provide permission for browser to pull your current location

geolocation-api
Geolocation allowing permission

 3) Watch Position for Change.

Finally, you can use the watch to track the changes in user location and update it. (cases in which we provide mobile apps like fitness app to track user jogging locations)

4) Using Google Maps or OpenStreepMap to display the fetch information in a awesome map

Google Maps:

OpenStreeMaps: (Make sure to include OpenLayers.js)

You can even revoke permission later to any site by clicking the label in address bar.

geolocation-revoking-permission
Geolocation revoking permission

Geolocation Accuracy

Geolocation is most accurate for devices with GPS.

“W3C Geolocation” — the Web site will get the accuracy of whatever geolocation method (whether based on IP, access point MAC, GPS, cell-ID, etc.)

Some Web browsers have access to GPS receivers. Some of them (like Firefox and Chrome/Chromium) can use the MAC address of a WiFi access point to query Google’s database of the locations of WiFi access points.

Geolocation API removed from unsecured origins in Chrome 50

 According to Google API, https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only
It is an important issue as it will directly impact any site that requires use of the geolocation API and is not served over https, but it is a change that we do believe is beneficial to all users on the web. This post should help you understand the reasoning and how to proceed.

 Browser Support

http://caniuse.com/#search=geolocation

geolocation browser support
geolocation browser support

References

  1. https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation
  2. http://caniuse.com/#search=geolocation

 

Yet another UI Framework — Aurelia For beginners

AngularJS is one of the coolest front end frameworks I’ve ever used, but it doesn’t hurt to try more Frameworks. One Em is Aurelia, a actually simple JavaScript framework or say framework of tomorrow. (Just like AngularJS). Below aurelia for beginners provides an insight of how to install and also know the difference between AngularJS and Aurelia.

Getting started with Aurelia for Beginners

Why aurelia is awesome? Because of the few below stuffs which makes it easier to run and understand at the same time, it still gives the power to write very simple code. So, anyone can easily write a Aurelia code.

  1. Focus on business logic, not on framework
  2. For users looking for fast development also providing a structured UI FRAMEWORK
  3. Written with next-generation EcmaScript. Integrates with Web Components.
  4. Similar to AngularJS, “Two-way” Binding
  5. Can be written using ES5, ES 2015, ES 2016 and TypeScript

Installation

There are lots of way to install Aurelia, you can use Yeoman, Webpack or simple Aurelia-CLI

Pre-requirements

  1. NodeJS 4.x
  2. npm 3
  3. npm aurelia-cli

To make it less dependent on machine installation (Ubuntu/Windows), lets install aurelia in Docker. So, it can run in any machine! Cool!!

Installing Aurelia on Docker for Windows

1. Create a Dockerfile with below content

2. Now run docker build -t aurelia/cli

3. Now you have the Docker image lets create a container for this image and bash into it!

4. After executing this command, you will be inside the container. lets check whether it is installed correctly with the $ aurelia

checking aurelia in windows
checking aurelia in windows

Starting your project

Using the in-built Aurelia CLI command lets create a project. (Since you previously ran docker run command, you’ll be inside the container now)

  1. Now cd /Aurelia
  2. Run the command to create a new project au new --here
  3. The wizard you can keep hitting enter (unless you want to modify the default value. I’ve choose Sublime Text editor instead of VS Code)
  4. Now see the project directory, it’be created.
    aurelia-cli-new-project
    aurelia-cli-new-project

    5. Finally after confirmation you have created a project successfully (with everything you needed for awesome in a jiffy)

Aurelia Vs. Angularjs

Now we’ve created a project, you can simple create a todo example and try it http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/quick-start/1 (skipping the setup part)

1. Syntax: No weird symbols or abstract naming, just similar syntax to what you can already find within Javascript itself.

2. ES6 Support: You write web applications using ES6 syntax and not have to worry about ES5 support because the included build system and configuration. With AngularJS, you’ve to learn its abstractions; directives, controllers, services, factories

3. Pluggable & Modular: Framework that can be decoupled to the point where you can use parts of Aurelia in other applications/Node.js modules.

4. Templating in Aurelia: Utilises the W3C HTML Imports specification for importing HTML templates and logic.

5. Dependency Injection: Just define a static method that returns what you want to be injected into the application!

Overall Aurelia seems and better than AngularJs in terms of simplicity with power matching to AngularJS. But, there is one question goes in the mind of most of the UI Developers, why another UI Framework? We just learnt and starting using AngularJS and now another?

Well, Aurelia is created long back and thing is that, there is always going to be tons of ‘yet another framework’ whether is PHP or UI or whatever, you can either stick to what you like or learn something new. And there are so many “new”, so might good and provide tons of new features and browser support or some might now. So before trying a new Framework your application, it’s better know the ups and downs of a framework and its support. Both Aurelia and AngularJS are great frontend framework! But, comparatively with Aurelia, AngularJS is very well know and has tons of support over the web.

Well, thats it. Thank you for reading!

References:

  1. http://blog.aurelia.io/2015/03/16/aurelia-and-angular-2-code-side-by-side/
  2. http://ilikekillnerds.com/2015/01/aurelia-vs-angularjs-round-one-fight/
  3. https://github.com/aurelia/framework/issues/74

AngularJs Tutorial 8 — Simple Notification Directive Using Event Dispatcher

Now this is fast, my second article in a day. I guess its the only way to stop thinking about ‘She-Who-Must-Not-Be-Named’

Well coming to matter at hand, I worked in AngularJs for a while and always missed a good notification thingy. Twitter Bootstrap notification seems good, but, so static like a zombie. So, finally thought of creating one! A simple angularjs notification plugin/component.

Also, we are going to learn something new along the way

Event Dispatcher!!! (Taa-daa!)

Wait a minute, AngularJS has “Event Dispatcher“?? Yep! They do… and they are done using “Angular $emit“, “Angular $broadcast” and “Angular $on

Ok, before going deep, why the hell should i use “Event Dispatcher” if i could do a simple inheritance like function call?!!

Answer: Some actions or asynchronous activity should be handled in a way which shouldn’t alter the existing application flow. Like in our case, even if notification doesn’t work, its a not big deal, but, it shouldn’t interrupt our actual application flow.

And geeks used to call this as Observer pattern.

Some other good examples are ‘logging’.

Generally, an Event has ‘Publisher’ and ‘Subscriber’. In our case,

  • Publisher – $emit & $broadcast. The difference between both of’em are
    • $emit – dispatches the event upwards through the scope hierarchy.
    • $broadcast – dispatches the event downwards to all child scopes,
  • Subsciber – $on

Now, for our example we need existing cool notification library and Noty (http://needim.github.io/noty/) is one of the few best notification plugin library available. (simple and… cool)

                                         


Checkout -> https://github.com/sk8terboi87/Just-Anguled

1) jade/index.jade

2) coffee/directives/notificationDirective.coffee

3) coffee/controllers/NotificationController.coffee

4) coffee/kickstart.coffee

As you can see:

(1) Like before we created a directive, with 4 params. 

  • Always remember the rules, the only way to send a message to a directive must be through ‘isolated scope’ else, its not a reusable component. Each should independent!

(2) Our ‘notifcationDirective’. Pretty understandable!


(Note: Here we added a “$watch” on ‘uuid’. Because, we need to know whether the data outside our directive gets changed or not. Suppose, if we watch on ‘message’ and message is same for the second trigger also, $watch thinks as the previous one. So, we are watching something which changes on every action trigger.)

(3) Our Event Publisher, its Publishes data when button gets triggered

  • $scope.$emit('notifyEvent', notifyData)  – eventName and eventData (2 params)

(Note: Here we are just manually triggering sending the data. We can easily changed to how we need)

(4) Our Event Subscriber, Receives the data whenever a publisher pushes the data

  • $scope.$on(‘notifyEvent’, (event, data) 
  • From here, we are pushing the data to our jade/index.jade where our directive is located.

Thats it!! Now, try clicking all the actions….. pretty cool, huh! (Check their plugin for more options to meddle with)






(I know, screenshot is worse xD)

Thats it for now!!! An event handling in AngularJs is so very easy peasy.


Check it out —> https://github.com/sk8terboi87/Just-Anguled

References:

  1. http://stackoverflow.com/questions/14502006/scope-emit-and-on-angularjs
  2. http://docs.angularjs.org/api/ng.$rootScope.Scope
  3. http://needim.github.io/noty/

AngularJs Tutorial 7 — Creating a Simple Component using Directives (with a Charts example)

Its been a while. (seriously!), its like getting awake from incubation chamber!!

And, today we gonna see AngularJs Directives.

Why should i use Directives?!

  • Reusable components!
  • NEVER manipulate DOM from your Angular controller/anywhere except via directive

They are…  “A powerful tool for modifying the DOM”. As we know, AngularJs does the compilation stuffs of DOM and any other event related to it and if we directly add some event (like we do using jQuery) is seriously wrong. We surely end up messing AngularJs.

To handle this, Angular Js Directive provides a methods such $compile, and whatever we mention their will get compiled by AngularJs itself.

AngularJs Compilation Cycle:

Compile function:

  • Used for template DOM manipulation ,
  • Provided by directive, (Hence manipulations that apply to all DOM clones of the template associated with the directive.
  • Ex: Manipulation of tElement = template element)

Link function:

  • Used for registering DOM listeners and as well as updating the DOM.
  • It is executed after the template has been cloned — e.g., inside an <li ng-repeat…>, the link function is executed after the <li> template (tElement) has been cloned (into an iElement) for that particular <li> element.
  • Ex: $watch expressions on the scope, manipulation of iElement = individual instance element

Now, getting back to our example, but  before that I’m not gonna start teaching from “Hello directive”. Eventhough AngularJs documentation sucks, go through it anyway, we will get a basic idea. http://docs.angularjs.org/guide/directive

Now, lets see the AngularJs directive using ChartJs

And here is the Repo : https://github.com/sk8terboi87/Just-Anguled

1) jade/views/charts/index.jade

2) coffee/kickstart.coffee 

3) coffee/directives/piechartDirective.coffee


As you can see:

(1) We just created a directive element called trackr-piechart using an Element.

(Note: You can even create element like <div trackr-piechart=''></div>, but, as conventation to be followed according to AngularJs,

  • Use an element when you are creating a component that is in control of the template.
  • Use an attribute when you are decorating an existing element with new functionality.
  • Also, make sure to keep a ‘prefix’ for your directive element, (if in case, may be in future HTML 8 or 9 and there already existing an element ‘<piechar..’> might clash with ours. so go with prefix! 🙂

)

And, we have passed ‘title’ and ‘data’ to the directive

(2) Injection and defining our chart module

(3) In Piechart directive, we have used

  • @chartModule – using the chart module we have created to make a directive (watch the naming convention of the directive with the element, it matters!)
  • scope – Making it isolated scope. so can can use many ‘piechart’ individual components multiple times in a page.
  • restrict – Restricting only to ‘E’ means element.
  • templateUrl – We are keeping the template separate, though you can keep it here itself. Might look ugly if the template starts to grow
  • link – Whatever mentioning here will be added to the link cycle of AngularJs

Thats it. Add some data in our controller and which it make a beautiful piechart. Easy peasy!!!

(Experiment: copy and paste many <trackr-piechart> and provide different data they will work independently thats how a component should be!!! (Thank the isolated scope)

Now, the disadvantage of isolated scope is, you cannot directly tie the controller to our chart directive.

(4) coffee/directives/linechartDirective.coffee

For this, checkout our second linechart example

Setting ng-model

As you can use, we tie the input title to the directive template and added a $watch in our directive to know anything changes. Thats it!!!

Check it out —> https://github.com/sk8terboi87/Just-Anguled.git

References:

  1. http://chartjs.devexpress.com/Demo
  2. http://docs.angularjs.org/guide/directive
  3. http://stackoverflow.com/a/12570008/1172872

AngularJs Tutorial 6 — Pt 3 — Building a RESTful Application With PHP & MongoDB

I guess all the people are same, inside. All they want is fun and when commitments comes by, they say ‘Ta-Ta’!!!. God, when are they gonna learn “You have to fight for something u believe in and nothing can be obtained without sacrificing certain things’….But, I have no regrets, I gave everything, but, you will have.

“If you love somebody, let them go. If they return, they were always yours. If they don’t, they never were.”

Anyway, back to topic.

Our final tutorial in building a Restful API – AngularJs & PHP (with MongoDB) is Complete!!!

So, What are the things we gonna see…

  • [API] – CORS!!!
  • [UI] – Advanced concepts in AngularJs $resource & Custom reusable resourceFactory

CORS – “cross-origin resource sharing”

It means “Cross-Origin Resource Sharing (CORS) is a specification that enables truly open access across domain-boundaries.

To explain it simple, “Generally, One(web) cannot access or request or send resource to another domain, unless both present in same site(According to “Same Origin Policy“!). What CORS does is, it provides a way for cross domain access by specifying certain things in ‘header’ request, thereby allowing a site from another server can access!”

Example:

In our example, our PHP application runs in default ’80’ port. However, our AngularJS UI is executed via Yeamon-GruntJS, which is in 3501 port. So, when runned in browser, both act like in different server and our poor AngularJs cannot access our PHP/API part. 🙁

But, not to worry, Here comes CORS!!!

(https://github.com/sk8terboi87/simple-restful-tutorial-api/blob/blogs/app/index.php)

As you can see, all our response in our API are send to this ‘responseHandler’ method where we have specified our CORS.

Check here for detailed information about it

  1. http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
  2. http://enable-cors.org

Note: Normally, to enable CORS, you first have to send a ‘pre-request or pre-flight request’ from UI (before making the actual request). That is an “OPTIONS” (similarly to GET, POST…).

But, AngularJS is nice enough to send it automatically, so you don’t have to worry about it when using $resource.

Advanced concepts in AngularJs $resource

“AngularJS Promise variables – $then & $resolved”

Before jumping into this, some have no idea what this is.

In our blogs application, we are making a request to fetch all ‘blogs’ from API and display in a nice tabular form.

Our code is something like this,

The second line makes an ajax call to API, and the result is binded to ‘$scope.blogs’ as expected. But, JavaScript goes in ‘asynchronous’ way, what happens is, before getting the result, our third line will be executed, which causes ‘undefined’ thingy!!!

To solve this, we need to make certain things in our code, ‘synchronous’, i.e We need to bind our ‘$scope.blogs’ only when we get response from ‘blogResource’. This is where AngularJs ‘$then & $resolved” comes in.

For updated code looks like this,

‘$then’ from AngularJs will be executed only when response comes in. Thus making our two-binding works nicely.

(Note: Older version of AngularJs $resource will not send $then)

And our lastly, our Reusable ‘resource factory’

https://github.com/sk8terboi87/simple-restful-tutorial-ui/blob/blogs/coffee/Services/resourceFactory.coffee

This is a separate AngularJs factory which we used along with the controller showed before. We can use this simple usable resource methods for all of our new modules, say ‘Users’ or ‘Categories’ or ‘whatever’. Just inject in our controller, thats all. You can easily make a any kind of calls to our API.

(Note: PUT request is not directly available by AngularJs $resource, so, you noticed the difference in our code)

Thats it for our Simple Restful tutorial!!! Even though my explanation seems lil big, just browse the code to know how simple this is :). Just small bunch of files which creates an entire CRUD application.

What we have so far done is just a start, we will slowly continue to evolve… to next level. So, be sure to be with me 🙂

(And don’t forget to share :P)

AngularJs Tutorial 6 — Pt 2 — Building a RESTful Application With PHP & MongoDB

Finally, I’m trying to make peace with myself by throwing those harmful thoughts into the oblivion (without actually falling into it). Everyone does know the term ‘she’ – can either kill or let you live.

Anyways…. Well, I hope you fellas have the idea about our previous thing http://code-like-a-poem.blogspot.in/2013/08/angularjs-tutorial-6-building-restful.html.

In this tut, we are gonna see how the API stuffs does it work and return backs the response to our blog tut.

So, What are the things we gonna see…

  • What the heck is REST & Why we need to use?
  • Building our Application as RESTFul Service using PHP Slim Framework and storing in MongoDB.
  • Sending back the Response to our AngularJS

What the heck is REST & Why we need to use?

“Representational state transfer or REST is a style of software architecture which conventionally consist of clients and servers. Clients initiate requests to servers; servers process requests and return appropriate responses. Requests and responses are built around the transfer of representations of resources. – wikipedia

Previously, people used ‘web services’ using SOAP. There are lot of good things on using a RESTful service

  • Less overhead (no SOAP envelope to wrap every call in)
  • Less duplication (HTTP already represents operations like DELETE, PUT, GET, etc. that have to otherwise be represented in a SOAP envelope).
  • More standardized – HTTP operations are well understood and operate consistently. Some SOAP implementations can get finicky.
  • More human readable and testable (harder to test SOAP with just a browser).
  • Don’t need to use XML (well you kind of don’t have to for SOAP either but it hardly makes sense since you’re already doing parsing of the envelope).
  • Libraries have made SOAP (kind of) easy. But you are abstracting away a lot of redundancy underneath as I have noted. yes in theory SOAP can go over other transports so as to avoid riding atop a layer doing similar things, but in reality just about all SOAP work you’ll ever do is over HTTP

Building our Application as RESTFul Application

Now, you have the idea what is REST thing, the ingredients to make our application are,

  1. PHP Framework, Slim Framework will do (since your app is not that big)
  2. To store our data, we choose Mongo (Read here for more intel)

Traditionally, we use to install to our third party packages by,

  • Visiting there download page and click download
  • Unzipping, keeping in a folder
  • and using ‘require or include’ in all our applications.

It all seems great then, but it will complicated and hard to manage our dependency between those third party packages. (For ex, version dependency between them to name a few). So, we will be using something called ‘Composer‘, a Dependency Manager thing. (I shoot a separate blog regarding your curiosity on why on using DM!)

Using Composer

    1. In a empty folder, named ‘API’, put a file called ‘composer.json’
    2. Download the ‘composer.phar’ file from http://getcomposer.org
    3. Add the below lines in ‘composer.json’

  1. As you guys can see, we have included ‘slim framework’ and a ODM for Mongodb’
  2. Now, all you need to do is ‘php composer.phar install‘ from terminal, it will install everything in a folder called ‘vendor’
  3. The last lines “autoload” is um… lil complicated to explain now (unless you heard about ‘namespaces and psr-o thing‘, not to worry, i tell ya soon).

(Pss, don’t forget, you must have installed Mongo and PHP-Mongo in your sys)

Deciding The Resource URL

Now, since its an RESTful application, all you have todo is to define the URLs for accesing particular resource. We need a URL for

  • Saving a blog     –   http://our-crazy-application/app/index.php/blog/add – POST
  • Retrieving our blog – http://our-crazy-application/app/index.php/blogs – GET

Eventhough, you can name URL anyway you can and ease any HTTP Method, its really ugly if you don’t follow the rules(sometimes!)

Time To Code… [/app/index.php]

1. Include ‘autoload’, which includes our Slim Framework & Mongo thing!

2. Now, we create the stuff when a POST data arrives

Now try to submit a form or use POSTMAN Rest Client to checkout the response.

Simple few lines to save your data and retrieve it, our REST Application is almost ready! Browse the code to get more clear idea about this https://github.com/sk8terboi87/simple-restful-tutorial-api/blob/blogs.

That’s it for now. In our next finally tut, we will see how AngularJs and our REST application successfully communicates and becomes a healthy application!!!

Updated:

Proceed to the Final Part:  http://code-like-a-poem.blogspot.in/2013/08/angularjs-tutorial-6-pt-3-building.html

References:

  1. http://stackoverflow.com/questions/90451/why-would-one-use-rest-instead-of-web-services
  2. http://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm
  3. http://en.wikipedia.org/wiki/Representational_state_transfer
  4. http://www.ibm.com/developerworks/webservices/library/ws-RESTservices/
  5. http://en.wikipedia.org/wiki/Clean_URL

AngularJs Tutorial 6 — Pt 1 — Building a RESTful Application With PHP & MongoDB – Part 1

Its been seriously very long time and I been drifting away too far from coding stuffs! (I should blame that someone, but, seriously its a waste of time, I realized this late)

Anyways, Not too long ago we were talking about http://code-like-a-poem.blogspot.in/2013/06/how-to-decide-right-restful-api-server.html! Finally, I spent my entire Saturday on this stuff!!

So, What are the things we gonna see…

  • Updated structuring for AngularJS
  • Making an RESTFUL API Call
  • Use of AngularJs Resource

The example tutorial is simple ‘yet another blog’ stuff, now we are only going to see how to make the API call only and nothing else. (need to go slowly)

Structuring

Sometime ago, we have learned how to automate stuffs with the help of Yeoman and GruntJs. But, in growing application, we need to properly place certain files in certain places so we can jump to files easily(With the help of Sublime Of course!).

I really hate seeing a high experienced people still use window browser and a mice to open a file. shessh!

Also, since we all know in AngularJs, we can create an entire application in one js file (with all controllers, factories in file), it does become messy soon!

So, we first make a proper flow and then jump to real coding thing!!

(Note: Below structure is not a official one, i just created myself which seems… nicer and understandable)

bootstrap.js Its the actual ‘app.js’ we previously know it. I prefer this name since it ‘kick starts’ the application. Also, if u see this file, it only initialize the module and place of injecting other modules in it.

Configuration/

routes.js- All the routes goes here!

constants.js – This is the place for declaring ‘application constants’, which can be later injected into our application just like injecting a service or factory.

Collections

It has sub collection of particular module or collection(hence!) of we what we gonna to do.

Ex., blogs, users, categories… etc.,

Also, we are gonna keep blogs related ‘Model’, ‘Controller’, ‘Factories’ in it itself.

(Model – Its actually a AngularJs services and we using its a pass-through for API calls and initializing stuff. Since it seems more neat by making calls from model instead of directly making it from the controller)

Services

Here, we will use our custom wrote services and directives for the same, just like collections

Components

These are all third party scripts, including angularjs scripts, etc. (We install these via Bower)

Making an RESTFUL API Call

1. Creating the controller

[..coffee/Collections/BlogsCollection/create.coffee]

As you can see, we are creating a controller called ‘BlogsController‘ and injecting out module ‘restfulTut‘ in it.

  1. Inside the controller, we injecting $scope and BlogsModel (a service)
  2. Then, We are calling ‘BlogsModel.initialize()‘. we just invokes the services for setting up any scope initialization variables, like, pre declaring stuffs or clearing it.
    1. The use of this is to move all the predeclaring stuffs out of the controller, so later when we see or debug our code, we can clearly focus on the ‘actual’ controller logic to the service.
  3. Finally, we created ‘$scope.save = ->‘ which will be invoked when ‘save’ is triggered from UI page
    1. This in-turn, triggers the ‘BlogsModel.send(‘add’, $scope.blog)
    2. $scope.blog contains the actual values which we need to post into API
    3. Also, later, we can perform validation logic here!

That’s all there is in controller to make a successfully call. Now, lets see what our Model does.

[..coffee/Collections/BlogsCollection/model.coffee]

As you can see,

  1. apiRoutes has the actually API URL, we just need to declare all our API urls here.
  2. Currently, initializeFn(), just initiate the scope.blog. You will feel the real usage when your application grows
  3. sendFn() – with the help angular resource, we are making the actually POST call here!
    1. resourceURL+ apiRoutes[route] – http://192.168.0.2/rest-api/app/index.php/ (We are injecting resourceURL from contants.js then here, we are appending the rest of the url

That’s all fellas, if you have tried submitting the form, it will make a POST request to the server. Of course it wont work, we still gotta write the API section which we will see in the next tut!

 A little about Angular Resource,

  • In order to make an ajax request to server side, you can either use $http or $resource.
  • With $resource, there are lot of options to modify the request call. (also, with the help of javascript of defer and two-binding, you can easily update the view on receiving a callback). You’ll get it later on the upcoming tut.

Phew! You will get more clear idea when you browse the code https://github.com/sk8terboi87/simple-restful-tutorial-ui/tree/blogs

Upcoming Tut:

  • Using Slim framework
  • Use of Dependecy Manager – Composer
  • Using an ODM for connecting MongoDB (and saving it ofcourse!)

Jump to part two: http://code-like-a-poem.blogspot.com/2013/08/angularjs-tutorial-6-building-restful_11.html