Solved

Could you in generally explains the concepts involved in this change:  Codeigniter/ jQuery/ AJAX to Laravel/ Angular JS/REST?

Posted on 2016-11-11
  • Laravel
  • PHP
  • jQuery
  • AJAX
  • REST
  • +1
9
67 Views
Last Modified: 2016-11-17
Hi Experts

This is a conceptual question I need to be cleared, as possible. I'm afraid it's to much extense.

Next project probably will use Laravel/ Angular JS/REST.  Actually it's been used Codeigniter/ jQuery/ AJAX.

The claim is with Laravel/ AngularJS - REST will be used instead of AJAX - so with gain of productivity.

Could you explain in general the effective gains and concepts involved?

Thanks in advance!
0
Comment
Question by:Eduardo Fuerte
  • 3
  • 2
  • 2
  • +2
9 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 125 total points
Comment Utility
The angular :) piece is the use of AngularJS.
With AngularjS you create a single page application (SPA). It maybe just be one simple page with some parts (views) able to change.
It's all about MVC on client side.
With HTML5 the URL of the page change but not nby reloading the full page. On old (very old now...) browsers, we can use # instead

Once you created the main UI interface of your application, all interactions are based on :
- user actions which define a page state (most of time, one by route(URL))
- controllers
- retrieve data
- display/update views

they choose Laravel because the model (routes,controllers) is very similar to AngularJS and more, it's very easy to deliver a REST API :
https://laravel.com/docs/5.1/controllers#restful-resource-controllers
I mean AngularJS most of time need to get some data from the server to display it after a user action. So the hard work is to create easily an API function.
You need also something to send view (chunk of HTML), so if the user click on "get students", you return from server side something like :
<h1>STUDENTS</h1>
<ul>
   <li ng-repeat="student in students">{{student.firstname}}&nbsp;{{student.lastname}}</li>
</ul>

Open in new window

this will go on the page somewhere you set a view, the controller will add/set/update the $scope with the array students (from your REST API) and angular will parse and display the full list of student like a magician

usually we store huge view (chunk of HTML) server side and not small one we can let on client side so no need to do an ajax call to retrieve.

once you do all of theses, you created a fast application and quicky, you only load JSON and chunks of HTML to update your page.
it's very fast to create and to do with the good tools.
For PHP developers, Laravel is a good choice as it allow to "match" routers and controllers between client and server side and create easily a REST API

There's so many other about AngularJS which allow to increase development. For example, you can create custom HTML element (with directives)
For example
<body>
<passeport id="1"></passeport>
<passeport id="2"></passeport>
<passeport id="3"></passeport>
</body>

this will be resolved by AngularJS and it will get the HTML, and process the data to display three full perfect passeports on the page.
0
 
LVL 108

Assisted Solution

by:Ray Paseur
Ray Paseur earned 125 total points
Comment Utility
... Laravel/ AngularJS - REST will be used instead of AJAX ...
That's a bit of an oxymoron.  AngularJS communicates with the Laravel server via AJAX requests to a RESTful interface.  Even if it's not called AJAX, Angular still makes HTTP requests without reloading the entire page.  In the AngularJS/Laravel apps I have worked on, we skipped the Laravel templates and just returned JSON strings.  AngularJS took care of all the client-side formatting and display.

You will love Laravel!
0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 250 total points
Comment Utility
Angular is a client side framework that allows you to build applications using client side code JavaScript.

I am not sure what the benefit of using Laravel with it would be as mentioned above Angular uses RESTful calls to exchange data with the server.

Having said that Angular does make use of partial views that are loaded based on routing in the main application. These can be static pages but they can also be generated by the back end. When to use server rendering and when to use client rendering is a topic of heated debate at the moment. There is a leaning toward server side rendering in that the effort required to produce the data on the server and send it back is not much less than rendering out the page. With client side rendering you have approximately (on average) the same data load but still need to render the page.

There are no hard and fast rules on this though. Angular is a state based framework. What this means is you setup your interface to run off state variables rather than using JavaScript to respond to events and manipulate the DOM.

For example: normal HTML + jQuery. You want to show a div when a checkbox is checked / hide it when it is not checked
<input type="checkbox" class="showdiv"> Show Div
<div id="checked-div" style="display:none">Show me when checked</div>
<!-- assume jQuery included -->
<script>
$(function() {
  $('.showdiv').click(function() {
    $(this).is(':checked') ? $('#checked-div').show() : $('#checked-div').hide();
  });
});
</script>

Open in new window

(We'll ignore for now the fact that in this particular example there is a CSS only solution)
In Angular we would do something like this
<input type="checkbox" class="showdiv" ng-model="showDiv"> Show Div
<div id="checked-div" ng-show="showDiv">Show me when checked</div>

Open in new window

No JavaScript / jQuery - the state of the <div> is linked by Angular to the state of the checkbox through the showDiv model property.

So, Angular uses a combination of state and partial views to create the application which runs predominantly in the browser.

External calls are made to services that return JSON data - how those services manifest themselves is irrelevant from the Angular perspective.

If you are going to go the Angular route be prepared for a heavy learning curve. There are currently two versions out there 1.x and 2.0. The latter is still trying to gain traction. 1.5 is a bridging version that incorporates most of the 2.0 features while still supporting the 1.x conventions. At some point you will need to start familiarising yourself with typeScript - if you want to start developing in Angular then using plain JavaScript is going to become a chore - Typescript + MS Code help to make this process a lot easier.

Bottom line - Angular / Laravel - using these two together is dependent entirely on your requirements. We are currently busy with a large scale application based on Angular and Firebase - using a serverless approach. We source the application files from Firebase but will probably move these to Amazon. We are using Amazon API and Lambda functions to supplement our server side operation and we are using S3 to CDN our media. We are also looking at Amazon RDS to host data we don't want in Firebase but we have not got there yet. So far we have an application with multiple views giving a real time view of data to multiple parties without our own server.
0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
not sure what the benefit of using Laravel
The main benefits include RESTful routing, ORM, Exceptions, Symfony components for the data model, etc.  It's the fastest way I've ever found to get a server-side application running.  I think you will find it to be a great improvement over CodeIgniter.  If you want to see how easy it is to use Laravel, take a look at the Laravel documentation.  It really is that simple!  You may also want to consider Lumen, since it sounds like you just need an API to serve JSON responses.

For your own time-planning purposes, you will probably find that the Laravel part of things will get done very quickly.  But Angular has a learning curve that is not really a curve, so much as a wave.  You'll find yourself backtracking a lot as you look for examples of Angular best-practices.  Plan to devote the majority of your time to the client-side of the application.
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 27

Expert Comment

by:BigRat
Comment Utility
But Angular has a learning curve that is not really a curve, so much as a wave.

Actually with Angular 1 it's a very tall brick wall. If you come from a php background Laravel is a cinch. But if you have a database or application server which dishes out JSON (or XML) and you use something like Node/Express/Passport to authenticate your client then Angular 1 is not so bad and with Angular 2 you can concentrate on making components which can be glued together to make apps that run literally anywhere - or at least that's the sales pitch from Google.
1
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
The main benefits include RESTful routing, ORM, Exceptions, Symfony components for the data model, etc
Laravel is an application framework. Angular is an application framework. There is nothing to say you can't mix them but generally you would pick one or the other. REST does not require a heavy framework to implement and ORM is not always the best fit for the application - with a client side framework that does not leave much for Laravel to do.

The point of my comment was - if you are going SPA with Angular then that is where your interface logic is going to sit communicating with a RESTful backend that could be based on pretty much anything.

But Angular has a learning curve that is not really a curve, so much as a wave.
Angular does have a steep learning curve but once you have grasped the methodology behind it - it makes things a lot easier. Some might argue that React is a better option with a shorter learning curve - but personally my feeling is that Angular brings some things that require extra effort in React that make the extra learning worth it.
0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
0
 

Author Comment

by:Eduardo Fuerte
Comment Utility
Hi for All

Thank you for the replies.

I'm carefully studying.
0
 

Author Closing Comment

by:Eduardo Fuerte
Comment Utility
Thanks for help!
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now