REST Architecture

You need REST !

RESTful Web Services are REST architecture based web services. In REST Architecture everything is a resource. RESTful web services are light weight, highly scalable and maintainable and are very commonly used to create APIs for web based applications.

What is REST ?

REST stands for REpresentational State Transfer. REST is web standards based architecture and uses HTTP Protocol for data communication. It revolves around resource where every component is a resource and a resource is accessed by a common interface using HTTP standard methods.

In REST architecture, a REST Server simply provides access to resources and REST client accesses and presents the resources. Here each resource is identified by URIs/ global IDs. REST uses various representations to represent a resource like text, JSON and XML. Now a days JSON is the most popular format being used in web services. In our Coupley project we have used JSON.

JSON representation of a resource.

HTTP Methods

Following well known HTTP methods are commonly used in REST based architecture.

• GET — Provides a read only access to a resource.
• PUT — Used to create a new resource.
• DELETE — Used to remove a resource.
• POST — Used to update a existing resource or create a new resource.

Examples for HTTP methods

REFFERENCES:https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm

http://www.restapitutorial.com/lessons/restquicktips.html

JS Hint

                   JsHint

JSHint is a tool that can help you to write more reliable and consistent JavaScript code. The tool works by checking your code for a number of common errors. If you’ve ever spent half an hour trying to debug your code only to find that you missed a comma somewhere, you’ll understand how useful JSHint can be.

As well as catching errors in your code, JSHint can be used to enforce coding conventions and style guides. This is really useful if you work on a team as it helps to keep your codebase consistent and easily readable.

Installing JSHint

JSHint is available through the node package manager (npm). If you don’t have npm installed, go to the node.js website and download a copy of node for your OS. This will install both node.js and npm.

Once you have npm installed, open up terminal and type:

npm install -g jshint

The -g flag means that jshint will be installed globally on your system. This allows you to access the executable from any directory.

Using JSHint on The Command Line

Now that you have JSHint installed let’s test a file. Here test file is called “demo.js”

window.onload = function() {  console.log('This is a JSHint demo') }

Open up terminal and navigate to the folder that contains your JavaScript file. Then run the following command to test the file:

jshint demo.js

If you used the demo.js file you should see two errors as shown below.

JSHint Errors

If JSHint doesn’t find any problems with your code nothing will be output into the terminal window. Open up the demo.js file in your favorite text editor and add the two missing semi-colons. Running JSHint again should now return no errors.

Running JSHint from the command line can become a bit tedious. Ideally you want to get real-time feedback about any errors as you write your code. There are a whole bunch of plugins available that can bring the goodness of JSHint directly into your favorite text editor. I have used intellij JsHint plugin for our Coupley project.

Laravel

                                     Laravel

Laravel is a free, open-source PHP web application framework, 
created by Taylor Otwell and intended for the development of 
web applications following the model–view–controller (MVC) 
architectural pattern. And here are some of the reasons that I 
would suggest giving Laravel a try and why I will NEVER go 
back to another framework.

Composer

Laravel depends a lot of a number of external packages for its functionality. To do this, it is using Composer as a dependency manager. Why does this matter to you? For starters it makes it extreemly easy to get a new laravel project set up.

composer create-project laravel/laravel your-project-name --prefer-dist

and that will give you a full copy of laravel. Now you may think that this is just as complicated as remembering the url and running a `git clone` I would have to agree with you, however, these things are clearly mentioned in theLaravel Documentation .the next steps are the easy part. After you are done creating the project there are only a few more commands that you need to know

 composer install
 composer update

The first one, `composer install`, sets up the laravel project and downloads all dependencies it requires to run. Down in the Laravel core are external packages, all pulled in with composer during the install, that include:
Symfony
Whoops
Doctrine

It is even just as easy to bring in another package into your laravel application by modifying the composer.json file. The one package that I ALWAYS include in my application during development is Laravel Generator by Jeffrey Way.

The final thing Ill say about the perks of Laravel using composer is that all of Laravel’s core components are individually available on the Illuminate GitHub repository.

Artisan

The command line is a very powerful tool for any developer. With Artisan, Laravel expands into being able to use the command line to run many different tasks. Just by typing `php artisan` in your terminal window, you are opened up to multiple options

...
app
  app:name            Set the application namespace
 auth
  auth:clear-resets   Flush expired password reset tokens
 cache
  cache:clear         Flush the application cache
  cache:table         Create a migration for the cache database table
 config
  config:cache        Create a cache file for faster configuration loading
  config:clear        Remove the configuration cache 
... 
migrate
  migrate:install     Create the migration repository
  migrate:refresh     Reset and re-run all migrations
  migrate:reset       Rollback all database migrations
  migrate:rollback    Rollback the last database migration
  migrate:status      Show the status of each migration

These are just a few commands that are available. With artisan, you can even begin to make your own command line tools.

Database Migrations & Seeds

One pain point for me when I am developing an application is how to keep my database in sync between my development machines. With Laravel database migrations, it is extreemly easy. After a long day of work, I may have made a lot of changes to the database and, in my option, MySQL Workbench is not a great way to sync databases between my development machines. Enter Migrations. As long as I keep all of my database work in migrations and seeds (a file that populates a database), I can easily migrate the changes into any other development machine I have. The other nice part of these is that I am now able to keep my database under version control too.

RESTful Routing

This is by far one of the best things in laravel. If you do not know what REST is, check this tutorial out to get more information. Laravel makes it very nice in the way it uses verbs for its routes. Here is a sample of a route file:

Route::get('dogs',function() { return 'These are the dogs!'; });
 Route::get('dogs/{id}', array('uses' => 'DogsController@show'));
             // Will trigger the show method in DogsController
 Route::post('dogs', array('uses' => 'DogsController@create'));
             // Will trigger the create method in DogsController only if posted to
 ...

These are just a few of the reasons why we have switched to Laravel for Coupley Match Making App and why Laravel is the best PHP Framework.

Architecture in the Client ?

             Flux

The hardest part about software engineering is not writing code. It’s the ability to look at each problem with a fresh perspective, independent of solutions you have implemented in the past.

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React’s composable view components by utilizing a unidirectional data flow. It’s more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.

The core of the Flux pattern

Flux has four roles: actions, stores, the dispatcher and views. Their responsibilities can be defined as following:

• Actions are simple objects with a type property and some data. For example, an action could be {“type”: “IncreaseCount”, “local_data”: {“delta”: 1}}
• Stores contain the application’s state and logic. The best abstraction is to think of stores as managing a particular domain of the application. They aren’t the same as models in MVC since models usually try to model single objects, while stores in Flux can store anything
• The Dispatcher acts as a central hub. The dispatcher processes actions (for example, user interactions) and invokes callbacks that the stores have registered with it. The dispatcher isn’t the same as controllers in the MVC pattern — usually the dispatcher does not have much logic inside it and you can reuse the same dispatcher across projects
• Views are controller-views, also very common in most GUI MVC patterns. They listen for changes from the stores and re-render themselves appropriately. Views can also add new actions to the dispatcher, for example, on user interactions. The views are usually coded in React, but it’s not necessary to use React with Flux

The general flow of a Flux application can be defined as following:

The most important thing to note is that every change goes via an action through the dispatcher, illustrated like this:

So how is Flux different from MVC?

• The Flow of the app is essential to Flux and there are very strict rules that are enforced by the Dispatcher. In MVC the flow isn’t enforced and most MVC patterns implement it differently
• Unidirectional flow: Every change goes through the dispatcher. A store can’t change other stores directly. Same applies for views and other actions. Changes must go through the dispatcher via actions. In MVC it’s very common to have bidirectional flow
• Stores don’t need to model anything and can store any application related state. In MVC models try to model something, usually single objects

                                                                            Complex MVC Data Flow

Complex Flux Data Flow

Flux has just as many moving parts as MVC. That is why this diagram looks just as complex as the MVC diagram — but with one key difference: The arrows point in one direction, forming a consistent cycle through the system.

At Coupley we are using Flux and React for this project and the codebase so far looks very clean and is a pleasure to work with.

In general, I am more impressed with Flux than with React. The reason is that Flux is very simple to understand and there is almost no code for it—it’s just a way to better structure your app. React meanwhile has a huge codebase and a huge runtime complexity that I am not a huge fan of.

React.Js?

        What exactly is React.js?

In the simple and popular term, React is the V (View) in  MVC (Model/View/Controller).

In more descriptive terms, React is a JavaScript library (from Facebook) that is used to render views (for example, HTML pages) dynamically based on some state, which is often in the form of data. React then updates the generated views whenever the original state changes. React is a small but powerful library, with the power being more in the concepts than in the implementation.

---

Some of the concepts under which React operates:

Reusable, composable, and stateful components:
 In React, we build HTML views using smaller components. We can reuse a single component in multiple places, with different state and properties, and every component can contain other components. All components in React have a state that may change over time, and React will take care of updating the components’ views when their state changes.

The nature of reactive updates:
React’s name is the simple explanation for this concept. When the state of a component changes, those changes need to be reflected somewhere, for example, if we’re writing HTML components for a browser, we need to regenerate the HTML for the browser’s DOM (Document Object Model). With React, we do not have to worry about how to reflect the state changes, React will simply react to the changes and update views as needed.

The virtual representation of views in memory: 
For the browser’s case, we write HTML using JavaScript in React relying on the power of JavaScript to generate HTML that depends on some data, rather than enhancing HTML to make it work with that data. Enhancing HTML is what other JavaScript frameworks usually do (for example, Angular.js extends HTML with features like loops, conditionals, and others).

---

If we are receiving just the data from the server (with AJAX), we need something more than HTML to work with it, so it’s either using an enhanced HTML, or just using the power of JavaScript itself to generate the HTML. Each of these approaches has advantages and disadvantages, and React embraces the latter one, with the argument that the advantages are stronger than the disadvantages, and I, of course, agree.

Using JavaScript to render HTML allows React to have a virtual representation of HTML in memory (which is aptly named, the Virtual DOM), and React uses that to rerender the views virtually first. Every time a state changes, and we have a new HTML tree that needs to be written back to the browser’s DOM, instead of writing the whole tree, React will only write the difference between the new tree and the previous tree (since React has both trees in memory). This process is known as Tree Reconciliation, and I think, it is the best thing that happened to Web Development since AJAX!