I recently started to build a large social network, and and I thought my structure was good but it turned out I built this logic up badly.
I mixed my views with AngularJS (bad idea), skipped blade extension, but since I'm using a lot of block and sidebar includes it became a pain in the butt.
Currently I am just handling form validations with angular, but actually all of my site pages will require ajax, data pulling, etc.
I was searching around the net and I saw that angular views are stored in the public folder, but since all my pages will use angular is it a good idea to store all my views in the public, and just use Laravel as a back end?
I know this is a silly question but I'm confused a bit.
Any help hint appreciated.
There are two ways to combine these frameworks:
Only client-side rendering
This is the easier way and used by most web applications. In this case you would use Laravel as an API endpoint which will return JSON. Angular can query this data through its $http or $resource service and compile the templates, which you store in the public folder. Angular templates are just HTML with directives and some {{var}} statements. This way Angular does all the routing too.
Server-side and client-side rendering
This is the harder way where Laravel would do the routing and compile some templates on the server-side. You would use Angular only for some interactions on the site in a way you would use jQuery for example. The benefit of this approach is performance as users will get the full HTML the first time they visit your site. The disadvantage is that you may have to write some logic twice and can’t use some of Angular’s features.
To actually benefit from most of angular's features you should write a Single Page Application. This means you will communicate with the server through web APIs and you won't have any Laravel server-side templates.
So yes, you should write two decoupled applications. One client-side, using Angular and one server-side that exposes a web API, preferably RESTful.
This way you could switch from JS/HTML/CSS on the client side to Flash or Silverlight or something else and from Laravel/PHP/MySQL to .NET or NodeJS or Meteor/MongoDB.
Sergiu is correct, but in some cases Laravel still offers benefits that cannot be achieved with client-side templates. This is related to SEO and WCAG (accessibility).
AngularJS renders content by way of DOM manipulation so search engines cannot determine what content is shown after those manipulations are complete. This is also the case for screen readers. For this reason some content must be delivered by way of server-side view constructs. That is why Wordpress and Laravel have long and healthy futures.
On the back-end or in cases where SEO and WCAG are not important, data binding client side templates such as those used with AngularJS and Ember will be used increasingly as more developers learn how to use them.
In terms of whether to use AngularJS or Laravel for view constructs it would be best to learn how to use both and apply where most appropriate.
Related
I'm choosing frameworks for my next project and got stuck on a tricky problem: How to share templates between server-side PHP and client-side Javascript?
On server, my application is going to be written in PHP, using Symfony, Twig, and MtHAML. I have few templates as an early GUI prototype and I really like HAML as it cuts my templates in half.
On client, I would like to use Vue.js or React or something like that (and say bye to jQuery spaghetti monsters). I haven't decided what to use here yet. I like ES6 class syntax. The client side is going to be a set of relatively simple SPAs — old-school standalone pages with some JS to make them more interactive. Therefore, there will be no routing nor manipulating browser history on client, but still, I want to update already loaded page here and there.
So, I will need to use templates at two places: server-side in PHP and client-side in Javascript. The question is, how to share one template on both sides?
I'm thinking about compiling the HAML templates with Dust.js/php (Mustache is too dumb) into Javascript or some similar aproach. Another way could be to render Vue templates from HAML (Gitlab does that) and somehow pre/post-process them into PHP templates. But I'm sure there were many people dealing with this problem too. Unfortunately, most resources on the Web are outdated or very messy. Is there some ready-to-use sollution?
I was solving similar problem before and the best solution for me became to use Symfony to build a decent API and then some js framework for frontend. Juggling with templates between two environments was a real pain. Maybe you'll choose different approach, just a suggestion from me...
Coming from non-JS html interpretation it's kind of hard for me to grasp the concept of loading server-side data to REACT.JS "view".
Let's say I've have a site built on Laravel (using routes). Each route request (e.g. "/", "contact") has it's own view. That view is loaded with data coming from a controller and displayed in the view. If I change the route I'll be redirected to another view and I'll get different data from a different controller.
Now the question. Let's say I have a simple site. Top part is my login information and maybe some notifications icon the content of the page changes with going to different sections of the web.
So If I keep using Laravel routes. Every page will be "re-rendered" + I'll have to manually select which components belong to that part of the site. I'll have to retrieve the information that stays the same from the whole web (e.g. login details + notification) again - this kills the react.js principle doesn't it?
Also, what is the best way to propagate server-site data to React.JS? Should I just "echo" out JSON object to the view and then "use" it in REACT?
Could I be pointed to some meaningful approach of how to use React.js along with PHP.
You mostly answered your question :-) With Laravel, the UI is rendered on the server. React is mostly interesting for client-side UI. That said, not everything can be done on the server, and some user interactions can only be managed by the browser. That is why jQuery became so successful in addition to PHP.
If your app deliver some complex client-side code, it could be usefull to build this code as React components, even if you keep your current server-side router: to make the code easier to maintain, but also to write - once familiar with React way of implementing things.
If you would like to transform your app to fully use React and a client-side router, that enable browsing the app without re-rendering at each page, this is called SPA (single page apps). The react ecosystem is pretty cool for building SPA. Usually, though, the server is just a static server delivering JS files, and the app connects to a REST API of some kind.
In some cases, routes can also be served from the server, for specific purposes:
Faster display of first page
Social Graph tags can be added to the specific page (to enable usable Facebook
or Twitter shares, for example)
Should you need to enable this server-side routing, which makes your app universal or isomorphic, you must use components that can be understood by both the browser and the server, this is why React app are usually served by Node.js, so everything is in Javascript.
Example tutorial about building a universal app with React https://medium.com/front-end-developers/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4#.h8p6lc23w (your intuition is right in this case, a JSON object with app current data is sent at first render)
Also check the awesome react page (https://github.com/enaqx/awesome-react) if you're interested in the React ecosystem.
Recap:
PHP + React: Easily add complex components to some pages, better to keep it that way if you just have a lot of static content, SEO, and just a few complex components on a single page that React can help you with.
React + API: Common SPA app, better for rich and complex UI, pretty easy to develop if starting from scratch and familiar with javascript, but complexity arise with performance management and SEO on large apps
Universal React: the best of both worlds, setup kinda complex (cf tutorial)
I'm relatively noob to the world of web developpement, and after learning the basics of HTML5/CSS3/JavaScript/jQuery I've started to learn AngularJS.
The problem is that as I am learning AngularJS, I don't understand what will be the point in learning a server-side language like PHP, it seems like AngularJS can do all the job (UI, views, routing, ...)
I think that the only reason would be to store data (but even that, I can use JSON files, no?)
and if it is, how much PHP do I need to learn? (or which parts of the language)
Thank you and sorry for my english.
Angular is a tool for a specific sort of job. It is not the tool for every job, and neither is PHP.
If you are writing an application that can live client-side, then you can certainly generate all of the dynamic components you need with Angular. There are many web applications out there that are entirely client-side. There are even more that function client-side and talk to a simple API server for their back-end.
If you are creating a web page that is not interactive, then there is little reason for something like Angular. There are benefits to having the DOM filled with content ahead of time. SEO is usually the biggest reason, but you might also consider clients that have disabled JavaScript (if you care about those).
Are you building something that is interactive? Consider a heavier client-side framework like Angular. Are you building a web page that is content-driven? Consider rendering your pages server-side. In the end, you will likely end up with a mix of both anyway.
A large consideration is security. Everything client side is exposed to the world. If the back end is just data storage without validation or protection except as written inside the client, a malicious user could push whatever data they wanted into your site. In addition if you are exposing code that is the core of a business inside the client, every user can see that as well.
So I have decided to take a project I have been working on, and project management system, and convert it from a standard multi-paged application to a single-page application. In the process I have looked at a number of javascript MV*ish frameworks (ember, knockout, backbone, etc...) and have decided to go with backbone.js as it seems the most flexible solution and that I already use underscore.js for both its utilities and template system.
The one biggest concern I have with doing this is the potential code duplication I am going to have for model and business/domain logic in both my PHP models and in my backbone models.
This is just a technical cost I have pay when going with an architecture like this or are there some things I can do to lessen this concern?
You may want to take a look at a previous question I answered involving Node.js:
Reusing backbone views/routes on the server when using Backbone.js pushstate for seo/bookmarking
What I'm currently doing right now is using Davis.js + Mustache + Java Spring MVC backened (based on my original question: Single page Web App in Java framework or examples?).
If the browser does not support Pushstate then I have the server do the entire rendering of the page using a Java version of Mustache (ie standard Web 1.0). If the browser does support Pushstate then the browser will make an AJAX request for a JSON version of the model. The model is then rendered client side use icanhz (ie javascript mustache).
This works fairly well if a large part of your logic is getting a model an then rendering it based on specific URL. That is your business logic is "based on some URL I'm going to render this". This is how most of the sites on the web work (including this one which is still rather web 1.0). Obviously this would not work for say something like real time chat or HTML5 game.
A python version of this design is mentioned here: http://duganchen.ca/single-page-web-app-architecture-done-right/
I'm sure someone has done a PHP version.
If you are using different languages in server and in client I think there is not possibility to avoid this partial logic duplication you are concern on.
If you definitely want to use same code in server and client you have to move all of it to the only common language: JavaScript.
There are multiple JS frameworks those integrate very transparently the development between server and client: derby, meteor, ...
I am new to the world of web programming, have come up with some rules of thumb for the design of my first project. Do these sound like reasonable rules to go by, or should my code for various aspects of the project be more or less mixed together, or organized differently for some reason? Of the two books I've read relating to web programming (one on HTML & CSS, the other on PHP & MySQL), neither has clearly addressed this. Any opinions from experienced web developers will be greatly appreciated!
Rules of thumb:
For relatively static content, use PHP to generate pages (i.e., fill in a news story) so HTML and PHP are mixed just a little here.
For dynamic features, implement as an XML/plain text API so the PHP back end is not mixed in with any presentation logic (i.e., a server side API/service is implemented with no knowledge of presentation in it, then an AJAX client is developed and presented to the user)
Determine how to break up AJAX client into different pages based on desire for user to be able to bookmark a page and navigate with browser.
See the MVC pattern for web applications. You don't need to resort to XML/plain text to separate presentation from logic. Using a PHP framework such as Symfony or Cake may help.
It may be best to develop a web application using HTML first and then sprinkle some AJAX on top so your application has a fallback if AJAX fails - e.g. mobile devices.
Hope that helps
You might want to investigate the MVC Pattern which is a great way to organize applications and separate the controller logic from the presentation logic.
Some popular PHP MVC frameworks include:
CakePHP
CodeIgniter
A more "difficult" framework (but the one I like the best), is Kohana
I would recommend starting with one of the first two.
Small, static sites: HTML only, or PHP with included header and footer, and common functions.
More complex: MVC framework that separates Views (templates) , Models (Database calls and data manipulation), and Controllers (Page routing)
AJAX: MVC framework on the backend, special page routes for getting page data (check for the right headers), history.pushState w/ hashbang backup for partial page loads. Depending on the complexity, perhaps having client-side templating.