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
9
175 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +2
9 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 125 total points
ID: 41883857
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 110

Assisted Solution

by:Ray Paseur
Ray Paseur earned 125 total points
ID: 41883873
... 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 57

Accepted Solution

by:
Julian Hansen earned 250 total points
ID: 41884594
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
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 
LVL 110

Expert Comment

by:Ray Paseur
ID: 41884634
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
 
LVL 27

Expert Comment

by:BigRat
ID: 41885367
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 57

Expert Comment

by:Julian Hansen
ID: 41885372
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 110

Expert Comment

by:Ray Paseur
ID: 41885526
0
 

Author Comment

by:Eduardo Fuerte
ID: 41885925
Hi for All

Thank you for the replies.

I'm carefully studying.
0
 

Author Closing Comment

by:Eduardo Fuerte
ID: 41891220
Thanks for help!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

752 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